In this quick tip tutorial, we're going to be creating a nice little stylish iPhone icon for the make-believe application "Bankapp" that was part of a recently published user interface design tutorial here on Mobiletuts+.

Step 1

We will be designing our icon ready for the iPhone 4's Retina display, which requires us to design the icon at a much higher resolution of 114x114 pixels with 320dpi (dots per inch). This will make the icon appear crystal clear on the retina display. This icon is typically the one that will be seen on an iPhone's home screen. There are, however, other icons you need to think about (although we won't be covering them in this quick tip) such as the icon you see in iTunes (which can be much larger if viewed in cover view), and smaller icons such as those on your iPhone when you search.

Open Photoshop and go to Start > New and create your file. You can see my setup below.

Step 2

We obviously want to keep the same color scheme as to what was used in the original UI tutorial, so green colors ranging from #7DA000 to #9CCB01. Open up the Blending Options window for your pre-existing background layer in Photoshop by right-clicking on the layer and selecting Blending Options. Apply a gradient to your layer using the HEX codes I just mentioned.

Step 3

Create a new layer and fill it with pure white. Go to Filter > Noise > Add Noise and add around 25% noise. Change your layers blending mode to Multiply and lower the opacity of the layer to somewhere around the 20% mark.

Step 4

Create a new layer and call it "Highlights". Select a soft brush at around 65px in size, and draw a small area of white lines on your icon.

Go to Filter > Blur > Gaussian Blur and blur your white shape by around 25%.

Change the layers blending mode to Soft Light and lower the opacity to around 20%.

Repeat the same process but with a black brush on the lower side of your icon.

Step 5

For our icon to represent our "Bankapp" application, we're going to simply use the letters "Ba", standing for "bank" and "app". Select the Text Tool and make a selection on your icon. Type in "Ba". I used a nice typeface called Blue Highway.

Step 6

Right-click on your text layer and select Blending Options. Apply a Drop Shadow to your text using the settings found in the following screenshot. This will apply a sharp but subtle shadow.

Step 7

Select the Rounded Rectangle Tool. Set the radius of the corners to 20px, and then whilst holding the Shift-Key, drag out your shape. Align it to the center of your canvas and place it beneath your type layer.

Right-click on the layer and select Rasterize Layer. Right-click once more and then select Blending Options. Apply a Gradient Overlay going from #475E00 to #688500.

Apply an Inner Shadow (to make it look like the shape is engraved) and a Drop Shadow (to give the bottom of our shape a nice single pixel white line) using the settings seen in the screenshots below.

Step 8

Duplicate the layer. Right-click and select Clear Layer Styles. Fill the layer with white, and then go to Filter > Noise > Add Noise. Add around 25%.

Change the layers blending mode to Multiply and lower the opacity to around 25%.

Step 9

Lower your text layers opacity down to about 90%. This doesn't make a huge difference but just lets that little bit of subtle noise shine through.

Select the Elleptical Marquee Tool. Drag out a selection and fill it with white on a new layer.

Go to Filter > Blur > Gaussian Blur and blur your white shape. Change the blending mode to Overlay. With that, we're all done! You may be wondering why our icon doesn't have round corners - that's because the iPhone does that for us. Here's our final result: