How To Create a Clean and Futuristic Media Player Skin

How To Create a Clean and Futuristic Media Player Skin

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.

How To Create a Clean and Futuristic Media Player Skin

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.

Media Player Skin

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.

Media Player Sketch

Creating the main shape of the Skin

Using the Circle Marquee Tool, create a circle with circumference of 670px. Colour: #cccccc

Media Player Circle

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.

Media Player Circle Shaded

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.

Circle Screen

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

Tabs Perspective

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. 

Media Player Masking

Right click on the layer, Rasterize Layer. Your layer should look like what I have below.

Media Player Masking Rasterized

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.

Media Player Circle Delete

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.

Media Player Positioning

Adding details to buttons

Stop Button:
Add a new layer, draw a square.

Media Player Stop Button

Double click to go to Layer Properties. Tick Inner Shadow and Outer Glow and adjust to the following settings in the images below.

Media Player Stop Button Outerglow

Media Player Stop Button Innerglow

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.

Media Player Stop Button Shadow

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.

Media Player Stop Button Reflection

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.

Media Player Buttons Reflection

Now, we will be working on the circular buttons.

Media Player Film Button

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.

Media Player Film Button

Add new layer, create another inner circle, right click > Layer Properties. Adjust the gradient similar  to what I have here.

Media Player Film Button

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.

Media Player Film Button

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.

Media Player Sound Bar

Let’s now create the Minimize, Restore Down and Close buttons.
Draw a rounded rectangle, radius 8px.

Media Player Minimize

Edit > Transform Path > Perspective
Ctl + T > Rotate the rectangle to an angle

Media Player Minimize

Select the FULL CIRCLE then click on the mask icon. (Please refer to the STOP BUTTON above . They are the exact same steps.)

Media Player Minimize

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.

Media Player Minimize

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).

Media Player Screen Circle

Right click > Layer Properties > Tick Gradient Overlay and Stroke.  Adjust to the settings below.

Media Player Screen Circle Stroke

Media Player Screen Circle Gradient Overlay

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).

Media Player Screen Circle Progress

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.

Media Player Icons

Using the Rectangle Tool, draw a thin grey line.

Media Player Music Bar

Right click > Layer Properties. Adjust to the settings below.

Media Player Music Bar Gradien

Draw another rectangle, same height but with a shorter width. Right click > Layer Properties. Adjust to the settings below.

Media Player Music Bar Gradient

Using the Type Tool, type in the song title, and the timings.

Media Player Music Screen

For added realism, I’ve added in some more icons using the GUIFX Dingbat Font.

Media Player Music Screen

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.

Media Player Button Separation

I’ve done the same for the rest and this is my result.

Media Player Button Separation

Media Player Skin

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.