Inserting Text

To start, restore the default foreground color (black) by clicking on the miniature color squares at the bottom left of the color controls in the toolbox. Now:

• Choose the text tool from the toolbox (it looks like a capital "T").

• Move the mouse into the center of your button and click right where you would like the text you are about to add to be centered.

• In the dialog box that appears:
  • Make sure that "Anti-alias" and "Auto Kern" are selected.
  • Select the icon that indicates horizontal centering under the "Cancel" button.
  • Now, type the text "HOME" into the box at the bottom of the dialog box and drag the mouse over it to select the text.

  • Move the dialog box using the title bar so that you can see the text in your button.

  • Adjust the point size and type until you like its appearance.

• Finally, click "OK". In this dialog box, pressing return is not a substitute for clicking "OK". If the text isn't exactly where it should be don't worry. We will fix that later.

To make it easy to manipulate, PhotoShop has placed your text on a separate layer above the background.

• Make sure that the "Layers" palette is visible. It should be at the lower right of your screen. If not, select "Show Layers" from the "Palettes" sub-menu of the "Windows" menu.

• Within the layer's menu you should see two regions labeled "background" and "HOME". The "HOME" layer contains your text. The background layer contains everything else in your image.

• At the left edge of each item in the layers palette there is an "eye" icon. Clicking in the area of one of these icons makes the "eye" disappear or reappear and makes the corresponding layer appear or disappear from the main image. Try it to make this notion of transparent plastic sheets a bit more concrete.

Any editing you do in an image with several layers only effects the selected layer. To see this,

• Click on the "Text" layer in the Layers palette to select that layer.

• Now, select the "move" tool from the toolbox (right side on the first row).

• When the move tool is selected, the arrow keys can be used to do precise positioning. Use the arrow keys to move the text around until it looks nicely centered. Note that the rest of the button does not move.

PhotoShop allows you to apply special effects to layers.

• Select the "Effects" sub-menu from the layers menu and pick the "Drop Shadow" item from the sub-menu.

• Move the dialog box so that you can see your button if necessary.

• Experiment with the controls in the dialog box until you are happy with the appearance of the shadow.

• Cliick "OK" when you are satisfied.

Congratulations, you made a button. Save it as a JPEG file into your graphics directory. Then, change the mode from RGB-COLOR to indexed color and save it as a GIF file. Compare the quality of the two images and the size of the files to decide which one you want to use.

At the end of the last lab, I asked you to put a "take me to your home page" link on the CS 105 labs page you created. Now, you should replace that textual link with an image link. The textual link was produced by placing the text between an <A> tag with an appropriate HREF attribute and a </A> tag. You can make a link out of the "HOME" button by placing an <IMG> tag whose SRC attribute refers to the image between the same <A> and </A> tags that surrounded your text link.

Try it out.