Multiple Matte Colors for CSS Sprites

Here’s the problem: I want to use CSS Sprites for transparent images, and they require different matte colors.

The promise of CSS Sprites is great: you can combine many small images into one bigger image, and use CSS to reveal only the revelant parts. But what if you have a background image, and the background changes color on :hover? When trying to save the smilies, you can only choose one matte color. I need multiple matte colors!

The issue really is a pain when you have already given your object a stroke. Using the Appearance panel, we’ll make everything happy in the world again!

My solution: Making a Multiple Matte Sprite (“MMM Sprite”)

In order to solve this issue, we must first declare it: one matte color is not enough! And if we can’t use one, we must use no matte. In order to reproduce the matte effect, we will use multiple strokes on an object in Illustrator. There is a similar solution for Photoshop, described in less detail below.

The MMM Sprite Process:

1. Create as many objects as you’ll need (often just two, but for this example, I show three. Each smiley will have a different matte color.
2. Select one of the smiley’s yellow circles, and go to the Illustrator Appearance Panel.
3. In the upper-right corner of the Appearance panel, click the downward facing arrow. This brings up a contextual menu. Select “Add New Stroke”. Note: we’re doing it this way in case your object already has a stroke applied to it. You can apply multiple strokes to an object using this method.
4. The stroke should be selected by default now, but if not, select the stroke in the Appearance Panel
5. Give the stroke a color in the Color panel. For the first smiley, we want it to have a white stroke (for the white background).
6. Go to the Stroke panel. In the Stroke panel (with the circle still selected, and the stroke selected in the Appearance Panel) align the stroke to the outside. This makes it so the object does not change.
7. Give each smiley its own stroke color based on the background you have. Notice the smileys have the same background colors as the first graphic (white, blue, and red). 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!)
8. When you have finished giving your objects the strokes they need, then Save for Web. In the GIF settings, turn on transparency, and choose ‘None’ for the Matte setting (!important)
9. When you’re finished, you have a single GIF image with multiple Matted sprite images.

A summary:

This simple process allows you to further reduce the number of HTTP Requests that your site is making, just because of a silly matte issue. You can, by adding strokes, make any transparent GIF work in most situations.

But what about Photoshop?

In Photoshop, you can do a similar trick:

• Select your layer by Command/Ctr clicking your layer thumbnail in the Layers panel.
• Go to the menu bar and click on Select > Modify > Expand
• Expand by 1 pixel
• Save for Web with no matte

What are your solutions?

Do you have a better way? Share your methods below!