First off, props to Dan Wiersema (my friend and Creative Director at Guifx) for being the brains behind this tutorial. Concept and wireframe were both developed by him. He also helped me iron out the creases in terms of rating my work from beginning to end.
In this tutorial, we'll create a main menu interface for a fictional iPhone game. We'll go through setting up Photoshop to accurately display target screen size, setting up a wire frame for the project, creating a background, making a logo, creating rock texture for the sidebar, and wood texture for the saved games-box and buttons. We'll also add creating greenery for detail and good measure. This is gonna be a long one, so patience is a virtue. Also, coffee helps!
Final Image Preview
Take a look at the image we'll be creating.
Step 1
Head over to pxcalc.com and follow the instructions. Doing this will allow you to view the design in it's final size - The real life size of the actual iPhone screen - on your own computer.
Create a new document with a 480px width by 320px height, with a 164.83 pixels/inch resolution. Set color mode to RGB 8bit.
Step 2
I recommend creating a wireframe for your project like the one in the image below. The best way to do this is right clicking with your Zoom Tool selected and chose print size. If you followed Step 1, you will now be looking at your document at the exact size the end user will on his/her iPhone. This helps you determine how big the buttons should be in order to work sufficiently on a touch screen device. Note: Try physically clicking on the screen, and remember to take thick fingers into account.
Use the Rectangle Tool and drag out rough placement guides for the various elements. Keep the color of the shapes white and add a black 1px inner stroke. It's also a good idea to mock the concept up using pencil and paper. Even if you're not a good freehand artist (I'm not, but I still do it), napkin sketches help you keep your eyes on the prize!
Step 3
Create a new layer and name it "Background." Set your foreground color to #5e1114 and your background to #140306. Select the Gradient Tool, and with the settings pictured below drag from top to bottom like the arrow indicates.
Step 4
To the "Background" layer, apply the following layer styles.
Step 5
Reset your foreground and background colors to black and while by clicking the D key on your keyboard. Create a new layer and name it "bg_clouds." Now go to Filter > Render > Clouds. Set this layer's blending mode to Overlay. Dab at it in random areas with the eraser tool, set to a 30-50% Opacity with a soft brush to create interesting highlights. Try to match my result below.
Step 6
Download this image from sxc.hu (Thank you Javier González). Call the layer "castle," resize it and place it roughly in the top-center of the stage. Set the layer's blending mode to Multiply and the Opacity to 60%. Use the Eraser Tool to erase any harsh edges. Below is my result after this step.
Step 7
Okay, so far so good. Let's start creating our logo. Grab your Pen Tool and create the outline of a dragon's head. To do this you can either trace a random dragon image, or make up your own. This one will however end up with some heavy duty layer style effects, so try to keep the shape fairly simple.
There's a wide variety of free shapes and dingbats you could use instead, if you don't wanna spend time tracing or coming up with a dragons head. Where there's a will, there's a way.
Duplicate your shape 2 times (layer > duplicate layer...), so that you have 3 dragonhead layers. Name the bottom one "dragon_1," the middle one "dragon_2," and the top one "dragon_3."
Step 8
Time to make our dragon shine. This technique is heavily based on Elliot AKA TrueLovePrevails' tutorial on how to replicate the warcraft logo style, so a huge thanx goes out to him for developing this fantastic technique, and for letting me use it. Click here to visit the original tutorial.)
Apply the following layer styles to each layer respectively, beginning with the "dragon_1" layer
Now apply the following layers styles to "dragon_2" and set this layer's fill Opacity to 0%.
And again to "dragon_3" and set this layer's fill Opacity to 0%.
Step 9
Right, dragon looks good - check! Next up is the text.
Head over to Fontcraft.com and download or purchase Scurlock. Scurlock is free as a demo font, so make sure to read the terms of use, and do purchase a license if you wish to use this font for commercial purposes.
Select your Type Tool and set the size to 60pt. Type out the text "Dragon." Right-click the layer and select Convert To Shape. The reason for this is that we want to remove the underline of the "o." To do this we use the Direct Selection Tool. Activate the vector mask by clicking the thumbnail and select all the nodes of the underline, then hit delete on the keyboard. If you can't get them all in one go, hold down Shift to add to the selection.
Next, grab the Path Selection Tool and click the "o." Go to edit > Free transform and drag the bottom center node down so the "o" looks like it belongs with the rest of the text. Now duplicate the layer twice, just like we did with the dragonhead. Name the layers from the bottom one and up "dragontext_1," "dragontext_2," and dragontext_3" respectively.
Step 10
Let's hide the "castle" layer for now, since it's of little importance to the layout, and mainly causing a bit of a distraction while designing.
Right-click the layer "dragon_1" and select "copy layer style." Now right-click the "dragontext_1" layer and select Paste Layer Style. Right-click the layer "dragon_2" and select Copy Layer Style. Now right-click "dragontext_2" layer and select Paste Layer Style. Change the shadow mode opacity under bevel and emboss to 43%.
Select "dragontext_3" and set the fill Opacity to 0%. Then apply the styles shown in the image below. When finished, repeat Steps 9 and 10 for the "Storm" text (naming the layers stormtext_#) and place the text roughly as shown below.
Step 11
Command-cick the vector mask thumbnail of "dragontext_2" layer to load the selection. You'll see the marching ants appear around your text. Make sure "dragontext_2" is your active layer, as this will make sure we place the adjustment layer we are about to create just above "dragontext_2."
Now click the Create New Fill Or Adjustment Layer button located below your layers palette. From the list select Color Balance and apply the settings below. Afterwards, click Command + D to deselect. Now do the same for the "swordtext_2" layer.
Step 12
Details speak for themselves, so lets throw in some more text for added effect. Type out "Scroll of the Wicked" using the Scurlock font again, at a size of 18.5 pt. For the "Scroll" and "Wicked" text, set the text size to 14.5 pt. For "of the" text, use #C9C9C9 as the text color and apply the following layer styles.
Step 13
Hopefully you're still with me. Let's move on to the sidebar.
Using your Pen Tool, create a block-like shape like the one in the image below. Be creative here. There is no right or wrong when making stuff like this, so just throw a shape together without paying too much attention to detail. Duplicate this layer and call the the top one "sidebar_base." Name the bottom one "sidebar_perspective." Now apply the following layer styles To the layer "sidebar_base."
Step 14
Nudge the "sidebar_perspective" layer 6px to the left, right-click it and select Rasterize Layer.
Set the Burn Tool up using the settings below, and paint the perspective edge - keeping the light source from the concept sketch in mind - where the light is least likely to hit it. With the Dodge Tool, paint the opposite areas. When doing this for stone textures, I find that it's effective to dab rather than stroke, as this creates the illusion of a rough surface. Finally, give the layer a drop shadow.
Step 15
Download this brush set by Lee Richardson. Create a new layer above "sidebar_base" and name it "sidebar_texture_1." Now, Command-click the "sidebar_base" layer to load the shape selection. Without releasing Command press Shift to add to the selection and click the "sidebar_perspective" layer. Next Grab your Brush Tool and select the second brush of the set you just downloaded. With your foreground color set to black, click once inside the selection and hit Command + D on your keyboard. Set this layer's Opacity to 50%.
Step 16
Set your foreground color to #160A02 and create another layer. Name this one - you guessed it - "sidebar_texture_2." Repeat the process from Step 15, this time using the fourth brush of the set. It's smaller, so you'll need two clicks to cover the entire surface. With this layer selected, go to Filter > Blur > Gaussian Blur. Set it to a radius of 1.5 then click OK. You should have something like the image below.
Step 17
Let's add some imperfections to the rock surface. Create a new layer and name it "cracks." Select the Brush Tool and vary between a master radius of 2px to 5px, Hardness 60% to 80%, and keep the brush Opacity at 55%. Try not to worry about getting it right. The layer style will do most of the work, and the weirdest shape may turn out great. When you are happy with the cracks, apply the following layer style and become even happier.
Step 18
Create yet another layer, this one above the "cracks" layer, and call it "edge_bumps." Select the Pencil Tool with a master diameter of 1px and draw in some imperfections in black color along the highlighted line below. set the layer Opacity to 76%, then apply the following layer style to the layer.
Step 19
Create a new layer above the "edge_bumps" layer. Command-click the "sidebar_perspective" layer. Grab any one of Photoshop's default spatter brushes and dab here and there down the edge, while still keeping the brush Opacity at 55%. Copy the layer style from the "edge_bumps" layer and paste on to this layer. Set the layers Opacity to 55%.
Step 20
Let's move on to creating the wood. Make a shape like the one below for our big wooden saved games board. Set the color of the shape to #463118. Call the layer "saved_games_base" and apply the following styles to it.
Step 21
Using your Pen Tool, try to replicate the shape you see below, and place it below the "saved_games_base" layer. The important edges are highlighted in red. Name it "saved_games_perspective" and set the color of this shape to #14100D. Also, apply a drop shadow as shown.
Step 22
Download the first texture from this texture set by cgtextures.com. Drop it onto your stage and resize/rotate it until you like how it looks. Place it above and over the layer "saved_games_base" and rename it "wood_texture_1". Command-click "saved_games_base," then Command + Shift-click "saved_games_perspective" to add to the selection. Select "wood_texture_1" and click the add layer mask button, located underneath the layers palette. Set this layers blending mode to Soft Light.
Duplicate this layer once, name it "wood_texture_2," set the blending mode to Overlay and Opacity to 15%.
Step 23
Repeat Steps 20-22 for the buttons. Try to vary the gradient a bit, and use reflected instead of radial. To keep track of your layers, you may want to add the button layers to a group. Try to match the results shown below.
Step 24
Let's lighten things up a bit. select the top layer of the document, and click the Create New Fill Or Adjustment Layer, just like we did in Step 11 for the text. This time select levels from the list, and drag the center node to 1.39, which is a little to the left.
Command-click the "stormtext_1" layer, now press Command-shift and click both the "dragontext_1" and "dragon_1" layers. Select the levels layer thumbnail and go to Edit > Fill, and fill the selection with black. Now the text and dragonhead won't be affected by the levels layer.
Next we are going to add a brightness/contrast adjustment layer, using the exact same method we used for levels, including making sure the "Dragon Storm" TEXT ONLY this time is not affected by this layer by masking it out. Set the Brightness to 25 and Contrast to 35.
Step 25
With your Rectangle Tool, above the "wood_texture_2" layer, create a square shape like in the images below. Name this layer "inset_rim," now duplicate this layer and call the top one "inset_base."
Apply the following styles respectively, starting with "inset_rim" and using a Fill Opacity of 0%.
For "inset_base," use the same settings and a Fill Opacity of 60%.
Duplicate both "inset_rim" and "inset_base" twice and place as shown in the bottom of the below images.
Step 26
Download "Livingstone" by PrimaFont from dafont.com. Type out all the text you see below, using #ECDECB as the text color. Size isn't too important, just try to match roughly what is shown below. Then apply the following style to all of these text layers.
Step 27
Set your foreground color to #636363 and create a new layer below the buttons. Using your brush tool set to 85% Hardness with a master diameter of 1px, paint a O shape, like in the image below. See the marching ant selection. Duplicate it, and place the copies as shown.
Step 28
Do the above step for all the areas in the image below that has chains and apply the following style to all layers. It's going to be many layers, so use groups to keep track of them.
Step 29
Let's make the "castle" layer visible again. Since we're moving in to the detailing stage of this project it's nice to get a clear view of what the end result will be.
Now, using your pen tool again, with black set to your foreground color, create a shape like the one inside the saved games box below. Make it mainly square, but cut the corners to give it a more interesting shape. Call this layer "tablet". Apply the following layer styles:
Step 30
Using the font Livingstone again, type out the text you see in the saved games stone tablet below, and apply the following layer styles. When finished, duplicate the whole tablet and place it in the second box, as shown in the image below.
Step 31
Set your foreground color to #2E343A, and with your Pen Tool create a small diamond shape (about 10px by 10px). This is going to be the base of our rivets. Name the layer "rivet_inset," and duplicate it twice. Name the middle rivet layer "rivet_base" and the top one "rivet_style." Add the following styles respectively, beginning with "rivet_inset."
Now apply the following layer styles to the "rivet_base" layer.
Now apply the following layer styles to the "rivet_style" layer.
Now duplicate the whole rivet three times and place one in each corner of the saved game box, just like in the image below.
Step 32
Create 4 small circles (about 4px by 4px) at the base of the saved games box, using the ellipse tool and #CCB55A as your foreground color. These will be the page indicators often found in iPhone applications. To the first three, apply these styles.
Change the color of the fourth circle to #FFA200 by double-clicking the shape color thumbnail. Then apply the following style.
Step 33
Time to dive into the last and probably the most difficult step. This could in fact be a whole other tutorial in itself, but I'll try to keep it basic. I'm gonna try to explain this to the best of my ability using images, but it's gonna be a learning by doing experience for anyone new to this technique.
- Create a shape, using the Pen Tool, that somewhat resembles a leaf. Doing this in a separate document is a good idea (see image 1 below).
- Rasterize the shape you just made, and grab the Burn Tool.
- Vary the settings for the brush (size and exposure) and try to replicate my result (picture 2).
- Grab the Dodge Tool and try to replicate the results shown, again varying the settings of the brush (picture 3).
- For good measure, also draw a line down the center of the leaf using the Burn Tool (picture 3).
- Use the Eraser Tool, set to a Hard Brush to further shape the leaf (picture 4).
- Zoom in and add additional detail using dodge and burn (picture 4).
- Go to Filter > Noise > Add Noise, and use the following settings: Amount of 1%, select Gaussian and check Monochromatic (picture 5).
- Resize the leaf to the actual size you need it to be, and create a new layer above it. Now with a soft 1px black brush, draw in the veins. set this layers Opacity to 20% (picture 6).
- Change the foreground color to white and the brush Opacity to 70%, and draw in some highlighted areas around the veins (picture 7).
- Add a simple drop shadow using layer styles, and merge the whole leaf into one layer (picture 7).
Optionally you can also add an unsharp mask to the leaf if you want crisper detail. Settings would be along the lines of Amount 50%, Radius 0.5px and threshold of 0 levels.
Conclusion
Add greenery, here and there to make it look more interesting. You could go even further than I did and add some on the saved games box as well. Thanks a lot for following along with this tutorial and I hope you learned some new techniques. Below is the finished result.
