Well, there's a chill in the air. The leaves have fallen, the wind is brisker, and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own" snowman Web page. In Fireworks we will create all the essential ingredients for our frozen friend. Then, in Dreamweaver, we'll use the Drag Layer behavior to create a Web page where we can move all the snowman pieces together and build our own snowman online. This is a great opportunity for our friends to the south who don't even get snow to have a little winter fun.

We will also make use of a different export option in FW: Export as CSS Layers. This is a little known - or little-used - feature, and comes in quite handy for jumpstarting our Web page.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Setting the Scene
1.  To begin, create a new Fireworks document that is 760 pixels wide x 420 pixels high. In the long run we won't need all of this space, but I find it useful to set up dimensions based on actual view port sizes. Everything we create in FW will be vector based, so it will be no problem to scale objects larger or smaller.
2.  Use the Rectangle tool and draw a box identical in dimensions to your canvas. The shape will act as our backdrop for our winter scene. With the rectangle still selected, go to the Properties inspector and change the Fill Category from solid to Gradient>Linear (see Figure 1).
3.  We'll customize the gradient from its default settings so that it changes from light blue (#00CCFF) to white (#FFFFFF), and then change the direction of the gradient so that it travels from top to bottom, rather than left to right.
4.  When you are happy with the gradient, name the layer "bkg" and then lock the layer by clicking on the lock/edit box in the Layers panel (see Figure 2). This will ensure we don't select or use this layer accidentally.

Now let's build our snowman!

Yo, Frosty!
First we will create the giant snowballs needed for the body.

1. Select the Ellipse tool from the Vector shapes in the Tools panel.
2. Set the Fill Category to Gradient> Ellipse (see Figure 3). The gradient colors need to be a very light grey (#DBDBDB) for the starting color and white (#FFFFFF) for the end color. This will help add some dimension to the snowballs so they don't look so flat.
3. Set your Stroke settings to the following:
   - Color: #CCCCCC
   - Tip Size: 15
   - Category: Charcoal>Soft
   - Edge: 50
   - Texture: Grain at 30%
4. Holding down the Shift key, drag an ellipse that is about 160 pixels in diameter. This will be our template for the body. Once drawn, the gradient will not be in the correct position. Select the Pointer tool and drag the gradient by its axis point to a position similar to that of Figure 4. Adjust the gradient control arms so they are similar to Figure 4 as well.

   Notice that because our bottom layer is locked, FW automatically creates a new layer for the ellipse to reside in. Name this layer "snowman."

5. Press F8 to turn this shape into a symbol.
6. Give the symbol a name, like "snowball" for instance, and choose Graphic as the Symbol Type.
7. Click OK. We'll use instances of this symbol for the tummy and head of the snowman (see Figure 5).

   What are symbols and instances? A symbol is a master copy of an object in Fireworks. It could be a vector shape or a bitmap element. Symbols are saved in the Library tab of the Assets panel, and can be reused over and over again. The benefit of using symbols is saving time. You are saved from having to redraw or copy/paste an object on your canvas, should you need additional versions of that object.

   An instance is a copy of the symbol and is created when you drag the symbol from the Library tab to the canvas. If you edit a symbol, all the instances of that symbol will change to match the symbol. You can also make some custom changes to the instances in terms of scaling, Live Effects, Opacity, and Blend Mode. These customizations are only applied to the selected Instance.

8. Open the Library tab of the Assets panel and you should see your symbol sitting there. To bring an instance of it to the canvas, click and drag the symbol icon to the canvas. When you let go of the mouse a new instance will appear. This is the tummy (or torso) of the snowman. It needs to be smaller than the base, so we will scale it numerically.
9. Go to Modify>Transform>Numeric Transform (Ctrl/Cmd+Shift+T). Set the Scale Values to 80%, as seen in Figure 6.
10. Hold down the Alt/Option key and using the Pointer tool, click and drag the tummy section upwards. This is another way to create an Instance (or a copy of anything, really) on the canvas. You'll see that we now have two identically sized ellipses and one larger one.
11. With the top ellipse selected, press Ctrl/Cmd+Shift+T to bring up the Numeric Transform dialog once again. The previous settings of 80% should still be in place. Press OK.
12. Position the three ellipses so that they overlap to your liking.
13. Shift+click each ellipse so that you select all three shapes.

    You can also Shift+click in the Layers Panel, or use the Pointer tool to drag over all three shapes.

14. Go to the Align panel. Make sure that the icons for To Canvas and To Anchors are both deselected (they will look orange if selected).
15. Choose the Align Horizontal Centers icon (see Figure 7) to line up all three snowballs.
16. Rename each object in the Layers panel by double-clicking on the default name. Keep the names short, with no spaces.

And Two Eyes Made Out of Coal . . .
The next thing we need is a lump of coal. This single graphic will serve multiple purposes: eyes, mouth, and buttons. We just need to create one, then turn it into a symbol.

1. Use the Ellipse tool once again to draw an oval, approximately 14 px wide by 18 px high. Fill it with solid black. Set the Stroke Properties to:
   - Color: #000000
   - Tip Size: 1
   - Category: 1-Pixel Soft
   - Edge: 0
   - Texture: Grain at 50%
2. Apply an Inner Bevel Live Effect. Go to the Effects area of the Properties inspector and click on the + sign. Choose Bevel And Emboss>Inner Bevel. Match your settings to those in Figure 8.
3. Convert this shape to a symbol by pressing F8. Name it "coal."
4. Drag eight more of these instances onto the canvas, for a total of nine lumps of coal. Place them accordingly. Leave a bit of a gap between two of the "mouth" coal pieces. Figure 9 shows my positioning.
5. When done, name each object via the Layers panel. Oh, and save your work if you haven't already.

Carrot Sticks, Anyone?
Okay, the real Frosty had a button nose, but I like the carrot method.

1. To create our carrot nose, select the Polygon tool. Set the Polygon Properties to match Figure 10.
2. Drag and create an equilateral triangle, with a flat, horizontal base. Set the fill color to orange (#FF9900) and the Stroke Properties as seen below:
   - Color: #000000
   - Tip Size: 1
   - Category: 1-Pixel Soft
   - Edge: 0
   - Texture: Grain at 0%
3. With the triangle selected, choose the Scale tool. We want the carrot to be long and skinny. Do this by dragging any of the center control handles.
4. We also want the flat end to be a little rounded. Choose the Pen tool, click in the middle of the bottom line of our shape, and drag the tool so that you pull out the Bezier Curve control arms. Drag until your cursor is resting over the bottom right anchor point for the triangle.
5. Choose the Subselection tool and pull the newly created anchor point down a few pixels, until the base of the triangle is curved (see Figure 11).
6. Go to Modify>Transform>Rotate 90 CCW to point our "nose" in the correct direction.
7. Let's add a few curved strokes to make the carrot nose look more rounded.
8. Zoom in to at least 400% so that the nose fills the canvas fairly well. Choose the Pen tool again. Click it about 2/3 of the way up the nose (Okay, that sounds gross. Kids, don't try this at home) to set an anchor point.
9. Move your mouse down to the bottom of the nose and then click and drag to create a curved line.
10. Double-click on the end anchor to disengage the Pen tool.
11. Select the Subselection tool, adjust the curve as needed, and position the curve so that it rests on the nose's black stroke.
12. Create a few of these by duplicating the one just drawn. Position them randomly, attached to the top and bottom strokes of the triangle. You can use the Subselection tool to alter the curve and the height of the line. Figure 12 shows my completed nose.
13. When you have all the curves positioned as you like, use the Pointer tool to select each object (including the carrot nose itself).
14. Press Ctrl/Cmd+G to group all the carrot objects together. Make sure you don't select any other objects by accident. Hold down the Shift key to make multiple selections. You can also do this in the Layers panel, rather than the canvas area if you find that easier to do.
15. Use the Pointer tool to position the nose on the snowman's face. If the nose is too big or too small, you can use the Scale tool to adjust it.
16. One last change. To give the carrot some dimension, we'll change the fill from solid orange to a linear gradient. We can do this even after several objects have been grouped together.
17. Zoom in on the nose again. Use the Subselection tool to select just the triangle shape of the carrot.
18. Go to the Fill Category drop-down menu and choose Linear. The default gradient will appear, moving from black to orange. Immediately switch to the Pointer tool. The gradient control arm will appear on the nose.
19. Adjust the gradient's direction so that it runs from top to bottom, rather than left to right, with orange on top.
20. Move the gradient control arms closer to the wider end of the carrot. Shorten the length of the gradient so that most of the carrot is orange, and finally, adjust the gradient colors so that the black becomes a medium grey. As you can see from Figure 13, our snowman is taking shape nicely.

Put That in Your Pipe and Smoke it!
Yes, I am the king of the cheesy sub-headings, in case you were wondering. Our next mandatory snowman element - even in this day and age of the non-smoking bylaw - is the pipe. Again, vector tools to the rescue.

1. Choose the Rounded Rectangle tool and draw a small square.
2. Zoom in on the shape so you can see it better. Don't worry about fill colors at the moment.
3. Because the rounded rectangle is an auto shape in Fireworks 2004, it will be easy to create the bowl of the pipe. Notice all those yellow diamonds? Those are control points for the auto shape. Hold down the Alt/Option key, and drag one of the two bottom control points toward the middle of the shape.
4. Do the same with the other bottom control point. This gives us our rounded bottom to the bowl of the pipe. The Alt/Option key lets you control the radius and shape of each individual corner. If you click the control point without dragging, you change the shape of the corner (see Figure 14).
5. Change the fill to a linear gradient, if that isn't already in place.
6. Customize the fill colors so that the left side of the pipe is a medium-dark grey, and the right side is black.
7. Remove the stroke - if any - by clicking on the stroke color and choosing none. (This is identified in the swatch box by that universal "no" sign: a red strike-through.) Set the length of the gradient so that it ends 2/3 of the way across the pipe bowl (see Figure 15).
8. Create the pipe stem by drawing a long, thin, rounded rectangle that is solid black.
9. Move the two objects closer so that the pipe stem seems to merge with the pipe bowl.
10. Shift+Click to select both objects, and then group them together by pressing Ctrl/Cmd+G.
11. Choose the Transform tool to rotate the pipe to a jaunty angle. If you wish, you can add some smoke by choosing the Vector Path tool and setting the Stroke Properties to the settings below:
    - Color: #CCCCCC
    - Tip Size: 10
    - Category: Unnatural > Viscous Alien Paint
    - Edge: 30
    - Texture: 0%
12. Then simply draw a vertical squiggly line. Instant pipe smoke! If you do add the smoke, be sure to group it with the other parts of the pipe.

The Vector Path tool creates a path from whatever you draw with the mouse. Each time you change direction, a new vector control point gets added. You won't see those points until you stop drawing and let go of the mouse.

Give That Guy a Hand . . or Two
Your snowman needs a way to wave at passers-by, so next on the list are the arms. You can create these in a couple of different ways:

• The Pen tool
• The Vector Path tool

We've had a lot of practice with the Pen tool, so I will make my snowman's arms with the Vector Path tool. Because the path is created by how you draw, the resulting twig arms should look a little more natural. The stroke settings are as follows:

• Color: #9D4F00
• Tip Size: 3
• Category: Pencil > Graphite
• Edge: 0
• Texture: Grain at 30%

1. Draw the arm as a diagonal line.
2. Then draw a "V" shape for the hand. Because of the nature of the Vector Path tool (and the shakiness of your drawing hand), you will probably see a lot of control points.
3. We can remove a lot of these unnecessary points, thus simplifying the path, by going to Modify>Alter Path> Simplify.
4. Set a value of 10 and press OK. You should see many of the extra points disappear.

   Productivity Tip: You can replay the above step by selecting your next object and pressing Ctrl/Cmd+Y, or going to Edit>Repeat Simplify Paths.

5. Move the two objects together and then group them.
6. Draw your other arm in the same manner, or use the Pen tool if you like.
7. Position the arms on either side of the body. To add to our sense of depth, change the stacking order of the left arm so that it appears to be underneath the tummy object. You can do this by either dragging the arm layer lower in the Layers panel, or by selecting the object and pressing Ctrl/Cmd+Down-arrow key. Keep pressing this key combo until the arm moves behind the tummy.

He's One Cool Fashion Victim
Our last two elements are fashion accessories. No self-respecting snowman would be caught in public without a hat and scarf of some sort.

1. For the scarf, use the Pen tool to draw a shape that has a bit of an "S" curve to the top and bottom. Make sure to close off the path by clicking on the starting control point, as we have done previously in this tutorial. As always, you can use the Subselection tool to tweak the shape. For my scarf, I created a duplicate of the first shape and rotated it a bit.
2. For a fill, choose Pattern>Cloth-purple from the Fill Category drop-down menu in the Properties inspector. Select both objects and group them. Remember to give the grouped object a name in the Layers panel.
3. Our snazzy, yet well-loved top hat is created with two vector shapes: an ellipse for the brim and a rectangle for the crown.
4. Draw your oval shape for the brim using the Ellipse tool.
5. On top of that draw a rectangle for the crown with the Rectangle tool.
6. We want to make the top and bottom of the rectangle a little rounded and in order to do that, we need to un-group the shape. A standard vector rectangle is a grouped shape by default. Press Ctrl/Cmd+Shift+G to un-group the shape.
7. Much like we did with the carrot, add a control point to the top and bottom of the rectangle shape.
8. Use the Pen tool to drag out the Bezier control arms, and the Subselection tool to drag the control point to create a subtle curve to both the top and the bottom of the crown.
9. Add a few more control points to the sides of the crown, but do not drag out the curve handles. Instead, once the points have been added, use the Subselection tool to drag some of these points inwards and outwards. This will give our top hat a bit more of an aged, worn look.
10. Figure 16 shows the control points for my hat.
11. Select both objects and group them together.
12. Use the Transform tool to rotate the hat.
13. Move the hat into place on our snowman's head.
14. Go through the Layers panel and make sure each object is named, then save the file.

TA DAAAAA! Our snowman is complete (see Figure 17). Now let's get him into Dreamweaver.

Exporting the Snowman to Dreamweaver
There are at least two ways to approach this:

1.  Hide the background layer, move all the objects apart so they do not overlap, create a custom slice for each object, and export all slices.

The advantage here is that you can set custom optimization settings for each slice. You can also add Alt text in the Properties inspector for each image. The downside to this method is that you will have to completely rebuild your snowman in DW, before you can even begin to set up the Drag Layer behaviors. You will have to export the background separately so that it doesn't show up as the background in each of your snowman image slices.
2.  Distribute all of your objects to separate layers while in Fireworks and export your snowman - in place - to Dreamweaver as positioned, CSS layers. The advantage here is that your initial Web page will look exactly like your FW creation. The disadvantages are that you cannot create custom optimization settings for each element, and Alt text will have to be added manually in DW. You will have to decide on a single file format and optimization setting for everything. As a result, some of your files may not be as small in file size as you may like, or may not look as perfect as you wish.

In my case, there really is not much of a decision factor; I want transparent backgrounds around each image so that they just look like the original shapes, not like shapes inside of boxes. This means that a JPEG is out of the question. Plus, it's a lot easier to finish the page when half the positioning work is done.

We will, however, temporarily create and use one slice for our background gradient.

1. Click the Eyeball icon that is to the left of the snowman layer. This will hide our creation from view.
2. Unlock the bkg layer by clicking on the lock symbol.
3. Select the gradient background, and then Right/Ctrl+Click to bring up the Context menu.
4. Choose Insert Slice from the menu. Your background will be covered in a slice indicated by the light green tinge.
5. In the Optimize panel, set the format from GIF to JPEG, and set the Quality to a value of 70.
6. Set the Smoothing to a value of 1, to minimize any JPEG artifacts. Because there is no real detail in this background, smoothing the image won't hurt the quality or sharpness of the background (see Figure 18).
7. Right/Ctrl+Click the slice itself to bring up the Context menu and choose Export Selected Slice.
8. When the Export dialog appears, browse for the directory where you will place your snowman Web page and graphics. At this point, it doesn't matter if you have a DW site set up or not. Ideally, though, you should export all these elements into their own, unique folder on your hard drive. Make a note of the folder.
9. Hide the slice by clicking on the Hide/Show Slices and Hotspots icon on the toolbar.
10. Hide the Background layer and make the snowman layer visible again.

By exporting as CSS Layers, the snowman will look just like he does in Fireworks, but each object will be a separate graphic.

How, you ask, will we do this? If an image isn't sliced, then the obvious result is one large graphic. If we use a standard export setting and do not prep our file accordingly, you are exactly right. But we're smarter than that, aren't we?

Here's how:

1. Take one more look at your Layers panel. Make sure that each object has a name.
2. Click once on the layer's name in the Layers panel. This will select all of the objects quickly.
3. Here's the cool part. Go to Commands>Document>Distribute to Layers . Instantly, each object is put in its very own layer! Cool, huh? Take a few minutes and name each layer based on the object name.

   Make sure that you do not use any spaces or special characters in the layer names as these will become the file names for each graphic.

4. Save your work.
5. Reset your Optimize panel as below:
   - Format: GIF
   - Palette: Web Adaptive
   - Colors: 256
   - Transparency: Alpha
6. Cool Part #2 - Go to File>Export. When the dialog box opens, set the file name to an appropriate name. If you leave it, FW will use the file name of your PNG file, which may be fine as well.
7. In the Save as Type combo box, choose CSS Layers (HTML).
8. In the Source combo box, set your option to Fireworks Layers. To keep the final files as compact as possible, check off the Trim Images option. You can also elect to put the images in a subfolder, but since we did not do this with the background image, I will leave this option unchecked. Figure 19 shows my settings.
9. Press the Save button and FW will export your layers as image files, and insert them into DW as CSS positioned layers inside the HTML page. When you are returned to Fireworks, save your file one last time.
10. As a last step, open a Web browser and locate your snowman.html Web page. Open it to view your page. Your snowman appears just as it was created! The background won't be there, but that's fine; we'll drop that in (and do lots more) when we move into Dreamweaver next month for part 2.

Congratulations on building your first snowman without even getting your hands cold!

We did quite a few different things here:

• Lots of Pen tool practice
• Creating custom vector shapes
• Editing vector shapes
• Working with strokes
• Working with custom gradients
• Working with FW layers
• Exporting using the CSS method, rather than traditional export options

Give yourself a pat on the back for this one. Next month in part 2 we will open the FW-generated Web page in Dreamweaver, add our background layer, tweak the HTML, and add Drag Layer commands to each layer.

• Figure 1
• Figure 10
• Figure 11
• Figure 12
• Figure 13
• Figure 14
• Figure 15
• Figure 16
• Figure 17
• Figure 18
• Figure 19
• Figure 2
• Figure 3
• Figure 4
• Figure 5
• Figure 6
• Figure 7
• Figure 8
• Figure 9