I decided to draw my Ipod with Photoshop, and figured I would make it a tutorial as well. I have a 3rd generartion silver Nano. Here’s the final result of this tutorial, and pretty close to what my Ipod looks like.

So start by making a new default size canvas in Photoshop. Then using the rounded rectangle tool, draw out a rectangle that looks something like the image below. I used these settings:

- radius: 18
- width: 192px
- height: 250px

Then make another rectangle that is a little smaller than the width of that, and about half the height, it should look like what I have below. Here’s the settings I used for this one:

- radius: 5
- width: 175px
- height: 122px

Press control + J twice to duplicate this layer, and select both new layers in the layers pallet, and right click on them and select merge layers. Then use the rectangular marquee tool, and drag out a rectangle inside the newly merged layer, and press delete. Now it should look something like this,

I changed the color of the original rectangle to white, and made the new one that you deleted the middle of black so you could see what it should look like. This is to make the black border around the Ipod’s screen.

We’ll be changing the color and style of things later, but for now we’ll just make the basic shapes for the layout of things.

If you want. use guides to divide the rectangle up evenly, so that everything is lined up right, and looks like its balanced ok. This will make it a little easier to make the circles for the buttons and stuff.

Next, use the eliptical marquee tool and hold the shift key down to drag out an even circle in the center of the bottom half. It should be a little bigger than the size of a quarter. You can use the guides to make it line up and sized right. Just start by dragging the circle out by placing the crosshairs on a corner and drag it diagonally to the other corner. It should work out right if you divided the guides evenly.

Press Ctrl + Shift + N to create a new layer, and then Ctrl + Backspace to fill the circle in with white.

Then make another circle with the marquee tool, centered on the last one, and about half the size, or about the size of a dime.
Make a new layer and and fill that one in with a gray color,
like: #777777.

Make sure all these things are lined up correctly and look ok, and then we can start to add a little style to this thing.

Now for the first, big rectangle we made, double click on the layer in the layers pallet, or click the little f button for adding layer styles. This layer will have the styles: inner shadow, bevel, and a gradient. The images below show the settings I set for each of these:

Gradient settings
This is the gradient I made for this. This image has the color codes for it.

Settings of the gradient overlay.

Bevel settings

Inner Shadow settings

For the screen layer style, select the second rectangle we made, the original one the we had duplicated, and add a gradient layer style for it. The settings for this one are shown in the image below.

The gradient I made is just a black to dark gray or:
#000000 - #45494d

The screen gradient overlay settings:

Now add the text for the Menu button on the white circle.
I made the font of the text with Arial, and an 8 pt font size with the color #7d7d7d, same gray as the base color.

Select the Faux Bold and All Caps buttons, and change the anti-aliasing method to Smooth.

Use the pen tool to draw an arrow (triangle) pointing either left or right, and resize it to be the size of the font.

Hold the Alt key down, and press the arrow key once to duplicate the arrow move it over so it’s next to the first one. The draw a 1 pixel line the lenght of the arrow’s width, and move it next to the arrows.

Then select the 2 arrow layers and the line layer, and duplicate them, and press Ctrl +T and right click on the canvas, and select Flip Horizontally, and move them to the other side of the circle.

Duplicate one of the right arrows once, and the line twice, and move those to the bottom of the circle for the Play/Pause button.

By now it should look something like this:

The last part, is the center circle layer style. Open up the styles for that layer, and add a gradient to it. Use the Foreground to Background or Two Color gradients, and change the gradient overlay settings to match this image:

That’s it!! You should now have an Ipod Nano.

Of course you can always add a reflection to it, or drop shadow, or whatever you want but I’m not going to go into that.
I hope you liked this tutorial. Let me know if you have any questions about it, or comments for me.

Also, you can download the original psd of my design too if you like,

Download the PSD

Other Similiar Tutorials

Making an iPod Shuffle
Create an iPod Touch
Making an iPhone