Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Audio Player Skin

Audio Player Skin

couch Web Layout Feb 23, 2006

1. This is a fairly complex project for the newer users of Photoshop. We will go through the process of making a hypothetical skin for a hypothetical audio program. So let's take it slow, one layer at a time. First off, create a new layer (name it "base") and then make your way over to the tool pallet and select the "Elliptical Marquee" tool. Create a selection that is similar to the one below: (Note: you can add and subtract from your selection by holding down the "Shift" and "Alt" keys.)

image 1

2. With this selection still active, fill it in with white, and then double click on that layer to make the "Layer Properties" window appear. In this window you can control the whole appearance of everything on that particular layer. Apply all the properties shown below:

3. Next, we should continue on to the buttons, you can make these as big or as small as you wish. Create a new layer (name it "button"), and again just create a square selection (hold "Shift" while dragging) and fill it in with white. Double click on that layer and apply these properties:

image 2

image 3

image 4

image 5

image 6

image 7

image 8

image 9

image 10

4. Now in the "Layers Pallet" you are able to right click on any of the layers and duplicate it. So I would recommend just duplicating the "button" layer and then just right clicking inside the layer with the "Marquee Tool" and "Free Transforming" it to get the desired look of each of your buttons. Now you can add your symbols overtop of your buttons with the "Text" tool. Make them whatever symbol you want; I used the standard play, stop, pause etc. Right now you should have something that will look similar to the picture below:

image 11

5. So as of right now in this tutorial, we have a fairly simple looking skin. What I would recommend is adding another layer, call it "Shine". Now hold "Ctrl" and click on your "base" layer to select whatever is on that layer. Now use your "Elliptical Marquee" tool again and deselect (hold "Alt") the bottom half of the selection. Now fill it in with white, then go over to your layers pallet again and select the layers "blending mode" as "Overlay" and the "opacity" as "28%". This is a very good and very easy technique that a lot of designers utilize. Below is a picture that should give you an idea of all the material covered in this step:

image 12

6. Below I just went ahead and did a little more detailing with the "Burn" and "Dodge" tools. I also just continued using the layer styles when making the blue screen and the grips below the "base". I really would encourage all my readers just to start experimenting with the wide range of abilities that the "Layer Properties" panel provides.

Audio Player Skin

subscribe to newsletter