8. Graphic Images

In this first of two weeks devoted to graphic images, we'll concentrate mainly on getting to know the interface and capabilities of Photoshop and Fireworks. As many of you know, Photoshop is the leading imaging tool for developing Web graphics, while Fireworks is a companion program that can edit bitmap and vector images and create rapid prototypes of web pages.

As I've mentioned in class before, Photoshop can be an incredibly complex program if you try to learn all of its various functions at one time. But if you slowly go through the interface and try to learn a few fundamental features such as the Paint Bucket and the Type Tool, you can quickly gain enough experience with the program to create pretty decent looking Web images.

Exploring the Photoshop Tool Palette

In class this week, we'll first review the Tool Palette and Menu bar, then explore several palettes that control more advanced features of the program. So first up, let's look at the Tool Palette:

For an interactive exploration of the Photoshop CS3 Tool Palette, check out this tutorial on freetimefoto.com.

We won't be looking at all of these features this week, but will instead focus on some of the basics, such as Move, Paintbrush, Pencil, Eyedropper, and Zoom on the right of the palette, and Crop, Rubber Stamp, Eraser, and Paint Bucket on the left. Don't worry about the output of your experiments this week. We're only playing around with these features to give you a sense of what Photoshop can do.

As with Dreamweaver, all series of actions discussed below will use the path method of naming where the first item is a name on the menu bar, and each subsequent item represents a choice within that menu. For example, "Edit => Copy" means you should find "Edit" on the menu bar, and then go to "Copy" under that menu item

Exploring the Palette

Go to "File => New"
Name the new file "test."
Make the image 500 x 400 pixels
Make sure resolution is set at 72 pixels/inch
Make sure the image is set to RGB mode
Make the contents color is white
Save the file to your computer desktop.

On this newly blank canvass, we'll try using the various tools mentioned above.

Foreground Color

Click on the Foreground Color on the left bottom of the Tool palette. The Color Picker window will appear.
In the color picker, click-hold anywhere in the color window and drag the mouse around. Notice how the upper color box changes colors as you move your mouse.
The slider bar to the left of the color window moves you quickly to other areas of the color spectrum.
Click the "Only Web Colors" box in the lower left corner if you want to restrict your color choices to web-safe colors only.
Once you have located a hue that you want to use, click the "OK" button. The color is now your foreground color for all coloring tools like the paint brush and paintbucket.

Brush/Pencil Tool

Select the Brush or Pencil Tool, located in the same spot on the main tool bar.
A context-sensitive menu bar will appear in the upper area of the screen.
Click-hold on the Brush pop-up menu to reveal a variety of brush strokes and sizes. The small arrow to the left of the brush palette also reveals a number of brush options.
Once you have chosen a brush, click-hold your mouse as you move it across the canvass to draw with the Paintbrush or Pencil.
Experiment with different colors and brush patterns to see what effects they have on the brush stroke width and texture.
Choose an opacity setting less than 100% to see the effect this has on the Paintbrush or Pencil color.
To make a perfectly straight pattern or line with the Paintbrush or Pencil, just hold down the Shift key while drawing.

Type Tool

Select the Type Tool on the tools palette (the solid letter "T" icon)
Click anywhere on the canvas where you want to add type.
The context-sensitive tool bar at the top of the screen will show the three menu sections show to the right.
Choose your font and enter the point or pixel size that you desire. Fonts are usually measured in points, but when working on the Web, it's a good idea to start thinking in terms of pixels.
The button labeled "smooth" allows you to control the amount of anti-aliasing for the text.
To the right offscreen of this screenshot is another item that allows you to choose text color, while the T... button (warp text) allows you to create a variety of curved type styles (see Warp Text variables in lower drop-down menu).
Once you have typed your phrase, select the "Move" tool from the main tool palette and click on the placed type.
Move the type exactly where you want it on the canvass.
Repeat this process again with another type phrase.
Go to Windows => Show Layers. The Layer window will appear showing all the layers of the Photoshop file you have been working on. Each session using the Type Tool is stored as a separate layer and must be selected in order to move the text again.
To move your first Text layer, select it and return to the Move Tool.
To save the image as a GIF or JPG file, simply got to File => Save for Web.
Make sure, however, that you save a Photoshop Document version of the file with a *.psd extension so you can go back and make future changes if needed. Layers do not get save in the GIF and JPG formats.

During class, we will be exploring several other tools within the Tool Palette and talking about graphic design issues that are relevant to the construction of Web images. Several sites that discuss graphic design and color theory are located on the Graphics page of this site, but most fundamentals of Web graphics can be found on the web itself.

To expand your knowledge of Photoshop and its capabilities, consult the resources listed on the Software page. Next week, we'll be using Photoshop and Fireworks to produce type images for site identity images as well as to make navigation buttons and bars. We'll also use Dreamweaver to create image maps that you can use for navigation devices.