If you have tried Windows media player 11 then you must have seen the black tabs on the top.I liked them very much
So here’s a tutorial about how to make a very similar button
Final Result will be
![[Image]](http://img138.imageshack.us/img138/9338/40343978sk4.gif)
Lets start with the
Tools required
Adobe Photoshop 8 or higher
Tutorial
· Start Photoshop and create a new document of size 300 *50
· Now select the white color from the color panel . . .. ..
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image002.jpg)
· Now select the rectangular shape from the tool box
and make a new rectangular shape in middle of canvas
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image006.gif)
· Now select the rectangular layer from the layer box and open “blending options”
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image008.gif)
· In the blending options select gradient overlay and make an gradient effect like this
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image010.jpg)
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image012.jpg)
· And also stroke the image with the following settings “color is #7c7c7c“
(to stroke see the last option in the blending option dialog box )
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image014.jpg)
· Your image should look something like this
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image016.jpg)
· Now select the “rectangular marquee tool
from the toolbox and make a selection as shown in the image
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image020.jpg)
FEW INTERESTING Websites
printer ink cartridges | high quality photo paper
· Now go to select ->modify -> contract from the file menu (type the pixel value as 1px)
· Go to the layer box and MAKE AN NEW LAYER
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image022.jpg)
· Then click on
icon (colour fill)available in the layer box and select “solid color” select the “white” color.Select the new layer and Make the fill properties of the new layer as 0% (fill properties available in the layer box)
· Now go to the blending options of the new layer
· Select stroke and make the settings as shown in the image.
Few Interesting Websites
Favorite YouTube clips | Funny quotes
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image028.jpg)
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image026.jpg)
· The transparent to white gradient is the 2nd preset available in the preset box .Just reverse it and then click OK
· Now your image should look something like this
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image030.jpg)
· Go to the layer box and MAKE AN NEW LAYER
Few Interesting Links
· Now again select the “rectangular marquee tool” from the tool box and make a selection as shown
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image032.jpg)
· Then click on ![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image024.jpg)
icon (colour fill)available in the layer box and select “gradient” select the “white to transparent” colour.And fill the details as follows ( have a note at angle an style)
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image034.jpg)
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image036.jpg)
· The new image should look like this
![[Image]](http://img155.imageshack.us/img155/7498/boxxwz8.gif)
· Now if you want you can give a shadowing effect at the bottom (I am not writing how to do it As it only give a little effect)
· After shadowing effect the final image should look like this
![[Image]](http://img138.imageshack.us/img138/9338/40343978sk4.gif)
· Now create menus using these buttons. These menus will work best with rollover images.
![[Image]](http://img132.imageshack.us/img132/3272/rowob7.gif)
· Similar buttons which can be made by modifying this tutorial
![[Image]](http://i221.photobucket.com/albums/dd129/sumeetindia/my%20tut2/image044.jpg)
Downloads
This photoshop Project file
This tutorial in word format with better quality images (docx format)
This tutorial in word 2003 format (doc format)





Hi sumeet,
came to know abt ur blog from Omkar’s blog…
Nice tutorial, tried it and got almost a decent button, though not good as u…
Thanks.. Keep Posting such tutorials…
Thanks maanav
Thanks summeet for the tut…
Thanks very much for the great tutorial.
I’m using CS2 and it seems somewhat confusing and difficult to follow though…(after the first new layer.) I was not able to follow from that point.
Little more descrition would make this great tutorial even better.
Thanks again.
works OK with Photoshop 7 as well.