Site Elements

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)

CSS Sprites in Fireworks

The Dreamweaver Step (Coding the Sprite)

CSS Sprites in Dreamweaver

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!

Related Posts
  • Web Design
    How to Export Photoshop Assets For the Web With PNGHatPnghat thumb
    The recently released "PNGHat" plugin for Photoshop, made by Source, creates an entirely different workflow for exporting PSD elements for use in websites, games, apps or whatever other types of projects you design for.Read More…
  • Game Development
    Game Design
    Enhance Your Pixel Art With a Stylized Beveled Pixel EffectPreview1
    Transform your boring pixel art into something stylish. This effect can be applied to nearly any project with ease.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Design & Illustration
    New Design Courses Available on Tuts+ PremiumNewdesigncourses 400x277
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out. Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Code
    JavaScript & AJAX
    JavaScript Animation That Works (Part 1 of 4)Spriting icon large
    HTML is the language that the web is built in and it's kind of a strange beast. Although it was originally intended as a way to easily share academic information across the Internet, it has been slowly transformed to accommodate the media-rich environment we know and love. Because of the haphazard nature of HTML (and JavaScript, the programming language that manipulates elements in HTML and makes them interactive), sometimes we have to think outside the box a bit. In this tutorial series, I will show you how to do cross-browser animation using a method called spriting. And, because this is a learning opportunity, we will be doing it all without any external libraries (like jQuery).Read More…
  • Code
    Web Assets - Tips for Better Organization and PerformanceWeb assets retina preview
    Remember back to when we had to spend a lot of time optimizing our project's assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise of mobile development, we are again back in that same situation. It is extremely important to create well optimized sites, so that we have faster applications, which download less content and respond immediately. Read More…