Create Multiple Matte Colors for Transparent GIFs in Adobe Illustrator

This simple process allows you to reduce the number of HTTP Requests that your site is making by allowing more than one matte color for GIF images. You can, by adding strokes, make any transparent GIF work in most situations. The objective is to have a transparent GIF with multiple matte colors so that it may be used on different background colors.

Steps

1. Create as many objects as you'll need. Each object will have a different matte color.
2. Select one of the objects.
3. Go to the Appearance Panel.
4. Click the downward facing arrow in the upper-right corner of the Appearance panel. This brings up a contextual menu.
5. Select Add New Stroke. You should do it this way if your object already has a stroke applied to it. You can apply multiple strokes to an object using this method.
6. Select the stroke in the Appearance Panel, if it is not already selected.
7. Give the stroke a color in the Color panel.
8. Go to the Stroke panel.
9. Align the stroke to the outside in the Stroke panel (with your object still selected, and the stroke selected in the Appearance Panel).
10. Give each object its own stroke color based on the background you have. You can use the eyedropper tool to accurately select the stroke color (be sure to hold down Shift to not affect the object's fill!)
11. Save the image when you have finished giving your objects the strokes they need.
12. Navigate to the File Menu to Save for Web & Devices.
13. Turn on transparency in the GIF settings, and choose None for the Matte setting.
14. Admire your work.

Tips

• You can also apply multiple strokes to an object using the Appearance panel in Illustrator. Use the method as outlined above.

Things You'll Need

• Adobe Illustrator

Related Articles

• Crop in Illustrator
• Use Adobe Audition
• Crop and Re Size Photos at the Same Time Using Adobe Photoshop 7
• Quickly Fix a Picture's Color and Brightness in Adobe Photoshop Cs2
• Make a GIF Image With Microsoft Paint

References

• Katz Web Design - Original source, shared by author.

See also

• Draw Fabric in Adobe Illustrator Cs3
• Draw a Cowboy Hat in Adobe Illustrator CS3
• Draw a Hamburger In Adobe Illustrator
• Use Adobe Illustrator Swatches
• Create a Clipping Mask in Adobe Illustrator
• Change Artboard Size in Adobe Illustrator
• Add Borders in Illustrator
• Remove Backgrounds in Adobe Illustrator
• Add Bullets in Illustrator
• Add a Shadow in Illustrator

Read more ...

What links here

• Add Borders in Illustrator
• Add Bullets in Illustrator
• Add a Hyperlink in Illustrator
• Add a Shadow in Illustrator
• Add an Image in Illustrator
• Create Text on a Path in Adobe Illustrator
• Draw Fabric in Adobe Illustrator Cs3