[gb] Studio

Ok, so, I’m not a big winter fan. And while I love my family and friends dearly, the craziness of the holidays often gets to me.

Solution: a bit of holiday cheer on my iPhone screen.

In this week’s design entry, I’ll give you a brief tutorial on creating a fun little iPhone Wallpaper that a friend aptly named: Paper Tree.

Paper Tree (left). NCAR Road (right).

Adding the Wallpaper to your iPhone

The wallpaper on the left is the focus of the tutorial. The one on the right, called NCAR Road is a bonus, based on this photo I took in what is nearly my back yard.

To put either on your phone, follow these simple instructions:

1. Visit this page in your iPhone. If you need to type in the URL, I’ve created a handy short-cut for you: http://bit.ly/papertree
2. Decide which one you want to use.
3. Using your finger to press and hold your chosen image.
4. Select Save Image from the pop-up menu.
5. Go back to your Home Screen and select Settings.
6. Select Wallpaper and choose, Camera Roll.
7. Scroll down and click on the image.
   1. Thank Apple for the “feature” that compresses the hell out of the image and reduces the bit depth. Sigh.
8. Forward this page to a friend to enjoy.

The Tutorial: Creating Paper Tree

Bonus Points: Unrelated to the holidays, but related in name, listen to Paper Bird while making your own version of Paper Tree.

Start with Photoshop

• In Photoshop, create a 320px wide by 480px tall blank canvas at 72px/in. This is the pixel size of the iPhone screen.
• In the new file, create a nice radial gradient effect. I used blues – with a lighter blue on the inside and a darker blue on the outside.

• Temporarily flatten the psd file, copy it, and now let’s move over to Illustrator.

In Illustrator

• Now, in Illustrator, create another file, 320px wide by 480px tall.
  • (Technically, you can do this whole tutorial in Photoshop, but when it comes to vector drawing, I’m much speedier in Illustrator.)

• Go ahead and paste the background in. This is for reference, you could also fill the new Illustrator canvas with a color.

• I roughed out the pine tree by drawing some imperfect squares at different angles. Create whatever shapes you want.

• Now, on a different layer, take the pen tool and different shades of a similar color (I chose grey), and draw some thin sliver shapes.
• Copy, paste, and rotate the shapes, repeating them to roughly take the shape of the triangles you drew.

• Continue the same pattern for each tier of the tree, and the trunk. Put each tier on a new layer to make your life easier later.

• Now we’re going to create the far side of the tree. Take the layers for each tier, and copy all of them.
• In the new copy of each tier, select all of the shapes and reverse them. Now put that layer behind the original one. The reversal doesn’t have to be perfect, just close.

Put on the Shadin‘

• This is probably the most time-consuming part, but the detail is worth it.
• Shade each shape using a gradient. To make it go a little quicker, create 3 or 4 gradient swatches total.

Back in Photoshop

• This part is straightforward, but it can be a bit tricky.
• I started by pasting the whole tree into Photoshop to give me a reference.

• Now, paste each tier on its own layer into Photoshop, lining them up with the reference image, as best as you can.

• To each layer, you’ll now apply a shadow effect. I chose a darker blue color for the shadow, to complement the overall color theme.

• To add even more depth, I created new, blank layers between the front and back section of each tier of the tree and, using the air brush tool, added some more blue. This helps separate the front of the tree, from the back.

The Homestretch: Snow & Background

• The snow is created by layering 2 or 3 vector shapes of slightly different colors. I used a light blue on the bottom, a darker blue (with the “Multiply” setting on the layer for the middle, and an off-white for the top.
  • The layering effect gives a bit of 3D illusion to the snow.

• With the base of the tree finished, add some snow to some of the branches.

• Hooray! The tree is finished.
• Let’s add the suggestion of some more trees (or mountains) in the background.
• Copy one of the tree tiers.
• Use the transform tool to resize it and position it on the left side of the canvas.
• Repeat the process several more times.
• Use the “Overlay” filter on the layers and reduce their opacity.
  • Also, don’t be afraid to use a masking layer to blend everything together nicely.

Last Step: Depth in the foreground

• I used a few different colors of blue and the “Overlay” filter on three separate layers positioned just below the “horizon” of the image.

You’re done!

Pat yourself on the back. Go enjoy some eggnog. Or, if you’re like me, some chili with friends.

Thanks for playing!

Permalink