The finished item!

1. The body

In this step, we will work on the main part of the iPod. Create a new document about 300 by 400 pixel and fill it with white. Then create a new layer (always a good first step when beginning a new Photoshop image - you never know if you will go back and fill the background layer) and take the Rounded Rectangle Tool (U) and in the Options bar, make Radius 20px. Now switch to the Paths Palette and click on the "Load Path as Selection" icon at the bottom of the palette. This will get marching ants going around your rounded rectangle. Return to the layers palette and,using the background color #F2F2F2 (make sure Only Web Colors is unchecked when you choose the color) draw a rounded rectangle like below.

LAYER...Layer Style

Drop Shadow: Angle: 147px; Distance: 4px; Spread: 0%; Size: 8px; and leave the rest of the settings as they are.
Inner Shadow: Blend Mode: Normal; Color: #FFFFFF; Distance: 5px; Choke: 0%; Size: 9px; and leave the rest of the settings as they are.
Outer Glow: Leave the settings as they are.
Bevel and Emboss: Depth: 11%; Size:13px; Soften: 16px; and leave the rest of the settings as they are.
Stroke: Size: 1px; Color: # F8F0F0; and leave the rest of the settings as they are.
Once you are done applying all the settings above, you should come with something like below.

2. The screen

Now we will work on the LCD panel of the iPod. Once again create a new layer and with the Rounded Rectangle Tool change the Radius to 10 px like mentioned in step one and draw the LCD Panel like below (remember, switch to the Paths palette and click the "Load Path as selection" icon), return to the Layers palette and fill with the color #CFCFC7.

LAYER...Layer Style

Inner Shadow: Opacity: 30%; and leave the rest of the settings as they are.
Bevel and Emboss: Leave the settings as they are but make sure "Direction" is Up..
Stroke: Size: 2px; Position: Inside; Color: #333333;

Before we begin adding the text to the screen, I cannot state how important the use of layers is. In the example to the right, I used separate layers for almost everything - even the">" characters! This enables precise positioning, altering the opacity of the layers etc. etc (because the characters on a real screen are never totally black.

I even created one of the "power indicators" in the battery icon on a separate layer. Doing this allowed me to simply duplicate this layer a few times, thus ensuring accuracy of each power bar.

LAYERS! Use 'em!

Now, in this tutorial I used the font Arial Narrow to type the menu. You can use the same font or any font that you think would fit best. Then, type iPod on the top of the LCD Screen like shown below. Make a new layer and using the pencil tool draw a horizontal line underneath it.

This is the essence of Photoshop - the zooming in and careful use of marquee tools, line tools, layers, transparency etc. Once you start achieving results like at the end of this tutorial, you're getting there!

1, 2>>