Create an Alice in Wonderland Themed iPhone Wallpaper in Pixelmator

Final product image
What You'll Be Creating

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.
The following assets were used during the production of this tutorial:
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.

Create a new file from the iPhone Desktop preset

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.

Import a background image base

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.

Import the moss flooring and adjust its perspective

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.

Adjust the Hue and Curves

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.

Mask off parts of the image

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.

Select the tea cup with the Paint Selection Tool

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.

Refine the selection of the tea cup

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.

Paste the tea cup into your main document and resize and position it

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.

Adjust the Hue of the tea cup

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.

Blur the tea cup to match the background

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.

Paint a shadow for the tea cup

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.

Select and refine the selection for the ball of moss

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.

Mask off the ball of moss with grass-like strokes

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.

Adjust the ball of moss and refine the mask so it sits inside the tea cup

Create a new layer above your ball of moss and change the Blending to Linear BurnRight 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.

Paint shadows on the ball of moss on a clipping mask

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.

Select and refine the selection for the pocket watch

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.

Paste the pocket watch into your main document and resize and reposition

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.

Adjust the curves for the pocket watch to match its surroundings

Apply a Miniaturize blur effect to this image also, making sure to match the Depth of Field of the moss background layer.

Blur the pocket watch to match the background

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.

Paint a shadow for the pocket watch

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.

Duplicate and flip the pocket watch

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.

Warp the pocket watch to the curve of the tea cup

Lower the opacity and Mask off any areas that flow over the edge of the cup itself.

Lower the warped pocket watchs opacity and mask off any overhang

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.

Cut out and paste in your mushroom and mask off grass like strands

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.

Paint shadows to indicate a stronger light source

As before, open the Caterpillar image as a new document and select and cut out the caterpillar, pasting it into your main document.

Cut out and paste the catepillar into you rmain 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º.

Adjust the hue of the caterpillar so it is blue

Use the Transform tool to resize and flip the caterpillar, and then place it up against our little mushroom, on top of our cup.

Flip and resize the caterpillar and adjust its placement

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.

Adjust the curves of the caterpillar

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.

Mask off grass-like strokes to blend in the caterpillar

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.

Paint darker shadows and brighter highlights to indicate a stronger light source

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.

Paint cast shadows on the mushroom and ball of moss for mushroom and caterpillar

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.

Place in smoke layer above the background

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.

Create a new black layer set to colour dodge

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 sunbeams effect

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%.

Create a bokeh effect

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.

Duplicate the bokeh effect with slightly different results

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.

Add orion light leaks

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.

Add more smoke as if the caterpillar were smoking

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.

Prepare a glow effect

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.

Finish off glow effect

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.

Place glow effect

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.

Group layers and make a copy

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.

Flatten group copy

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.

Apply a Vega light leak

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.

Apply a vintage colour effect

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.

Create a vignette

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.

Mask and adjust blend mode for vignette

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%.

Paint stars

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.

Duplicate and blur stars

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.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


Copyright @ 2013 KrobKnea.

Designed by Next Learn | My partner