Basic Sleek Button
In this tutorial I am going to be teaching you how to make a sleek button using photoshop! I’ll be going through in very small steps so even the most novice user can follow along.
Step 1
First up create a new document - I’ve made sure that I have lots of room to work with so I chose 540 by 440 as my size.
Fill the background with a dark gradient or just a solid colour (Edit > Fill and use a colour like #262626) if you don’t know how.

Step 2
Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and use the settings below.

Left click somewhere in the middle of your document.

Right click and left click “make selection”.

Now you should have a selection like this:

Step 3
Next up we are going to be filling our selection with a gradient. Select the gradient tool anduse these settings. You can get the green gradient by clicking that area and changing the left colour to #7ebe3e and the right to #a8da77 or by setting your foreground colour to #7ebe3e and your background colour to #a8da77 whatever suits you

Left click in the middle of the selection and drag to the bottom while holding the shift key (which keeps it straight) and release. Now you can deselect your selection (Ctrl + D).

Step 4
Now we are going to be adding an outside stroke to our button. The easiest way to do this is to go Layer > Layer Style > Stroke.


Step 5
On a new layer (Layer > New > Layer) make a selection of 3 by 40 pixels in the position shown below. The easiest way to do this is to select the rectangular marquee tool and use the fixed size setting with width set to 3 pixels and the height set to 40 pixels.

Fill (Edit > Fill) with white (#ffffff). And deselect (Ctrl + D if you’ve forgotten already). And with any luck your button should now be looking like this…

Step 6
Add a double arrow “»” (copy and paste it if you want) on a new text layer.


Step 7
Go Layer > Layer Style > Drop Shadow.

This should make it a little easier to read and stand out from the background a little bit - some depth.

Step 8
Add some text for your button like your website’s name or something like “Home” if it is going to be a link to the home page and you are complete.

Here is an orange version of the button. You can change the colour of the button by adding a different coloured gradient to the base layer (the first layer we created).



Nicky W.
February 24th, 2008
Great!!
laszlo
February 27th, 2008
very useful tutoral not confusing does not leave out anything
like most other tutorials.
Buttons are very important to make a nice looking website
what I am trying to put together now. I am a photographer.
I would rate this tutorial exxellent!
Spookeyes
March 16th, 2008
Very nice tutorial. You are a good teacher.
remi
March 21st, 2008
Very nice, thanks so much !
True you are a good teacher.
Simple, clear and good result !
thks
gratiz
April 2nd, 2008
NICE POST!
Dayo Akins
May 8th, 2008
Great tutorial, thanks….looking forward for more tutorials