Jim Babbage

newmediaservices.ca
communitymx.com

Macromedia Fireworks 8 is packed full of neat things but, in my opinion, one of the coolest is the addition of 26 different blend modes. Adding to the blend modes opens up a world of creative potential. I admit it: I'm a Fireworks junkie. Although I do a great deal of my image work in Fireworks, I also like to play around in it, experiment, and create. The new blend modes make Fireworks a much bigger playground.

Blend modes can be applied to layers or objects in Fireworks. The impact of a blend mode is controlled primarily by the colors in the images being blended, as well as by the opacity of the layer or object.

Requirements

To complete this tutorial you will need to install the following software and files:

Fireworks 8

• Try
• Buy

Tutorials and sample files:

• all_blends.zip (8.47 MB)

Prerequisite Knowledge

A general understanding of Fireworks and where the blend modes are found in the Fireworks user interface.

A Quick Introduction to Blend Modes

Frankly, I never realized how much math was involved in blend modes. I don't pretend to understand the formulas but, if you are interested, make sure you check out this article, Blend Modes, by Jens Gruschel for more algebra than you can shake a PNG file at.

What follows here is my interpretation of blend modes based on some of my own research and experimentation. Some explanations of these color modes were—to me, anyway—only comprehensible to a scientist. In situations like that, I do my best to explain what I believe is happening.

For a blend mode to do anything, there must be at least two objects or layers containing pixel data. The result of a blend mode is based on how color pixels from each object react to the mode chosen.

A blend mode contains the following elements:

• Opacity: Degree of transparency to which the blend mode is applied
• Blend color: Color you add with your paint tool or that is already on the layer which will have the blend mode applied
• Base color: Color of pixels underneath the blend color
• Result color: What you get after "blending"

Blend modes affect how the colors of one layer or object blend with the colors of a layer or object directly below it. If you apply a blend mode from the Layers panel, it affects the entire layer or object; it is not affected by bitmap selections.

Each object and each layer can have its own blend mode. Talk about permutations! Blend modes can also be applied to vector tools such as shapes, text, pen, and line tools. You can set the blend mode before you draw or afterwards. Blend modes applied to vector images are always editable, even if the vector is filled with a bitmap texture or pattern.

Another great feature of blend modes is that you can apply them with the bitmap paint tools (paint brush, pencil, and paint bucket). Select the tool, choose a fill color, choose a blend mode from the Properties inspector, and then paint. This gives you very detailed control over the effect of a blend mode but, unlike object and layer application, this method is also destructive; it changes pixels permanently. I think this feature may be very useful to those with drawing tablets. It's even fun using the mouse (see Figure 1).

Figure 1. Collage of two images using a vector mask and the subtractive blend mode on the image in the horizon. I added a zoom blur to this image and then applied multiple paint brush strokes at varying sizes with different blend setting (see source file beach_blend.png).

You can also combine blend modes, the paint brush, and bitmap selectios to enhance a particular area of your image (see Figure 2). I used the Magic Wand tool to select the yellow leaf. Then using the Paint Brush tool, I selected the Freeze Blend mode and a paint color of #FF6600 to give the leaf some surreal snap (see Figure 3).

I like to categorize the blending modes in Fireworks as follows:

• Opacity modes: Normal and Average
• Darkening modes: Darken, Multiply, Color Burn, Inverse Color Burn, and Soft Burn
• Lighten modes: Lighten, Screen, Color Dodge, Inverse Color Dodge, and Soft Dodge
• Lighting Effects modes: Overlay, Soft Light, Fuzzy Light, and Hard Light
• Invert modes: Difference, Exclusion, and Negation
• Color modes: Hue, Saturation, Color, Luminosity, Red, Green, and Blue
• Thermal modes: Reflect, Glow, Heat, and Freeze (OK, so "thermal modes" is my idea but with mode names like heat, I couldn't help myself)
• Math modes: Additive, Subtractive, Subtract, Interpolation, Stamp, and XOR Invert and Tint are grouped together, but I think they'd be happier in the Invert and Color families

New Blend Modes in Fireworks

Twenty-six new blend modes are available to you in Fireworks 8. Your old friends from earlier versions of Fireworks are still there as well (screen, multiply, and so on). Many of these new modes are not even available in Adobe Photoshop. However, if the mode does exist, Photoshop recognizes the mode if you open an exported PSD version of your Fireworks file. Even better, Flash 8 Professional supports the following Fireworks blend modes:

Average	Soft Light	Reflect
Color Burn	Fuzzy Light	Glow
Inverse Color Burn	Hard Light	Freeze
Soft Burn	Exclusion	Heat
Color Dodge	Negation	Additive
Inverse Color Dodge	Red	Subtractive
Blue	Green	Interpolation
Soft Dodge	Stamp	XOR
Subtract	Overlay

When Flash reads the data in an unflattened Fireworks PNG file, those blends modes are understood and transferred to the corresponding blend modes in Flash (see Table 1).

Table 1. Corresponding Fireworks Blend Modes in Flash

Fireworks	Flash
Darken	Darken
Multiply	Multiply
Lighten	Lighten
Screen	Screen
Overlay	Overlay
Hard Light	Hard Light
Additive	Add
Subtractive	Subtract
Difference	Difference
Invert	Invert
Erase	Erase

While all these modes are mathematically different, in some cases the difference can be subtle—or shocking—and will vary depending on the images you use. I strongly recommend experimenting with them.

The flexibility of blend modes in general can be a bit daunting; there is just so much you can do with them, you might not know where to start. To help you out, I will provide a brief description of each new mode and show a sample image. Take it from me: Blending two standard bitmap images is only the tip of the iceberg. Adjusting the opacity of the blend layer can give you some very noticeable changes. For consistency, all the examples shown here have the blended object set to 100% opacity. Feel free to experiment with the all_blends.png file included with the sample files linked to at the beginning of the article. Each blend mode appears on a separate, labeled frame. While reading through the following examples, you may want click the appropriate frame (Window > Frames) to see the blend mode in Fireworks for yourself.

In many cases, blending two entire images does not do the blend mode any justice, so don't take my results completely at face value. Using different images which contain different colors and brightnesses can greatly influence how a blend mode behaves. Using the blend modes with the paint tools may be more suitable it some cases.

For the purposes of comparison, I have chosen to stick with the same image for blending, but I have used two different images as a base image for each blend. With any blend mode you see here, there are only two images together in Fireworks.

Opacity Modes

Average

Average mode looks just the same as Normal mode when Normal is set to 50% opacity. It has similarities to the Additive and Subtractive modes, two of the main differences being contrast and saturation (see Figures 7 and 8).

Darkening Modes

Color Burn

The lightness values of the colors in the blend image modify the underlying image by making them darker. Blending with white produces no change. The blend image is made up of light yellow flowers, so we get increased saturation of the yellows using the leaves image (see Figure 9) and increased saturation of the reds with the rose base image (see Figure 10). Dark areas in the blend image block out the base image.

Inverse Color Burn

The yellow roses come through in this heavily saturated example (see Figure 11) and they almost look like they are the red roses in the second example (see Figure 12).

Soft Burn

Similar to Color Burn, the Soft Burn blend mode shows slightly less saturation and contrast. The yellow roses come through in this heavily saturated example (see Figure 13) and they almost look like they are the red roses in the second example (see Figure 14).

Lighten Modes

Color Dodge

The lightness values of the colors in the blend image modify the underlying colors, making them lighter (see Figures 15 and 16). Black produces no effect. In both cases, to me, the images seem overexposed and high contrast at the same time.

Inverse Color Dodge

I rather like this result. You get soft pastels when the light yellow roses are blended with the first base image of the leaves (see Figure 17). I prefer the second example using this blend mode (see Figure 18), in which the red roses are in the second base image.

Lighting Effects Modes

Overlay

This mode combines the Multiply and Screen modes, and is influenced by the base color (see Figures 19 and 20).

Soft Light

Here colors are darkened or lightened, depending on the blend color. Soft Light combines the features of the Dodge and Burn modes, creating soft shadows and highlights, and a lower contrast, less saturated image than other examples. In these two examples, the lighter tones of the first base image have a completely different impact on the blend image (see Figure 21) than the darker tones of the second base image (see Figure 22).

Fuzzy Light

Very similar to Soft Light, the Fuzzy Light blend mode creates darker shadow areas (see Figures 23 and 24).

Hard Light

Combining features of the Screen and Multiply modes, Hard Light is used to show highlights and shadows (see Figures 25 and 26).

Invert Modes

Exclusion

With the Exclusion blend mode the blend colors are subtracted from the base colors to invert the colors (see Figures 27 and 28). The colors are inverted according to the difference between them. Black has no real effect on the image.

Negation

Similar to Exclusion, the Negation blend mode shows brighter and more vibrant colors (see Figures 29 and 30).

Color Modes

Red

You can see here how the light areas of the yellow roses in the blend image seem to act like a red mask in Figure 31. In Figure 32 the roses all seem to become one unified image. The Green and Blue blends are more obvious

Green

With the Green blend mode, notice the light areas of the blend image take on a green cast when the color below is dark (see Figure 33). When the color below is not dark, the blend image color is mixed with green to produce the resulting color (see Figure 34).

Blue

Notice with the Blue blend mode that the light areas of the blend image take on a blue cast when the color below is dark (see Figure 35). When the color below is not dark, the blend image color is mixed with blue to produce the resulting color (see Figure 36).

Thermal Modes

Reflect

Ow, my eyes! This blend mode is similar to the Color Dodge, except that the colors seem more saturated and darker (see Figures 37 and 38).

Glow

This blend mode is the opposite of Reflect. You can see that there is much more detail in the blend image in this example (see Figures 39 and 40).

Freeze

It doesn't look frozen to me but apparently this blend mode is a variation of the Reflect mode, inverted, and then inverted again (see Figures 41 and 42).

Heat

This blend mode is the opposite of Freeze (see Figure 43). To me this one has that harsh, posterized look of an Andy Warhol piece, especially in Figure 44.

Math Modes

Additive

This blend mode tends to brighten up the image overall. It adds the base color to the blend color (see Figures 45 and 46).

Subtractive

I like the subtle darkness of these images; there's still plenty of detail but it's very subdued (see Figures 47 and 48). It's the opposite of the Additive blend mode.

Subtract

With the Subtract blend mode the yellow roses are inverted and blended with the base image (see Figures 49 and 50).

Interpolation

The Interpolation blend mode (see Figures 51 and 52) combines the Multiply and Screen modes. It's similar to Average but has improved contrast.

Stamp

Stamp is similar to the Average blend mode but the results are noticeably more saturated and higher in contrast (see Figures 53 and 54). Brighter or darker colors make the background brighter or darker but gray tones have no effect on the background. With these examples, you have some extreme brightness differences between the images, so the result is quite vivid.

XOR

Everything I've read about the XOR blend mode says it's not good for photos, so naturally I had to use photos on it. I think it's pretty cool, if weird. To me it looks as though three different blend modes have been thrown together (see Figures 55 and 56).

Using Blend Modes Creatively

Applying a blend mode to one image that is stacked above another is just the beginning of the fun you can have. Once you start applying blends to vector and bitmap objects, and objects of varying sizes, you can really go to town. Take Figure 57 as an example (blending_modes.png).

Figure 57. Completed composite, using a variety of blend modes, masking, and the new Add Shadow command

Here's how you can create this image:

1. Open the blending_modes.png file included in the sample files linked to at the beginning of this article.
2. Create a duplicate layer of the Background layer.
3. Add a Gaussian Blur Live Effect on the upper image.
4. Apply the Darken blend mode to the same image.
5. Create a new layer above the photos.
6. Choose the Rectangle tool.
7. Set the Blend mode to Freeze in the Properties inspector.
8. Change the Fill from Solid to Smudge Green pattern.
9. Set the Stroke to light gray (#CCCCCC), 4 pixel, and hard line.

10. Draw a 260 x 190 pixel rectangle.

    Notice how the rectangle is semitransparent. This is not the same as just altering the opacity of the rectangle, however. Even though the object is translucent, some of the colors are still very rich, while others almost disappear. This effect directly corresponds to the tone of the image underneath: darker tone = more color/detail; brighter tone = less color/detail. These differences are most noticeable against the snow.

11. Place the rectangle so that it covers one quarter of the Inukshuk statue. Notice the color shift of the green texture when it is over the top of the statue.
12. Adjust the angle of the pattern fill.
13. Create three more copies of the rectangle and place them equally around the statue.

14. In a clockwise manner, change the blend modes in the Properties inspector as follows:

    1. For the upper right rectangle:

       1. Set the blend mode to Heat and set Opacity to 80.
       2. Add a Hue/Saturation Live Filter.
       3. Set Saturation to –100.

    2. For the lower right rectangle:

       1. Set the blend mode to Interpolation and Opacity to 100.
       2. Add a Hue/Saturation Live Filter.
       3. Set Hue to 127

    3. For the lower left rectangle:

       1. Set the blend mode to Soft Dodge and set Opacity to 100.
       2. Add a Hue/Saturation Live Filter.
       3. Set Saturation to –100.
15. Make the top photo active.
16. Use the rectangular Marquee tool to draw a selection around the outside perimeter of the four small rectangles.
17. Zoom in and adjust the Height and Width values in the Properties inspector to ensure that the marquee is accurate.
18. Choose Select > Select Inverse from the menu.
19. Click the Add Mask Icon in the Layers panel. This knocks out the blurred part of the Inukshuk without permanently deleting it. The sharp statue now appears.
20. Type the text Northland Winter in a suitable font.
21. Fill it with the same pattern you used in the rectangles.
22. Add a drop shadow or use the new (and very cool) Add Shadow command (Commands > Creative > Add Shadow). This command creates a faded, perspective shadow based on a selected vector object.

Where to Go from Here

I intentionally used very different images for the blend mode samples as I did for the photo illustrations in the hopes that you would see the many creative options available to you. Feel free to experiment with the supplied PNG files but please do not use them in commercial work without contacting me first for permission. These are copyrighted images—property of me, Jim Babbage.

For more information about the basic application of blend modes, please check out these resources:

• Fireworks 8 Help files (Window > Help)
• Fireworks LiveDocs
• Blend Modes by Jens Gruschel

About the author