Fireworks Basics - Lesson 2

Using Fireworks MX to Create Basic Web Images

Lesson 2: Working with Photographs

Related video clips

There are six video clips related to Lesson 2. Be sure to view these from the class CD or from the video link on the class site. These video clips are an important part of the Fireworks class, and will explain visually the items described below.

Creating a new image

In Lesson 1, you learned how to save in GIF and JPEG format, rotate and crop graphics, and how to make backgrounds transparent (if that is even an issue for you). In all of these steps, you were not creating a NEW graphic, just working with an existing graphic. Lesson 2 focuses on working with photographs, to select parts of the photograph and placing those selected pixels in a new image. You will also be making changes in photographs, such as adding text or adjusting lighting in the photo. In Lesson 3 you will get more experience creating new images, as you create original graphics using some of the tools in Fireworks.

There are various settings for a new document in Fireworks.

If you want to copy part of a photograph, you will need to create a new document into which you paste the pixels from the photograph. In the 2004 release of Fireworks MX, you can select Create New from the middle of the work area or you can pick from the top menu File, then New. This latter method works with even older versions of Fireworks. The display showing to the left appears. This is shown in the video Creating a New Image. What you are doing is creating a new work area or canvas area for the "original" image.

Width and height (of the canvas): Unlike when you resize an existing image, you must give both a width and height for the canvas area. These can later be changed by increasing the canvas size, or by using the cropping tool to get rid of part of the canvas. Therefore, if in doubt, give yourself enough work area if you are creating a new document. The measurement is in pixels, which is the measurement used for screen display, although you can select inches or centimeters. These latter two measurements don't have much meaning on the web, however.
Resolution: Tip #2 talked about the importance of screen resolution in terms of giving sizes for images you are creating or modifying. The resolution setting here in the New Document window is talking about the amount of information or data that an image contains, and resolution directly translates into quality of the image. This is a very important issue when dealing with graphics for print, as is described in Tip #6. However, monitors are much more limited (compared with printers) in terms of their ability to display or show resolution quality on the screen. Furthermore, the higher the resolution, the larger the graphic will be in kilobytes and the longer it will take to display on the user's monitor, especially if the user has a slow Internet connection. Therefore, when creating web graphics, you will normally use 72 as the resolution.
Canvas color: You have choices in the color of the background of the image (or the canvas color). The canvas can be a white background. It can be transparent; we have looked at transparency in Lesson 1 and you will remember that the JPEG format does not support transparency. If you were placing selections from photographs and the canvas background was transparent, you would have to save the new image in the GIF format to keep the transparency. You can also pick from the millions of colors available as the color of the canvas background.

Bitmapped versus vector images

The video Bitmapped versus Vector Images describes the basic difference between these two types of graphics. All graphics are either bitmapped, made up of pixels or dots turned on and off (and in different colors), or are vector, made up by instructions or mathematical statements. A circle done with a bitmapped tool is dots turned on in the "shape" of a circle. A circle done with a vector tool is made up by the program knowing the center of the circle and its radius.

Tools are grouped as bitmapped tools and vector tools.

Some of the tools in the tool panel are bitmapped tools, and some are vector tools, and Macromedia conveniently groups and labels them for you.

Since photographs are bitmapped images, we will mostly use bitmapped tools in this lesson, but as the class progresses we will use additional tools from both groups.

In Lesson 3 you will use more of the vector tools. Vector graphics have as an important trait that they can be resized, i.e., made larger and smaller, without the edges loosing quality.

You can draw with either bitmapped or vector tools.

As you work with both bitmapped tools and vector tools more, in Lesson 3, you may see how you can recognize graphics created with bitmapped tools versus graphics created with vector tools. The red flower in the screen capture to the left is a bitmapped graphic, and the blue flower and its container are vector graphics.

Photographs, whether they come from a scanner or from a digital camera, are bitmapped graphics - made up of dots turned on and off.

The important thing to remember as a beginner is that some tools create bitmapped images and some tools create vector images. And, as you will learn in future lessons, you use different procedures to edit and change bitmapped images and vector images.

Selecting parts of photographs

In Lesson 1 we looked at using the magic wand to select pixels in a photograph, in order to delete that part of the photograph. The magic wand is selecting pixel based on color. Two other selection tools you will use are the marquee tool and the lasso tool. These two tools select pixels based on their location, not their colors. Whenever you use either the magic wand, the marquee tool, or the lasso tool, you are identifying part of a bitmapped image--most often a photograph--that you want to perform some action on. In the marquee tool you can use either a rectangle or oval to select part of a bitmapped image. The lasso tool lets you select an irregular shape. Both of these are demonstrated in the video clip Selecting Parts of Photographs.

In the video the part of the original photo which is selected is copied to another new image. Before using either tool, after selecting that particular tool from the tool panel, pay attention to the setting for the edge in the Properties panel. The edge setting must be picked before you make the selection. The hard edge produces a straight edge, with no blurring; it leaves the edge of the selection as single-colored pixels. The anti-alias edge softens the edge of the object by changing the color of the pixels so they blend into the background or other objects. The feather edge blurs the edge of the selection. If you pick the feather option, you set the feather amount using the slider. The larger the number, the greater the amount of blurring. Both a hard edge and a feather edge are shown in the video on Selecting Parts of Photographs.

There are three edge options when you select parts of a photograph.

	The marquee tool gives two options. One is the marquee tool which lets you select a rectangle or square (hold down the shift key as you click and drag to get a square). In some ways, this is like cropping, except cropping does not allow for soft edges. The other choice is an oval marquee. Holding down the shift key as you click and drag makes a circle selection.
After selecting with a tool, you can drag the selection marks to another part of the photo, or you can click anywhere on the photo to clear the selection and then reselect a new area. You can only have one selection in a photography, but you can add to the selection by holding down the shift key and clicking in another part of the photo.
	The lasso tool gives two options: If you use the regular lasso tool, you click and drag an irregular shape which has no sharp points. If you use the polygon lasso, you click at the points of the polygon. In both cases, the selection area must be closed.

No matter which tool you use to select part of the photograph, you then have to copy the pixels by clicking on Edit on the main menu, then Copy (or use the shortcut key of Ctrl+C). With the pixels copied, you would then create a new canvas area using File, then New, giving an appropriate size for the canvas to hold the selection. Then you would use Edit, Paste to paste the copied pixel onto the new canvas area. You may have to crop off unneeded parts of the canvas, and possibly resize the new image.

A copied selection may not look like a rectangle, but the resulting graphic is a rectangle.

Even if it looks like the shape is irregular, as shown in the above screen capture, the shape of the graphic is still a rectangle (or a square) in terms of placing it on a web page.

If the original scanned photograph or slide has a different resolution than the resolution setting you use for the new document, Fireworks will give a warning message, asking if it can resample the original. This warning message is shown in the video clip Selecting Parts of Photographs.

Layers briefly

Layers are a powerful feature, first introduced by Adobe in Photoshop in the late 1990's, that allows you to put parts of graphics in separate areas so you can work with the parts individually and not hurt the other parts of the graphic. This concept revolutionized computer graphics, and it is not surprising that Macromedia has a similar concept in its graphic program.

We will look more more in depth at layers and how you use them in Lesson 4, but for now you need to turn on the display of the layers panel, if it is not showing, by selecting from the main menu Window, then clicking on Layers from the list of options. Once a panel or window is selected, it will have a checkmark in front of it in the Window listing. Most panels appear to the right of the document area.

Adding text to photographs

The Properties panel for text has different options.

Sometimes you will want to use photographs without any text, but in other cases you may find that having text clarifies the purpose of the image. If you open an existing photograph, if you click on the text tool in the tool panel (highlighted to the left), you are telling Fireworks that you want to create a text area. The Properties panel (also highlighted in the left screen capture) will show properties for the text.

We will look more closely at what many of these parts of the text Properties panel mean in Lesson 3, but for now keep in mind that it is the Properties panel that controls the type of text (the font style), the size of the text, and even the color of the text. The video Adding Text to Photographs illustrates two ways to add text: one is to put text over the image, covering up part of the image. A second way is to put text outside the image. To do the latter, however, you have to increase the canvas size. This is demonstrated in the video.

It depends on your situation whether you will want to have text inside the photograph or outside the photograph. Even if you put the text outside the photograph, the text is still part of the final graphic you are making.

Text is put in its own layer so it can be manipulated.

Anytime you select the text tool in Fireworks, text is put in its own layer in the layer display, as is shown in the screen capture above and in the video Adding Text to Photographs. Having text in its own layer lets you move the text without erasing pixels in the photograph, change properties of the text (like adding drop shadows which are covered in Lesson 5), or delete the text if you decide you don't like it as part of the graphic.

Adjusting levels of light

The tonal range of an image represents the amount of contrast or detail in the image and is determined by the image's distribution of pixels, ranging from the darkest pixels (black) to the lightest (white). You can correct a photo's contrast by using the levels option. If an image is perfect, you do not need to make this adjustment, but there are many cases where images are not.

With the image selected, either as a background or as a copy of the background, click on Filters from the main menu, then pick Adjust Colors and then Levels.

The resulting histogram which appears, as shown below, shows the distribution of pixels across the white to black scale. The white pixels are on the right side of the histogram and the black pixels are on the left. This particular photo was taken with too many shadows in the woman's face. You can see that the histogram is not proportional in the distribution of light and dark pixels.

The levels display shows distribution of dark and light pixels.

You can fix this particular photo (or at least improve it) by dragging to the left on the right triangle for the lightest colors. Furthermore, in this case, you would want to drag the midtone triangle (in the middle of the histogram), more to the left to lighten up the photography. Adjusting levels in this dark-face photo is shown in the video Adjusting Lighting Levels.

In this video for adjusting lighting, as well as the video for color adjustments, I duplicate the layer containing the original photo, and make changes in the duplicate layer. It is not necessary to duplicate a layer before making level changes, but doing so allows me to compare quickly the original image with the adjustments being made.

Sliding the triangles in the histogram changes the distribution of light and dark pixels.

Adjusting colors

Some photos contain color casts (an imbalance of the colors) which may occur during the scanning or which may have existed in the original image. The video Adjusting Colors in Photographs illustrates a photo of people in a grassland area in a woods which has a color cast. This can be quickly fixed, sometimes, by using Filters, Adjust Color, Hue/Saturation. Dragging along the Hue bar changes the coloring of the image. Dragging along the Saturation bar changes the intensity of the colors. You will get a chance to practice playing with adjusting colors in the exercises.

Sliding the hue bar will change the coloring of the photo.

Besides fixing (or removing) color casts, you can also consider adding a particular color cast to a photo. Color is, after all, a factor that contributes to mood, although different cultures have different associations with the same color.

This material was used in a distance class on Using Fireworks MX 2004 to Create Basic Web Images, given by Linda Ffolliott, ECAT, in the College of Agriculture and Life Sciences at the University of Arizona.