Create A Realistic Video iPod Nano In Photoshop

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’s
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.

Click the add layer mask on your new right screen highlight layer, make your foreground color black, and select the gradient tool. Make sure you have transparency checked and open your gradient menu and select the foreground to transparency gradient.

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.

Sharing is Caring
  • http://www.designfollow.com/ designfollow

    thanks for the tutorial.

  • tonyjenkins

    It doesn't look realistic. It looks like an illustration.

  • http://www.electroniccigarettesinc.com e cigarette

    Interesting mockup!

  • thephotoshopper

    hey.. this is good.. very detailed!!
    but tracing the original image kind of defeats the purpose. :P

  • Sneh Roy

    super awesome tutorial! I loved it!

  • http://slodive.com/ SloDive

    Well it depends on what your purpose is. Mine was to show layer order and how to look at an image and then break it down into something you can work with in Photoshop. On a side note, I did have to do this for a job recently where I needed a very hi res image and something that wasn't copyrighted. In this case it was just as easy to do my own illustration using the photo as a reference.

  • http://slodive.com/ SloDive

    My goal was to recreate the image from the Apple site. It's obvious the original image was touched up a bit but that doesn't matter. As long as it looks like the source then I'm happy.

  • http://slodive.com/ SloDive

    Awesome!

  • http://www.clippingimages.com clippingimages

    Awesome tutorial. Very easy and well defined tutorial. Thanks for sharing this nice tutorial post.

  • itpixels

    wow, very nice and shiny… it's really photo realistic… hope to see more of this king of thing coming… how about realistic tomato or apples? thanks.. :)

  • wholesale e cigarette

    Very good. I like it.

  • http://www.adasport.com/ Animation Clips

    Very easy and well defined tutorial. Thanks for sharing this nice tutorial post.

  • http://slodive.com/ SloDive

    Thanks for your appreciation.

  • Capital Gold Group

    Loved the photos.”iPod Nano” nothing but a great invention.Good tutorial as well..

  • brisbane house painterbrisbane house painter

    thanks for provide the knowledge

  • success in network marketing

    good post to take the knowledge for i pod

  • Total Protect Home Warranty

    super awesome tutorial! I loved it..but tracing the original image kind of defeats the purpose.Thanks for compiling such a detailed tutorial buddy bookmarked for sure.

    • SloDive Admin

      Glad you liked it. Thanks.

  • unwanted gold

    Tutorial was fantastic. Very easy for person who does not has any idea about it. It was very detailed!!

    • SloDive Admin

      Glad you liked it.

  • Copywriting

    Awesome tutorial. Very easy and well defined tutorial. Thanks for sharing this nice tutorial post.

  • healthy chocolate

    That’s a great tutorial i must say…very informative as well!!thanks for providing such information.

  • $unny

    Great tutorial shared very much detailed info given about the photoshop with the images……….nice post

    • SloDive Admin

      Thanks for your appreciation. Hope to see you around more often.

  • Shaped rubber band

    i love these things. Everyone should get some

  • Black Bathroom Vanity

    thats very cool article thanks for teaching in a step by step manner it was very easy to get an idea by this way it was really very useful will look fowards for more such articles

  • Kevin Avent

    amazing i pod. loved it a lot. the tutorial is made to perfection. apple is apple. it is just the best. great i pod.

  • Evan Barshack

    ipod nano rocks. amazing gadget to hang around with. Apple is Apple!!!!

  • Mykalai Kontilai

    Wow… that is simply amazing! I love to do this and will recommend it to my graphic design teachers!

  • Jack BrandOwner

    amazing features and specifications. i am gonna buy it soon. thanks for this useful information.

  • Manuel Garcia

    I’m a little bit confused. What’s the purpose of recreating this gadget using Adobe Photoshop if you already have the real image. I mean, if your purpose if for composition, then cutting the image will do the job. Any other purposes?

  • http://www.geekandblogger.com Pavan Somu

    Wow! It’s really a great reference for me to come back each time I want to improve my abilities in design. These days, you can create anything with Photoshop.

  • Bev

    Great job I can’t tell the difference!

  • Jai

    Nice tutorial here. You did a great job in making this tutorial very understandable. Great post!

  • http://designreflect.com/ Simrandeep Singh

    Easy to understand tutorial. Sometimes I try these photoshop tutorials to sharpen my skills. Thanks for the share :)

  • Prabha

    This tutorial is so easy to create a realistic video ipod nano in photoshop and the ipon is so realistic that its hard to believe that it is made in photoshop.

  • Bhring Nath Prasad

    Its an awesome ipod nano tutorial for photoshop and the ipod looks very real its an amazing tutorial.

  • Bhring NAth Prasad

    Really nice tutorials and i just love these tutorials doing again and again.