How to design an appBy:

Samuel Saavedra

Step 1First, look for inspiration. Create a mood

board to play around with ideas – print it out and keep looking at it, absorbing all the details to inspire you for the project.

Step 2Next, start developing your main ideas by

sketching them out. Try to focus on the function of the app. Do not draw in too many details at this stage – they’ll distract you from the practical side of it. Your main objective is to make the application easy to use.

Step 3In Photoshop, set the canvas at 640x960px

(iPhone 4/4S) or 640x1136px (iPhone 5) and, using guides divide the screen into four areas for the top header, the content, the player at the bottom and the background. Using the Rectangle tool, rough out your interface. Create a button in the top header section using four rounded rectangles on four different layers, stacked on top of each other.

Step 4On your bottom button layer go to

Layer>Layer Style>Inner Shadow. Set the blend mode to Linear Burn, opacity to 75% and chose a grey color, then select Bevel & Emboss and set the style to Emboss. For the layer above, add an Outer Glow at 40%, with a Linear Burn blend mode set to grey, with 5% spread and 16px size. Add a grey drop shadow at 10%; choose Linear Burn, set the distance to 10px and size to 2px.

Step 5Choose the Rectangle Marquee tool, setting

the feather to 10px. Select the very top layer and add a Clipping Mask (use the arrow in the Layers panel). Then go to Blending Options (using the arrow in the Layers panel again) and check the ‘Layer Mask Hides Effects’ box in the Advanced Blending section.

Step 6On the second from top layer, add a Bevel &

Emboss Layer Style, set the technique to Chisel Hard, the size to 10px and select Rolling Slope from the Gloss Contour options. Then add an Inner Glow at 70%, Linear Burn, choose a grey color and set the size to 3px.

Step 7Make the very top layer smaller than the rest:

this will add to the 3D effect. Select Bevel & Emboss, set the size to 50px, angle to 90º and altitude to 70 degrees. Add a Gradient Overlay at 10% with a Linear Burn blend mode, and a white to black gradient at 90 degrees with a Linear Burn blend mode. Draw an icon to sit on top (an arrow here).

Step 8Duplicate your button to create any other

buttons that you want to add (including different icons on the top layer). Next, create the border of your interface and give it all a bit of polish.

Step 9For the list of radio stations, draw a rectangle

shape to cover the main content area, setting the fill to 0%. Add a Bevel & Emboss, with an Outer Bevel style and size of 2px, and then add an Inner Shadow at 75% with a Normal blend mode, in black, with a distance of 7px and size of 10px. Add an Inner Glow at 20%, with a Normal blend mode, black color and 90px size.

Step 10Export the separate parts of your interface by

converting each element in different layers to Smart Objects. Name them and, finally, go to File>Scripts>Export Layers to Files.