<<< >>>
1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16

9. Graphic Images (cont.)

Now that you've learned some of Photoshop's basic features, we'll apply them this week to three aspects of Web graphics—type images, navigation buttons, and image maps. Type images and buttons, which are used as primary navigation devices, are created strictly in Photoshop and then linked to secondary pages within your site. Image maps are one solid image created in Photoshop and then activated with numerous links via a special feature of Adobe Dreamweaver.

Before creating types images and buttons, however, it is extremely important that you create your labeling system first and make such decisions as typeface and point size. If you are creating individual buttons, the order in which they will appear on the page is not that important now, but for image maps that serve as single navigation bars, it's a good idea to set in stone the order of the labels as they will appear on the navigation bar. It is difficult to go back and edit the text on navigation bars once the image has been saved as a JPEG or GIF.

Before starting on type images, a brief note about typography on the web. Traditionally, in the world of print graphics, type sizes have been expressed in points which correspond to an actual physical height. For example, a font set in 72 points would be 1 inch high. However, display resolution varies from computer to computer, even though 72 dots or pixels per inch is considered the web standard. This creates some complicated problems in using type on the web and whether designers should use pixels or points. It matters more when using Cascading Style Sheets, but even when setting type in images using Photoshop, it's a good idea to get into the habit of using pixels as the font measure instead of the standard point measure.

Special Type Effects

Last week, you learned how to set type in Photoshop images. As you will recall, it's a good idea to place each block of type as a separate Photoshop layer so that you can manipulate these sections of type independent of one another. Becausing saving an image as a JPEG or GIF file flattens all layers, it is a good idea to save a copy of your work in the Photoshop file format, which ends in the ".psd" extension. This will allow you to change the text within individual layers without having to recreate the image all over again.

Because you have saved your type as individual layers, you can also add special effects, such as Drop Shadow, Inner Shadow, and Bevel and Emboss, by applying these effects to individual layers. To apply such effects, choose Layer => Layer Style and play around with the options contained within each dialogue box. You can also reach these same options by clicking the Effects button at the bottom of the Layers palette.

Filling Type with an Image

You can also fill your text with an illustration or photograh by creating a Clipping Group between two or more image layers.

  1. Open a new image file and choose the background color you want your text to be displayed against.
  2. Type in the text you want filled; you can make adjustsments to its size and font later.
  3. Open the file containing the image to be used for filling the type.
  4. Choose Select => All and then Edit => Copy to place the image in the clipboard
  5. Return to the original image into which you typed the text and choose Edit => Paste to copy the image in as a new layer.
  6. Choose Windows => Show Layers to display the Layers palette. You should see three layers in the order shown in the screenshot below: the fill image layer on top, the text layer in the middle, and the background layer on bottom.
  7. To fill the text with the image, select the Image layer and choose Layer => Group with Previous. You can also execute this command by holding down Alt (Windows) or Option (Mac) while clicking on the line between the Image and Text layers.
  8. By selecting the Move Tool, you can click-hold on the image within the text to adjust its position.
  9. To place a border around the text to give it more definition, select the Text layer and choose Layer => Layer Style => Stroke, which will bring up a dialogue box for choosing numerous variables.
  10. When you are finished, save the results as a Photoshop file (extension .psd) so you can edit the image later. You can then use Save to the Web to create an optimized JPG or GIF.
Using Photoshop to fill type with an image

 

Creating Navigation Buttons

In addition to using the Type tool for feature images, one of its primary functions is to create labels for individual navigation buttons on your site. These range from simple navigation buttons to more complicated roll-over buttons that change appearance as users move their cursor across the image and click on it. We'll be talking more about roll-overs when we tackle JavaScript later in the semester, but for now, let's stick to creating simple navigation buttons in Photoshop.

To create an elliptical navigation button, do the following:

  1. Create a new file with the pixel width and height of the buttons you want to create. If you plan on creating round or elliptical buttons, you'll need to make this image slightly taller and wider than the buttons you want to create, and you should make the background color of the image the same as that of your entire site background (a fake transparency). An image 100 pixels wide and 80 pixels tall is a good starting point.
  2. Create a new layer and name it "Button." Make sure this layer is selected in the Layer palette before going to the next step.
  3. Select the Elliptical Marquee tool from the tools palette and drag it until you have the shape of the button you want. Holding down the Shift key while dragging creates a perfect circle. If you need to move the ellipsis, simply click-hold on the "dancing ants" and center the image on the screen. DO NOT de-select the ellipsis, as you need this image selected for the next several steps.
  4. In Foreground Color, choose the color you want your buttons to be. Keep in mind the color scheme of your overall Web site.
  5. Select the PaintBucket Tool from the tool palette and click within the "dancing ants" of the ellipsis to color the oval. Again, DO NOT de-select the ellipsis, as you need it for the next two steps.
  6. Choose Layer => Layer Style => Inner Shadow from the menu bar. In the Effects dialogue box, set the following options and then click "OK":
    • Mode: Multiply
    • Opacity: 77%
    • Angle: -36 degrees (that's NEGATIVE 36)
    • Distance: 1 pixel
    • Blur: 9 pixels
    • Intensity: 0%
  7. Choose Layer => Layer Style => Bevel and Emboss. In the Effects dialogue box, set the following options and then click "OK":
    • Highlight
      • Mode: Screen
      • Opacity: 75%
    • Shadow
      • Mode: Multiply
      • Opacity: 65%
    • Style: Outer Bevel
    • Angle: 120 degrees
    • Depth: 3 pixels
    • Blur: 3 pixels
  8. Choose Select => Deselect to view the button. If you are making several buttons of this same color and shape, save this image as a template for all further buttons you are creating.
  9. Use the instructions for setting type in the previous section to place labels on each individual button. Make sure you change the type color in the Type Tool dialogue box, as it will now be the same as the button template.
  10. After you have placed text labels on each button, flatten the image and save as a JPG at the highest possible quality to begin with. Save at stepped-down levels of lower image quality until you achieve an acceptable middle ground between quality and file size, or use "Save for Web" to a create an optimized version.

Creating Navigation Bars

Consult the online help of Dreamweaver for help with Navigation Bars.