Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

I have a CSS spritesheet with equal-sized sprites. I want to add a 1-pixel margin to each sprite, and extend each sprite's outermost pixel into that margin -- basically a full bleed effect for each sprite. For example, if I started with the following spritesheet of four 8x8 sprites:

Spritesheet example, original

I would want to end up with this: (yellow rectangles added to call out the original sprite size)

Spritesheet example, after adding bleed margins

There are ways to add a blank margin between the sprites, but I've hunted through the documentation and I haven't seen a command to add a bleed margin like this.

I've thought about adding a blank margin around each sprite, and then compositing the result with itself at various offsets. But that won't work when some of the sprites are transparent, because it would add pixels inside the original sprite (making the bottom two sprites super-bold), and I only want to add extra pixels around the outside.

Now obviously I can take slices manually, and then -append/+append. For example, I could do this to add the horizontal bleed margins:

convert in.png[1x16+0+0] in.png[8x16+0+0] in.png[1x16+7+0]
        in.png[1x16+8+0] in.png[8x16+8+0] in.png[1x16+15+0]
        +append temp.png

And the same kind of thing again to add the vertical. The downside is, this requires me to know how many sprites there are, and add parameters for every row and every column; so if I want something I can reuse with different-sized spritesheets, I need to write a script that figures out the image dimensions and generates the command line.

Is there a simpler way to add a bleed margin between sprites -- preferably one that doesn't require me to write a script to generate convert's command-line parameters programmatically?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.