Overview: Adobe Fireworks

Adobe Fireworks is a bitmap (pixels) and vector (points) graphics editor. Designed specifically to meet the needs of web designers, Fireworks allows for rapid and flexible website design.

Let's be clear...Adobe Fireworks is used to design visual elements to be used on a webpage, and is not used for actual webpage creation (i.e. HTML, CSS etc.) or website management.

Page Quick Links: Useful Links • For Teachers • Practical Applications • Exercise • Credit

Useful Links:

For a complete overview of this product please visit the following Adobe product page:

To download a 30-day trial version of this software visit:

Teachers: be sure to purchase this product with an educational discount - for pricing visit:

For a print friendly version of this wiki article, follow this link:

Please learn from and contribute to wikispaces, join at:

For Teachers

The depth of many Adobe products can be intimidating to both computer savvy and not. I consider Adobe Fireworks to be on the easy end of the Adobe application difficulty scale. This program is a great starting place when launching yourself or others into the Adobe product family.

While Adobe Fireworks is not Freeware or Shareware, it is a professional level program worth the cost. Adobe Fireworks is also a very popular program with an ever growing, online support presence, for example:

As a professional level program, Adobe Fireworks has a well developed library of program specific literature (how-to's).

Adobe, the company, is actively developing materials for teachers.

Practical Applications

The practical applications of a professional program like Adobe Fireworks are vast. At a base level, a teacher can use Fireworks as a tool for building computer literacy, creativity and confidence amongst students. Teachers can explore specific program elements, for example, computer graphic types: vector vs. bitmap. Exercises aimed at more advanced manipulation and composition of vector and bitmap graphics can then be developed.

Higher level learning, for example, concepts of design (both print and web) can also be introduced through this program. Project workflow, for example, Adobe Fireworks working in tandem with other programs like Adobe Dreamweaver, can then be explored.

Step by Step Exercise:*

main boxes

The Fireworks workspace

The exercise will require you to locate a few parts of the Fireworks workspace. Please examine the image to the right before proceeding.

In this exercise we will walk through a series of steps that produce a flexible, conventional website design (i.e. the visuals).

The term conventional is defined in this exercise as:

This exercise requires you to do two things before starting:

* This exercise does assume some comfort with computers, digital graphics, Adobe software and the process of webpage design.

Part 1: Creating Your Main Website Boxes

main boxes

click image for explanation

In this first part of the exercise, we will set up a canvas to work on, then create, style and position four rectangles that will serve as important visual sections of our site. To get an idea of were we are heading, click image at right.

  1. Open Adobe Fireworks
  2. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new Fireworks Document (PNG)
  3. From the Menu Bar, go to File > Save as
    • Save your file in the folder that you downloaded (unzipped) to your desktop
  4. In the New Document dialogue box, set the following:
    • Width: 1024
    • Height: 768
    • Resolution: 72
    • Canvas Color: Custom with a hex value of #999999
    • Hit OK to exit
  5. In the Toolbar, find and select the Rectangle Tool
  6. On the canvas, drag out a rectangle
    • Do not worry about the size or color - we will set these values next, manually, in the Properties Panel
    • Notice that after you draw your rectangle, it is the highlighted object (note the blue corner points and word Rectangle in the Properties Panel)
  7. In the Toolbar, find and select the Pointer Tool (black arrow)
    • you will use the Pointer Tool all the time to select and move objects
  8. Deselect your rectangle by clicking off the rectangle
    • Notice that there are no longer blue corner points on your rectangle
    • Notice that there are no longer rectangle options in the Properties Panel
    • Bonus: Notice that with your rectangle deselected, the properties panel is showing the options that you have for your canvas
  9. Re-select your rectangle by clicking on it with the Pointer Tool
    • Notice that the Properties Panel is again showing the options you have for your rectangle
  10. To manually modify the size of the rectangle, in the Properties Panel set the following:
    • W: 980
    • H: 600
  11. To center the rectangle within your canvas, find the Align Panel (workspace right)
  12. In the Align Panel, set the following:
    • click the Position button - this allows you to align the rectangle relative to the canvas
    • click the Align horizontal center button
    • click the Align vertical center button
  13. To modify the look of the rectangle, in the Properties Panel set the following:
    • Edge: Hard
    • Fill Color: #ffffff
    • Stroke Color: transparent (i.e. no stroke)
  14. Find the Layers Panel (workspace right)
  15. As a best practice (though not requirement) - rename the layer containing your rectangle to 'content'
  16. Save your file
  17. With your rectangle still selected, from the Menu Bar go to Edit > Copy
  18. From the Menu Bar, go to Edit > Paste
    • Note: Fireworks pastes objects exactly were they were copied from
  19. To modify the size and look of the pasted rectangle, in the Properties Panel set the following:
    • H: 150
    • Fill Color: pick a bright red
  20. Rename this second layer 'branding'
  21. Save your file
  22. With your rectangle still selected, from the Menu Bar go to Edit > Copy
  23. From the Menu Bar go to Edit > Paste
    • Again...Fireworks pastes objects exactly were they were copied from
  24. To modify the size and look of the second pasted rectangle, in the Properties Panel set the following:
    • H: 45
    • Fill Color: pick a bright blue
  25. Save your file
  26. Hold down the SHIFT key and move this rectangle down until it is under the header box
    • Adding the Shift key constrains movement to perfectly vertical (up and down)
    • Fireworks should try to help you by snapping the objects into place when you get close
  27. Rename this third layer 'navigation'
  28. With your rectangle still selected, from the Menu Bar go to Edit > Copy
  29. From the Menu Bar go to Edit > Paste
    • Again...Fireworks pastes objects exactly were they were copied from
  30. To modify the size and look of the pasted rectangle, in the Properties Panel set the following:
    • H: 15
    • Fill Color: pick a bright green
  31. Rename this third layer 'footer'
  32. Save your file
  33. Hold down the SHIFT and select both the 'content' (white) and 'footer' (green) rectangles
    • Adding the SHIFT key allows you to select more than one object at a time
  34. To align the two selected rectangles, find the Align Panel (workspace right)
  35. In the Align Panel, set the following:
    • turn off the Position button - the objects will now align relative to each other and not the canvas
    • click the Align bottom edge
  36. In the Layers Panel, rename the folder that contains your rectangles to 'boxes'
  37. Lock the 'boxes' folder
  38. Squash the 'boxes' layer (Hint: click the little gray triangle to the left of the folder icon)
  39. Save your file

Part 2: Adding a Logo, Company Name and Slogan

main boxes

click image for explanation

In this second part of the exercise, we will import in some logo elements, pick and separate the elements we want to use, then add company name and slogan text.

  1. In the Layers Panel, create a New layer
  2. Rename the new layer as 'logos'
  3. From the Menu Bar, go to File > Import
  4. From the folder that you downloaded (unzipped) on your desktop - choose 'site-logos.ai'
    • In the Vector File Options dialogue box, be sure Scale is set to 100 percent - hit OK
  5. Position your (right angled) cursor in the upper left corner of the 'content' (white) rectangle - then click to Import
  6. If needed, move the selected, imported graphics so they are within the 'content' area
  7. Deselect your imported graphics by clicking off the canvas
  8. Pick a pair of graphics that you would like to combine and use as your company logo
  9. Select each graphic and move them to the upper left corner of the 'branding' rectangle
    • Note: Upper left corner for a logo is a convention
    • Do NOT worry about size, position, composition or color of your two graphics yet
  10. In the Layers Panel, create a New Layer
  11. Rename that new layer to 'my-logo'
  12. Select your two chosen graphics
  13. From the Menu Bar, go to Edit > Cut
  14. In the Layers Panel, highlight the 'my-logo' folder
  15. From the Menu Bar, go to Edit > Paste
  16. In the Layers Panel, Squish the 'logos' folder
  17. In the Layers Panel, Lock the "logos' folder
  18. In the Layers Panel, Hide the "logos' folder
  19. In the Layers Panel, Lock the 'my-logo' folder
  20. Save your file
  21. In the Layers Panel, create a New Layer
  22. Rename that new layer to 'text'
  23. In the Tool Bar, select the Text Tool
  24. In the Properties Panel set the following:
    • Font Family: Arial
    • Font Style: Regular
    • Size: 25
    • Color: Black
  25. With the Text Tool, click somewhere to the right of you chosen graphics
    • Notice that as soon as you click with the Text Tool, Fireworks is expecting you to start typing
    • Type out the name of your company (don't worry...you can always change it later)
  26. When you are done typing, go back to the Pointer Tool in the Tool Bar
  27. Select and position your text block so there is room under it for another, separate line of text
  28. In the Tool Bar, again select the Text Tool again
  29. Click with the Text Tool below your first text line to start a second, separate line of text
    • Note: This is different than creating a second line of text within the first text block
    • Type out a catchy slogan for your company (don't worry...you can always change it later)
  30. When you are done typing, go back to the Pointer Tool in the Toolbar
  31. In the Layers Panel, Lock the "logos' folder
  32. In the Layers Panel, unlock the 'boxes' layer
  33. Select the 'navigation' box
  34. In the Properties Panel, click the + next to Filters
  35. From the available options choose, Shadow and Glow > Inner Shadow - style to taste
  36. Select the 'content' box
  37. In the Properties Panel, click the + next to Filters
  38. From the available options choose, Shadow and Glow > Inner Glow- style to taste
  39. With the 'content' box still selected, in the Properties Panel, click the + next to Filters
  40. From the available options choose, Shadow and Glow > Glow - style to taste
  41. Save your file

Part 3. Get the Look You Want

In this last part of the exercise, I would like you to meet the challenges listed below. In the process of meeting these challenges, I would like you to come up with a page design that you are happy with. Good luck!!

  1. Change your 'box' colors (Hint: Properties Panel)
  2. Change logo size (Hint: Scale Tool)
  3. Change logo stacking order if needed (Hint: Layers Panel)
  4. Change colors of parts of the grouped logo object (Hint: Subselection Tool)
  5. Change text attributes (Hint: Properties Panel)
  6. Change Canvas Color (Hint: Properties Panel)
  7. Add additional Filters
  8. You have 30 minutes to play with your file
    • Remember: Save often
    • If you make a mistake, go back in time - from the Menu Bar, Edit > Undo
    • Have a question? Need help? From the Menu Bar, Window > Help or ask google.com

Wiki Credit:

This wikispaces article was created by Bill Morrison as a class assignment for the ETEC program at the University of Hawai'i at Mānoa. For the above and more explore bill-morrison.com

Copyright © 2009 Bill Morrison | All Rights Reserved