Design a Custom Media Button

In this tutorial I am going to show you the methods I went through to create a media button that you could use for a video player, audio player, site navigation, or anything else for your site.

First I am going to start off wit a 300X300px canvas with a white background.

Before I get started I am going to activate my rulers by using the key combination ctrl+r on a windows keyboard or you can go to view>>rulers on your top bar.

Once you have this activated you will see rulers on the top and left side of your canvas.

I am using guides so when I draw my main circle it will be even on the canvas. The cool thing you can do with the rulers activated is being able to drag guides to any part of the canvas.

I am going to drag my first guide from the top ruler by clicking on the ruler and pulling down toward my canvas. When you do this a line will come down. If you drag it close to the center of your canvas the guide will automatically snap to the center.

**If your guide does not snap to the center then the snap feature is not activated. Just go to view>>snap.

Now drag a guide from the left ruler to the center. Then drag guides to each side and to the top and bottom of your canvas.

Now your guides should look like this:

Make a new layer and grab your elliptical shape tool

Draw a black circle or whatever color you want (since we will be changing that with blending options anyway) to fill up the entire canvas.

As you probably noticed the guides helped the shape easily stay within the boundaries and should be an exact circle.

Now add these blending options by double clicking on your layer or right clicking and going to blending options:

Outer Glow:

Gradient Overlay:

In choosing your gradient colors use these colors and settings (pull the arrow over the white color to the position in this screenshot).

On this next step we need to make a smaller circle in the center of the one we just made. I am going to drag my current guides that are on the left, right, top, and bottom into different positions so that I can make a smaller circle. I just eyeballed it to get what I wanted.

Now in a new layer draw your other circle using black again within these guides:

After that use this gradient overlay on the new circle:

Here is my result from that:

OK, now one more circle and we are done with circles. So yet again I am going to move my guides to be able to put a smaller circle within the previous one.

Start a new layer and draw another black circle.

We are done with the circles and the guides as well so just drag each guide off the screen.

Add these blending options to your new circle:

Outer Glow:

Inner glow:

Gradient Overlay:

Now we are getting somewhere. See how this makes the button look like it has depth.

Time to add a play button. This will be simple just using our shape tool. In a new layer draw a black rectangle in the middle of the new circle and turn it so that it looks like a play button.

Create another new layer. This layer will be for the web 2.0 feel. Change your color to white and make a circle overtop of your blue one

I am going to use the pen tool to cut off the part of this white circle I do not

Get your pen tool

Click on the spot I am going to show in the next screenshot and while holding down shift (to keep a straight line) drag down to that spot.

Then click toward the center and drag diagonally toward the bottom right like this:

Now for the last click:

Then connect the rest of the line around below the circle:

Ok all we have to do now is right click on that line using the pen tool and click make selection.

Now with the selection just hit delete on your keyboard and you should have something like this

Next I am going to add a layer mask to our new layer. To do this I am going to click the little icon at the bottom of my layer palette.

I pointed to it with the red arrow. Or you can go to Layer>>Add Layer Mask>> Reveal All on your main photoshop menu.

After you have added your layer mask get your gradient tool from your tools palette.

*NOTE: After making this tutorial I added this little note in because I left out the settings you need to have on your gradient tool.

Make sure you have dither and transparency checked as well.

We are going to drag from the bottom up while holding down shift to keep a straight line to make the layer faded, but we still want to be able to see the curve at the bottom.

Result after that:

Now I am going to add lines to separate each part of the button. This is a really easy step. Just get your line tool out which is located in the same area as your shape tool.

Set its weight to 2px and use the color black. Start a new layer underneath our 3rd blue round circle layer. Draw one side of an X across the whole canvas. Hold down shift again while doing this to keep the line straight.

Do the same thing again to finish the X

Next, use your eraser brush to erase the excess of each line that are outside of the main circle layer. I am just going to use a regular eraser brush.

To make these lines look embedded into the button I am going to add a simple drop shadow to each line with these settings:

Your result from that step should look like this

This tutorial is pretty much done. I am going to add a fast forward and rewind buttons by using my shape tool to make small rectangles on each side. Also I will add a stop and pause button also using my shape tools. This step is very simple so I will not go over it.

Final Result:

Thanks for reading my tutorial. You can definitely expand on what I have shown you and design some really cool buttons for different uses. If you have any questions or suggestions please leave a comment. Thanks!

By John Overbee

John Overbee is a graphic designer for the iEntry Network.

Leave a comment