As many of you know, Apple released their new generation of iPod nanos recently.  I was really excited, because I love the way that Apple designs all of their products – sleek and shiny.  Then I thought to myself – wait, isn’t that how I like to create things in Photoshop – sleek and shiny?  Why don’t I try making the new nano in Photoshop, and writing a tutorial on how I did it?  So, as a result of that thought, I wrote this tutorial.  Enjoy!

Final Result

Here is the super-cool, almost photo-realistic iPod nano that we will be creating today:

Step 1

Open up Photoshop, and create a new document of the size 500 x 950 pixels.  Fill the background with whatever color you want – I used white in the example, but one of the nice features of this tutorial is that you can change the background to whatever color you want without lowering the quality of the nano or its reflection.  So now, grab the Rounded Rectangle Tool, set the corner Radius to 2px, and drag out a shape similar to the following:

Step 2

Now let’s make the iPod look 3D by adding a gradient overlay style to it.  Double-click the shape layer, go to the Gradient Overlay section, and enter these settings:

Gradient Overlay

Gradient

And now you should have this:

Step 3

To make the shape look even more 3D, let’s warp the top and bottom edges of it.  Take the Pen Tool (P), hold down Ctrl, and double-click one of the edges of your shape to go into path edit mode.  Add a new anchor point to the middle of the top side of the shape by hovering over it and clicking.  Press the up arrow a couple of times to move the new anchor point upwards.  See the image below to understand what I mean:

Step 4

Now do the same thing from Step 3, but this time do it on the bottom of the shape, and press the down arrow instead of the up arrow.  After this, you will have something similar to:

Step 5

To create the hold switch (the slider at the top of the iPod), get the Rectangle Tool (U), and drag out a very small rectangle at the top left of the iPod.  You can look at the image at the end of this step for a placement reference.

Drag the new shape layer below the iPod shape, and then apply a simple Gradient Overlay to it:

Gradient Overlay

Gradient

And you should have this:

Step 6

Now let’s start building the screen.  Since the new iPod Nano has a border surrounding the screen, we’ll start there.  Get the Rounded Rectangle Tool (U), set the Corner Radius to 9px, and draw out a shape about this size:

Apply these styles to the new shape:

Inner Shadow

Inner Glow

Satin

Gradient Overlay

Gradient

Stroke

That should give you this:

Step 7

Now let’s do the actual screen.  With the Rounded Rectangle Tool still selected, change the Corner Radius to 3px, and drag out another shape about this size:

And then apply these styles to it:

Inner Shadow

Inner Glow

Gradient Overlay

Gradient

And the result:

Step 8

This is the fun part of creating the screen – shining it up.  Create a new layer above the screen layer, get the Elliptical Marquee Tool (M), and drag out a selection similar to this:

Press Ctrl + Shift + I to select inversely, and then fill the selection with white (D, X, and Alt + Backspace).  Deselect everything (Ctrl + D), make sure that the new white-filled layer is right above the screen layer created in the last step, and go to Layer>Create Clipping Mask (Ctrl + Alt + G) to make a clipping mask of the white layer.  Finally, lower the opacity of the new white layer to 20%, and you should come up with this:

Step 9

Now what’s an iPod without a control scroller?  Making the controller is fairly simple, as you’ll find out.  Get the Ellipse Tool (U), set your foreground color to #eff0f3, and drag out a shape like this:

With the Ellipse Tool still selected, change the Action to “Subtract from shape area”:

Make sure that your menu shape is selected, and drag out a smaller circle in the center of the shape.  You should get something like this:

Step 10

Now that we have the basic shape of the menu finished, we need to start adding the menu items.  Take the Text Tool (T), and click at the top of the menu to create a new text layer.  Type in “Menu”, change the font size to 19.5pt, change the font color to #9aa0ae, and set the font to something similar to Arial (I used a font called Candara).  Position the new text layer in the center of the top of the menu, like in this image:

Step 11

To draw the fast-forward symbol, turn on the grid (View>Show>Grid, or Ctrl + ‘), get the Pen Tool (P), set your foreground color to #9aa0ae, and draw a shape like this:

Scale this arrow down to less than half of its original size, then duplicate its layer, and move the new layer over so that the new arrow is just on the edge the old arrow’s tip.  See what I mean:

Get the line tool (U), set the Line Weight to 3px, and draw a line next to the two arrows like this:

Step 12

To make the rewind button, first group all of the layers for the fast forward button together (the two arrows and the line), and then duplicate that group.  Press Ctrl + T to transform the new group, right-click on one of the arrows, and then select Flip Horizontal.  Move the new group to the left side of the control, and you should get this (by the way, you can turn off the grid if you want to):

Step 13

To create the play/pause button, duplicate the fast forward group again, and move the new group to the bottom of the control, like this:

Now open up the new group, and delete the second arrow from it.  Then duplicate the line, and move the duplicate over a couple of pixels like below:

We’re done with the controls!  Here is what you should have so far:

Step 14

We are now done with the iPod!  This is where it gets fun – in this step, we’ll add a nice reflection to the ground below it.

Select the iPod shape layer (the big blue one), hold down the Alt key (duplication), and drag a copy of that layer below itself:

Transform this new layer (Ctrl + T), flip it vertically, and move it down so that the top of it is just touching the bottom of the original layer:

Add a layer mask to the new layer (Layer>Layer Mask>Reveal All), and get the gradient tool (G).  Reset your colors (D), swap the foreground/background colors (X), and set the gradient to a black-to-transparent gradient:

Select the new mask on the duplicate iPod shape layer, hold the Shift key down, and draw a gradient like this:

Lower the reflection layer’s opacity to around 50%, and that’s it for the iPod reflection!  You should now have something similar to this:

Step 15

It’s looking pretty slick!  The final step is to create a small shadow underneath the iPod.  To do this, create a new layer underneath the original iPod shape layer, and then grab the Elliptical Marquee Tool (U).  Make sure that your foreground color is black (D and X), and make a selection about this size:

Fill the selection with black, and then deselect everything (Ctrl + D).  Go to Filter>Blur>Gaussian Blur, enter 6.5 for the blur radius, and press enter.  If you want, you can transform (Ctrl + T) the shadow a bit, and maybe move it down to make it look more realistic.

And that’s it!  You now have a slick glossy iPod Nano 4th Gen that you can show off to your friends.  Here is the final result: