Web Graphics Tips and 
Techniques
By: 
Giovanna Genard and Cyndi Carey

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!
  • 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

GIF Animation

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.

Transparency/Background Tiling

Graphic Optimization

Audience Considerations | Graphic Format Tips | Techniques | Resources