These buttons simply look great! You can easily create them
in a whole range of colors and use them on all of your sites!
1. In Photoshop Create a 200 x 200 canvas
2. From the VIEW menu click on SHOW GRID. Also make sure that
"Snap to Grid" is ticked, if not, click on that too.
3. Using the Elipse Marquee tool:
create a selection that fills a 2x2 space on the grid.
4. Now holding down the (SHIFT) key create another selection to the right
of the original selection so that now you should have two circles in your
canvas.
5. Here comes the slightly tricky part: Firstly swap back
to the Rectangular Marquee Tool:
Then again hold down (SHIFT) and make a selection from the middle-top
of the left circle, down to the middle-bottom and then drag it across to
the right circle's middle. You should now have something along the lines
of the image below:
6. Now create a new layer and fill the selection with a color (we used
black)
7. This filled shaped (we'll call it the Button from now on)
is going to form the basis of our rollover effect.
8. Make the size of the canvas smaller by using the Rectangular
Marquee tool dragging around the image and then clicking IMAGE > CROP
(ALT + I + P).
9. You may also go to the VIEW menu and click on HIDE GRID, as we no longer
need it.
10. Hold down <CTRL> and click on the layer to create
a button-shaped selection.
11. Select the Gradient tool and make sure that WHITE is your
foreground color. Make sure that the Opacity of the Gradient tool is set
to 20% and that you are Grading White - to Transparant (check the Tool Info
Window) and then drag the tool from bottom to top.
12. You should now have a nice gradient running up your button.
Go to the menu item SELECT >> MODIFY >> CONTRACT and use a value
of 5 pixels to bring in the selection.
13. Using the rectangular marquee tool and holding down the <ALT>
key, remove the bottom portion of the selection so that only a small part
of the top remains like so:
14. Create a new layer and then go to the item SELECT >> FEATHER
and use a value of 2 pixels and fill the selection with White.
15. Create a new layer and then using the Gradient tool again drag up
from both bottom corners of the button to add to your gradient. This helps
add a 3D effect.
16. All you need to do now is add the color. Go to IMAGE >> ADJUST
>> HUE/SATURATION and add any colors you like. Make sure you turn
up your Brightness and Saturation otherwise your final button will not
look colorful at all.
Once you have the color sorted out all you will need to do
is decide on which font to use for your Text !!!! But I'll leave that up
to you to decide. :)Simply create a new Text Layer on top of all others
and then Save as a GIF file to use on your web page.
create a selection that fills a 2x2 space on the grid.
