Audience Considerations | Graphic Format Tips | Techniques | Resources

HANDS ON TECHNIQUES
Now that we know more about our audience and the different formats of Web graphics, let’s talk about some Web Graphics Tips and Techniques to help you boil down graphics to essential elements, using some of the most popular power tools.

Slicing Images and Creating Rollovers

• Fireworks 4.0: Create images or navigational buttons. Go to Menu > Window > Frames. In Frame window, click on the right hand corner arrow and select Duplicate Frame > Insert New Frame: After current frame. With Frame 2 selected, you can edit the image or buttons to the down state (how the rollover will change once people scroll over it). Colors, type, or anything else can be changed at this point. When you've completed this, go to the slicing tool and slice your images. Once this is done, you can now apply the rollover scripts, assign URLs to the different sliced images, as well as different compression rates. To assign a rollover, go to Window > Behaviors. On this palette, click on the + sign and select Simple Rollover. To apply different compression rates, URLs, ALT tags, etc., go to: Window > Optimize and complete the information in the different tabs of this window. Once you've assigned this information to every slice, go to the top of the page you are working on and select the preview tab to test your rollovers. Then, you're ready to export the rollovers. Go to File > Export Preview > Export. This will produce and HTML page, where the sliced pieces are automatically assembled. Preview this page in your browser and voila!

• Tutorial: Creating a Simple Rollover by Lynda.com (Quicktime version)
• Tutorial: Multiple Rollovers by Lynda.com (Quicktime version)
• Tutorial: ZDNet Developer Rollover Tutorial for creating rollovers in Fireworks.

• Dreamweaver 4.0: If you have two images you would like to develop into a simple rollover, go to Insert > Interactive Images > Rollover Image and browse through your files to select the two images you are using. You can also assign a URL if the image will be a link.

Adding Pop-Up Windows

• The Fireworks 4.0 Pop-Up Menu Creator easily produces dynamic, multi-level menu systems.
• Tutorial: Pop-Up Menus by Lynda.com (Quicktime version)
• Tutorial: Pop-Up Menus by Macromedia
• Tutorial: Pop-Up! Rollover! Good Boy! by Webmonkey

GIF Animation

• Tutorial: Simple Frame Animations by Lynda.com (Quicktime version)
• Tutorial:GIF Animations by Lynda.com (Quicktime version)
• Tutorial: Optimizing Animated GIFS by WebReference
• Tutorial: Fireworks Tutorials—Animation by About.com

Favorite Icon
If available on a site, a “favorite icon” (16 pixels long by 16 pixels wide) is automatically displayed in Internet Explorer, next to the site’s bookmark.

• More Info: All About the Favorite Icon by WebMonkey

Transparency/Background Tiling

• Tutorial: Assigning Transparency by Macromedia
• More Info: Exporting Transparent GIFs from Fireworks by Macromedia

Graphic Optimization

• Tutorial: Optimizing Graphics Overview by Macromedia
• Optimizing with Fireworks by WebMonkey