Making Buttons and Graphics for Mission Pages
    + Creating buttons
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.

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.

: 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.