| Gradient Buttons in Photoshop 6 | |
|
||
|
||
|
||
This tutorial was submitted by a guest author. See the sidebar to learn more about this author.
Gradient buttons in Photoshop 6 are very easy to make using the layer styles command and a few simple techniques from Photoshop 5. This tutorial is designed for people who are new to Photoshop and don't necessarily know how to use all of the tools yet. If you are experienced with Photoshop read this tutorial anyway, maybe you will find my way different and possibly faster than what you're used to. If you have any questions or don't quite understand one of the steps feel free to e-mail me.
Step 1
The first step is to make a new document. For this sample I made it
400 pixels wide and 200 pixels high. Next make a new layer. Now what you
want to do is draw a rectangle on the screen. It does not really matter what
size you make it. Take the rectangle selection tool and make a rectangular
shape. Size does not really matter, have a look at the next step to see
how big I made my rectangle.
Step 2
Now you are going to do quite a bit in a very short period, so pay
attention. :) First off, fill the rectangle that you created in the new layer
with a color of your choice. I choose blue. Then right click on the layer
in the layers tool bar and click on blending options. First off, select the
drop shadow option and apply a drop shadow, no changes to the options are
needed. Next select the stroke option and apply a stroke effect. Change
the stroke width to 2. Now go to the gradient overlay option and apply a
gradient overlay. Make sure the gradient overlay is linear, and the angle
is 90 degrees. I choose to have my gradient blend from blue to white, make
sure yours does the same. To change the gradient colors, double click on
Gradient, change the end color to white so that your end result looks similar
to mine. It should then blend from your color to white.
Step 3
This step is pretty easy, you should have no problems here. I took the
big rectangle that I had and went into the edit menu across the top bar
of Photoshop 6 and clicked on free transform. I then changed the size to
more of a bar shape that can be used as a button. I then clicked on the
layers option and changed the opacity (top right corner of the layers option)
and made it 60%. I then moved my bar to the bottom of the document, instead
of having it sitting in the middle of the page.
Step 4
With this the final step we are going to begin to add some new features
to our rather basic design. First thing we are going to do is find a picture
we like to use as our background. Once you have found the picture you like
copy it into your clipboard. Then click on the background layer and paste
it into the document. I took my image and changed the saturation of it to
make it look a little nifty. You can do this by clicking on image, adjust,
hue-saturation on the top menu bar. Next what I did was put some text on
my bar. I used a nice font that stands out, and I then used the layer styles
to add a stroke, and drop shadow. Voila, now you have a gradient button.
Take the image into ImageReady 3.0 and add a yellow mouse-over and you have
a very basic but nice looking button or bar. Be sure to read my basic tutorial
for doing mouse-overs in ImageReady 3.
The finished product...
This is a 1 minute method of making nice gradient
bars.
This tutorial was submitted by a guest author. See the sidebar to learn more about this author.
To submit your own content to this site, visit the article submission form.
