Skip to content

3 Tips for making CSS sprites in Photoshop

Some tips for making CSS sprites in Photoshop: using a grid, how to handle bullets and how to export.

A few weeks ago Chris Coyier discussed CSS sprites on his blog. The article nicely explains why some people use this technique to speed up their website. It refers to a called SpriteMe for creating sprites. What I missed were some tips you could in Photoshop when creating CSS sprites. I missed:

  • Using a grid
  • Some info about exporting
  • How to use bullets in CSS sprites

The grid

One of the things that make CSS sprites hard is to figure out what coordinates you have use to show the right image in the sprite. To keep things simple I always switch on the grid: Ctrl+'. If needed I configure the grid to 50 pixels per line by doing the following: Ctrl+K, select “Guides, grid & slices” and set the gridline value to 50. Finally I press Ctrl+Shift+; to make objects snap to the gridlines. Now you will have something like this:

A 50 pixel grid in Photoshop

Now you can fill it with whatever you want. Because everything snaps on the 50 pixel grid it’s easy to find out what coordinate you have to use. For example: if you position the cursor to the upper left corner of the image you’d like to use (like in the screenshot below), you’ll find your coordinates in the info pane. It will be off by a few pixels but since it’s on a grid you know that you just have to round of the numbers. In this example the CSS code would be background: url(sprite.png) -200px -50px no-repeat.

Finding out the coordinates of a CSS sprite in Photoshop The coordinates in the info pane

Exporting the CSS sprite

I always export a CSS sprite as PNG8. On rare occasions I do JPG to create an onmouseover-effect on picture. If you don’t have to support IE6 you might consider using PNG24 instead since it supports full color. But if you do have to support IE6 you’re stuck with PNG8 because IE6 cannot handle the alpha channels of PNG24. You could use IE’s proprietary filter, but that doesn’t work that well with CSS sprites since it doesn’t have an option to position a background.

Since PNG8 has a maximum of 256 different colors, the exported image may look bad if you need much more than that. Be wary of sprites with different colors and gradients. They may need much more than 256 colors. If you need much more colors than PNG8 can offer you, you could split the sprite by grouping the colors in different sprites. For example: you’d create one sprite for all red items and one for all the blue items.

Lists and sprites

Normally you use a sprite in a box that has a specific width and height. Otherwise some other image in the sprite might pop up. So sprites aren’t usable in blocks with dynamic heights like p tags. But there’s one exception: list items. Because bullets in a list are always aligned in the top left corner you just have to be sure that there’s no image on the right or the bottom of the bullet. So if you align the bullets from the left bottom to the upper right like in the example below you will never have images popping up in places they shouldn’t be. The left side and upper side of the line of bullets can still be used to place images while the bottom and the right has to be clear at all times.

Bulleted items in a sprite

Bookmark and Share
6 Responses
Follow responses to this entry through this RSS.
  1. Christian

    This make sense, tanks for sharing! Sometimes you need someone else to open your eyes for effectiveness.

  2. Tony

    Thank you!!! Of all the articles I’ve read on sprites this one just “clicked” for me! I created my first hover-state button sprite in just 14 minutes with this “50px” tip and it lined up perfectly. Thanks much for these simply insightful tips.

  3. Gekkor McFadden

    Could it be possible to use 10 bit sprites instead of 8 bit sprites. I think IE will work with 10 bit sprites?

  4. jacouh

    That’s a very pratical technique to create sprite css. We can now ignore IE6 compatibility, PNG24 is OK. Thank you alot for such a step by step experience on PhotoShop.

  5. Phuong

    I have heard that using sprites in CSS will cause the GPU to use more energy and be reducing your battery living time.

    For this reason alone, I don’t think sprites is a good idea – it is not users freiending at all. I think there is better way to make the screen dark with pattern and pleasant music sounds.

  6. Wouter Bos

    Although I haven’t heard it before I indeed believe that sprites will require some extra handling and processing. But I also presume that this effect is very marginal and I believe that it far outweighs other advantages like boosting the speed of the website. Remember that using sprites is an established technique for optimization nowadays.

    One of my first results when searching for issues with sprites and GPU’s brought me to a page of Opera where sprites are being promoted for mobile devices: http://dev.opera.com/articles/view/optimizing-opera-widget-graphics-for-mob/

    Do you have sources for this claim? I’d love to read it.

Leave a response