Download Source Files
In this Nettuts+ PLUS tutorial, you will learn how to create a dynamic “Image Sprite Framework” from an icon set of your choosing. The framework will consist of the sprite image, a sprite stylesheet whose class names and properties correspond to the icons within our sprite image, and an HTML preview page – which we can use as a quick reference guide for the framework. By the end of this tutorial, you should feel comfortable creating dynamic image sprites on your own and should be able to implement and take full advantage of the many benefits this system provides.
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Nikola Malich
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Onvo Media - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Too bad i dont have an premium account!
Maybe soon!
Good one!
Cheers
it looks cool thanks for posting
After a one week, gonna download and have a read
Very nice tutorial, will use it right away in a new project. Saves a lot of time and serverloads for all the separate icons.
… glad to hear that you like this technique.
I’m very new to this technique, I’m sure it will be useful to me and many others.
Thanks for the tutorial. Keep up the good work.
… thank you for the kind words Juan. I’ve only recently discovered how powerful and useful PHP’s GD library is. Using GD can really be a huge time saver when it comes to design / development.
I noticed that the demo does not work as all the icon file names start with a capital letter, or am I doing something wrong…
… filenames can start with capital letters but they ‘shouldn’t’ start with a digit as their corresponding CSS rules will be invalid.
I get the following error when publishing live;
Warning: imagecreatefrompng(/home/deb69/domains/[domain]/public_html/sprite/icons/quartz/adobe_bridge.png) [function.imagecreatefrompng]: failed to open stream: No such file or directory in /home/deb69/domains/[domain]/public_html/sprite/sprite_builder.php on line 52
This refers to the comment of Josh who has the same problem. Is this a PHP.ini setting or does something needs to be adjusted in your script?
The filename on the server is Adobe_Bridge.png
I contacted my hosting provider and it is a Apache setting. All icons and iconmaps should be lowercase to make the script work on most hosts.
… just uploaded everything to a live server to test it and you guys are correct. Sorry about that. Although I initially tested this on a live server, as I made changes to the code I only tested them locally. It turns out that I was a bit eager in converting everything to lowercase and since I’m working on a Windows PC locally this didn’t generate any errors. I’m updating everything as we speak. Basically, we’ll only be converting to lowercase when writing CSS rules or HTML class names. It’s kind of funny, but, I always convert filenames to lowercase when uploading them to my server so I had heaps of fun figuring this one out. haha
Very Useful…! Nice job!
So, the final result of this tutorial is similar to spritegen.website-performance.org ?
… this is the first time I’ve seen that web utility and I haven’t had a chance to test it out yet but I would assume it’s very similar. I actually created this system as a result of being unable to find an ‘online’ Sprite Generator. In the future, I may write a tutorial on how to extend this system into a whole slew of image utilities. Nice find, though. Where were you with this info a few months ago when I was figuring out how to work transparencies in GD… haha
Nikola and others,
The thing why the script in a live enviroment is not working is because the live enviroment I am working in is a UNIX server. Windows servers don’t care about Upper- and lowercasae names UNIX servers do.
All icons and foldernames should be lowercase to solve the problem. When you want to use this script for one of your projects you should do a check on the files and rewrite them to lowercase.
A script to help you on the way : http://phpweby.com/software/filerenamer
… I use a UNIX server actually. The problem was that I was greedy in converting everything to lowercase. I’ve updated the code and tutorial so that we’re only converting the appropriate strings to lower case when writing CSS rules and HTML class names. I tested it out on my live server and it works properly. Sorry about that, I was really designing this system for ‘local’ environment. Keep in mind, though, if you’re using this on a live web server you’re definitely going to want to button everything down a bit. I’d start by limiting the length of the submitted values and throwing some simple regex validation in there.
One thing to mention;
Rule 266 change $sprite['icon_name'][] = strtolower($path_info['filename']);
to $sprite['icon_name'][] = $path_info['filename'];
And it works on UNIX based servers too.
Note to mention: folders should be all lowercase because of the prep() function.
… that’s correct. I’ve already updated the code and it should have been changed by now. This is what I meant when I said I was a bit greedy in just coverting everything to lowercase.