Create A Sleek & Simple Website Button Set Using Photoshop
Posted on 15. May, 2009 by Web Design in Photoshop
In this tutorial I’ll show you how to make some very simple, but very stylish professional website buttons!
You can see what the buttons will come out like below in the result image:
Step 1:
Start by making a new document for your buttons, or you can open up a website template you might have been making earlier.
The document size I used was 304 x 120 pixels. Now fill the background with a moderately dark color/gradient, I used a gradient of #373a41 and #26282f.
Step 2:
Now let’s move onto making the buttons. First, start by making a new empty layer. Now find and get out the Rounded Rectangle Tool.
Be sure you’re using these or similar settings for the rounded rectangle tool:
Change your foreground color to a nice red color (#ae0d0e) then draw a rounded rectangle on the canvas.
Good job! 
Step 3:
Now we need to add some nice effects to the button. Start by right-clicking the layer in the layer’s pallette, and going into the Blending Options.
After you’re in the blending options, apply the following layer styles and click the links for settings:
After applying those layer style settings you should have a nice result like this:
Step 4:
Create another new layer, name make a selection around your original button, you can do this by holding ctrl then clicking the layer’s thumbnail.
Using the Gradient Tool draw a white gradient from the bottom of the button to the top.
Using the Rectangular Marquee Tool, select and delete the bottom half of the gradient you just made, you might need to measure the height of your button before deleting the bottom half.
Now you’ll want to change the layer mode for this layer to either Overlay or Soft Light, you’ll also need to the lower the opacity to about 40-55%.
Step 5:
Now lastly, you need to add the text, of course!
Start by getting the type tool and making your text selection inside of the button. I wrote out my text with the following settings:
Tahoma, Bold, 14 pt, No Anti-Aliasing, #ffffff.
And that’s all, a very simple and stylish website button! Thanks for reading, we hope you enjoyed the tutorial.
Need more help or guidence with any of the tutorials then please register and visit the forum.
13 Responses to “Create A Sleek & Simple Website Button Set Using Photoshop”
Leave a Reply
Loading ...
tiffany_bear
18. May, 2009
cool =) nice tuts.
Carl - Web Courses Bangkok
20. May, 2009
Nice and simple
Pedro Diaz
21. May, 2009
This tutorial is simple and easy! Tks!
Meshach
02. Jun, 2009
PSD Download?
Hamid
15. Jul, 2009
niche tutorial.thanks..
can u give psd
Wallpaper
16. Jul, 2009
Very nice tutorial , Can you attach psd file ?
Wrams
09. Aug, 2009
PSD….The tutorial is about making it yourself. Why come into a tutorial site and ask for PSD files…? Why not just google free PSD files or something like that. I can’t beleive that some people can’t be bothered to make there own button sets and would rather use someone elses work. Get a life and make it yourself.
By the way Nice clean easy to read and understand tutorial. Great work!!
Brad
24. Nov, 2009
Very Nice Tutorial… I went ahead and changed my buttons to a Light Blue and it still came out great.
Umesh Katkar
04. Jun, 2010
Nice One…………!
Nathan Sarlow
09. Jul, 2010
If you’re going to the effort of adding text in Photoshop, why not add anti aliasing to make it nice and smooth?
The <1kb it adds to the file size makes little difference to load times.
igi
14. Jul, 2010
Well, nice tutorial, but it would be much better if there was also section with converting it to html&css code
irma
14. Jul, 2010
Nice tutorial. Thx.
Penang Web Design
02. Aug, 2010
nice steps….