Create Apple iPod Nano In Photoshop

apple ipod psd

Learn how to paint / recreate an object in Photoshop from an existing photo. This is a great exercise for working on your layer structure and pen tool skills. Breaking down the object and being able to separate and place in the correct order is what will take your artwork to a whole new level

iPod Tutorial

The image below is what we will be making which is entirely done in Photoshop (minus the Emperor Pope image) and will hopefully give you a better understanding of how to recreate an object in PS.

Step 1 – Find Reference Image

Before we get started let’s find a reference photo so we know what we are working toward. I went to Apple site and grabbed one there.

Step 2 – Cutout iPod

In order to get the basic shape easily and accurately I cut the image out and place it on my document.

Step 3 – Create Selection

To select the iPod hold down control and click on the iPod layer.

Step 4 – Fill Selection

Once it is selected, create a new layer and name it base. Now fill (Shift + Backspace) the selection with a neutral gray on the newly created base layer.

Step 5 – Use Pen To Trace Outer  Edge Of The Top Of iPod

Now that we have our basic outline we can start getting into the fun stuff. Create a new layer above the base layer and name it top. Now hide (click eye in layers palette) the base layer and zoom in at the top part of the iPod. Make sure the top layer is still selected and grab the pen tool and go around the outer portion of the top. Convert the path to a selection and fill with red. If you hide the original layer and turn the base back on you should have something that looks like this.

Step 6 – Trace Inner Portion Of The Top Of iPod

Ok, now let’s do the inner portion of the top the same way. Hide all layers except original ipod, make new layer at the very top called top-inner, use pen tool, go around the edges, change to selection and fill with a light gray.

Step 7 – Create Left Highlight Layer

Go ahead and make a new folder and place both of the top layers in the new folder and call it top. Much easier to work when we keep things organized.
Let’s create the two highlight bars that run down the sides of the iPod. Create a new layer above the base layer (below the top folder) and call it left highlight. Hide all other layers so the original iPod can be seen. Control click on the base layer so that the shape of the base is now selected. Grab the rectangular marquee tool, hold down alt (option on mac) and you should see the cross hairs with a minus sign beside it. Anything you highlight with alt held down will remove part of a selection. Simply drag around the right
half of the base and stop right on the highlight line. If done correctly you should now have you selection made. Just fill with a light gray and that’s it.

Step 8 – Create Right Highlight Leaving The Left Side To Overhang

Getting the right highlight is almost the same except the line is not a 90 degree angle so we will have to add an extra step.

Create a new layer above the left highlight and name it right highlight. Hide all layers except the original iPod layer and load the base layer selection again. Grab the rectangular marquee tool and hold down the alt (option for mac) and coral from left to right stopping before reaching the highlight edge. Now fill the selection with gray.

Step 9 – Use Pen Tool To Remove The Excess & Get The Correct Angle Of The Left Side Of Right Highlight

We have all sides perfect except for the left edge. Lower the opacity on the right highlight layer enough so you can see the actual highlight edge on the original iPod. Now grab the pen tool or magnetic lasso and click just above the highlight edge and then click just below the edge giving you the exact edge degree for this side. Complete the path making sure to go around all of the unneeded right highlight fill and delete it. That’s it for the right highlight.

Step 10 – Use Elliptical Marquee To Trace Menu Interface & Fill Selection

In the spirit of tidiness let’s take the left and right highlight layers along with the base and place in a new folder called base. Make sure this folder is under the top folder in the layers palette.

Alright, make a new layer above all the others and name it menu. Hide the two folders revealing the original iPod layer and select your elliptical marquee tool. Make sure you are on your newly created menu layer and draw a circle around the the main menu on the original and fill with a dark gray.

Step 11 – Hide Menu Layer & Trace The Button With Marquee & Fill

Make a new layer above the menu layer and name it menu button. Hide all layers below except original and use the elliptical marquee tool again to draw a circle around the menu button and fill with a slightly lighter gray. Colors are completely irrelevant right now for everything. Our only concern is that they differ enough so we can tell what is what.

Ok let’s see what we have now when it’s all put together.

Step 12 – Use Rounded Rectangle Tool To Draw Outer Edge Of Screen While Adjusting Radius

Place the menu and menu button layers in a new folder called menu which should be at the very top. Create a new layer above the others and name it screen. Since the corners of the screen are rounded we are gonna
choose the rounded rectangle tool. Once the tool is selected, adjust your corner radius to match the screen corners on the iPod. For me, 5px worked perfect. It may be different for you depending on the resolution you
are working in.

Step 13 – Fill Selection and Use Warp to Shape Rectangle To Match Image

As you can see in the pic above, draw around the outer edge of the screen once you have adjusted the radius settings to your liking. It will not be a perfect match and that’s ok. Just get it as close as possible.
Convert the path to a selection (right click choose make selection) and fill with red. Now go to edit transform and warp. Now just pull in the corners to align them with the original. The sides of the screen should also be pulled in just a touch since those are not 90 degrees angles.

Step 14 – Repeat Same Steps To Create Inner Portion Of Screen

Make a new layer above the screen layer and name it screen inner. Follow the exact steps as above but this time draw around the inner part of the screen. The radius used on the inner section was 2px. Once completed move both of those layers in to a new folder called screen and you should now have something that looks like this.

Step 15 – Time To Style

Well that’s it for most of the drawing. Time to start styling and bringing the drawing to life. Make a copy of the original iPod layer and move it above the other layers. Now Slide the layer up just enough to see the bottom of your iPod. Now go to your base layer and double click it to open the layer styles
window. Check the gradient overlay button and follow the steps below.

Step 1 – Change the angle from 90 to zero degrees. This will force the gradient to go on a
horizontal path (left to right) instead of the default vertical axis which is top to bottom.
Step 2 – Click on the gradient color bar to open the gradient editor
Step 3 – To change the color of the gradient we need to select the color stops we wish to alter.
By default there will be two. One on the far left and one on the right.
Step 4 – For each stop you can select a color which will gradually blend into the color of the next stop. Once you have selected the stop you wish to change the color of (see step 3), click on the color swatch to open the color picker menu.
Step 5 – Once the color picker window is open, hover over the original iPod layer (you should see  an eyedropper tool) and click on the darkest part of the middle section, just to the right of the left highlight.

By clicking on the iPod layer, we are selecting the exact color from the image and making it the color of our left color stop. Click ok to close the window.

Step 16 – Complete The Gradient For The Base Layer

Now that we know how to adjust the gradient, all we need to do now is finish picking the colors. For the left color stop my color is #787879 and then I grab the far right stop which is #e8e8e9. Now even though you selected colors straight from the iPod image they may not look quite. That’s because
your base layer spans the entire width of the iPod but what you are actually styling is just the middle section of the base layer. The left and right sides are covered by the highlight layers. So to adjust for this, once you have the left and right color stops color selected, hit ok to close the gradient editor and start sliding the scale bar down until you get your left and right colors matching the image. For me it was 57. Once that is fixed, go back in the gradient editor and make the tweaks needed to get your gradient to match. For me, I added a third stop in the middle which is #adadae and I
moved the middle and right stops down just a bit until I got what I was looking for. This is where you just play around for a while until you get the result you want.

Step 17 – Setup Left Highlight Gradient

For the left highlight layer, I used 4 color stops and the colors used are (from left to right):

1. #4b4b4c
2. #737374
3. #555556
4. #929293

I adjusted the scale to 95% and moved the far right color down a bit.

Step 18 – Setup Right Highlight Layer

To get started on the right highlight I copy the layer style from the left layer and paste on the right. Then open the layer styles and reverse the gradient. I unchecked the align with layer so that I have a little more control over the angle and the change it to -2. The scale has also been changed to 37. The colors used are:

1. #191919
2. #b8b8b8
3. #fefefe

Once that is completed I created two more layers, one called black and the other white. I loaded the right highlight selection and just gave it a little more of a darker edge on the bottom using a soft black brush and lowering the opacity of the layer just a touch. For the white layer I loaded the right
highlight layer again (control click to load selection) and used a soft white brush to bring out the left edge a little and also lighten the bottom part of the gradient.

Step 19 – Style The Top Layers

Styling the top is pretty simple. Just fill the top-inner layer with a solid black. For the top layer I just do a gradient overlay going from a dark gray to a light in the front. I also added two extra highlight layers. I gave the right side of the top a little black shading with a soft brush. On the other layer I added a little white soft brush hightlight on the front left portion of the top layer.

Step 20 – The Outer Menu

Not a lot going on here. The layer styles settings used are posted below. Note that I used a gradient overlay but as you can see with the color settings that a color overlay would have worked as well.

Step 21 – The Menu Button

The layer styles settings for the menu button are:

Step 22 – The Menu Text

I used Verdana Bold 9pt for the menu text. I’m not sure what is used on the iPod and to be honest it is not a major concern. As long as it’s close then that’s all I need for text that is so small. The triangles are wingdings3 8pt letter “t”. You can also use a pen tool to create you own triangle and fill with white. The pause button was created by drawing a rectangle and filling with white. For all of my characters I dropped the opacity down just a touch for a slight off white look. I also used the free transform tool on all of the pieces and gave them a slight rotation.

Step 23 – The Outer Screen

Ok time to style the outer screen so you have something that will look like the image below. Copy the styles settings to achieve this look.

Step 24 – The Inner Screen

Again, I’m just using layer styles for the inner portion of the screen.

Step 25 – Draw & Style The Top Button

Use the pen tool to draw the shape of the bottom part of the button, convert path to selection and fill with any color on a new layer. Now follow the style settings below.

For the top part I used the elliptical marquee to draw the top of the button, made a new layer, and filled with any color. Now use the style setting below.

Step 26 – Create Screen Highlights

Since the screen highlight is the same as the one for the base, there is no need to draw it. Simply load the selection of the right highlight in the base folder. Once it is selected, create a new layer in the screen folder making sure it is sitting above the layers in the folder and fill with #b8b8b9. Now load (ctrl click layer) the outer screen layer, select inverse, and delete. Now we have a copy of our base highlight except it only sits on top of the screen portion of our iPod.

Make sure your layer mask is selected and not the actual layer and drag the gradient line from just outside the right edge to about halfway through the highlight bar. Using black on the layer mask will hide anything that is painted on. By using the gradient tool, we can achieve a nice & slow gradual fade. Once I’m happy, I lower the opacity to 28 and yours should now look like this:

Follow the same steps to create you left highlight bar. I did not use a layer mask on this one and simply filled with the same color as right and lowered the opacity to 6.

Step 27 – Final Image

Now simply find an image to place on the screen, size it correctly, and place under the two screen highlight layers and we are done. I hope this was a helpful tut and if you have questions please post in the comment. Oh and good luck finding a cooler image than my Emperor Pope pic.