How to Make a Menu Interface for a Fantasy Themed iPhone Game Chris Karling on Jul 3rd 2009 with 110 Comments, Download Source Files + Thanks for supporting the site, feel free to download the ZIP file for this tutorial. ‘View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-ftiendly and easy-to-read version of the Tuts+ network. First off; props to Dan Wiersema (my fiiend and Creative Director at Guifi) for being the brains behind this tutorial, Concept and wireffame 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 Phone game. We'll go through setting up Photoshop to accurately display target screen size, setting up a wire ffame 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, Want access to the fill PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below.SAVED GAMES: foBs. AeA a Praag Sed Step 1 Head over to pxcale.com and follow the instructions. Doing this will alow you to view the design in it’s final size — The real li 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 Trecommend creating a wireffame 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. Ifyou 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 Ipx 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! foSAVED GAMES Step 3 Create a new layer and name it "Background." Set your foreground color to #5e1 114 and your background to#140306, Select the Gradient Tool, and with the settings pictured below drag ftom top to bottom like the arrow indicates, MM) (serves) one ficox | ransparency Step 4 To the "Background" layer, apply the following layer styles.Pattern Overlay | Pattern Blend Mode: ( Gveray i=) 1. On [5S aan bs__|* Click the little arraw ) in the 1 dropdown menu and load “Texture fill 2”, Select the first pattern in the set $e: Om tink with Layer Pattern: Color Overlay | Color Blend Mode: ( Overay AL _]ererrer Opacity; =m [Sd 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 ffom sxc.hu (Thank you Javier Gonzalez). 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 ofa 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 ffee 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.©) Mh OR ersons ©) Mh BF erson2 © OF ersons 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 Bevel and Emboss Structure sole: (Inner Sevel 18) Technique: (Chisel Hareb) Depth: nm FS | Direction: @ up © Down Sze Om fx Soften: Qe [Fd shading angle: [ae (@yetee ‘Aticude: \ 7 ey °Highlight Mode: ( Normal bea pCi: [00] ‘Shadow Mode: (Linear Burn im) | Opacity; Ome FY Color Overlay color Blend Mode: ( Normal 3 #fiff Opacity: em [80 ‘Now apply the following layers styles to “dragon_2” and set this layer’s fill Opacity to 0%.Bevel and Emboss Structure swe: (Inner Sevel a) Technique: (Chisel Hareb) Depth: Om [S| Direction: @ up © Down Size) SPX Set! Qf] shading anole: 5]? e& use Global Light etude: 7 Ga] Highlight Mode: ( Normal =) Opacity: [006 ‘Shadow Mode: (near Burn aa Opacity: nm [FY em} And again to “dragon_3” and set this layer’s fil Opacity to 0%. Drop Shadow StructureBlend Mode: ( Muliniy a Opacity: nm [GY fone ¢ *) a0 ——]* (Wf Use Giobat Light Distance: Qe fd Spread: Om fae $20: Oe 5 Bevel and Emboss Structure Technique: (Smooth Depth: Gm Ed Direction: @ up © Down nr a Soften: Qe fd shading Angle: iiss (®) D trees vom aetude: \7 ° ODI es [00 Shadow Mode: ( Muliaiy —_ Opacity: Ge [Od Fra O00 feoStep 9 Right, dragon looks good — check! Next up is the text Head over to Fontcrafi.com and download or purchase Scurlock. Scurlock is ffee 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 undertine, 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 lke we did with the dragonhead. Name the layers ffom the bottom one and up "dragontext_1,""dragontext_2," and dragontext_3" respectively.FE) tensercents Dy Direct Selection Tool Step 10 Let’s hide the "castle" layer for now, since it’s of litte 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 B% 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. Drop Shadowserene (sao 7 Opacity: Os [SF | Angle: Oz © Use Global Light Distance: Quem [Fd Spread: Om fod Size! Qe [Ed ‘outer Glow | Structure sie (iy) OP aCtY: es [70 | Noise: Qos [J «|* On OME | Elements Technique: (Softer Fi) Spread: Om [2 +d Sie Om fd | Quality [Me Corsi ‘contour: Range: —— evel and Emboss | Structure sve (eal 3) ‘eis (ees) Depth: Ome [las | Direction: @ Up CQ down Sie! Om fd Soften: Qe | —*d | Shading Se fs cm conor [ail Chinato vane (Homa FJ] Opacity: es [43K cr) |Wren SS Gesu a 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. Brightness Contras. Levels Color Balance cay Exposure Tone: |@) shadows Vibrance. UO aaa Hue Saturation. O Highlights Color falance Tack Whi. Photo Fier. Gyan Red Channel Mixer. [2a = overt Posteri. 0 Threshold Gragient Map. Selective Calor [30 so ® Oo a al Magenta Green | Yellow Blueooe_ev[v[—0VV.K“—“—= Color Batance Preserve Luminosity Tone: Shadows [® Mictones © Highlights Gyan Red [+30 = Magenta Green —— ee = Yellow ue —_—_——_—_—_ Color Balance Preserve Luminosity Tone: Q Shadows CO) Midtones [© Hatiions yan Red Magenta Green Yellow Blue ——_—_——_—>_>_[__ Preserve Luminosity ie RAG ae Z N Vege form © BBM coor satance : | es BE 9 corms na 8 [EE] crsoomons © BPR cote tate Bh 8 croonten 2 ===‘ragontext 2 Pe 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. Drop Shadow structure tiend Mode: (MukiDiy = Opay: ——om TY angie: (D>) fo ©) vse cota ght ew? Distance: QF Spread: mm [FE S20: Om fF JP Bevel and Emboss Structure Sryle: (Inner Bevel Technique: (Smoath Depth: Qe Fd Direction: @ up © Down Sie! Om dx Soften: Qe +P shading ansle: bo P (2 (©) D use cioba Light Atude: \—7 > toss Contour: | dn) ©) Ami-aiased ghlight Mode: { Sereen i] pact, [100] ‘Shadow Mode: { Multiply i]t Opa! nm [FEYye oS Step 13 Hopefilly you're stil with me. Let’s move on to the sidebar. Using your Pen Tool, create a block-like shape lke 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." Outer Glow structure Blend Mode: { Sereen [=] ee Noise! Qe ff euo BW Elements Technique: (Soher De) Spread: Of $26: Om Fd Gradient Overtay Gradient Blend Mode: [ Normal 3 Opacity: ns [BEY Crocent: IIIT) A reverse Spe: (tinear 9) 6A Align with LayerGradient Type: ( Solid |) Smoothness:[100 _[¥] % 8 5 a a a a #303834, #212121 #4nda4a #202824 Step 14 Nudge the "sidebar_perspective" layer 6px to the lefl, right-click it and select Rasterize Layer. Set the Bum 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Evite sa Range:{ Widtones fa) Exposure: [sox Jw) [7A] | AProrect Tones Hardness 0% Qn] amr] & in] | tance: (actones Ta) Exper: [50% J) [fd | rote Toms Drop Shadow ~ structure siend Mode: [Makin —_ Opacity: mn FEY vate (Df ro aie: ( Ue cial ight 7 Distance: Qa FJ Spi: oo eT 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%,EB eerucsonret BH 8 J] sicevar tase Step 16 Set your foreground color to #160A02 and create another layer. Name this one - you guessed it — "sidebar_texture_2." Repeat the process ffom Step 15, this time using the fourth brush of the set. I’s smaller, so you'll need two clicks to cover the entire surface. With this layer selected, go to Fiker > Blur > Gaussian Bhar. Set it to a radius of 1.5 then click OK. You should have something le the image below.= sidebar texture 2 Step 17 Let’s add some imperictions to the rock surfice. Create a new layer and name it "cracks." Select the Brush Tool and vary between a master radius of 2px to Spx, 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 tum out great. When you are happy with the cracks, apply the following layer style and become even happier.Ce aieuteCe Cell) EMAIL DELIVERY win flexible Vea ce NNO (cant 3evel and Emboss structure syle Technique Depth Direction size Soften (nner Bevel 139) (Smoamn [in Q ve @ down —— ff ——————— [F shading Angle: a0 VN ) FA Use cota Lohe acide: \—7 Highlight Mode: (Sereen =] OpRCIY: em [100 | Shadow Mace: (MuliDWy a Opacity: nm [S| 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 You can clearly see that the initial look of the cracks is of little importance - the layer style creates the illusion of depth, and the actual shape of the cracks automaticly look goodlayer Opacity to 76%, then apply the following layer style to the la evel and Emboss Structure ‘Style: [ taner Bevel =] Technique: [ Smooth Depth: bn [500 Direction: ©) up @ Down Sze: ns fF] ox Soften: Qa [i Shading ‘Angle: fia (e (Use clots! Lone atciude: \7 fap Highlight Mode: ( Sereen iE] Opacity: een 2S Shadow Mode: (Makioly im Opacity: nm [69 | These are my strokes The end result (white for viewing purposes) Draw down the red line, 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 fiom 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. Inner Shadow Structure tind Mode (rere One, —— [EX poate: (DP) fix —]° tee cot gi 7 Deane: On I< Choke: Qn fo Sze Oo fF x Quatiy contour: | el 7 ans-stiaceOpacity: =m (Sd Noise: Qe dE eo =a Technique: (Softer fi) Source:Q) Center @ kage Choke: Om fd Size! OQ 2d evel and Emboss | Structure sve (amen 3) ‘es (Ge) Depth: en [134 | Direction: @ Up CQ down Sie: Om [Td Soften: Qe fo —d | Shading cm conor | ail Chante ee Ca ODI: qe [00 | cont (eos) Opacity: mm fd = can sie (tas) one = Cre: II) sore sot (eat ff Aigo wah LaerWhile the gradient menu is open, click in the center of the wood board and drag a little to the right, to reposition the center of the gradient origin WY Screw Wick: ai 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. Ako, apply a drop shadow as shownDrop Shadow Structure Blend Mode: (Many _ OPACIY: et [100 \* Anal: O= * ©) Use total ight Distanett Qa Yo er Ste: om ize Step 22 Download the first texture from this texture set by egtextures.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 "Wwood_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 undemeath the layers palette. Set this layers blending mode to Soft Light. Duplicate this ayer once, name it "wood_texture_2," set the blending mode to Overlay and Opacity to 15%.s s a fea] Lemur BOB onion A BODY ois cermn AF aes ~~ seat 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.ao 4 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 isa litle to the left Command-click the "stormtext_1" layer, now press Command-shiff and click both the "dragontext_1"" and "dragon_1" layers, Select the levels layer thumbnail and go to Edit > Fill, and fil 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.Brightness/Contrast Levels Step 25 ‘With your Rectangle Tool, above the "Wwood_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 Apply the following styles respectively, starting with “inset_rim” and using a Fill Opacity of 0%.$2 om fd Solr: Om fo | ‘Shading aoe: ; ©) rss nde 7 fo onscomone | Aa] Avan a ee For “inset_base,” use the same settings and a Fill Opacity of 60%.Inner Shadow | Structure serene (sao 72 pact: nm fT | Angle: Oz © Use Global Light Distance: Om dom Choke: nn [22 | S20 O—— | [— Quality cote |p) Os Noise: Qn [1% ‘outer Glow | Structure es) Paci: [100 | a eo oe Tecniqu: (Saher 1) es St; Om FJ | Quality cme |p) Ors Range: nm [50% Je: Qn [1% 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.Bevel and Emboss — Structure style: [ Inner Bevel =] Techiqu: (Sno) Doth —— Diecion:Q) Ve @ down Si: Gs Sot! Qn [5] — stading Angie: [iso Y [Af Use Global Light Bo I Gionconswe | je) anatase Hiolight Mode: (Sereen aC Opty, ——me fF Shadow Hage (Maiay —_ Opacity: nlm [FF |X Alctude: Sa CET (0) £3) i Ga SAVED GAMES VAL YE eT Step 27 Pawar en Diaie tic aan 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 ayers. It’s going to be many layers, so use groups to keep track of them. Drop Shadow Structure Blend Mode: (Makiaiy im) | Onaciy) —om— angie: (G) [0 ——]* vse cla ight YL Distance: Qe [2dne $2 Om FY Bevel and Emboss | Structure syle: (Inner Sevel a) Technique: (Chisel Hard 1a) Depth: nn 50] Direction: @ Up © Down St O————— om Soften: Qa [do | Shading angle: co ® (Use cla Lig aime: —7 Fo Gloss Contour: y © amatased ‘ghlight Mode: ( Sereen BC Opacity: mm [FS Shadow Mode: [Multi i) Opacity: me [FS SAVED GAMES: CALL MLA A ee LAL BIAS 3s 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 comers to give it a more interesting shape. Call this layer "tablet". Apply the following layer styles: Drop Shadow | Structure Seatac ee Opaciy; mm Angle: Oz © Use Global Light Distance: Om dom Spread: ——mOm—mm 5 | Sze O——— | Inner Shadow se ie (iy Oph nl Anal: (Oi & Use Global uote Distance: Om [Fd Choke: Om fod $2 Om ‘nner Glow | Structure serene (Sy 8) Op8cy: nm 5) a eo = Tecnique: (Saher 1) Source;©) camer @ tage Choke: Cs [od St; mm J evel and Emboss | Structure Src erence)Technique: | Chisel Hard _ 39) Depth: [000] Direction: @ up © Down $2: Om fx Soften: Qe fod | Shading Angle: fs ® 1 tie aig atte: 7 Gloss Contour: vy © amatased Highlight Mode: ( Vivid Light ac Opa [00 Shadow Mode: [Multi is) Opacity: mm [7d Color Overlay | Color serene (oma) Opacity: =m dK Gradient Overlay | Gradient a ony, — oo ase EO tee Sele: (near 8) Align wih Layer Using the same techniques we used for the sidebar, try to replicate my result in the large image below, or go with your own style of racky texture evans new game piersSAVED GAMES r- VAL YT AE Te Praag ed 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, Inner Shadow — structure blend Mode: [Wainy —_ i ———t- EJ ogi! (ABD) fro —] tee Ges ee LJ Distance! Qf] x Choke: en [i] $2 Qn FY — uality Contour: | LM 1D) Ansiatases N86: Om [oS Outer Glow — Strweture Blend Mode:(Sereen =U) Ops: Oe [2] Noise! Qe [|X Le ‘Technique: (Softer Ta) $p10ad: em fo $20; Om fxsyle: [Inner Bevel [ ‘shi: ( STB) Depth: mn [i238 a Se: Qe [JP Soften: Qs fo JP | Shading Anal ©) stescemiuon sue 7 Bo) cm cotor |i Chinato ronan te (Seen O67, [100] a) | Opty: mY Gradient Overlay | Gradient sete (8) Opty: —nm DY Cen: ETP) 0) tere | angle fo | nOra 05/18/09 05/14/09 lO Pica Sed 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 'tivet_base" and the top one "rivet_style." Add the following styles respectively, beginning with “Yivet_inset.”ieee [Structure sve (Genres 15) Temi Depth: nt [F000] anes Site; Qn fF] Softer: Qn fod ing “Angie: a Clic usm ‘studs ols dome fi) Cs ote (em J Opacity: bn [12% score (teem 15) ‘Now apply the following layer styles to the “rivet_base” layer.‘Angle: © aw Distance! Qa ox Spe: ne fo" 5 Cine | jl arama oo tte Sen | OPACIY: nt [100 | ‘Now apply the following layer styles to the “rivet_style” layer.‘Now duplicate the whole rivet three times and place one in each comer of the saved game box, just lke in the image below.f i i SCROLL per veo ay De q [eyez TY new game a prayers Step 32 Create 4 small circles (about 4px by 4px) at the base of the saved games box, using the e #CCBSSA as your foreground color. These will be the page indicators often found in iPhone applications. To the first three, apply these styles.soo (D) =F eh we cu san: mn [YP Coke: nn |S S28: Om [x J Quality, eg States N0ist! Qe ‘end Mod a Noise: mm fo eho 7H Elements ‘echigu: (Somer 1) $0108: Om fod S20 0 dm Change the color of the fourth circle to #FFA200 by double-clicking the shape color thumbnail. Then apply the following style.Outer Glow /— Structure Blend Mode: { Sereen r=] OPAC: nm 5] Noise: Qe fo |* © @ 0 Ma arreere Cy eS ee =e Range: em OY Jitter: Qe [0 \* SAVED GAMES ae 05/18/09 05/14/09 NO Savi Step 33 Time to dive info the last and probably the most difficult step. This could in fact be a whole other tutorial in itself, but I'l 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 Jeaming by doing experience for anyone new to this technique. © Create spe, using the Pen Tool, that somewhat resembles a leaf, Doing this in a separate document is a good idea (sce image 1 below). + Rasterize the shape you just made, and grab the Bum 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 Bum Tool (picture 3). * Use the Eraser Tool, set to a Hard Brush to firther shape the leaf (picture 4).Zoom in and add additional detail using dodge and bum (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 Ipx 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.oss Now make a few of these and spread them along the top of the sidebar. Using the same technique, create vines and other pieces of interest ta make the artwark come alive!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 leamed some new techniques. Below is the finished result. Sater) CALE ae Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web. {96 people Ike this. Be the first of your frends. By Chris Karling I'm Chris from Norway. | lke to think of myself as an unlabeled designer. I'l find joy in anything from crayons, and aerosol cans to heavy duty 3D applications. Where there's creativity, there's art. Right now however, I enjoy my job as a GUI designer at Guitk.