First introduced by Winamp, skins allow MP3 players to veer sharply from the cliches rampant in audio hardware. In audio components, it seems black means high tech, silver means solid state, yellow means waterproof.
Winamp allows you can choose from over 2000 user contributed interfaces, from the futuristic to an antiqued woodgrain look. However, this tutorial has taken the concept even further, not only by teaching you how to design a clean and futuristic skin interface, but also allows you to have complete control over the end-user interface from the appearance and positioning of buttons to whether or not the volume control can be turned all the way up to 11.
Planning and Sketching
A good habit to start with any design is to sketch out the layouts and ideas on paper. The pencil helps flesh out the rough layout with ease.
Creating the main shape of the Skin
Using the Circle Marquee Tool, create a circle with circumference of 670px. Colour: #cccccc
Add a new layer above the circle, use a Soft Brush of different shades of grey and white, size 250 px, 20-30% opacity, to create a 3D effect/shading for the base of the player.
Using the Circle Marquee Tool, draw a circle size 503px in circumference, colour #222222. Position it to the middle on top of the grey circle.
We are going to define the positions of all the buttons of the player. It is best to start creating the bigger shapes in flat colours first, instead of spending huge amount of efforts making the buttons look good and realised that you have made them in the wrong size/colour.
Create new layer, name it Stop Button.
Draw a rectangle box colour #7b7b7b. Give the rectangle a perspective.
Edit - Transform - Perspective - OK
Position it to the bottom of the player then click on the MASK ICON. The top and the bottom of the rectangle will be 'hidden', like the below. Check your layer, it should be the same as the bottom image.
Right click on the layer, Rasterize Layer. Your layer should look like what I have below.
Now use the Circle Marquee Tool, set the width and height to 530px. Using this smaller circle to delete part of the rectangle, leaving a curve on top of the rectangle. You will get similar to this image.
Using the above steps, to create the rest of the buttons.
Now that you have layed out the bigger picture of the media player, it is time to render it with shades, icons and text.
Adding details to buttons
Stop Button:
Add a new layer, draw a square.
Double click to go to Layer Properties. Tick Inner Shadow and Outer Glow and adjust to the following settings in the images below.
Click on the layer of the rectangle, then CLT + click on layer, this will select the rectangle. Add new layer, using a soft brush with low opacity and over over the sides of the button to get the effect below.
Add a reflection on another new layer. You may use white paint and paint over the new layer then use the eraser tool to erase part of it. Bring down the opacity of the layer to get similar to the image below.
Using the same method above, create the rest of the buttons like what I've done. Try playing around with the settings in Layer Properties to get different shadings.
Now, we will be working on the circular buttons.
Add a new layer, draw another smaller circle on top in a light shade of grey, right click - Layer Properties - Stroke. Colour of stroke is white.
Add new layer, create another inner circle, right click - Layer Properties. Adjust the gradient similar to what I have here.
Download the DTP Dingbat Font , and insert the film icon into the circle. Repeat the same steps for the bottom circle. Download GUIFX Dingbat Font and insert the FX icon.
Repeat same steps for the volume portion. I am sure by now you are quite familiar with Layer Properties. I have used GUIFX Dingbat Font for the volume icon.
Let's now create the Minimize, Restore Down and Close buttons.
Draw a rounded rectangle, radius 8px.
Edit - Transform Path - Perspective
Ctl + T - Rotate the rectangle to an angle
Select the FULL CIRCLE then click on the mask icon. (Please refer to the STOP BUTTON above . They are the exact same steps.)
Using the Rectangle Marquee Tool to create the Minimize and Restore Down icons. You may use the letter 'X' for the Close icon. Remember to create new layers, each icons should be on different layers. Use the pencil tool to draw lines, separating the icons. Go to Layer Properties - Gradient Overlay. Give it a subtle shading.
Creating the Screen of the Player
Almost there! Here, we will be adding circles with Stroke and Gradient Overlay on top of each other.
Draw a small grey circle (new layer).
Right click - Layer Properties - Tick Gradient Overlay and Stroke. Adjust to the settings below.
Using the same concept above, continue to add on circles on top of each other, and play with the settings under Layer Properties to get to the picture below (Number 4).
Adding Icons and Content
Now, we will be adding in details to the skin. Using the Pen tool or the Marquee Tool, draw icons like the ones I have below. I've added in a slight out glow and Gradient Overlay. I have also added in the time.
Using the Rectangle Tool, draw a thin grey line.
Right click - Layer Properties. Adjust to the settings below.
Draw another rectangle, same height but with a shorter width. Right click - Layer Properties. Adjust to the settings below.
Using the Type Tool, type in the song title, and the timings.
For added realism, I've added in some more icons using the GUIFX Dingbat Font.
Fine tuning: Adding in separation bars for the buttons
Using the Pen Tool, draw a shape like what I have in the picture. Go to Layer Properties - Gradient Overlay. Adjust the colours and settings like what I have below.
I've done the same for the rest and this is my result.
Conclusion
Within the audio realm itself, we're likely to continue to see new developments in interface design, if only because audio remains a unique application, less entrenched in the desktop metaphors of most document-based programs. And in audio and elsewhere, there are yet more opportunities to break the existing conventions of interface design: The uncoupling of interface from the underlying software's functionality in MP3 players and other software encourage a whole new generation of designers who no longer need to be part of a larger development team in order to share their insights into user interface.
This is the final result of my player, after some fine tuning and adjustments. Hope you enjoyed this tutorial on How To Create a Clean and Futuristic Media Player Skin.
