Illustrated designs - http://www.illustrateddesigns.com
Skin for MP3 Player Zune
http://www.illustrateddesigns.com/articles/2750/1/Skin-for-MP3-Player-Zune/Page1.html
By Art-D !
Published on 02/5/2007
 
Create Skin for MP3 Player Zune in Photoshop CS Skin for MP3 Player Zune
Design your very own zune MP3 Player interface in Photoshop.

Skin for MP3 Player Zune - part 1
Skin for MP3 Player Zune

Design your very own zune MP3 Player interface in Photoshop.

Open a new file with 395x612 px and 72 dpi. The next shown instrument will help us to represent the background for the next Media Player to be.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Gradient?s parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Select after that the following tool and create the basis for the Media Player?s corps to be.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Bevel and Emboss

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 2
Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Gradient?s parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Use firstly the next tool to represent the zone under the screen.
Then apply this instrument and press on Shift button to create the layer for the button.
When pressing the same Shift button and using the next tool , it?s possible to represent the connection between them.
Their shapes may be corrected with the following tool .

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 3
Gradient?s parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Using the next tool , create now the layer reserved for the Media Player screen.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Gradient?s parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Take the following tool and create inside the screen a panel designed for the control play, colored in black.

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 4
Take the next tool and create now an element of the corps designed for the Media Player button.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Gradient's parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Using the previous instrument, represent the button itself.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Inner Glow

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 5
Blending Options-Gradient Overlay

Create Skin for MP3 Player Zune in Photoshop CS

Gradient?s parameters:

Create Skin for MP3 Player Zune in Photoshop CS

Select another instrument, that one shown here and represent the battery indicator of white color.

Create Skin for MP3 Player Zune in Photoshop CS

Take the next instrument and create another part of the battery indicator: First we need to create the outside edges, then click on Alt button and cut out the interior part (the layer?s color - 858384).

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 6
Write the name for the track:

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Select the following tool and represent the Play indicator colored in white.

Create Skin for MP3 Player Zune in Photoshop CS

Take again the next instrument and try to create the other not passable part of the Play indicator. Its color should be 666465.

Create Skin for MP3 Player Zune in Photoshop CS

Press the Alt button and click between the layers for the colors to be applied in limits of the Play indicator:

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 7
Create Skin for MP3 Player Zune in Photoshop CS

Select the next instrument and draw this time the play equalizer, colored in white.

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Introduce the time past and left for playing the song.

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 8
Select after that the instrument to represent the Play sign (a white triangle)

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Now we should take the following instrument and create one more button for controlling the media Player, colored in 272727.

Create Skin for MP3 Player Zune in Photoshop CS

Blending Options-Stroke

Create Skin for MP3 Player Zune in Photoshop CS

Place this new made layer and place it the way it is shown in the picture below:

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 9
On the button represent now a pointer colored in B6B5B6, drawn with the same instrument used before .

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Take the previous instrument and add another one to represent on the other button a triangle and the pause indicator (the color is B6B5B6)

Create Skin for MP3 Player Zune in Photoshop CS

Create Skin for MP3 Player Zune in Photoshop CS

Write now the title for the big button, keeping the demands from the next table inserted here:

Create Skin for MP3 Player Zune in Photoshop CS

Skin for MP3 Player Zune - part 10
Create Skin for MP3 Player Zune in Photoshop CS

The final result!

View full size here.