Tutorial: Creating the iPhone Interface on Fireworks

You certainly want one, or already have one of these. It's an awesome device, but Iphone's interface is also something that gives a lot of pleasure on using it. Thinking about, we're going to show you how to do the interface on Fireworks.

I've tried to make a real detailed tutorial, on how to do do that glossy look and maybe some other time I'll show you guys how to create the iPhone per say... so let's talk about business!

STEP 1

To start, download these 2 images that will serve as our base.
Iphone picture
Colored background image

Create a new 800 x 800px document with a black background, and import these 2 images.

STEP 2

Now put the layer with the fishes image behind the iPhone and reduce the image, try to fix it until it looks like the image below. Hint: let's use the telephone image with the central part cutted as a layer above all others, this way we're havinh more freedom to work with shapes behind it!

STEP 3

Let's creat a 255 x 380px rectangle, it will mask the background image. Now select the image, cut and paste inside the rectangle (CTRL+SHIFT+V). Now position it to stay inside the display limits and from behind it.

STEP 4

In order to create the interface, we're gonna use mainly rectangle and apply some gradients and opacities. The process is quite simples, and there should be numerous ways to create these effects. Let's begin creating a 255 x 20px rectangle on the top, make it #000 and opacity 55%. Copy this rectangle, move 20px below and insert a 76px height. Then, create a lower 1px line, make it #000 and opacity 50%.

STEP 5

Now let's create a little 3D effect. Create a 255 x 38px white rectangle and position it at the top of the last created rectangle as shown. Now apply a linear gradient that goes from #FFF to #FFF and use the transparencies in the gradient itself as we show in the details (notice that we've create an extra point of opacity to make the feather effect only at the bottom part).

STEP 6

We already have the top ready, now copy the last two created rectangles to the bottom part. Create another #000 line with a 50% opacity above them, the same way we did before.

STEP 7

Let's create the "slide to unlock" button. Create a 215 x 39px button without filling and 1px #CCC border, make its round 50. Duplicate the rectangle and cut the bottom part of the white gradient. Select the rectangle and the gradient, go to Modify > Combine Paths > Punch.

STEP 8

After that, duplicate once more the rectangle and move it 1px above, apply a linear gradient that goes from #000 to #000, with opacity 24 at the bottom part (of the gradient). Make the whole rectangle a 80% opacity.

STEP 9

For the button, create a 53 x 35px button and make its round 43. Apply a linear gradient as shown. Now put a arrow inside it, using the Arrow tool, and make it like the shape we're using. Apply a #979797 to it and a Inner Shadow with the values 0, 30% and 2.

STEP 10

Now let's begin inserting texts. Here we're using Helvetica, but if you don't have it, you may use Arial without problems. The Hour text is #FFF and size 50. Duplicate the text layer and for the one beneath, apply #000 and move it 1px up. This effect looks better than the Inner Shadow, because it mantains the font's natural appereance. For the date text we're using #CCC and size 13. For the "slide to unlock" we're going to use #FFF and opacity 25%, size 20.

FINAL RESULT

To finish, apply the icons and the name of your provider at the top, above the 20px high rectangle. All the icons we also create using only rectangles and lines, play a little bit wih it! The PNG file has all that has been done.