Linda Rathgeber-Stewart

Playing With Fire
Project VII

For a Fireworks enthusiast, there’s nothing more fun than spending time playing around with new techniques. The project that follows is the result of a day’s worth of experimentation, and is one of many projects included in my new Fireworks e-book, Razzle Dazzle. You can learn more about Razzle Dazzle here: http://www.webdevbiz.com/pwf/razzle.cfm

Collages are two-dimensional reliefs of artistically arranged materials such as photos, newspaper, wallpaper, printed text and illustrations, cloth, and string. While you can’t assemble a two-dimensional work on screen, Fireworks comes loaded with the tools you need to create the illusion of two, and even three dimensional objects. I’ll walk you through a few of them in this article.

Requirements

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

Fireworks MX 2004

• Try
• Buy

Tutorials and sample files:

• collage_samples.zip (55 KB)

The Background

The background image for the collage is a folded, crumpled, and stained sheet of paper. It’s not a photo, though. You’re going to draw it yourself.

1. Select File > New to open a new document window.
2. Set the size to 308 pixels wide by 340 pixels high. Set the background color to gray #999999.
3. Select the Rectangle tool and drag out a 149 pixel wide by 165 pixel high rectangle.
4. Position the rectangle 5 pixels down from the top, left corner of the canvas (X:5, Y:5).
5. Click the Fill category selector of the Property inspector and choose Gradient > Linear.
6. Click in the Fill Color box to open the Gradient editor.
7. Click the swatch to open the Swatches pop-up menu and use the built-in color picker to select the white swatch.
8. Click the right swatch in the Gradient editor and double-click just to the left to the # in the text box at the top of the Swatches pop-up menu.

9. Type the number #ECE9D8, and then press enter to accept the color and close the Swatches

   

   Figure 1. The Swatches pop-up menu

10. Press Enter a second time to close the Gradient editor.
11. With the rectangle still selected, select Edit > Clone.
12. Use your right arrow key to move the clone to the right of the first rectangle.
13. Press Shift-click and select both rectangles.
14. Choose Edit > Clone, and then use your down arrow key to move the cloned rectangles below the first two.

Your image will look like this, but twice its size.

Figure 2. The image after being cloned

Next, you will create the crumpled edge for the background.

1. Click the lower left rectangle to bring up the gradient adjustment handles.

2. Rotate the gradient adjustment bar until the square handle touches the bottom, right of the rectangle.

   

   Figure 3. Rotating the gradient

3. Select View > Grid > Show Grid, and then View > Grid > Edit Grid.

4. Change the cell size of the grid to 20 pixels by 20 pixels, then click OK to accept the changes and close the dialog box.

   

   Figure 4. Changing the cell size of the grid

5. Click the lower right rectangle, and then select the Distort tool.

   

   Figure 5. Using the Distort tool

6. Drag the lower right corner of the rectangle two grid cells up and two to the left.

   

   Figure 6. Dragging the corner of the rectangle

7. Release and switch back to the standard pointer (black arrow).
8. With the bottom right rectangle still selected, click the down arrow of the Fill category selector.
9. Change the gradient type from Linear to Cone.
10. Click the Fill Color box to open the Gradient editor.
11. Add two new swatches by clicking twice on the empty space between the existing swatches.
12. Click the First swatch and change its color to #FBF9F1.
13. Change the second swatch color to white. The third swatch color is #DFDBC9.

14. The fourth swatch is white.

    

    Figure 7. Changing the swatches

15. Position the gradient adjustment handle as you see in figure 8 below.

    

    Figure 8. Positioning the gradient

Voila! A crumpled edge. Who could have thought it would be so easy?

Figure 9. The background with a crumpled edge

Adding Texture

Now add some texture to the edges with the Alien Skin "Splat" plug-in that shipped with Fireworks.

1. Shift-click to select all four rectangles.
2. Select Modify > Group.

3. Click the Add Effects button [+] on the Property inspector and choose Alien Skin Splat LE. The settings are 10.00 for Edge Width, 5.00 for Margin, 52 for Feature size, and Torn Paper for Edge mode. Click OK to close the dialog window.

   

   Figure 10. The background with the Effect applied.

4. Reopen the Effects menu and select Shadow and Glow > Drop shadow. The shadow settings are distance: 7, opacity: 40%, softness: 8, angle: 330, color: #333333.
5. Open the Layers panel and double-click the title bar of Layer one.
6. Type the name background into the layer name dialog box and press Enter.

How about a faux stain? You can customize one of Fireworksbuilt-in strokes to emulate the foxing finish you see on old books and documents.

1. Select on the menu expander icon of the Layers panel and choose New Layer from the menu. Name the layer texture.
2. Click the Menu expander icon again and choose Single Layer editing.

3. Drag out an 85px by 85 px ellipse. Use no fill but add an Unnatural > Fluid Spatter stroke. The stroke settings are 56 for Tip size, 100 for Softness, and #666633 for color.

   

   Figure 11. Applying a faux stain

4. Once you've finished styling the stroke, apply the Tint blend mode to it.

Next you'll use text to create some background noise.

1. Select the text tool, and then drag a text box over the top left rectangle of the background.

   

   Figure 12. Creating text for background noise

2. Type out a paragraph or two of nonsense text, like "Lorem Ipsum," in a sans serif font. I've used Arial at 10 points, and colored pale gray.
3. Clone the text, change the color, and arrange the clone artistically over the right half of the base image.

4. Clone the text again, change its color to white, and arrange it over the bottom, left rectangle of the background image.

   

   Figure 13. Cloning the background noise text

The Image Layer

Insert a new Layer and name it graphics.

1. Select File > Import.
2. Browse to the grapes.jpg file you downloaded at the beginning of this lesson and click it to select it
3. Select Open.

4. Position the import cursor over the upper left rectangle of the background image, and then click to deposit the image. The image will appear overlarge for its setting. You'll reduce the size in the next step.

   

   Figure 14. Positioning the image

5. With the grapes image selected, click the Add Effects button [+] in the Property inspector.
6. Select Alien Skin Splat LE > Edges.
7. Set the edge mode to Rough. Use 12.32 for Edge Width, 0 for Margin, 84 for Feature size.
8. Click OK to close the dialog window.

Just for the fun of it, you're going to draw some sticky tape to hold the grape photo and paper to the canvas. I'll do the screen shots for this in a separate document window to make it easier for you to see the steps. If you prefer, draw yours on a separate window too. You can copy it to your working document when you've finished.

1. Select the vector rectangle tool and drag out a 110 pixel wide by 30 pixel high rectangle. Fill the rectangle with white.
2. Select Modify > Ungroup to convert the rectangle primitive to a path.
3. Select the Pen tool, then zoom in so you can see what you are doing.

4. Draw a ragged line over one of the ends of the rectangle.

   

   Figure 15. Creating the tape to hold the photo

5. After drawing the ragged line, continue drawing with the Pen tool until you have formed a box. You want to create a closed path, so make sure you click when you return to your beginning point.
6. Clone the ragged box shape.
7. Select Modify > Transform > Flip Horizontal.
8. Use your arrow keys to move the clone over the left end of the white rectangle.

9. Select Modify > Transform > Flip Vertical.

   

   Figure 16. Cloning the tape

10. Shift-click to select both ragged edge boxes.
11. Choose Modify > Combine Paths > Join.
12. Once you have joined the two ragged edged boxes, press Shift and select both the boxes and the Rectangle.
13. Choose Modify > Combine Paths > Punch, to punch the boxes through the rectangle.
14. Reduce the opacity of the shape to around 48.
15. Add a 1 pixel, white, Soft Rounded stroke.
16. Click the down arrow of the Fill category selector of the Property inspector and choose Web Dither.
17. Click in the Fill color box of the Property inspector to open the dither editor.
18. If the source color is not white, click in its fill color box to open the Swatches pop-up menu and select the white swatch.

19. Select the Transparent box option and press Enter to accept the changes and close the dither editor.

    

    Figure 17. Checking the Transparent check box in the Dither editor

Finally, arrange the tape over your image. I've place mine at the bottom of the grape picture, cloned it, then placed the clone at an angle over the top, left corner of the grape picture.

Figure 18. Arranging the tape over the image

A Header

Is it still called header text if it is not at the head? Use the following steps to create a header.

1. Select Edit > Insert > Layer.
2. Name the new layer text.
3. Click the text tool and select a font you like.

Many kinds of fonts would look good with this image. A historical looking font like Poor Richard would work nicely. So would a casual handwriting font, like Freestyle Script. I’m going to use Freestyle Script at 32 points.

1. Pick a color from the grape image for your text.

2. Type a short, two or three line phrase that you would use to introduce an article on a web page.

   

   Figure 19. Adding a header

Fool the Eye

The optional final step is to make the right edge of the photo look like it was folded with the paper.

1. Draw a rectangle over the right edge of the photo. Line it up with the creases in the paper. Fill the rectangle with gray #CCCCCC.

2. Draw a second rectangle just below the first one.

   

   Figure 20. Making the right edge of the photo look like it was folded with the paper

3. Select the top rectangle and reduce its opacity to 40%. Add the Screen blend mode.
4. Select the second rectangle and change its edge type from Anti-Alias to Feather. Set the amount of feather to 4.

5. Reduce its opacity to 40% and Add the Lighten blend mode.

   

   Figure 21. Adjusting the appearance of the text

The background image you created for this collage could be useful for many projects, so be sure to save a copy.

Experiment with adding different kinds of photos, drawings, edge types, and text to the background.

It might be interesting to try a text-only collage that begins with a beautiful drop cap. Have fun with the idea!

As I mentioned at the beginning of the article, this project is one of many included in my new Fireworks e-book, Razzle Dazzle. You can learn more about Razzle Dazzle here: http://www.webdevbiz.com/pwf/razzle.cfm

About the author