CSS Sprite Map in Adobe Fireworks Tutorial

by
on June 1, 2010
(3 minute read)

Adobe Fireworks or Photoshop haven’t got any CSS Sprite Map tool or wizard but it is very easy to create sprite maps. I recommend you to use Fireworks instead of Photoshop for this since the interface is much cleaner and organized and the exported images have smaller size but excellent results. You should also use Smush.it when you finish with your image to compress it even more.

What is a CSS Sprite?

Simple Cloud Hosting Built for Developers

A CSS Sprite is one big image that has many small images in it. We then use CSS to get the little images, all from the big image. Everyone uses them nowadays and once you get the trick of it it is really beneficial for a website. So, what are the advantages of using Sprites? The user will only have to make one server request to get all the icons and logos, etc. Instead of asking for each image separately. Here are some examples: XaviEsteve, Google, LinkedIn, Facebook

How to create a CSS Sprite Map with Adobe Fireworks

The image map

Place every little image in a large canvas, trying to order them by groups. Leave as few space as possible between images but do not overlap them, leave 1px spacing between them.

fireworks-how-to-css-sprite-map

CSS properties for the sprite

The main three CSS properties needed for a CSS Sprite are:

background-position: -Xpx -Ypx;
height: 16px;
width: 16px;

Which can be easily found in Fireworks. Click the image or layer you want to know the CSS values and look at the bottom left of Fireworks:

css-sprite-background-position-in-fireworks

Remember that Background Position is always negative. Nothing to worry about, just add a hyphen (-) in the CSS style sheet.

If we are using <div> or <span> tags and want to show them as inline elements we should use:

display: inline-block;

IE6 doesn’t support inline-block so use this in the IE6 style sheet:

display: block; float: left;

We can also use <h1> or any other HTML tags we want. If we need to hide the text inside that tag we can put the text in a <span> and hide it:

<h1><span style="display:none;">Text to be hidden</span></h1>

Do not use inline styling, I’ve added it above just to show you the example in one line.

Group properties to optimize the CSS code

To get the best out of CSS sprite maps it is recommended to group the properties and make the code as small as possible.
There are two main ways to save code while creating a sprite map. The first one is to add all the selectors to the same URL:

The second one is to group all the images by its same height/width or any other shared properties like floatings:

Once you have the image and the CSS you just need to call it in the HTML page like this:

<span class="bigico hp"></span>

This will “magically” convert the <span> into an image.

CSS Sprite Planning for a website

Before starting with creating the CSS Sprite in Fireworks it is good to plan how many icons/images you are going to use and which type of images are you going to use: if they will have transparent background, use a lot of colours or gradients…

How many files will you need?

CSS Sprite map based on its use

Think which graphics are used always and which are just used for specific sections and split them. For example, create one for the home and common content like the header, sidebar, etc. and another one for specific sections that may not be accessed as much. The idea of CSS Sprites is to minimize server requests so packing images by context is the way to go.

Do you need transparency?

Are these images/icons going to be placed always on the same background? If they are going to have different backgrounds save the sprite as a PNG with alpha transparency (or a transparent GIF to support IE6 users). If you don’t need transparency then go with JPG or GIF.

File size of the image

The CSS Sprite map shouldn’t weight more than 300KB. If it does, split it on different ones.


Things I’m buying on Amazon this week

The screenshots of Fireworks were taken using Adobe CS3, the sprite map belongs to PC-Site.co.uk

Top photo by Gadl

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

No comments yet

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount