Create Web Button using photoshop

In this tutorial, we will be creating a very sleek, smooth button that looks ideal and will beautify your webpage, unlike your average, conventional shiny web button. Here is the final result:
image11.jpg



First, open a new document. Any size will do.
Make a new layer.
Take out your rectangular marquee tool, and put it to Fixed Size, with these settings.
image12.jpg
Place the marquee anywhere you want on your canvas, and fill it with a color of your choice.

image2.jpg
Now, rightclick the layer your rectangle is on, and select Blending Options.
image3.jpg
A window will pop up. Check the following things, and adjust the settings according to the screenshots.
image4.jpg
image5.jpg
image6.jpg
Double click on the gradient and set it like this.
image7.jpg
image8.jpg
Now, type out your text. I used size 12 Visitor font. It’s best to use a pixel font, they make the next step so much easier.
Zoom in on the text.
image9.jpg
To make it look like the text is sunken into the button, we will make a darker 1px line on the top and left of all possible lines in the text. It sounds confusing, but look at what I did in the picture.
image10.jpg
And there you have it, a sleek, modern button!
image11.jpg

1 comments:

UX Designers Delhi said...

Blogging is the new poetry. I find it wonderful and amazing in many ways.

Post a Comment