Image Editing Using Adobe Fireworks

Image Editing Using Adobe Fireworks
Page content

Images for the Web

Many images are shot for Web use, while other images are used for advertising on digital media. Even some portraits are commissioned just for digital media. More and more photography is used for media other than print. Keeping this in mind, using Adobe Fireworks for image editing makes setting up images for the web seamless.

Some uses for Fireworks include using the slice tool on an image map, making hot spots on an image or making an image a hot spot, putting text on an image, replacing color, sizing an image for a banner and simple image manipulation are just some of the uses for Adobe Fireworks. If the web designer is also using Adobe Dreamweaver, the image can be inserted by using the Quick Export button on the upper left corner of the Image Tool Bar.

Tools Panel

The Tools Panel (Figure 1) has many tools that are similar to those in Photoshop. It is divided into functional sections. By grouping types of tools together, it makes editing more intuitive.

  • Selection and Sizing Tools - Here are the tools to size, rotate or scale an image along with the selection tools.
  • Bitmap Tools - These are the image editing tools. The erase tool, smudge, magic wand and other tools used with bitmaps.
  • Vector Tools - Text and line tools are here.
  • Web Tools - These are the slices for image maps and hot spots. These will come in very handy for Websites.
  • Colors - Fill, sample and stroke tools.
  • View - screen views, the move tool and the zoom tools are here.

Panels

Besides the Tools Panel, there are panels that can be opened on the desktop when using a particular set of tools. The Image Editing Panel is particularly useful. (Figure 2) The tools can be sized and the settings changed by using the Properties Panel. (Figure 3) Laying out the desktop panels is designed similar to Photoshop Palettes. They all can be separated and moved around to suit the user’s preferences and work style.

Figure-3

Figure-2

Web Tools

So far, basically everything is designed like many other photo editing applications. The difference comes with the Web Tools. Many Web designers use images for hot spots because they can use a picture of an item to relay the message of the product. For example, a Website is selling Compact Flash cards and they have many types of cards. Each card can be a hot spot that, when clicked on, leads to more product information.

In Figure 4, the designer wants to use the sign in the picture to lead the viewer to more information on Production Specialties. Select the Hot Spot Tool and in the Properties Panel name the spot (Text), put in the link to the page with more information, put in the Alt text, set the target and draw a blue rectangle around the Production Specialties sign. It is just that easy.

Now the image can be inserted into the Web page by using the Quick Export button (Figure 5). Once the image is uploaded and on the site, when someone clicks on the Production Specialties sign, it will open a new page with the information.

Figure 4

Figure 5

Simple Image Editing

If an image is to be inserted into a Web page that has particular color scheme and the designer wants a part of the image color changed, the Color Replacement Tool will do this in a couple of steps. The blue cow in Figure 6 has been changed to red using the Color Replacement Tool. Select the Color Replacement Tool and in the Properties Panel change the dropdown menu from swatch to image. Now, click on the color square and use the Eyedropper Tool and click on the blue around the cow. Next, in the Properties Panel, click on the “To” color square and choose red. Now, paint around the blue area to be changed to red.

The image was also cropped using the crop tool from the Selection and Crop Tools section of the Tools Panel. (Figure 6)

Figure-6

Summary

Adobe Fireworks is made for simple image editing, creative edits, image manipulation and Website prep. It is easy to use and extremely versatile for images that are to be used only on the Web. The really nice function is that Fireworks is part of a Web Suite of applications designed to work together. Fireworks is not designed for complex color corrections or other advanced image editing techniques that are usually associated with print images.