Windows Media Player Inspired Menu

I saw someone using windows media player on vista the other day and it inspired me to make a website menu. So here are the steps I went through to make my media player style menu.



Click Here for Large Image

Start off with a canvas with the size of 800X200px and make the background color black (#000000).

Next I want to put a few guides in to make the menu. I am going to use the rulers to make my guides. If you have never used the ruler to put guides on your canvas, you should try it because it helps out more than you would think.

If you haven’t used the ruler either hit ctrl+r on a windows keyboard or go to view>>rulers… You should see something like this:

Now I am going to drag a guide from the top ruler down so we have a horizontal guide at the 1 mark. Just click on the ruler and drag down like this:

Now you should have a blue horizontal line going across or whatever color is specified for your guides.

Now drag another one to the 2 and one in between 1 and 2.

Your 3 guides should look like this:

Start a new layer and make a block between the top two guides. It doesn’t matter what color because we are going to change that. I am going to use white.

Now go to your blending options and use this gradient overlay settings:

Gradient Overlay

Use these colors:

Now you should have this:



Click Here for Large Image

In a new layer draw another block in between the lower guides and use these gradient settings:

Gradient Overlay

Use these colors:

Now you should have this:



Click Here for Large Image

Now I am going to start the curved look of the menu by using my pen tool. If you have never used the pen tool don’t worry its easy to use once you get the hang of it. I will try to explain it the best I can. Make sure in your brushes you have a regular 1px soft brush chosen.

Choose the color white before you get the pen tool ready. Now choose the pen tool from your tools:

Make sure when you have your pen tool chosen, the settings on your top bar are set like this:

Now click here first with your pen tool:

Then here but hold down your mouse button and drag diagonally down and toward the right to make a curve like this:

Click one more time here:

That wasn’t so hard was it? Now right click using your pen tool on your line and click stroke path:

Delete your path after that and you should have a curved line:

Now add a gradient overlay to this line with these settings:

Gradient Overlay

Colors Used:

Next duplicate that layer and flip it horizontally. To flip it horizontal I go to edit>>transform>>flip horizontal.

Then move that curve to the other side and you should have something similar to this:



Click Here for Large Image

I moved my guides in this screenshot just to show you the result.

Next I am going to add a little glow at the bottom of the menu to make the curved lines stand out a little more.

So start a new layer and get your ellipse tool:

Choose color #303D61 and draw an ellipse on your bottom guide like this:

I am going to add a gaussian blur to it by going to filter>>blur>>gaussian blur with a radius of about 5.2 pixels.

Now you should have a glow like this:

If you notice there is excess over the bottom so get rid of it by deleting it or using an eraser brush.

My result from that:

I am going to add the rounded part of my menu by getting my rounded rectangle tool from the same place we got the elliptical tool and set its radius at about 30px on your top bar.

Draw it evenly above your middle guide whatever color you want because we are going to add blending options to it as well. I am going to stick with the blue we used in the last step.

Here is my result:

If you want to make it easier to keep it even add 2 more guides in between your other ones and draw it in between those.

You can remove your top and bottom guides if you want as they are no longer needed. To do that just drag them up out of the screen.

I kept our middle guide because we are going to use it to cut our newly made shape in half.

So use your rectangle marquee tool to cut the shape in half so that you have 2 separate pieces. Keep them in the same place so it still looks like one.

Now add these blend options to the top piece:

Inner Glow

Gradient Overlay

I use the same colors as the first few steps for our top bar.

Next add these blend options to the bottom piece:

Inner Glow:

Gradient Overlay:

Yet again use the same or similar colors as the first few steps for our bottom bar.

Well it looks like we are getting somewhere, our menu is taking form. Here is what I have so far:



Click Here for Large Image

You may or may not know, but media player has a middle play button. I am going to use this for my Home button for the menu. First we need to draw another rounded rectangle, smaller, in the middle of our other rounded rectangle like so:

Use these blending options:

Inner Glow

Gradient Overlay

Then put your opacity to about 25%.

Result:

Now for the round home button I am going start a new layer and place a circle (color doesn’t matter again) in the middle of the shape we just made:

Now put these blending options on the circle we just made:

Outer Glow

Inner Glow

Color Overlay

Stroke

Result from that:

Now I want to add a few glows to it and this menu will be pretty much done.

So ctrl+click on your circle layer and it will be selected on your canvas with a elliptical marquee. Then start a new layer and grab the color #00F6FF which is a bright blue. Choose a 65px soft brush and click toward the bottom center of your circle to give it a glow.

The final step for this circle is to give it the web 2.0 feel. To do this I am just going to put a white circle over top of our current circle and erase parts of it with a large soft eraser brush.

Result:

I am going to stop here for this tutorial, but I am going to add the text for the menu, little lines in between categories, and a final glow underneath the entire menu similar to how we made the glow for the bottom bar. Thanks for reading this tutorial.

Here is my final menu:



Click Here for Large Image

I also added a little glow under about to show you how you could have the menu highlight when someone scrolled over it.

By John Overbee

John Overbee is a graphic designer for the iEntry Network.

Leave a comment