How to Use CSS Sprites in Fireworks and Dreamweaver

Ever wondered how use CSS Sprites in your own web projects? Today, Tom Green (our resident Adobe expert) is going to walk through how to create CSS sprites in Fireworks and then put them to use in Dreamweaver. If you haven’t used CSS Sprites before, or if you’re just looking for an easier way to implement them, look no further!

What Are CSS Sprites?

Put simply, a sprite is a method of using a single image as a means of storing several smaller images. For instance, take a look at the sprite that’s being used at Webdesigntuts:

When we start coding, we can simply use CSS positioning and cropping of the image to show the piece of the sprite that we want.

Why Use a CSS Sprite? Speed! Using sprites to store images will reduce the time it takes to load an entire web page… when images get re-used over and over again on multiple pages, this can mean a lot of saved time.

Sprites are best used with smaller images that get used over and over again. For instance, most of the assets discussed in an entire site can actually be reduced to a sprite such as this:

In a single sprite, we’ve already prepped the bulk of our design graphics for coding… and it’s all under 19kb! Not bad right?

To create your own sprite, just create a blank document (start out with any size, you’ll eventually crop this down to just barely fit each element on the sprite), then add in the design elements with a reasonable amount of padding between each element. Here are some additional tricks:

• Elements that are spaced out evenly in the design should be spaced out evenly in the sprite (like the social media icons)
• If an element is transparent (like our slider tabs), make sure it’s showing up as properly transparent in the sprite
• Save the final sprite image as a transparent PNG-24… then you’re ready to rock and roll!

Alright, now that the basics are out of the way, Tom’s going to show us how to create these in a couple quick videos!

The Videos

These videos are recorded in HD, so feel free to hit the HD button and scale this up to fit your entire screen so that you can follow along closely.

The Fireworks Step (Creating the Sprite)

The Dreamweaver Step (Coding the Sprite)

That’s It!

Pretty easy right? Adding CSS Sprites to your own projects is fast and easy… which makes it a great tool to add to your bag of tricks. What’s better is that Fireworks and Dreamweaver (or any coding app) allow you to use sprites “by the numbers”, which simplifies it even further. That’s it for today – add any questions, comments, or tricks of your own below!