When I got my iPod I decided to make a design of it in Photoshop, and figured while I’m at it, why not make a tutorial on it. I have a silver 8GB 3rd generartion iPod Nano. Here is what the final result of this tutorial will look like.

So we start out 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.

Using Guides

I like to use guides to make sure everything lines up evenly, and it’s easier to put thing’s in place with snap turned on.

So drag out some guides so you have something like this.

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.

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 black to dark gray or:
#000000 – #45494d

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 8pt font size with the same gray as the main base gray color:

#7d7d7d,

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

Use the pen tool to draw an arrow, or use a triangle custom shape if you prefer, 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. Draw a 1 pixel line the lenght of the arrow’s width, and move it next to the arrows.

Select the 2 arrow layers and the line layer, and duplicate them, and press Ctrl +T , right click on the canvas, 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.

It should look similar to this now

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:

Gradient Overlay Settings

And that’s all folks. The design of an iPod Nano in a nutshell. I hope you enjoyed this tut, and was able to design the iPod of your dreams with it.

You can download the original PSD if you want, to see the layer structure, and layout I used.

Now, I have a question for everyone concerning Apple.

If Apple can make something as groundbreaking as the iPod, and iPhone, then why are they unable to take over the operating system, and computer market? I mean everyone is aware of the negative characteristics of Microsoft Windows (ie: viruses, spyware, crashes etc etc.), so Apple just needs to move in and stomp Microsoft out, and that’s that.

What are you’re thoughts…?