magically delicious GIFs
Here's a helpful hint for all you developers, designers, wizards, weirdos, and whomever for obtaining the most pleasing results when implementing your icons online ...
Though a GIF is the best choice for web graphics it's often rather jagged. A PNG, however, can be fenagled to create a customized GIF that'll make you the envy of the neighborhood. I only recommend attempting this if the icon you plan to employ will be sitting on a solid background, and I'm only going to tell you how to accomplish it with Photoshop. If you're using some other image editor you'll have to figure it out for yourself (but you're a bright young person ... I mean, you are at the IconBuffet).
Get the hexadecimal color of your background. Let's imagine that you're using #3300FF, a rather shocking blue. Open your PNG in Photoshop.
File / Save for Web / use the little popup menus to save as a GIF, Selective color palette, No Dither, check the box for Transparency, and then (and here's where the magic happens) click on the Matte menu and select Other. That's where you enter #3300FF, or, hopefully, some more sensible color. And if none of that made any sense perhaps this screenshot will help.
The result is a PNG (a very lovely thing which, sadly, isn't quite ready for web primetime) that's been trasnformed it into a web-ready GIF magically anti-aliased to your background color. Smooth! Sweet!
Get updates with RSS
Be the first to know about new products and free stuff from IconBuffet. Subscribe to our RSS feed:
Find work or post a listing at Authentic Jobs.
SpamDog on Mar 23, 2007
sweet.. I always love to hear how diffrent people approach things.. I am totally printing this for later reference!
Keeblerelf on Mar 23, 2007
Yeah...I love these little tutorial types of things from folks that actually know what they are doing. I know enough about Fireworks to get the basics done and these always are a huge help even if they tend to be in reference to Photoshop. :)
SpamDog on Mar 23, 2007
I usually know enough to get to where I want.. but if I don't I usually know where to find it.. that is how I learned CSS when it first got big
jpowerbook2007 on Mar 23, 2007
cool stuff
christopher on Mar 25, 2007
I have to say i use Fireworks - is the £££ worth it for Photoshop/Creativesuite?
dyar on Mar 25, 2007
I use both Photoshop and Fireworks. I find each has a few advantages, but if I could only have one it would be Fireworks. But both are owned by the same company now.
Winnopeg on Mar 25, 2007
Nice one, though I gotta say usually just save in .png. IE users be damned. ;)
iconmaster on Mar 25, 2007
And IE7 can handle PNGs, so the situation is getting better every day (fortunately).
But for now, if you're using IconBuffet icons on your sites (and we hope you are), Brian's method is really the way to go. Fireworks can almost certainly do the same thing, as Adobe's web optimization dialog is pretty much a straight rip of Fireworks'.
Keeblerelf on Mar 25, 2007
With what little I've played with Photoshop I thought Fireworks was a little more user friendly for total beginners. Then since we had Macromedia Studio as part of our development setup I just got used to using it all the time. Unfortunately it looks as though Fireworks isn't going to survive the Adobe takeover. :(
zelexir on Mar 27, 2007
Thats nice, haven't thought about doing it this way, I've put in a layer below with my color and then saved a gif. but this might just save me a few steps on the way. thx
cry187
on Mar 28, 2007
@keeblerelf
If you check the new line up of Adobe Creative Suite 3, you'll be delighted that Fireworks is now a CS product. Freehand didn't made it, makes me really sad. :(
etherbrian on Mar 28, 2007
With apologies to the Highlander, THERE CAN BE ONLY ONE (vector illustration app, that is)! Josh and I both were longtime FreeHand users, and I for one could never imagine making the switch to AI. But I've been using Illustrator exclusively for about two years now and would never ever go back.
LoopyMind on Apr 09, 2007
Illustrator is (imho) THE app for vector...freehand feels..i do'nt know, dinky to me... but call me loopy ;)
iqon on Apr 09, 2007
No reason to damn IE users (at least not for PNG). I have no problem with PNGs in IE6.
I've tried to avoid using GIFs for years because of the royalty scam issue. Although I recently read that the GIF patent has expired. Not sure if that is true or not. Too late as far as I'm concerned, 24-bit lossless with transparency - SWEET! I will admit that I have done apple-apple comparisons and GIFs tend to be little smaller than 8-bit PNGs.
justG on Apr 09, 2007
You have no problem with PNG8 in IE6, but PNG24 with transparency is definitely a problem. They basically appear as ugly splotches. =]
iqon on Apr 10, 2007
Yep, my bad. Was thinking of Powerpoint. in IE6 PNG24 with transparency shows whatever color I made transparent for the background.
I agree with Winnopeg "IE users be damned".
christopher on Apr 10, 2007
Fireworks has survived under Web StandArd version of CS3 and in the Master Edition also.
All is not lost!!!
smfh25 on Apr 10, 2007
Thanks for the tut.
Novak
on Apr 10, 2007
And to think all this time I've been creating a new background layer and filling it with the color I need before saving it for web. *Smacks forehead* Can't wait to use this new technique. Thanks, Etherbrian!
iqon on Apr 10, 2007
Beware of GEEKS bearing GIFs
dgtlb on Apr 13, 2007
@etherbrian, & company..:
i may be missing something, but why not just export the PNG as a web-ready GIF from lets say Fireworks? Any benefit exporting from PS? does it have to do w/ it being anti-aliased when done though PS?
clarification would be most appreciated.
Ryuichi on Apr 18, 2007
I think that Fireworks can do pretty much the same thing, though it's hidden a litte bit.
Open a .png file, click File -> Image Preview, select GIF from the format dropdown list, select a palette (Exact looks best, Adaptive is smaller and should look ok) and choose the background color you want to use the Icon on (#3300FF).
Click export, choose a target location, and it's done.
Fireworks ftw!