Comments on: CSS Sprite Generator Released

By: smjdesign

smjdesign — Wed, 31 Dec 2008 19:17:35 +0000

If anyone wants a little more control, I have a PhotoShop JSX script that combines two image to create a CSS Sprite with the hover image below the mouse off image. All you have to is open the two images and run the script. If anyone would like to download it, it works with CS3.

By: kaplisrinku

kaplisrinku — Thu, 05 Jun 2008 13:52:18 +0000

SS Sprite Generator Released is a free tool for WYSIWYG menu generation. Just add menu items, define color and font settings and get an instant preview inside the program window itself. You may then get the CSS and XHTML menu code and paste it in your webpage, or – if you prefer — you may just save new (template) page with the menu generated… Sv Creation is very happy for that

By: stanislawosinski

stanislawosinski — Wed, 20 Feb 2008 14:54:59 +0000

I’ve just released a tool that does the same thing, but using totally different approach allowing greater flexibility and significantly reducing manual work. Try here:

http://smartsprites.osinski.name/

(No on-line version yet though, if there is demand, I’ll build one)

By: Shiva

Shiva — Tue, 16 Oct 2007 14:15:57 +0000

Nice tool…
Sometime back I published a similar tool here http://blogs.msdn.com/shivap/archive/2007/06/23/automate-packing-multiple-images-into-one-and-css-generation.aspx with source code. One advantage with my tool is that it can be integrated with build script which we do at OfficeLive.

By: vinhboy

vinhboy — Fri, 05 Oct 2007 06:36:37 +0000

I just used that tool to make a PNG. The file size came out bigger than the combined file size of the files I put in. What gives?

Does it matter?

By: countzero

countzero — Wed, 03 Oct 2007 09:24:41 +0000

Last time I made some css sprites I found out that unless you break up your css rules like the example below:

background-image: url(images/winBorders3.png);
background-position: right top;
background-repeat: no-repeat;

instead of

background: url(images/winBorders3.png) right top no-repeat;

then the sprite image will be loaded multiple times, once for each background: rule. So you might want to include that.

By: Shawn K

Shawn K — Tue, 02 Oct 2007 23:46:03 +0000

Neat tool, nice to see someone finally made this concept for the masses.

Only thing is this method can’t always be done in some circumstances [when optimizing code].

By: Nicolas

Nicolas — Sat, 29 Sep 2007 12:16:44 +0000

You may try this windows app that build the sprite and the CSS rules automatically, client side. Delphi Source is published as well.
I’ll be happy to get any feedback :)

By: Ed Eliot

Ed Eliot — Fri, 28 Sep 2007 21:59:57 +0000

Just an update to let you know that I’ve fixed the issue with decimal places appearing in the CSS. It only happened when resizing source images (setting values other than 100%).

By: Ed Eliot

Ed Eliot — Fri, 28 Sep 2007 18:35:17 +0000

Thanks to everyone for the feedback on the tool. There shouldn’t be pixel offsets in the output CSS. I’m guessing that’s an edge cache we didn’t hit. I’ll get on it and see if I can fix quickly. If someone can send me an example of some source images which cause the problem it’ll make things a touch easier.

With regards to source code release and command line versions – stay tuned. ;-)

By: Andy Kant

Andy Kant — Fri, 28 Sep 2007 16:05:58 +0000

This is a nice idea for a tool, but I’m a bit curious why the offsets in the screenshot have decimal offsets. I’m a big fan of control though, so I think I’ll just keep managing my sprite maps myself. ;-)

By: JP

JP — Fri, 28 Sep 2007 15:15:20 +0000

This is awesome, very nicely implemented.

I wish they had the source code open, it would be a huge addition to be able to add this process to a build script and have the file generated automatically, it means added new icons would require someone to manually go through the process again.

I understand why the source isn’t open, but it would be cool if it was. :-)

By: Danilo Celic

Danilo Celic — Fri, 28 Sep 2007 14:33:47 +0000

So I see that the generated positioning in the CSS includes fractions of a pixel for a few of the “sprites”. I wonder if that is an error when trying to split up the combined generated image

By: Jon Hartmann

Jon Hartmann — Fri, 28 Sep 2007 13:26:44 +0000

Thats a nifty utility, I’ve got some projects that have gone icon happy, and I’ll be curious to see how this might improve performance.

By: Alex

Alex — Fri, 28 Sep 2007 13:21:33 +0000

This is very useful and has just saved me several hours of work. It does choke on .zip files containing 1,000 images though(just shows a white page) – so maybe they can up the limit a bit and then it’s perfect