I am going to show you a quick way to make a cool windows media player 11 inspired menu for the web. This menu is inspired from the top part of the menu that media player uses.
Final menu
First start off with an 800X70px canvas. Just use white as the background.
In a New layer make a rounded rectangle with a 8px radius across the entire canvas leaving a few pixels of space above and below it.
Next just use your rectangle marquee tool to cut off the bottom rounded part of the menu so it is squared at the bottom.
Now hit ctrl+r on a windows keyboard to get your rulers out and then click in the top part of your ruler and drag down to get a center line on your shape.
When you drag it toward the middle of you shape it should automatically center itself.
Now cut the top portion of the menu off and paste it back in and position back in place.
You should have 2 layers now
On the top part of the bar add a linear gradient overlay through your blending options using these colors
Now I am going to add a glow to the bottom of the menu. So start a new layer and get the color #5ca5be which is a mid blue color.
Use your rectangle tool and make a small rectangle at the bottom like this
Now add a gaussian blur to it at 4.1 pixels.
Cut any of the glow that goes into the white area.
Create another new layer and make a small rounded rectangle about 5px roundness.
Make sure to extend it past the menu like in the screenshot so you can cut the bottom of it off to have it squared.
Don’t cut it off yet, add these blending options to it first.
Stroke
Gradient Overlay
Inner Glow
I want there to me more of a glow on the bottom of it so I am going to get my elliptical shape tool and using a bright blue color (#3dcefd) make an oval like this in a new layer:
Add a gaussian blur of about 7px to it and cut off the parts that go outside of the layer.
Here is my result so far
Now I want to add a small white rounded rectangle to make it look like the grayish layer of the top bar shows through.
So make a rounded rectangle in a new layer
Now cutoff from the bottom up so it matches up with the top part of the main bar
Set its opacity to about 27%.
Start another new layer and use your pen tool or line tool to make a black line more than halfway down
Duplicate those layers 4 more times and move them down the bar and space them out evenly
Now add a little arrow under the black line we made earlier
Also go ahead and add your titles to each block.
That should be about it. I hope you learned something you may not have known previously, thanks for reading!
Final menu
