A neat way to create sprites with multiple matte colours

I've covered the importance of using sprites rather than separate files for web graphics before, and we follow this practice on all the sites we build. For me it's not all about making the download-time faster for the user (although that's a must!) but also a unique timesaver - it makes the maintenance of the site, and the build of the site (not to mention browser compatibility) much much faster. It never fails, a client will ask for minor tweaks when you think you're ready to launch a site, and for me to be able to open one file to alter all the graphics is much quicker than going through an endless long folder of small 1px files is vital.

We've recently made a new website for Survey and Marketing Services (SMS). They've got 5 different sections to their business. We proposed that each section has its own colour scheme on the website, that way the user can clearly see where he or she is when browsing. Once the homepage is loaded in the browser, you'd expect to navigate from page to page rather quickly, and not having to wait for the gradient background to load. I created a sprite that contains all the gradients in one, so when the homepage loads and gets its blue background, the other colours are loaded too. Same thing goes for the top navigation, of course.

(post continues below the image)

Of course, having 5 different background colours will propose some problems. As Internet Explorer 6 can't handle PNGs with transparency, we had to be clever about our sprites. Chris came up with a great solution to this which I haven't seen used elsewhere yet, so I thought we'd better share it with the community.

IE6 sprites with mulitple matte colour.

Of course, any other browser displays PNGs with transparency perfectly - so for IE you'll export the same logo as PNG-8 but with (in our case) 5 different matte colours. Then you join all the individual files in photoshop and export another PNG-8 without matte - and voila, your sprite is ready.

(post continues below the image)

To apply this to your site, use the following code in your stylesheet (on the SMS site we did this IE specifically, but there's no reason why we can't use this for all browser) :

 #logo /* Wrapper for logo */
 {
    background:url('../images/logo.png') 0 0 no-repeat;
    height:93px;
    width:162px
}

.section-2 #logo
{
    background-position:0 -93px;
}

By using this method, all of your logos will load in when opening the homepage, and you won't have to wait for for example the logo with the pink matte to load when you clicks to view the second section.

Originally posted in www.fuselagetown.com