Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
 
Photoshop Tutorials - Free Fonts
[Home]
[Sitemap]
[Blog]
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[Animation]
[About Mike]
[Gallery]
[Related Sites]

 
    Intermediate  
 
  Using a Matte Color In GIF Images
With Transparent Backgrounds

A tutorial for Adobe® ImageReady™ or Macromedia® Fireworks®

You may find that when you create a transparent GIF image with objects having anti-aliased edges that the image will display fine on a web page with a white background but not on one with a colored background. Most image editing software will use white for the default matte color unless otherwise specified. The anti-aliased pixels will show up as an unwanted halo around the object in the image when it is displayed over a colored background. The cure for this is to create the GIF using a background matte color that is identical to the color over which the transparent GIF will be displayed. The images below illustrate the point.

Transparent GIF of an anti-aliased letter "g" over a white background.

  The same transparent GIF over a colored background.   Transparent GIF (that uses a matte color) over a colored background.

   

How To Make GIF Images With a Matte Color

1. Shown below is a view of an opened image in the document window:

ImageReady Fireworks

2. Below is a view of the Optimize palette in each program (Macromedia refers to palettes as "panels"). Click the small triangle next the the word "Matte:" in the palette (circled below).

ImageReady Fireworks

3. Select the matte color using the one of the color pickers.

ImageReady Fireworks

4. The palette will display a small color swatch of the matte color to be used.

ImageReady Fireworks

5. Once the Optimize palette has been setup, simply click File > Save Optimized As... (ImageReady) or File > Export (Fireworks) to create the GIF file.

 
 

Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy