Welcome to the second part in our "Design & Build a 1980s iOS Phone App" series, where we will be teaching you all the steps necessary to both design and code a "Phone" app similar to the default version on the iPhone. In this tutorial, we will complete the interface design of our app.

Step 1

Select the Rounded Rectangle tool and set the radius of your corners (found in the toolbar) to 15px. Whilst holding the Shift-Key to keep your shape in proportion, draw a small square. Position it beneath your background color category bar. Right-Click on the new layer and apply a Drop Shadow with 0px distance, 0% spread and 10px size.

Click on the Inner Shadow tab and apply an inner shadow. Change the Blend Mode to Normal, the color to white and the opacity to 15%. Set the angle to -90 degrees and the distance to 1px, and leave everything else at 0. Also apply a Color Overlay to your shape, with the first color being the same color we have used in our background.

Step 2

Duplicate the layer by going to Layer > Duplicate. Whilst holding the Shift-Key, use the Cursor-Keys to nudge your duplicated shape to the right - holding the Shift-Key whilst doing this allows you to nudge the shape 10px at a time rather than 1px. Place the shape next to your orignal, with a good distance between the two.

Repeat the step over and over until you have six shape. Select all of the shape layers and align them to the center of your canvas, and then change the Color Overlay of each shape, as seen below.

Create a new folder in your Layers Panel and drop all of your shapes into it. Rename the layer "Background Color". Duplicate the folder and place it beneath your Key Color category bar. Repeat the step again, placing the third folder under your Screen Color category bar.

Step 3

Our key colors are going to be based on two colors: the key color itself, and the key number color. For this reason, our square needs to accomodate two colors. We'll be achieving this with a gradient. Open up the Layer Style window for your first shape. Remove the Color Overlay and then apply a Gradient Overlay.

Create an additional two color swatches in your gradient bar, click on your first additional swatch and change the location to 49%. Click on your second additional swatch and change the location to 50%. Now you simply need to change the colors of your swatches, as seen below.

Right-Click on the layer we was just working on and select Copy Layer Style. Select your other shape layers under your Key Color category bar, Right-Click and select Paste Layer Style to apply the same gradient to all of your shapes.

Open up the Layer Style window for your second shape and change the colors of your gradient - in this case I have just inverted it, so we will have a beige key with black writing, and a black key with beige writing. Repeat the step a further four times so that all our shapes have different color schemes.

Step 4

Paste the same layer style settings on your shape layers beneath your screen color, which will also have a scheme based on two colors (screen color and number color). Apply different colors to the gradient overlays.

Step 5

Locate and Right-Click on your contacts icon layer. Select Copy Layer Style, and then locate and Right-Click on your settings icon layer, select Paste Layer Style. Now copy the layer style of your telephone icon, and paste it on to your contacts icon. Hide the active state shape beneath your contacts icon, and make the one beneath your settings icon visible.

Step 6

Copy one of your shape layers and position its content beneath the preset themes category bar. These themes are going to represent a preset theme consisting of a background color, key color and screen color. Apply a new gradient overlay to your first shape, this time using a total of six color swatches in your gradient bar with positions: 0, 49, 50, 74, 75 and 100.

Fill the swatches in using colors from your other theme colors: in my case, the left color is the background, the next 25% is the key color and the last 25% is the screen color.

Copy and paste the layer style on all your other shape layers. Go through all of them changing the colors of your gradient.

Step 7

Duplicate the Settings folder and rename it to "Telephone". Hide the original Settings layer. Remove all the color swatches, category bars, and title. Also make your telephone icon appear active using the techniques we used earlier (copying and pasting layer styles).

Step 8

Select your title bar's main background layer and go to Edit > Transform > Free Transform. Change the height of your layer to 70% using the field located in the toolbar (can be seen in the screenshot below).

Select the Rectangular Marquee Tool and change the style to fixed size. Enter 30px into the width field and 960px into the height field. Click on your canvas to automatically create the selection, and position/snap it into place against the left side of your canvas.

With your title bar's layer still selected, grab the Paint Bucket Tool and fill the selection with black. This should automatically apply the layer's current style as we're adding to what is already there on the layer.

Repeat the same step but this time snapping your selection to the right side of your canvas. Change the dimensions of your fixed size marquee tool to 640x30px. Click on your canvas once again to make your selection and then move the selection so it snaps up against the top of your tab bar. Fill the selection with black...

Step 9

Select the Rectangular Marquee Tool and set the style back to its default setting (so it isn't fixed size). Make a selection of the grey area in the middle of your canvas. Go to Edit > Modify > Smooth. Enter 20px into the field and click OK. This should give your selection rounded corners. Right-Click and select Select Inverse from the menu. You should end up with a selection similar to below...

Select the Brush Tool and fill your selection in with black - you only need to paint over the unfilled corner areas. The new corners will automatically take on the style of your layer.

Open up the Layer Style window for your current layer and select the Gradient Overlay tab. Modify your gradient bars colors a little; I darkened my dark color, and lightened my light color.

Step 10

Select the Rounded Rectangle Shape Tool from your tools panel. Using the existing settings (the settings we used earlier) drag out a shape similar to the one below. Position it in the top left hand of your grey background, and then nudge it up about 30px.

Hold down the Cmd-Key and click on the thumbnail of your new shape in the layers panel. This will make a selection of your shape. Now hide the shape layer, select your beige border layer and hit the Delete-Key to remove the selected area.

Repeat the process on the right-hand side of the border.

Move your selection into the middle of the canvas, and line it up against the two corners (seen below) of your border. Right-Click and click Select Inverse. Using the Eraser Tool, remove the corner.

Repeat the step on the left-hand side.

Step 11

Open up the Layer Style window for your border layer and select the Stroke tab. Apply a 3px black stroke to the outside of your border.

Step 12

Make a selection of your border using the Cmd-Key and click combination. Create a new layer by going to Layer > New Layer and fill it with white. Go to Filter > Noise > Add Noise and add 40% noise. Click OK.

Change the layer's blending mode to Multiply and drop the opacity to 10%.

Step 13

Select the Elliptical Shape Tool. Whilst hold the Shift-Key to keep your shape in proportion, draw a small circle. Position it at the top of your border.

Duplicate your shape layer twice, and position them as seen below, making sure they're equal distances apart from each other. Duplicate one of them twice more, and position them above the existing ones.

Select one and go to Edit > Transform > Free Transform. Whilst holding the Shift-Key and Alt-Key at the same time, reduce the size of the circle by dragging the corner towards the center of the circle. This will make the circle smaller whilst keeping its exact position. Repeat the step on the other circle, aiming to make the circle 70% of its previous size.

Open up the Layer Style window for one of your circles and select the Inner Shadow tab. Drop the distance to 0px and change the size to 5px.

Now select the Drop Shadow tab. Change the Blend Mode to Normal and the color to white. Change the angle or your shadow to 90 degrees and the distance to 3px. Drop everything else to 0. This will give your circles a clean-cut white shadow.

You should end up with some pretty cool speaker holes similar to the ones seen below.

Step 14

Whilst holding the Cmd-Key, click on the preview thumbnail of your border in the layers panel to make a selection of it. Create a new layer.

Select the Brush Tool and choose a soft, medium-sized brush. Start painting around the inner edges of your border in white to end up with something similar to below. This will create a bright highlight.

To make the highlight a little less vivid, reduce the opacity of the new layer to 60%, allowing some of the background to shine through.

Step 15

Select the Rounded Rectangle Shape Tool once again, and keep the same settings we have been using all along. Drag out a shape similar to below. I didn't use any precise dimensions and just went by eye. Duplicate the shape twice more, and space apart using equal distances between each shape and the edges of your border.

Open up the Layer Style window and select the Color Overlay tab. Change the color to the same color as your background; you can select the color using the Eyedropper Tool when the Color Picker window is open.

Select the Drop Shadow tab and apply a drop shadow using the settings seen in the following screenshot. This will give your shape a black sharp shadow on the left side of your shape.

Select the Inner Shadow tab and apply an inner shadow using the settings seen in the following screenshot This will give your shape a grey sharp shadow on the right side of your shape.

Select the Inner Glow tab and apply an inner glow using the settings seen in the following screenshot. This will give you what is essentially an inner shadow (but using a glow as we used the inner shadow style for something that isn't possible to do with the glow).

Click the OK button. Right-Click on the layer we've just been working on and select Copy Layer Style. Paste this layer style onto your other two white shapes. You should be left with your shapes looking something like below. These shapes will be the base of our buttons.

Step 16

Select the Rounded Rectangle Shape Tool once more and create a similar shape, this time horizontal rather than vertical. Make sure the shape matches the width of the other three shapes put together.

Open up the Layer Style window for the new shape and apply a Color Overlay. Pick a dark grey - this time darker than the background. Apply a white drop shadow using the settings seen in the screenshot below. These settings will make the shadow look like it is the bottom ledge of the screen.

Click on the Inner Shadow tab and apply a black inner shadow using the settings seen below.

Now click on the Stroke tab and apply a 2px stroke. Position the stroke to the inside of the shape, and change the Fill Type to Gradient. I used a dark red (#440000) on the left of my gradient bar to a dark grey (#333333) on the right.

Make a selection of your screen by clicking on the preview thumbnail in the Layers Panel whilst holding the Cmd-Key. Create a new layer above your shape layer and fill your selection with black using the Paint Bucket Tool. Go to Filter > Noise > Add Noise and add around 20% noise. Click OK. Drop the opacity of the layer to around 15%.

Step 17

Select the Type Tool and drag out a text box over you screen. Select a suitable font and type a series of numbers in your text box. Right-Click on your text layer and select Blending Options. Select the Gradient Overlay tab and apply a medium red gradient to your typography at 90 degrees.

Now select the Outer Glow tab. Change the color to a red that you used in your gradient. Drop the opacity to 45% and increase the noise level to 12%. Change the spread to 7% and the size to 10px. Click OK.

Step 18

Select the Rounded Rectangle Shape Tool once more and going by eye drag out a selection similar to below. Duplicate your shape twice and position your three new shapes into the shape beneath it equally.

Open up the Layer Style window and apply a radial gradient. Use colors from your apps border.

Select the Stroke tab and apply a 2px stroke on the inside of your shape. Use a Gradient Fill Type. The left hand color of your strokes gradient should b slightly darker than the left side of your gradient overlay, and your right hand color of your strokes gradient should be slightly light than the left side color of your gradient overlay.

Click on the Bevel and Emboss tab. Apply an Inner Bevel with a Chisel Soft technique and a depth of 381pixels. Change the size to 16px and the soften to 16px. Change the opacity of the highlight mode to 83% and the opacity of the shadow mode to 11%.

Apply an inner shadow to your shape using the settings in the screenshot below. Click OK.

With that done, copy your layer style and paste it on your other three shapes.

Step 19

Select the Type Tool and drag a selection over your first shape. Using Helvetica Neue as your typeface, type "1". Open the Layer Style window and apply a drop shadow with the below settings.

Now add an inner shadow with the settings seen below.

Duplicate your text layer and position it on your second button. Edit your text to make it say "4". Repeat the process for the number seven key.

Step 20

Repeat the step several more times to fill up your keys from 1-9.

Step 21

Whilst holding the Cmd-Key, click on the preview thumbnail of one of your main key shapes in the layers panel. Now hold the Cmd-Key and the Shift-Key simultaneously and click on the other eight preview thumbnail of your key shapes. This should select all of them. Create a new layer above all the shapes and text layers that make up your keys, and fill your selection with black.

Go to Filter > Noise > Add Noise and add around 14-15% noise. Click OK.

Change your layers opacity to 15%. This should add some subtle noise to your keys.

Step 22

Using the Rounded Rectangle Tool with the same settings we've been using throughout the tutorial, draw yet another button that matches the width of your "9" key, as seen below. Paste the same layer style on to this key.

Open up the Layer Style window for your new button and modify the colors of your already existing gradient overlay and stroke.

Step 23

Repeat the step twice more. Apply red color settings to your middle key, and keep the left key the same as all the others.

Step 24

Copy one of the many type layers and position it over your new green key. Change the text from your number to "Dial". Open up the blending options for the type and revert everything - so change the inner shadow to black instead of white, the drop shadow to white instead of black, and the color overlay to white instead of black. Repeat the process with the red key, using "Del" as your type.

You can use the same type settings are your number keys for your "0" key.

Use the same technique we used earlier to apply noise to your "0" key. Be sure to use the same settings that we used for the noise on all of our other number keys.

Conclusion

We've now come to an end of this two part tutorial. We'd love to see your results, so please share links to your work in the comments section below. Our very own site manager, Mark Hammonds will be developing this application, so keep your eyes peeled for that tutorial!