Figuring out how to make pixel-perfect CSS sprites on Inkscape can be tricky if you're relatively new to it. Here's a quick how-to on how to make the sprite .png you see below, starting from just the separate icons for the first row. In it is contained some of the lesser-known tricks of Inkscape that might elude you for the first few months.



Step 1: Make the icons the same size

To make sure all the icons are the same size, select all the elements in one icon, and group them together (Ctrl+G). Make sure all the buttons with regards to scaling (affect) are pressed in on the toolbar:

Now, make sure the "lock" icon next to the resize options in the same toolbar is also pressed in, and type the width and height (preferably in pixels) that you want the icon to be. Repeat this process for all your icons to make sure they are all exactly the same size. It's not a prerequisite, of course, that all of them are, but in most cases that would be the first step.

Step 2: Align the icons

The easiest way to get all your icons lined up exactly to each other is to start by moving them all to slightly intersect. Unfortunately, you'll have to do this by hand, InkScape offers no quick tool for doing this:

When you have that, Inkscape will do the rest. Open the "Align and Distribute Objects" toolbar (Ctrl+Shift+A). Before you go further, make sure that each icon is still in its own group. Now, select "Relative to Selection" and press the "Align top edges" button.

Finally, set the H and V options to "Remove overlaps" to 0, and click the button next to it. What you should have now, is something that looks like this:

Step 3: Create the parallel hover-state icons

You'd probably want to create a hover state for your icons with the help of CSS sprites. This is easy to do. Simply select all the icons you've lined up to now, and group them together (Ctrl+G). Now, duplicate the group (Ctrl+D). Hold control in while you drag the newly created icons (that are created in the exact same position as the originals) downwards. This makes sure that they don't get slightly misaligned. Don't move them all the way down though. You should have something like this:
 

Now, you can realign them with the top row again and have it placed right beneath it. You can do that by again using the "Align and Distrubte Objects" sidebar, selecting the two groups of icons and clicking on the "Align left edges" (if it isn't already left-aligned) and then clicking the "Remove Overlaps" button again. Edit the icons as you wish. To change the elements of a grouped item, you can either ungroup it (Ctrl+Shift+G), or double click on the group to work with the separate items without ungrouping them.

Final Step: Generate the png sprite in Inkscape

Lastly, you'd want to generate the .png sprite using Inkscape. This is easy: select all the icons you've made and aligned up to now, go to "File > Export Bitmap...", choose a filename, set the width (scaling) you desire, if any, and press "Export".

There you go, pixel-perfect CSS sprites made in Inkscape!

By the way, you'll see these beautiful icons in use on Fumana.org soon. Sorry, but they are not for general use and remain the intellectual property of Fumana Pty Ltd. For more Inkscape design tips, tricks and tutorials, make sure you follow IronZeb on Twitter.