Computer screen shots are a widely used tool in both web and print documents that show readers what the writer is talking about. Often, however, multiple screen shots are used in one document or file (like this one), which can make for a long document or a large file. One way to avoid having to provide multiple screen shots is to add certain elements, such as numbers, circles, or arrows, to make it easier to discuss different parts of a screenshot using just one image. This tutorial will show you how to add numbers to a screen shot using Macromedia's (now Adobe's) Fireworks MX 2004.

1. Create and save a new Fireworks document.

• Open Macromedia Fireworks MX 2004. A dialog box will open.
• Under the Create New heading (top right), click on "Fireworks File."
• A New Document dialog box will appear (see Figure 1).
  Figure 1
  

• Under Canvas Size, accept the Width (800 pixels) and Height (600 pixels) given. These can be modified later. Leave Resolution at 72 pixels/inch, as this is optimal for web image viewing.
• Choose a Canvas Color or accept the default. If your image ends up smaller than the canvas, this color will show around the image, like a border. This also can be modified later.
• Click "OK" at the bottom. A new, untitled document will open in Fireworks.
• Under the File drop-down menu (top left), select Save As.
• Go to the directory where you want to save the file.
• Give your file a name.
• Click on the Save button (bottom right). The file will be saved as a .png.

2. Create and insert a web screen shot.

• Leave the new Fireworks document open.
• Open any web browser (Firefox, Internet Explorer, Netscape, etc.).
• Go to a web page you want to capture as an image.
• Take a screen shot by pressing the Print Screen button on your keyboard. As this takes a shot of the actual screen you are viewing, make sure all elements you want to see are on the screen. For example, if a page has banner ads at the top of the screen and you don't want them in your screen shot, scroll down past the banner ads so that they are no longer visible on the screen.
• Return to the Fireworks document.
• Press Control V on your keyboard OR right-click anywhere on the canvas area and select Paste from the drop-down menu. The image should now appear on your screen in Fireworks.
• If you can't see the whole image on your screen, go to the View menu, select Magnification and then 50% (see Figure 2).
  Figure 2
  

3. Crop and resize your image.

Your document probably includes parts of the screen that you don't need to refer to, such as toolbars at the top and bottom, so you will want to crop the image.

• On the Tools panel (on the left side), under the Select section, you can choose from four tools.
• Put your cursor over the bottom right tool. If the words "Crop tool" appear, click on that tool. If the words "Export Area tool" appear, hold down your left mouse button. A drop-down menu will appear. Select "Crop tool." (see Figure 3)
• Put the crop tool on a corner of your image.
• Hold down your left mouse button and drag the tool across the image until you have selected the area you want. You can adjust the area using the small squares on the edges of the selected box.
• Once you are satisfied with your selected area, double-click anywhere inside the area.

  You may want to resize your image now.

• To see your image at 100% magnification (actual size), hold down Control 1 on your keyboard.
• Under the Modify menu at the top, select "Canvas" then "Image Size." An Image Size dialog box will appear.
• Change the top Pixel dimension number to 600. If the second dimension does not change automatically, make sure the "Constrain proportions" box is checked (bottom left)
• Click "OK."

4. Add number elements.

• On the Tools panel (on the left side), under the Vector section, select the "Text tool" (see Figure 4). A Properties toolbar should appear at the bottom of the screen. If it doesn't, click on the word "Properties" at the bottom left.
• On your image, hold down your left mouse button and drag it to draw a box next to the item you want to draw attention to.
• Type a number "1."
• Click just outside the blue box so that the box is still visible OR double-click on the number inside the box to highlight it.

• Now you can experiment with changing the font, size, color, and other elements in the Properties toolbar at the bottom. This is the fun part!
• If you want to undo something, hold down Control Z on your keyboard.
• Repeat the procedure for adding new numbers.
• To move your number, go to the left Tools panel under the Select section and click on the "Pointer tool" (top left).
• Put the pointer on the number, hold down the left mouse button, and move it anywhere you want to in the image.
• Save your image periodically by holding down Control S on your keyboard.

You should end up with something like the following picture. Now you can use just one screen shot and discuss each element by referring to its number.

5. Free Fireworks MX 2004 tutorials.

When browsing for tutorials, make sure you find ones that are for this older version of Fireworks.

• Entheos Web Design.
• Computer Based Training (CBT) Cafe. Video tutorials. A little more advanced.

(Return to ENG505 Projects page)