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 $9 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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Vasjen Katro September 9th
Too bad i dont have an premium account!
Maybe soon!
Good one!
Cheers
( )sam September 9th
it looks cool thanks for posting
( )Yoosuf September 9th
After a one week, gonna download and have a read
( )Orves September 9th
Very nice tutorial, will use it right away in a new project. Saves a lot of time and serverloads for all the separate icons.
( )Nikola Malich September 9th
… glad to hear that you like this technique.
( )Juan C Rois September 9th
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.
Nikola Malich September 9th
… 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.
( )Josh September 9th
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…
( )Nikola Malich September 9th
… filenames can start with capital letters but they ’shouldn’t’ start with a digit as their corresponding CSS rules will be invalid.
( )Orves September 10th
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
Orves September 10th
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.
Nikola September 10th
… 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
( )etrnly September 10th
Very Useful…! Nice job!
( )jQeueryGlobe September 10th
So, the final result of this tutorial is similar to spritegen.website-performance.org ?
( )Nikola Malich September 10th
… 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
( )Orves September 10th
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
( )Nikola Malich September 10th
… 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.
( )Orves September 11th
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.
( )Nikola Malich September 11th
… 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.
( )