I’ve covered the concept of CSS Sprites previously. In advance of releasing an article on sprites for CSS3, I thought some tips on sprite design and creation would be a good idea:
- Create the sprite panel in your vector illustration program of choice. Creating the icons as vectors gives you the option of exporting the sprite panel at any size, which becomes important later.
Use grids and guides to make sure that the sprite icons line up and occupy the same “box space”. Misaligning the icons will cause them to “jump” when you apply the CSS.
- Plan out the icons that you need, and try to create them in the order they will be used on the web page. Doing so makes it significantly easier to slice up and apply the icons with CSS. Traditionally, icon images are created immediately above their paired “mouse over” images on the panel. (The CSS variant I will discuss in the next related article obviates the need for alternative icon images entirely, reducing panel size and CSS complexity).
Try to plan the icons you need beforehand. Adding more icons to the bottom and right of the sprite panel is totally doable, but it is a pain to have to re-export the panel each time you do so. Changing the order of icons on the panel is usually disastrous.
Keep the sprite design clear, simple, and in the same theme. Consider color very carefully. Make the sprites consistent in appearance and style. Sprites tend to be small, so keep details to a minimum.
Export the CSS sprite panel as a transparent PNG for the adaptability to changes in background color (use an alpha-masked PNG for the greatest flexibility).
Export the image at a larger size than is required. Sizing the image down with CSS later will mean that scaling in a browser or a mobile device will preserve more of the image quality. (Exporting at 2× the final image size is a good rule of thumb).
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
