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
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:
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.
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.