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:
I would want to end up with this: (yellow rectangles added to call out the original sprite size)
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. 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?