PhotoshopFrenzy

Realistic Modern Button

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

Rate and share this tutorial on MintTutorials

AddThis Social Bookmark Button


Email this Great Tutorial to a Friend! Email this Great Tutorial to a Friend!

Comments for Realistic Modern Button

  1. Damian Says:

    Great tut! fits my site perfectly. thanks again.

Leave a Reply