In this tutorial you will learn how to make a set of website buttons
like the one shown below.
So let’s get started. Start by
selecting a rectangle as long and wide as you want your navigation bar
to be. Fill it with White (#FFFFFF).
Now go to your
blending options and insert these
settings.
Now that you have the blending options in it should look something
like this:
Create a New Layer. Ctrl – Click
the last layer beneath the one you just created. While making sure you
have the new layer selected in the layers palette fill the selection
black. Then resize the width so it is only a pixel or
two smaller than the layer beneath it. You should now have something
like this:
Go into your blending options and apply these
settings to your layer.
Now you should have something like this:
Now that we have those two layers done, create a new layer. CTRL
– Click the layer beneath your newly created layer. Now make
sure you have your new layer selected in the layers palette. Fill the
selection White. Now resize the width of the layer so
it is slightly smaller than the layer beneath it. You should now have
something like this:
Now go to your blending options and insert these
settings:
Now that we have that done you should have something like this:
Now create a New Layer. Grab a circle brush.
Set it to:
Size : 1 px
Hardness: 100%
With your 1 px hard brush set you foreground to the
color: #3a3a3a
Now on the new layer click once at the top of your button. Go down to
the bottom while holding CTRL click again. (This
should create a line from where your first click was, however it might
take some practice on getting it to be straight.)
Now again start at the top of your button 1 pixel away from the
previous line. Using the color: #ACACAC
Click once at the top next to your previous pixel. (It has to be
DIRECTLY next to your other line for this to work)
Now go to the bottom and CTRL- click right next to your
previous line. Creating two lines, 1 dark and one light.
Now set the layers blending mode to Hard Light.
You should have something like this:
Now add your text to it and you have a nice set of buttons!
Congratulations! You successfully learned how to create a nice pair
of buttons for your website. I encourage you to use the techniques you
use in this tut to try and modify these buttons making them your own.
ผู้ติดตามบล็อก : 3 คน [