Code CSS Design Tutorial

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!

I want the three smileys to be combined as one

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. The three desired states of smiliesCreate 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. The Appearance panel in IllustratorSelect one of the smiley’s yellow circles, and go to the Illustrator Appearance Panel.
  3. Add a new stroke to the objectIn 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. Select the stroke in the Appearance PanelThe stroke should be selected by default now, but if not, select the stroke in the Appearance Panel
  5. Give the smiley a white strokeGive 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. In the Stroke panel, align the stroke to the outsideGo 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 colorGive 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. Save for Web settingsWhen 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. Three matted smiley sprites in a rowWhen 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!

By Zack Katz

Zack Katz is the founder of GravityKit and TrustedLogin. He lives in Leverett, Massachusetts with his wife Juniper.

8 replies on “Multiple Matte Colors for CSS Sprites”

I often set up a grid system where each image has extra space to change. So for an image 30px tall, I set up a grid of 50px tall. That makes it easier when coding the CSS; I know one image is 50px below the other.

For the Spangler site, for instance, I would just expand the image horizontally and down, so I wouldn’t have to change the current CSS. I might leave a white block where the old image used to be (since that uses very little memory) and move it below.

Comments are closed.