Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Tutorials Web Layout Unique Button Tutorial

Unique Button Tutorial


In this tutorial, I will teach you how to make a nice simple and unique button for just about anything.

It will look like this when complete:

image 1

Step 1

Open up a new document, for this one, I will be using a 100*100 document with a black background.

Step 2

Now, using the Rectangle Marquee Tool, Create the basic shape of your button. Now, with our selection up, fill it with the color choice of your button, in this case, I'll fill it with #7DD14A. You should now have something like so.

image 2

Step 3

Now, add the following blending options.

image 3

image 4

Step 4

Create a new layer. Take out a decently small soft brush, and brush black into the sides of the button. Next, set it to overlay, and press Ctrl+G. It should look similar to below.

image 5

Step 5

Now, merge those two layers. Create another new layer, and this time, brush a little bit of white in the middle. Now, set the opacity to about 35%, and press Ctrl+G again. Merge the layer. It should now look similar to this.

image 6

Step 6

Now, we'll add a reflection. Make a new layer, and Ctrl+Click on the thumbnail of the layer with the button. This should select it. Now, on your new layer, fill it with white. Lower the opacity to about 45%, and then delete the lower half, or make it into a nice reflection.

image 7

Step 7

Now, just add some simple text. And you're done. In the example below, I have flipped the text up, and reflected it. Hope you enjoyed this tutorial.

image 1



Author's URL: X3N
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: