Creating lighting effects quickly and easily with Macromedia Fireworks

March 20, 2006 Web Programming No Comments

Creating the effect of light can be useful in designing web graphics with Macromedia Fireworks, and can quickly and easily add interactivity to your images that will enliven the page viewing experience for your users. Adding simple mouse-over lighting effects is much easier than you might think, allowing you to create complex images in almost no time. The following example uses the lighting effect to indicate to the user which buildings are wireless-enabled when he or she mouses over them. If a building is enabled, it lights up when the cursor is placed on it:

In this example we have chosen to ‘illuminate’ the whole building, but this effect can be used to create the effect of light through a window, a keyhole, or almost anything. Here’s how it’s done:

  1. Using the Polygon Slice tool, trace around the area you want to lighten (you don’t have to be perfect - it will become obvious why in a couple of steps). This will create polygonal slices in the shape of the objects you will be lightening.
  2. Copy the selection you have traced to another file. In the case of our example, this file contains all the buildings that can be lighted, in a file called buildings.png:

    The image “http://vaskenhauri.com/blog/stuff/buildings.jpg” cannot be displayed, because it contains errors.

  3. Next, simply select all of your objects from the buildings (or equivalent) file, choose ‘Filters,’ ‘Adjust Color,’ ‘Brightness/Contrast’ and up the brightness setting between 25 and 50, depending on your preference.
  4. Now, begin pasting the brightened objects back into your image’s ‘Frame 2,’ which you can create by selecting ‘New/Duplicate Frame’ from the ‘Frames and History’ window. When you get near where they ‘belong,’ they should snap back into place.
  5. Back on Frame 1, right-click on each lighting object and choose ‘Add Swap Image Behavior.’ By default, Fireworks will swap with the same area in Frame 2, meaning you don’t have to map anything at the next menu. Since the rest of your image exists in both Frames 1 and 2, your sloppy job of cutting earlier simply appears as a charming ‘diffuse glow’ effect on whatever you’ve chosen to illuminate.

Now, when your visitors decide to visit a link, you’ll always be able to leave the light on for them.

Tags: , , , , , , , ,