Make a cool button
I don't think anyone has managed to surf the Net without having seen at least one set of buttons. Buttons often comes in sets and are, mostly, used for navigation. Shape and style differ quite a bit. Some are rectangular, some are elliptical and some are more or less irregular.
In this tutorial you will learn how to make at least one kind of button.
The first steps |
|
As always (if you have followed these tutorials) we will start by opening a new file. This time the size is of less importance. Set it to 300 x 100 pixels.
You have probably seen that the New dialog box has got three radio button on the bottom half. This is in short what they do:
White* |
Sets the background of Layer 1 to white |
Background* |
Uses the
present background colour as background |
Transparent |
Sets the background of Layer 1 to transparent |
*If you use
either of these you will not be able to add |
OK, now we have a file (work space) to work with.
Fill Layer 1 with white colour
Note: The reason why I didn't choose White in the New dialog box is because I want to have the possibility to add effects later on.
Create a new layer by clicking on the appropriate button on the Layer palette
You can also go to the Layer menu and choose New and then Layer from the submenu, but it is easier to just click the button :)
With the new layer active select the Elliptical mask tool
How to: |
Click on the
Rectangular mask button, hold down the mouse |
Click in the file (work space) and draw an ellipse (about 100 x 25 pixels) by holding down the left mouse button and drag.
Tip: |
When making a
series of buttons for navigation first type in the |
Select a colour, not too light, (I chose blue) and fill the mask
Adding effects |
|
Now we can have some fun with this image. We can add filter effects to make it jagged or wavy. Or we can add a texture to it. However, this time we will only make a quite plain and ordinary button. Time for effects!
Right click on the layer and choose Effects
Add these settings:
Shadow |
Default |
Bevel & Emboss |
Style:
Inner bevel |
Inner glow |
Mode: Luminescence |
Click OK
Now we have a button looking like this:
Adding text |
|
Let's add some text now. Keep the same blue colour you used for the button.
Select the Text tool and click on your button
Set the font to Helvetica, style to Regular and the size to 20
Type in the word "Contact" (without the quotes)
Below the OK and Cancel buttons there are three buttons for aligning text (like in a word processor)
Click on the button for Center aligned text
As you can see your text changes position. This is because you have changed the starting point for the text from left to center (i.e. the center part f the text is now where starting point was before).
With the mouse position the text in the center of the button
If your are making a set of buttons using the Center align is a very good idea. All you have to do with the additional buttons is to change the text. Because of the center alignment it will always be right in the center of the buttons.
Click OK
This is the way the button looks now:
Adjusting the opacity |
|
We are not going to add any effects to this text, but we are going to do something. This:
Make sure the text layer is active
On the Layer palette there are two drop down list boxes (or so it seems) at the top.
Click the arrow button on the one labeled Opacity
A slider appears
Push the slider to set opacity to 60 %
Now the text seems to be floating inside the button.
Let's settle for this look and be satisfied. Save the file. We will use it again later on to make the button look different. Something like this:
Interested?
Then click here!