Online Training Course
Fireworks Basics

Irene Mariano from Massachusetts created this animated greeting card for her daughter.

Creating graphics for the Web? Throw away those competitive products, because you can do it all with Macromedia's Fireworks.

In this 6-lesson course, you'll learn how to import, manipulate, and export Web graphics, optimizing and animating them, creating image slices and hotspots — even combining graphics with HTML and javascript. You could build an entire site using Fireworks, and just to prove it, we'll show you how.

Whether you're new to Web graphics, or an old hand with another graphics program, this course will show you all you need to get the most out of this powerful tool.

Instructor:
Claire Boger is an interactive designer and founder of ImaginationAlley.com ... get bio

Course Developer:
Anne-Marie Yerks is the author of several design and technology books and a fine artist ... get bio

Develop an understanding of the main applications for Fireworks.

Set canvas size and resolution in Fireworks and import scanned images and digital photographs.

Use basic Fireworks tools: arrow, line, rectangle, polygon, stroke and fill to design a map.

Source bitmap images and use color correction, brightness, contrast, and sharpening tools, and basic effects.

Design an e-book cover in Fireworks, applying image manipulation techniques to a bitmap image.

Create layers and utilize basic drawing tools and apply blurs, shadows, and highlights.

Design an animated greeting card or invitation using drawing tools, brush strokes, and masks.

Develop an understanding of how to design a Web site home page in Fireworks, using navigation buttons and adding drop shadows, effects, shadows, and glows.

Create image slices and create navigational pop-ups to enhance interactivity.

Design an interactive Web navigation scheme, applying interactive behaviors to a set of navigation buttons.

Optimize Web graphics, applying different colors settings, dithering, and transparency.

Creating an online photo gallery, by scaling, exporting, sharpening and colorizing a set of images and their thumbnails.

Outline:

LESSON 1 Let the Fireworks Begin New to Fireworks? Let us introduce you. Lesson One provides an overview of the many wonderful tools that Fireworks offers. You'll learn the industry-foundation applications for the tool and how it interacts with other programs. Different file types (.gif, .jpg, and .png) will be explored, in addition to how to create images, modify image and canvas size, and work with scanned images, digital photos, and screenshots. In the exercise, you'll create a neighborhood map, exploring important Fireworks tools: the arrow, line, rectangle, polygon, text, and rotating text tools.

LESSON 2 Photographic Effects and Layering Lesson Two focuses on getting the most out of photographic images. It kicks off by showing you where to get them, and what's off-limits. Then you'll explore how to manipulate images. Essential techniques such as color correction, adjusting curves, brightness, and contrast are covered, as well as such special effects as saturation, sepia tone/grayscale, and inversion. Finally, so that you can create those photographic collages you see everywhere, you'll learn how to use the lassoo tool and feathering effect to remove an image's background. An exercise in creating an E-book cover integrates these elements.

LESSON 3 Drawing and Animation Should you rely on Illustrator or Freehand to create illustrations for the Web? With Fireworks, you don't need to. Lesson Three shows you how to use Fireworks' stroke, line, fill, pen- and mask tools to produce illustration effects such as brushstrokes, shadows, and highlights. For added inspiration, you'll learn them by recreating a Rothko painting and Keith Haring dog. Then, for good measure, you'll make Haring's dog bark and discover how easy it is to create animated GIFs in Fireworks. In the exercise, you'll integrate both skills by creating an animated greeting card or invitation. Come to the Fireworks party!

LESSON 4 Interface Design If you're a Web designer, interface design (the placement, shape, and depth of navigation bars, buttons, and icons) should be one of your top priorities. Lesson Four explores the advantages of using Fireworks for this purpose. As you'll discover, it's easy to make buttons that look clickable, create navigation bars, or build in drop-down navigation features. The lesson explores these parameters by guiding you step-by-step through the creation of a home page which you can export as HTML. You'll be creating your own one in no time!

LESSON 5 Programming Interactivity The Web is interactive; your Web pages should be too. Lesson Five shows you how to create interactive features in your Fireworks graphics or Web pages, without programming! You'll explore how to create pop-ups, image slices, and hotspots, avoiding the pitfalls that await the unwary slicer. In the exercise, you'll create a menu that pops up for visitors, eliciting a thrill every time.

LESSON 6 Optimizing and Exporting Files Optimization is the entire ballgame in Web graphics: if you can reduce file size on your Web pages (and still delight viewers) you can sleep soundly at night. Lesson Six covers the ins and outs of optimizing files, both on an individual and a mass-production basis. To finesse individual images, you'll explore such effects as dithering and transparency. Then in the final project, you'll grapple with the logistics of batch processing: taking a large number of images optimizing them en masse. A useful skill, whether you're creating an e-commerce site or online photo album!