Win a Free Class!

Join our email list for a chance to win

Adobe Fireworks CS6

Design Webpages & Web Graphics

Fireworks is a powerful graphics app that’s like Photoshop and Illustrator combined into one app, but more focused on web graphics. For instance you can quickly and easily create rollover graphics, which neither Illustrator or Photoshop can do.

We’ll show you how to mockup webpages in Fireworks. You’ll learn how to slice up your design and optimize the graphics as PNG, GIF or JPEG. We’ll even show you how to create simple animated GIFs, which work on iPhones, iPads and other mobile devices that don’t run Flash.

  • Mocking up webpages in Fireworks is fast and easy.

  • You can even mockup multiple pages in a single file.

  • Slicing in Fireworks is so fast it leaves Photoshop in the dust.

  • Learn how to properly optimize graphics for the web.

  • Use states to create elegant rollovers.

  • Easily create animated GIFs that work everywhere,
    including iPhones and iPads.

What You’ll Learn

Section 1
Drawing Tools and Text


  • Drawing Basic Vector Shapes
  • Adding Filters such as Drop Shadows
  • Importing Adobe Illustrator Files
  • Styling Text
  • Controlling Anti-Aliasing on Text
Symbols and Photos


  • Creating Graphic Symbols
  • Editing Symbols
  • Symbol Tweening (Fireworks Creates “In Between” Steps)
  • Using Symbols to Protect Photos from Image Degradation


  • Having Fireworks Automatically Create Slices
  • Manually Drawing Slices
  • Naming Slices

We Literally Wrote the Book!

Fireworks Workbook

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

Section 2
Optimizing Graphics for the Web


  • Optimizing Slices as GIF, PNG or JPEG
  • Reducing Filesize (for Quick Download)
Putting It Together In Dreamweaver


  • Assembling the Final Webpage with Graphics Made in Fireworks
  • Importing Images
  • Setting Background Images
Button Symbols


  • Creating Buttons
  • Using 1 Button for the Entire Navbar
  • Editing Buttons
  • Making Rollovers
  • Gradient Masking (Fade Out)
Section 3
Multiple Page Website Mock-Up


  • Creating Multiple Pages within a Single Fireworks File
  • Creating and Editing a Master Page
  • Previewing and Exporting Multiple Pages
More on Drawing Tools


  • Rounded Corners
  • Gradient Backgrounds
Masking and Text Wrapping


  • Masking
  • Glass-like Reflections
  • Wrapping Text Around Objects
Creating Rollovers (Using States)


  • Creating Rollovers
  • Slicing a More Complicated Page
Section 4
Slicing and Optimizing the Fronion Website


  • Drawing Slices
  • Optimizing Slices as GIF, PNG, or JPEG
Rounded Corners & 9-Slicing


  • Creating & Slicing Rounded Corner Rectangles
  • Resize Selected Objects Command
  • 9-Slice Scale Tool
  • Symbols and 9-Slicing
Exporting States to Files (Batch Processing)


  • Creating Consistent Thumbnail Images
  • Resizing using Symbols
Creating an Animated Banner


  • Creating an Animated GIF
  • Using States for Animation
  • Optimizing for Banner Ad File Size