Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Drawing Techniques Ipod in photoshop

Ipod in photoshop

First let's make a new document. 300x400 should be good.

Now select the Rounded Rectangular Tool. Set the radius to 10 and make the shape of the iPod. Don't make it the same hight and width of the document. Leave some empty space. Color should be black (or white...depending on the iPod model).

Go to Blending Options and ad an inner glow:

image 1

Now let's make the Controller. Get the ellipse tool and make a perfect circle. For the color chose #2C2C2C. Make it to look just like in the image below:

image 2

Now make another black circle in the middle of this one. Make it smaller.

So far so Good. Let's ad some effects.

To the big circle ad a gradient from #484848 to #060606 and chose -45 as the angle. Also ad an inner glow. Color is #1c1c1c and size 1.

Now let's ad the text to the controller. I guess any one has seen an iPod, at leas in a photo. Get the text tool and type: MENU. Color should be white and font Arial, bold, size 10. Place it at the top of the big circle.

Now let's make the next and previous buttons. Make and arrow. Color white. This can be easy made by selecting the Custom Shape tool, get the Arrow 9, draw the arrow and using the Direct Selection Tool select the last 2 points and drag them until you have this shape:

image 3

Now duplicate it and move it to the right. until the head of the first connects to the rear of the second one. Also ad a rectangle the same hight as the arrows.

You should now have this shape:

image 4

Scale it down and place it to the right of the big circle. Now duplicate it and rotate it 180 degrees. Move it to the left of the circle.

Using the same technique make the play/pause button.

Now you should have something like this:

image 5

Starting to look good no?

Let's ad the screen. Make a rectangle an place it in the top part of the iPod. Color should be a light blue. Something like #ecf9ff.

Remember to use a photo as a reference. This way you know exactly where to place the items.

Let's at the top part. make a rectangle the same with as the screen and about 16px hight. Place it at the top of the screen. Ad this gradient to it:

image 6

Using the same technique as for the play buttons make another arrow and place it on the left top corner of the screen. ad the color #446bea to it.

Now let's make the battery indicator.

Make rectangle and using the anchor points and Direct selection tool make this shape (you can clearly see the anchor point there):

image 7

Ad this gradient to it (and also a black 1px stroke):

image 8

Type: "Now Playing" with a black color, Arial font and size 10. Place it in the middle at the top of the screen.

Below, on the left side write the number of the track...for example: 6 of 24.

Now let's ad the track/album thumbnail. Search for a thumbnail of an album on the internet. Scale it an place it under the text that you have just written. Next to it write the Song title, Artist and Album name.
Now you should have something like this:

image 9

All what is left to do is create the progress bar. To do this first we have to create a new pattern. Here is the pattern (made for a 10px hight progress bar):

image 10 ----->zoom at 1600%--->image 11

Once you have this pattern created go to: Edit->Define Pattern. Give it a name and click on OK.

Now at the original iPod image.

Create a 10px hight rectangle that is almost the same with as the screen and center it. Ad the following gradient:

image 12

Over it make another rectangle but don't make it so long. Leave it about 2/3 of the lenght of the other rectangle. Ad the pattern that we just created and also the following gradient:

image 13

Remember to set the overlay for the gradient to Screen. Otherwise the pattern won't be visible.

Now ad the time: on the left write total time 3:45 for example and on the right remaining time...let's say -1:08.

Now we really like how it turned out...but it can be better.

Here is what we do. Duplicate the ipod layer (the black rounded rectangle one); Remove all effects from the Blending Options. Change the color to white. Get the Direct Selection Tool and select the left bottom dots and press delete. After that select the most left dot from the top and also delete it. You should now have something like this:

image 14

Ad the standard gradient to it but change the angle to 135. After that lower the opacity to the layer to about 55%.

P.S. At this point I realized I also have to change the inner glow to the black case to only 4. It looks better now.

For a better effect here is what you do.

Merge all the layers. Ad a white (or black) background. Duplicate the iPod and scale it until it is upside-down. Ad a layer mask to it. Select the gradient tool and chose the black to transparent gradient. make the gradient from the bottom of the document to where the "reflection" ends.

So here you go. You made an iPod.

Here is the final result (on white bg and also on black bg):

image 15 iPod in Photoshop

Hope you enjoyed this tutorial.

subscribe to newsletter