Fireworks Tutorial

Information Technology 9

Macromedia Fireworks MX Basic Tutorial

Creating a New Document
First, open up Fireworks by clicking MX, and finally choose , and navigating to All Programs, Macromedia Fireworks from the menu.

We will now open up a new document by clicking File --> New:

A dialog box will then appear. The document size is measured in pixels (the smallest discrete component of an image or picture on a CRT screen (usually a colored dot.)) We will choose a document size of 500 (width) by 500 (height); this is generally a good workspace as it allows you to create a variable sizes of images. We will also choose a transparent image so that it can be placed on any document without interruption of color. We will then click [OK].

Basic Tutorial

Fireworks Tutorial

Information Technology 9

Introduction to the Tools

1) 2) 3) 4) 5) Used for selecting and moving objects or groups. Used to select a rectangular area of pixels in a document. Used for cropping images. Used to draw straight lines. Used to create polygon shapes such as circles, squares, rounded squares, or stars and other shapes. 6) Used to draw one-pixel pencil strokes. 7) Used to scale, rotate, skew, or transform images (freeform). 8) Used to sample colors. When clicking on any object, it will automatically copy that color to your palette. 9) Used to cut paths in vector images or erase pixels in bitmap images. 10) Used to draw hotspots that enable you to make JavaScript enabled components for websites. 11) Allow you to pan the document. 12) Allow you to choose the color of the stroke. 13) Allow you to choose the color of the fill. 14) Used to select inside groups and bezier points. 15) Used to select parts of bitmaps. 16) Allow you to select similar colors in bitmaps. 17) Used to draw and edit points as bezier points. 18) Allows you to type text in an image. A window will pop up after this is used 19) Used to draw brush strokes of variable thicknesses. Also allow you to extend or redraw part of a path. 20) Reshape a segment of a path; reshape an area of a selected path, and add/remove pressure from a selected path. 21) Used to fill objects (Must be surrounded by a border on all sides or this tool will not work) 22) Used to clone a selected part of a bitmap. 23) Allow you to apply image slices. This will be explained later. 24) Used to zoom in and out of images. There are also many other windows, which have other tools in them. These will all be introduced in a latter part of the lesson.
Please take about 15-30 minutes to test out these tools and see what you can do with them.

Basic Tutorial

Fireworks Tutorial

Information Technology 9

Making a Simple Logo

We are going to make a logo for the company RiverPast Software. The owner wants the logo to include a water droplet and the color blue. The purpose of this tutorial is to show the user how to create a basic logo, and to introduce some simple techniques.

Step One: Open a new document with the dimensions 500x500 and a transparent background. Step Two: Draw a circle with approximate dimensions of 100x100. Go to the properties window at the
bottom of the screen. Change the W field and the H field to 100 each, but make sure that the circle is selected. Then, click on the Fill option to none. Then, in that same window, click on the stroke tab, scroll down and choose pencil, then choose 1- Pixel Soft. Change the remaining settings to what they appear in the example below. Also, change the color to blue.

Your image should now appear similar to what is on the left here.

Basic Tutorial

Fireworks Tutorial

Information Technology 9

Step Three: Make sure that your circle is selected, click EDIT -> COPY, and then EDIT -> PASTE.
Click on the STROKE FILL in the property window we previously used, then change the color to a dark grey. We will now tap the right cursor key twice, and the down cursor key twice. We will then (with the grey circle selected) hold down CTRL-SHIFT-(down). This grey circle now appears to be the shadow of the blue circle. Alternatively, you can use LAYERS window for this step. Your image will appear as below.

Step Four: Now, draw a new circle with the dimensions of 80x80. Change the circles stroke to NONE
and the circles FILL to a lighter blue than was previously used. Using the arrow tool, move this circle in the MIDDLE of the other two circles.

Step Five: We will now create a water droplet shape. Use the RECTANGLE tool to draw a medium
sized square. Click on the SCALE tool while the square is selected, and rotate the square so it is at a 45degree angle. Now, draw a circle and move it so that it is in the bottom center of the square, and all of the paths touch, similar to the example below.

Basic Tutorial

Fireworks Tutorial

Information Technology 9

Step Six: Now, choose the WHITE ARROW tool, and click on the two horizontal vertices of the
square. Drag them so that they touch the sides of the circle. Then drag the lower vertices up inside the circle, similar to the example below.

Step Seven: Now, change both the circle and the square so that they have no border, and the same fill
color if this was not done automatically.

Step Eight: We are now going to combine the square and the circle. Select the black arrow, and drag a
box around the two objects. Click MODIFY->COMBINE PATHS->UNION, This will join the two objects into one. We are now going to resize this droplet with the SCALE tool. Resize it and move it to the upper part of the other objects inner circle as shown.

Basic Tutorial

Fireworks Tutorial

Information Technology 9

Step Nine: Select the droplet and the inner circle (HINT: use the shift key to click both objects). Click
MODIFY->COMBINE PATHS->PUNCH, this will punch the top object through the bottom object and create a single, new object as shown below.

Step Ten: Copy and paste the (Similar to step three) inner circle, tap the right key twice, and tap the
down key twice. Press CTRL+SHIFT+DOWN this will move the second inner circle underneath the other one. Change the fill to the same grey as used before. You can do this by using the Color Sampler (refer to above toolbox descriptions). Click on the fill chooser, and move the cursor over the shadow of the outer circle. Your logo should now look similar to below.

Step Eleven: You can move the inner circle around to make sure it is centered, if you choose. Now, use
the text tool to type RiverPast to the right of your logo. Create some subtext below your RiverPast text that says Software Solutions. You can use KERNING to modify the spacing of the letters in the Software Solutions text. The KERNING option is modified in the text preview box, the top left field. Try playing around with these options to get you comfortable with creating attractive and creative text. Get similar font style, size and colors to that shown below.

Step Twelve: We will now export your image. Select all objects of image and drag to top left corner of
canvas. Resize your canvas so that it barely fits around the image through MODIFY->CANVAS -> CANVAS SIZE. Be sure to choose the top left anchor. Use trial and error to get the correct size. An example is provided below.

Basic Tutorial