Create A Sleek & Simple Website Button Set Using Photoshop

By Web Design | 13 comments | Photoshop | Tags: Button Set Tutorial, Create A Button Set, How To Create Website Buttons, photoshop tutorial, Photoshop Web Buttons, Sleek And Simple Website Button Set, Website Button Tutorial

Tweet

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.