Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

Adobe Photoshop

Free Tutorials » Adobe Photoshop » MP3 Player Design

Learn how to create a portable media player in Photoshop.

Step 1

In this tutorial you will learn how to design a product in Photoshop. The product is a RCA Lyra X3030 portable media player. Although the chances are, you are thinking "why would I need to make it?", the reason for this tutorial is to teach people the techniques used for mocking up a product design.

Step 1 diagram

Step 2

Start with a large black canvas. Choose the rounded rectangle tool and set radius setting to 20px. *** NEED BR *** In a new layer draw a #F6F5F3 round rectangle. (width: 417 x height: 268). In your canvas, marquee select your header size which will be filled with a gradient effect. Height of 60px and width of 800px. And then add the following layer styles: Inner Shadow

Step 2 diagram

Inner Glow:

Step 2 diagram

Color Overlay:

Step 2 diagram

Satin:

Step 2 diagram

Stroke:

Step 2 diagram

You should have something similar to this:

Step 2 diagram

Step 3

Choose Select located at the top of your screen then Load Selection > Default settings.

Set your foreground color to #FFFFFF then choose the brush tool with a large soft brush.

In a new layer, paint #FFFFFF on the layer, as shown on the picture guide below.

Step 3 diagram

Step 4

Create a new layer set titled Button.

In a new layer draw a #323943 circle with the eclipse tool. (width: 95 x height: 95).

Step 4 diagram

Step 5

Once again make a new layer and draw a #40454B circle. (width: 87 x height: 87).

Add the following layer styles: Inner Shadow

Step 5 diagram

Inner Glow:

Step 5 diagram

Stroke:

Step 5 diagram

You should have something like this:

Step 5 diagram

Step 6

Make a small #40454B circle. (width: 27 x height: 27)

Add the following layer styles: Inner Shadow

Step 6 diagram

Outer Glow:

Step 6 diagram

Inner Glow:

Step 6 diagram

Stroke:

Step 6 diagram

You should have something like this:

Step 6 diagram

Step 7

With the pencil tool draw an arrow shape in a new layer.

Add the following layer styles: Stroke.

Step 7 diagram

Set layer's opacity level to 60% like below:

Step 7 diagram

Now add arrows on all sides:

Step 7 diagram

Step 8

Make a new layer set titled Screen.

Choose the rounded rectangle tool and set the radius setting to 2px.

In a new layer draw #7B7A80 round rectangle. (width: 259 x height: 195).

Add the following layer styles: Inner Shadow

Step 8 diagram

Outer Glow:

Step 8 diagram

Gradient Overlay:

Step 8 diagram

Stroke:

Step 8 diagram

You should have something like this:

Step 8 diagram

Step 9

Choose the rounded rectangle tool and set the radius setting to 2px.

In a new layer draw #2A242E round rectangle. (width: 235 x height: 182).

Add the following layer styles: Stroke.

Step 9 diagram

Like this:

Step 9 diagram

Step 10

Choose the rounded rectangle tool and set the radius setting to 20px.

In a new layer draw black a round rectangle. (width: 96 x height: 25).

Add the following layer styles: Inner Shadow

Step 10 diagram

Inner Glow:

Step 10 diagram

Color Overlay:

Step 10 diagram

Gradient Overlay:

Step 10 diagram

Stroke:

Step 10 diagram

Like this:

Step 10 diagram

Step 11

Add the word "Music" using font Verdana, Regular, 14pt, Sharp and #FFFFF color.

Now add an arrow from the Webdings font selection. "4" on your keyboard with 18pt, Sharp and #000000 color.

Step 11 diagram

Step 12

Duplicate Tab layer-set. Remove the color overlay from round rectangle tab layer-styles.

Modify text to "Photos".

Complete menu selections with Audible, Files and Set-up tabs.

Step 12 diagram

Step 13

Add the following photo to your canvas:

Step 13 diagram

Like this:

Step 13 diagram

Step 14

In a new layer draw a #121921 round rectangle. (width: 11 x height: 12).

Add the following layer styles: Drop Shadow

Step 14 diagram

Inner Shadow:

Step 14 diagram

Outer Glow:

Step 14 diagram

Stroke:

Step 14 diagram

It should look like this:

Step 14 diagram

Step 15

In a new layer, draw the pixelled image below, This will be a pattern for your speaker.

Once the pattern is in your pattern list, in a new layer draw a #FFFFFF round rectangle using the rounded rectangle tool.

Go to Select > Load Selection > Default Settings. This should add a marquee selection to the round rectangle.

While the round rectangle is marquee selected, in a new layer add the pattern using the paint bucket tool.

Step 15 diagram

Step 16

The last touch, add the logo "Lyra".

Step 16 diagram

So it is centered like below:

Step 16 diagram

This is what your final result should look like:

Step 16 diagram

Tutorial comments

10.11.2014 -

ocaab3 says …

Hi! everybody, Our shop cheap wholesale and retail Air Jordans shoes,Air Max Shoes,Designer Handbags,Jewelry,Belts,hats,Jeans,Sports Jerseys,sunglasses online,high quality goods and Low price,outlet online,free shipping, Welcome to ==== http://www.fashionfast.net ==
nike air max shoe $42
Air Jordan (1-24) shoes $42
Jordan (1-22)&2014 shoes $42
Nike shox (R4, NZ, OZ, TL1, TL2, TL3) $38
Handbags ( Lv fendi D&G MK) $42
T-shirts (polo, ed hardy, lacoste) $14
Jean (True Religion, ed hardy, coogi)$34
Sunglasses ( Oakey, coach, Gucci, Armaini)$12
New era cap $16
Jewelry $15
FREE SHIPPING
http://www.fashionfast.net

http://www.fashionfast.net

http://www.fashionfast.net

http://www.fashionfast.net
http://www.fashionfast.net

http://www.fashionfast.net

http://www.fashionfast.net

http://www.fashionfast.net

===( http://www.fashionfast.net )===

===( http://www.fashionfast.net )===

===( http://www.fashionfast.net )===

===( http://www.fashionfast.net )===

===( http://www.fashionfast.net )===

===( http://www.fashionfast.net )===
This is a shopping paradise
We need your support and trust

28.10.2014 -

pravin0123 says …

its good!

16.09.2014 -

polo2014 says …

http://www.shopbestgoods.com/
http://www.nike-jordanshoes.com/
http://www.beatsbydreoutlet.net/
http://www.michaelkorsus.com/
http://www.polo-tshirts.com/
http://www.northsclearance.com/
http://www.ralph-laurensale.com/
http://www.gucci-shoesuk2014.com/
http://www.michael-korsusa.com/
http://www.polo-outlets.com/
http://www.ralph-laurenhome.com/
http://www.marcjacobsonsale.com/
http://www.mcmworldwides.com/
http://www.salongchamppairs.com/
http://www.canada-gooser.com/
http://www.burberryoutlet2014.com/
http://www.michaelkors.so/
http://www.hermes-outletonline.com/
http://www.oakley-sunglassfactory.com/
http://www.north-faceoutlets.net/
http://www.moncler-clearance.com/
http://www.woolrich-clearance.com/
http://www.barbour-jacketsoutlet.com/
http://www.moncler-jacketsoutletonline.com/
http://www.monsterbeatsbydres.net/
http://www.louis-vuittonblackfriday.com/
http://www.lv-guccishoesfactory.com/
http://www.mcmoutlet-jp.com/
http://www.cheapdiscountoutlet.com/
http://coachoutlet.iwopop.com/
http://www.coachsfactoryoutlet.com/
http://www.coach-blackfriday2014.com/
http://www.coach-storeoutletonline.com/
http://www.coach-factorysoutletonline.com/
http://www.coachccoachoutlet.com/
http://www.coach-factories.net/
http://www.coach-pursesoutletonline.com/
http://www.llouisvuitton-factory.net/
http://www.coach-outletsusa.com/
http://www.mksfactoryoutlet.com/
http://www.zxcoachoutlet.com/
http://www.mischristmas.com/
http://www.misblackfriday.com/
http://www.bestcustomsonline.com/
http://www.newoutletonlinemall.com/
http://www.clickmichaelkors.com/
http://www.cmichaelkorsoutlet.com/
http://www.ralphlaurenepolo.com/
http://michaelkorsoutlet.mischristmas.com/
http://mcmbackpack.mischristmas.com/
http://monsterbeats.mischristmas.com/
http://northfaceoutlet.mischristmas.com/
http://mk.misblackfriday.com/
http://coachoutlet.misblackfriday.com/
http://coachfactory.misblackfriday.com/
http://uggaustralia.misblackfriday.com/
http://coachpurses.misblackfriday.com/
http://coachusa.misblackfriday.com/
http://coach.misblackfriday.com/
http://michaelkorss.misblackfriday.com/
http://michaelkors.misblackfriday.com/
http://airmax.misblackfriday.com/
http://michael-kors.misblackfriday.com/
https://www.facebook.com/pages/Coach-Factory-Outlet-Online-Store-Michael-Kors-Outlet-Online-Sale-75-Off/712060898859091
https://www.facebook.com/pages/Ralph-Lauren-Polo-Outlet-Online-Sale/1404100279810690

07.09.2014 -

skraju29 says …

oh no,seriously a excellent post.....thank you for sharing.

19.08.2014 -

Rizvia says …

This is a great tutorial.Thank you for sharing...

View all user comments for this tutorial.

Tutorial statistics

Date added:
25.08.2007
Author:
John
User rating:
4/5
Rate tutorial:
Total views:
34399
Total comments:
511

Advertisements