In essence you map the areas within you page(s) that require images, compose the markup and CSS in such a was that you can look up your image regions in your master image(s) and set these regions as backgrounds. The syntax for referencing these is straight-forward and with tools like Firebug for Firefox tweaking the coordinates becomes trivial. An important fact to be remember is background images don’t print so keep any images that need to render at the printer out of your sprites and use the standard image tags in your markup.

Vertical and horizontal images in a single sprite

While your initial reaction may be to condense all images into a single sprite I’ve found that separating them out into logical groups helps in maintenance and allows your pages to scale much easier. In addition to the scalability bonuses there do exist some technical challenges that separation helps with.

At a minimum two sprites are required: a tall thin sprite that supports horizontal tiling and a sort long sprite that supports vertical tiling. I have also found that additional sprites can be helpful when supporting design elements and decisions such as the sliding-doors technique for buttons, icons for lists etc. As with anything there are trade offs with any approach you take. Creating multiple sprites can help with the maintenance of your site but will cause your pages to download another file which is one the issues we’re attempting to mitigate in the first place.

Vertical sprite example showing support for vertical tiling/scaling

Example of sprite supporting horizontal tiling/scalaing

Sprite image using layers in Photoshop

Creating the above images in Photoshop is straight forward using layers and or layer groups. From this point a simple ‘Save for Web & Devices’ in Photoshop generates our sprite.

At this point I believe it’s clear that the usage of sprites not only reduces the amount of images created but also the overhead associated with the creation and evolution of your images. For the simplistic examples above each sprite represents 3 image slices that would normally need to be maintained, deployed, downloaded and inserted in the markup.

SmartObjects in Photoshop

However Photoshop smart objects allow us to go one step further! In the layers panel above we see the characteristics of each layer merely copied twice. What happens if we choose to change the background color, layer affects (drop shadow, stroke etc) or shape? In our example each sprite only contains 3 layers so these changes shouldn’t be too painful. With a larger site this becomes tedious and time consuming.

With Photoshop SmartObjects we have a way to create linked clones thereby reducing our level of effort even further. By converting a layer to a SmartObject and then creating copies of that SmartObject we can make changes to a single instance of that collection and that change will be propagated across all associated or cloned SmartObjects.

So by taking a base regular expression that matches:
- new lines starting with the word function followed by 1 or more of a-z capitols and lowercase, hyphens and underscores followed by zero or more spaces
- ^function [A-Za-z0-9-_]+[\w]*?

Add handles with ‘()‘ so we can reference specific areas of our matches
- ^(function) ([A-Za-z0-9-_])+[\w]*?
$1–^               $2–^

Create an expression that uses these references
- UTILITIES.$2=$1

And voila!

function checkParameters( p0, p1)

becomes

UTILITIES.checkParameters = function (p0, p1)

Nice!

I also have a ton of pictures to post but that’s another can of worms.

I’m currently deciding how to handle source control for everything. I have subversion set up at home but would an external instance make more sense? I also need to look into the details of svn+ssh and see if its possible to access svn over ssh.

Exciting times.

I’m still looking into Twitter and figure it must have some great value that eludes me. This tool seems so popular and vital that I’m sure there must be some value for me in it. But then again everybody loved the Spice Girls too.