Webmasters :

I have written this tutorial and will request not to copy this without a backlink

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

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

http://i221.photobucket.com/albums/d...2/image002.jpg
· Now select the rectangular shape from the tool box http://i221.photobucket.com/albums/d...2/image004.jpg
and make a new rectangular shape in middle of canvas

http://i221.photobucket.com/albums/d...2/image006.gif

· Now select the rectangular layer from the layer box and open “blending options”

http://i221.photobucket.com/albums/d...2/image008.gif

· In the blending options select gradient overlay and make an gradient effect like this


http://i221.photobucket.com/albums/d...2/image010.jpg
http://i221.photobucket.com/albums/d...2/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 )

http://i221.photobucket.com/albums/d...2/image014.jpg


· Your image should look something like this

http://i221.photobucket.com/albums/d...2/image016.jpg

· Now select the “rectangular marquee tool http://i221.photobucket.com/albums/d...2/image018.jpg
from the toolbox and make a selection as shown in the image

http://i221.photobucket.com/albums/d...2/image020.jpg

· 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


http://i221.photobucket.com/albums/d...2/image022.jpg

· Then click on http://i221.photobucket.com/albums/d...2/image024.jpg
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.

http://i221.photobucket.com/albums/d...2/image028.jpg
http://i221.photobucket.com/albums/d...2/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
http://i221.photobucket.com/albums/d...2/image030.jpg


· Go to the layer box and MAKE AN NEW LAYER

· Now again select the “rectangular marquee tool” from the tool box and make a selection as shown

http://i221.photobucket.com/albums/d...2/image032.jpg

· Then click on http://i221.photobucket.com/albums/d...2/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)

http://i221.photobucket.com/albums/d...2/image034.jpg
http://i221.photobucket.com/albums/d...2/image036.jpg

· The new image should look like this
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



· Now create menus using these buttons. These menus will work best with rollover images.


· Similar buttons which can be made by modifying this tutorial
http://i221.photobucket.com/albums/d...2/image044.jpg

Source : Also Posted by me on my blog - Making windows vista /WMP 11 Tabs

Downloads
:arrow: This photoshop Project file
:arrow: This tutorial in word format with better quality images (docx format)
:arrow: This tutorial in word 2003 format (doc format)

Thanks very good tutorial i need to learn a little bit more about photoshop.

Nice tutorial.

Very nice tutorials. Buttons nice too. I have to open now PhotoShop after a long time again
Thanks!

__________________
HP-Blog .:. HighPower Personal and WebMaster Blog
TurboDir.com - Free Web Link Directory

Very lovely tutorial, very clearly recognisable, if i could i would use a button Thank You

I hope you make more tutorials like this one.