Right, here we are going to make a small set of stylish buttons, which you can use in your website navigations. An example of the end result can be seen below:



1) Create a new document sized: 90x25, and then setup the following gradient.



2) Now drag the gradient from the top till bottom of the document, filling the whole canvas, it should look something like this:



3) Now grab the line tool, and create 2 lines like you see below: (Notes: The lines have both 2px gaps from the top and bottom).



4) Time to add some text, i used a pixel font named 'Visitor', which can be found at dafont.com. First, write what will be on your button and then duplicate that layer and transform it by pressing 'CTRL+T', now rght click and choose flip verticle, move it down some pixels so its below the main text and set the opacity to 15%, you should now have something like this:



5) Goto 'Select' > 'All and then 'Edit' > 'Stroke', use the color. Eseses for the stroke color and press 'CTRL+D'... and your done!

nice ill try this out, i need 2 try different techniques for ma college course....propz

i like those good for tech theme websites

Brilliant Sat1WithDan… finally we know your secret to those amazing navs.

I'm serious, a great contribution, thank you very much for sharing it and now to put it into practice!

pretty classic, but nice tutorial

Like said above, classic tutorial! i'm using this on my new site, i'll link you to a prototype later.

That is a great tutorial. I will for sure use it next time I design a template for someone. Thank you and keep on making more . This has definately helped me :D

well if anyone of you design a template with those buttons, please post the result here!

ima try this out but ima try to chrome the WHOLLLEEe template


but not now

good job though