In this
lesson we will create basic buttons using the Type Tool in Photoshop.
We will also prepare a second set of these buttons for a rollover
action, which will be covered in the next Advanced Dreamweaver
lesson.
|
Setting
up our document for buttons
Lets spice-up our Mission Pages by incorporating graphic buttons
to the navigation. When using graphic buttons you can select
any Type Font you like and be able to add special effects to
it. A great advantage to using this technique is that your end
user will not have to own the font you used or have it installed
on their system. Because it is a graphic, it shows up like any
other graphic regardless of what system your site is viewed.
The backdrop of this is that you will be incrementing the file
size of your web page. Remember that any graphic you add, adds
up to the total downloading time. Just be cautious and do not
fill your page with text graphics, limit yourself to use it
for navigation graphics or for special headings on your pages.
|
| In Photoshop
1. Create a new transparent document of 90 x 20 pixels
and save the document as "buttons.psd"
2. In the Color Picker, select #003366 (the blue background
color used in the HTML page)
3. Fill the one layer of your new document with blue
4. Select the Type tool and set the font to Arial,
Bold and choose a starting font size of 12Pt.(see
example on the right)
|
 |
Insert text
Place the type cursor on your document and type in the text
of your first button.
TIP: Choose the
longest word of your menu, in our case it is "Country Info".
This way you will make sure that it fits right into the width
of our document. You will also see how the margins work around
it. It will make your spacing more consistent when inserting
the buttons to your HTML file. Keep your navigation buttons
the same width and height size.
Troubleshooting
If for any reason your text does not fit, go to the Character
tool palette and make sure your font size is not set to a large
size, like 24 Pt. for example. Also check your image size and
resolution.
|
 |
Set the Alignment
In the Type palette click on the Paragraph tab. Choose
the alignment of the text to be centered. This
way every time you type in new text it will start it by the
center.
|
|
Now it is time to align the text to a perfect
center. As you typed the text initially into your document,
Photoshop placed the text exactly where you clicked on. This
means that your text layer might not be centered in reference
to your canvas. To correct this and to align the text to the
center of the document do the following:
1. Link the bottom layer (Blue background) to the text layer
by checking the box next to the layer name in the Layer
palette. (a chain icon will appear, see graphic on the
right)
2. Go to Layer > Aligned Linked >Horizontal Centers
3. Repeat the step but using: Layer > Aligned Linked
>Vertical Centers
|
 |
Adjust
your text settings
Select the size of the text to a legible size giving
enough space to the sides. It is here where you can select a
different font face, a different style, i.e. bold or italic.
You can also change the letter spacing to be wide or narrow,
etc.
If you need to increment the size of the document to display
bigger font size go to: Image > Canvas Size...
Type in the New Width and Height
of your document.
Advanced:
The bottom graphic in the window labeled Anchor will
indicate where the content of your document will be moved to
when incrementing the canvas size. |
Adding
a border to your buttons
1. Add a new layer to your document by clicking
the new layer icon on your layer palette.
2. Choose a color for your border (for our example choose #336699)
3. Go to Select > All (or type CTRL A)
4. Go to Edit > Border...
The window on the left will appear.
Set the Width to 1 px,
choose Center for the location and
leave the other options in their defaults. |
| Preparing
for rollover buttons
Even though you might not incorporate a rollover action in
dreamweaver yet (you will learn this in the next advanced
dreamweaver lesson), you can start creating the graphics
for it. You will need two sets of buttons: an "on"
and an "off" version. The "off" version
is the default version you see when you open a page. The "on"
version of buttons refers to the images that appear once you
rollover the "off" buttons. If you see the Advanced
Mission Sample Page you will see that when you rollover
the top buttons, a second image appears with a different background
color.
|
Adding an "on"
state layer for your buttons
1. Add a new layer right above the first background
layer. Make sure it is under the text layer.
2. Choose a color for new background (for our example choose
#336699)
3. Fill the layer with that color.
4. Your layer palette should look like the image on the right.
5. Using the layers "view" option (the eye icon next
to the layer name), you can preview how your button will look
like. In this example you can preview the"on" version
and it should look like this:
 |
 |
Saving
your buttons
For each button you will
have to repeat the following steps:
1. Type in the text for your button, i.e. "Home"
( Since your text layer is already aligned to the document,
and as a paragraph, the text will be displayed automatically
in the center.)
2. Hide the "light blue background"
layer by clicking on the eye icon on the layer palette.
3. Go to File > Save for web...
Set your options to GIF, Adaptive
and select 8 colors.
Save your file as "button_home.gif"
Save
your image in the appropriate image folder, next to
your HTML files.
TIP: It is a good practice to include a prefix
like "button_" to the name of your buttons.
You will find it useful while putting your web pages together.
4. Once you saved the "off" version of the
Home button, go back to your layer palette, and click
on the eye icon to see the "light blue background"
layer.
5. Once it is visible, repeat step #3 and save
your file as: "button_home_on.gif" |
Hide layer
Home button "button_home.gif"
Home button ON state "button_home_on.gif" |
Congratulations! You
are all done with the buttons and graphics for your Mission
Web site.
|
Making Buttons and Graphics for Mission Pages