Design stunning iPhone Application Interfaces and become a pro. You’ll hate to miss this tutorial. The secret of beautiful iPhone application interface design in Photoshop is a click away.

Looking awesome!  If you’ve made it this far… great job!  You’ve already learned some very useful tips on making shapes look 3D in Photoshop and creating a beautiful interface.  Now we’re going to drag the medium sized circle layer above the small sized circle layer.

Now we’re going to add the shine/gloss.  Using the Pen Tool (P).  Draw a shape that covers the entire small circle and arches (for the shine effect).

Control + Left Mouse Click on the small circle layer.

Now, in the Photoshop menu select Select > Modify > Contract and contract by 3 pixels.

Now select the shine layer

With the shine layer selected (Layer 5),  click the add layer mask

Now, Flatten the shine layer using the technique above (add new layer, select them both, merge layers).  After the shine layer is flattened, click the add layer mask again and then select the Gradient Tool. With the gradient tool selected, select a black to white gradient in the top toolbar.  Then, with the gradient tool still selected, drag a line

With the gradient tool selected drag on the stage from top of stage and down.  What this will do is “mask” out the shine layer and make it look realistic.  It might take a few click and drags with the gradient tool before you get the desired effect.

Adjust the opacity of the shine layer to whatever looks good.  We used 27%

Now we’re going to create a little extra flare on the circle using the brush tool.  But first, create a new layer above the shine layer.

Now select the Brush Tool and select the following settings.

Now Command + Left Mouse Click on the small circle layer.

Now, with the new layer we created above the shine layer selected, use the brush tool to draw a white glow at the top of the circle.

Set this layer to Overlay

Now we’re going to use a CRAZY ADOBE ILLUSTRATOR TRICK to add the separations.  First we flattened what we had so far in Photoshop (except for the background) and drug the flattened layer into Adobe Illustrator.  WARNING: MAKE SURE ONCE YOU’VE FLATTENED THE PHOTOSHOP LAYERS AND COPIED THEM INTO ILLUSTRATOR YOU UNDO THIS.  OTHERWISE YOU’LL LOSE ALL THE LAYERS.

In Illustrator, select the Pen Tool and draw a small triangle that goes from the inside of the large circle to the edge.

Now select the shape you just drew, and click Effect > Distort & Transform > Transform.

Enter the following settings.

Now select the shapes and click Object > Expand Appearance

Now, thanks to the awesome integration of Photoshop and Illustrator, we’re able to simply copy and paste the shapes into photoshop.

Add the following settings to the layer with the dividers

We now have little buttons in the wheel to separate the different application icons we’re about to add.  We also added some text to the middle circle to say “Food & Drink”

Open the file we downloaded at the beginning of this tutorial (iPhone Icons) and drag them into the Photoshop document we’ve been working in.

To these icons we’re going to add the following layer styles:

Now, we’re going to create the glow.  With the Pen Tool draw a shape around an icon.

Apply the following layer styles to this shape.

Dragging this into the iPhone graphic that we downloaded with one of the previous files, creates a SUPER realistic design.

Here is a neat mock-up we did.

That’s it!  You did it!  You are now a few steps closer to being that iPhone application interface designer you’ve always wanted to be!  Hope you enjoyed this tutorial because it took FOREVER to make

This tutorial post title says that you can “Profit”… and it is true!  The more skills you build and learn here on King Tutz Photoshop with interface tutorials and more, the more likely you will be able to take freelance work from iPhone App developers in the future.  Apple has currently sold over 17 Million iPhones! The amount of apps created for this brilliant phone increases more and more every day.  With a membership to King Tutz for $12 a month you can learn skills that will possibly increase your worth by thousands of dollars or even more!  So stay tuned, and learn like a king!