Make a simple button for a website (Easy)

How to make a simple button for a website.
(See bottom of page for finished product)

Firstly, make a new document. Use these options:


Now, Grab the Rounded Rectangle Tool.


And make a box that just about fits our canvas.


Now, right click the shape in the layers panel and select 'Rasterize Layer'


Now, in the colours pallette, grab the colour #57edff
Now get the Paint Bucket Tool and fill with that colour.


Now, double click the layer in the layer panel, or right click and go to 'Blending Options'
Select Contour from the side and use these options:


Now select Inner Shadow and Use these:


You do not have to do the Inner Shadow on your own, I just do it sometimes as it creates a better colour.

Now to add some text, grab whatever font you use and whatever size you want and write away.


Now, we MUST add some transparency.
This should currently be the look of your layers panel:


Press CTRL and select each layer, apart from the Background layer.
Now press CTRL + E to merge all of those layers.
Now click the eye next to the background layer to make it invisible.


Now go to File > Save for Web & Devices.
Set it up like this: (It MUST be PNG-24 and Transparency MUST be checked)




Now we're done!

You can now do whatever you like, now you know how to make a button! :)

I think I copied you right...

Pluto wrote:

I think I copied you right...

Looks good, I like the pattern and gradient.

Try to add contour.

Zomg. I always needed a tut on making buttons for a website. ;O
Thank you, Howdy. :)

babyDB wrote:

Zomg. I always needed a tut on making buttons for a website. ;O
Thank you, Howdy. :)

Lol, sarcasm?:o

I was just copying your tutorial in Paint.net!

Dr. Charon wrote:

I was just copying your tutorial in Paint.net!

Oh right, well then, very nice outcome. :)

Nice tut Red.
Though it's photoshop lol. Most people don't have photoshop.

And try adding some gloss to it. ;)

My outcome:


-Just did exactly what you did, came out like yours, overall nice tut.
-Like how there is pictures too.

Thank you, it works, I added some other effects too, now its awesome