With this tutorial I'd like to show you how to create an Alice in Wonderland photo manipulation, perfect for adorning your mobile background. Read on to learn about Pixelmator's easy-to-use Effects Browser and other nifty features only available on the Mac.
Tutorial Assets
The following assets were used during the production of this tutorial:
1. Dressing the Scene
Step 1
With Pixelmator open, select File > New (Command-N) to create a new document. From the dialog window that appears, choose 640 x 920, iPhone Desktop from thePreset menu and click OK.
Step 2
Import the Mushroom 1 image by dragging and dropping it directly onto the artboard. Now visit Edit >Transform (Command-F) and resize the image so it is exactly the width of our artboard, and reposition the image so the bottom of the image sits flush to the bottom of the artboard.
Step 3
Import the Moss 1 image and Transform that as well, scaling and repositioning the image so the sharper focused area is near the bottom of the artboard. With theTransform tool still enabled, Right Click on the image and choose Perspective…from the flyout menu. Drag a corner handle to exaggerate the perspective of the moss a bit.
From the Effects Browser, select Color Adjustments from the selection menu, and double click on the Hue card. Now grab any of the coloured dots around the colour wheel and drag it around until it reads 348º. Drop the Lightness to -12%. Double click the Curves tile and in the RGB view create a subtle "S" shape. Now switch to the Green view and make a shallow "U" shape in the curve.
In the Layers panel, Right Click on the Moss 1 layer and select Add Mask from the flyout menu. Now switch to the Brush tool (B) and use a soft round brush to paint black onto the Mask to remove the top grey section of the Moss image. Don't worry if the Mushroom from the layer below peeks through, because we'll be covering this with another image shortly.
2. Setting the Table
Step 1
Open the Cup image as its own Pixelmator file by dragging the image to the app icon in your dock. Switch to the Paint Selection Tool, and then click and drag across the cup's surface to create a selection of that object. You can adjust the diameter of the Paint Selection Tool brush using the slider located at the top of the artboard.
With the Paint Selection Tool still enabled, Right Click on the selection and chooseRefine Selection from the flyout menu. Then use the dialog window to adjust the selection to your liking. I recommend shrinking the selection so it sits just inside the outline of the cup and feathering the selection slightly.
With your selection perfected, Copy (Command-C) the cup, and then switch back to your main document and Paste (Command-V) in the image. Use the Transformtool to resize the cup and place it near the bottom half of your scene and to the right.
While the cup is still selected, double click the Hue card and drag one of the coloured dots until it reads 105º. You should notice the coffee has turned green and the shadows on the cup also have a green hue to them. This will help it fit into its new environment better.
In the Effects Browser once again, select the Blur option from the selection menu, and then double click the Miniaturize card. Using the dialog window that appears, drag the round node that is attached until it is centred on the cup. Drag the black handle around that node to adjust the size of the mask.
In the dialog window, adjust the Blur strength percentage and Transitionpercentage to blur the cup to match the shallow depth of field of your moss background layer.
Create a new layer by selecting the "+" button at the bottom of the Layers panel, and then drag it so it is below the Cup. Set the Blending selection to Linear Burnand drop the Opacity slider to around 72%.
With a soft round brush and a very dark green (nearly black), paint a shadow around the rim of the Cup's saucer, making sure to elongate the shadow near the corners of the square plate to indicate that it is raised from the ground more than the sides are.
Step 2
Open the Moss 2 image, as we did with the cup, to create a new document. Using the Paint Selection Tool, select the ball of moss and refine the selection as best you can.
Right Click on the layer in the Layers panel and add a mask. Zoom into your image, and while the mask is selected, choose a small brush and paint back small, grass-like strands to refine the edge even further.
This doesn't need to be completely perfect because we will be shrinking it down soon and some detail will be lost. I've coloured the background in my screenshot so you can better see what I've done.
Drag the masked moss layer from that window onto your main document window to add it to your main document. Ensure it is located above the cup layer in yourLayers panel. Enable the Transform tool and resize the ball of moss so it fits snugly inside the cup, and then mask off the bottom of the moss that is covering the rim of the cup.
Create a new layer above your ball of moss and change the Blending to Linear Burn. Right Click the layer and select Create Clipping Mask from the flyout menu. With a medium green colour and a soft round brush, paint a shadow around the rim of the cup, over the ball of moss. Adjust the opacity as needed.
Step 3
Open the Pocket Watch image, as we did with the others, to create a new document. Using the Paint Selection Tool, select the watch and chain and refine the selection as best you can. For this you may find it easier to select the lighter background colour and then invert your selection.
With the watch and chain selected, Copy and Paste the selection into your main document above everything else in the Layers panel. Then adjust the size and position using the Transform tool.
Adjust the Curves for this image, creating a very subtle upward bow shape for theGreen view to blend the watch in with the greener environment.
Apply a Miniaturize blur effect to this image also, making sure to match the Depth of Field of the moss background layer.
Create a new layer and place it below the Watch image. With a soft round brush, paint a shadow of varying opacity below the watch and chain. Make sure to paint elongated shadows where the chain would appear to fall off the saucer and deeper shadows below the watch itself, as if it were leaning on the saucer.
Right Click on the Watch layer and select Duplicate from the flyout menu. Switch to the Transform tool. Right Click on the artboard and select Flip Vertical from the flyout menu. Then position and slightly rotate and resize the watch so the chain lines up on the cup as though it were a reflection.
Switch to the Warp Tool in the Tools panel, and push and nudge the chain and clock until it warps with the direction of the cup surface.
Lower the opacity and Mask off any areas that flow over the edge of the cup itself.
3. Welcome Your Guest
Step 1
Open the Mushroom 2 image as a new document. Cut it out as we've done before and paste it into your main document. Using the Transform tool, resize the mushroom and place it atop the ball of moss in our cup, pushing it off centre to the left. Add a mask to the mushroom and create grass-like strands at the stem of the mushroom so it appears as though it is sprouting from the ball of moss.
Create a new layer above the mushroom and change its Blending to Linear Burn, and then Right Click and Create Clipping Mask.
With a dark purple colour of varying opacity, and a soft round brush, paint shadows on the right side of the mushroom cap and stem to indicate a stronger light source than the image originally had.
Step 2
As before, open the Caterpillar image as a new document and select and cut out the caterpillar, pasting it into your main document.
Before we resize it, let's adjust his colour. From the Effects Browser, under theColour Adjustments view, double click the Hue card. When the dialog window appears, choose a coloured dot around the colour wheel and drag it around until it reads 110º.
Use the Transform tool to resize and flip the caterpillar, and then place it up against our little mushroom, on top of our cup.
Double click the Curves card from the Effects Browser and make an "S" shape in the RGB view, and then a slight "U" shape in the Red view.
As with the mushroom, add a Mask to the caterpillar and create grass-like strands at the bottom so it appears as though it is sitting on the ball of moss.
Create a new layer above the caterpillar, change its Blending to Linear Burn, and then Right Click and Create Clipping Mask. With a dark purple colour of varying opacity, and a soft round brush, paint shadows on the right side of the caterpillar to match the rest of your shadows.
Create another layer above that set to Overlay and add a clipping mask. With a soft round brush, paint white onto the left side to exaggerate the lighting a bit more.
Step 3
Let's adjust the shadows. Select the shadows layer that we painted for the mushroom, and add in cast shadows below the parts where the caterpillar interacts with the mushroom. Pay attention to the feet with elongated shadows following the curve of the mushroom. Select the shadows layer that we painted for the moss ball and paint in cast shadows for both the mushroom and the caterpillar, making sure to curve the shadow with the shape of the ball of moss.
4. Defining the Scene
Step 1
Import the Smoke 1 image into your main document and drag the layer so it sits between the bottom-most mushroom image and the moss floor layers. Use theTransform tool to adjust the size. Then change the Blending mode to Screen and adjust the Opacity to about 45%.
I found some of the smoke was a little too harsh in some areas, so I also added aMask to that layer and painted away some of the smoke in certain areas.
Create a new layer directly above this smoke layer (still below the moss floor) and fill it with black using the Paint Bucket Tool (N) in the Tools panel. Then adjust theBlending mode to Color Dodge. The black will disappear completely.
From the Effects Browser, choose the Generator view, and then double click theSunbeams card. Place the round node in the upper left of the image, off the artboard somewhat. Change the Color to
#FFB12A and adjust the sliders until you are comfortable with the beams. Drop the Opacity of the layer to around 12%.
Create another new layer above the sunbeams we just made and fill that with black also. In the Effects Browser, choose the Other view and double click the Defocuscard.
In the dialog window that appears, switch the Primary Color to white and ensure theSecondary Colour is black. Now adjust the other sliders until you are happy with the amount and placement of the faux bokeh. Change the Blending mode to Linear Dodge and adjust the Opacity to about 43%.
Repeat the aforementioned process to create another layer of faux bokeh above the last, but with a slightly larger size and in a different placement to add more dimension to the background.
Create another layer above the last faux bokeh layer and fill it with black as well, and adjust the Blending mode to Screen. In the Effects Browser, under the Stylizeview, double click the Light Leak card. When the dialog window appears, select theOrion card and use the round node to adjust the size and position of the scattered light effect to your liking.
Step 2
Import the Smoke 2 image into your main document and place it directly below the caterpillar layer. Set the Blending mode to Screen and use the Transform tool to resize, rotate, and reposition the image so it appears as if the caterpillar is holding the end of the incense stick.
Step 3
Now let's create a glow effect. Create a new layer above all other layers and enable the Brush Tool (B). With a large, soft, round brush and a dark orange colour, click a few times in the same space on the artboard to get started. I'll show you this technique on a plain white background so you can see what is happening.
Reduce the size of the brush and change the colour to a yellow-orange colour, and then click a few more times in the same location. Copy this step one last time with a smaller brush and a pale yellow colour.
Change the Blending mode to Screen and reduce the Opacity to about 80%. Using the Transform tool, shrink and squash the glow to form an oval shape. Rotate the glow and place it over the top right of the mushroom cap where the light would be hitting it the most. Duplicate this glow and use the Transform tool to shrink and rotate it some more and place it over the head of the caterpillar.
5. Make Some Magic
Step 1
We're pretty much done with the photo-manipulation portion of the tutorial but we still have to make it shine. Click on the very top layer in your Layers panel to select it, and then scroll to the bottom and Shift-Click on the bottom layer to select all layers together. Right Click on the Layers panel and select the Group option from the flyout menu. Duplicate this group.
Right Click on the duplicate group and select the Merge Group option from the flyout menu. We'll be applying some effects to this layer but we don't want to destroy all our hard work in case you want to make adjustments later on.
Step 2
With the newly flattened layer selected, switch to the Stylize view on the Effects Browser and double click the Light Leak card. Select the Vega card and, using the round node, position the effect on the left side of the image where you like.
In the Effects Browser again, double click the Vintage card. When the dialog window appears, select the Iris card and tinker with the settings until you feel comfortable. I chose to stick with the default settings.
Step 3
Create a new layer above everything else and fill it with a dark blue colour. Enable the Elliptical Marquee Tool (Y) and draw an oval the same size as your artboard.Right Click on the selection and choose Refine Selection from the flyout menu, and when the dialog window appears, adjust the sliders to create a soft transition for the selection. Right Click on the selection again and choose Invert Selection from the flyout menu.
With the selection still enabled, add a mask to the dark blue layer. You should be left with just dark blue corners with the centre of the image below completely visible. Then adjust the Blending mode to Multiply.
Step 4
Create a new layer above everything else and open the Brushes panel by double clicking the Brush Tool in the Tools panel. Enable the star scatter brush from the default list of brushes. This isn't it's official name, but it's the best description I can provide. Please look over the screenshot below to check which one I am referring to.
Now just paint across the artboard to add some sparkle. Then adjust the Blendingmode to Overlay and reduce the Opacity to about 25%.
Finally, Duplicate the layer with the stars on it and bump the Opacity back up to100%. In the Effects Browser, under the Blur view, double click the Gaussiancard. When the dialog window appears, adjust the Radius slider to blur the stars to your liking.
Down the Rabbit Hole
I hope you enjoyed this trip to Wonderland with me. Feel free to export your new background image in the file format of your choice to beautify your mobile device.
