Export to GitHub

spriteme - issue #11

sprite image editor


Posted on Sep 1, 2009 by Quick Giraffe

A huge issue with sprites is maintenance. What if one of the embedded images changes - it's a pain to regenerate the entire sprite. And it's critical not to change any of the other embedded images' positions so their CSS doesn't have to change.

During sprite generation, we could add a comment to the PNG that contains the URL and bounding box (top-left, lower-right) of each embedded image. This shouldn't be too much extra data. Later, when changes were necessary, we could have a special spriteme image editor that would recognize each embedded image as a hotspot and let the user rearrange and modify the sprite.

To avoid the size increase of the comment, have an option to store this in a separate manifest file that could be used later during editing.

Comment #1

Posted on Sep 20, 2009 by Happy Bird

CSS itself can probably be used to get position coordinates for the sprite - as sprites are not used without CSS.

It's probably worth treating each sprite element as an image in itself in the interface and display it's boundaries on sprite preview image (I went and created it as separate request #65). In this case, it will be easier to just have "upload new version" next to each image so user can upload from desktop or point at the URL to replace this portion of the sprite with new version.

Comment #2

Posted on Sep 22, 2009 by Quick Giraffe

(No comment was entered for this change.)

Comment #3

Posted on Sep 22, 2009 by Quick Giraffe

(No comment was entered for this change.)

Comment #4

Posted on Nov 17, 2010 by Happy Bird

spriteutils project will include some work on sprite layout/metadata format for automated builds and more.

If SpriteMe (or CoolRunnings to be exact) was able to output the results of spriting in this format (in addition to human-readable Export CSS page), the tool you're talking about could be used universally.

Here's a sample of the format envisioned: https://github.com/andrewschaaf/spriteutils/blob/master/samples/sharingbuttons.json

Comment #5

Posted on Apr 16, 2011 by Grumpy Wombat

Wecom e to the good website:

http://www.shoppinglouisvuitton.org louis vuitton outlet
http://www.tiffanyjewelleryshop.org tiffany necklace
http://www.ghdstraightenerssale.com ghd straighteners sale http://www.christianlouboutinshopping.org christian louboutin
http://www.maccosmeticsshop.org mac eyeshadow
http://www.mbtshoesshopping.com mbt shoes sale
http://www.sunglassesshopping.org cheap oakley sunglass
http://www.handbagshopping.org chanel handbags for sale
http://www.christianlouboutinonline.net christian louboutin boots
http://www.chanelbagonline.net chanel handbag http://www.guccigucci.org discount gucci handbags

Status: Accepted

Labels:
Type-Enhancement Priority-Medium