Slicing images using Inkscape

I’ve been using Inkscape for about a month now and found it awesomely great.  Very intuitive and high usability of UIs.  I’ve done several page mockups using this wonderful tool and finally find myself wondering “Where’s the slicing tool…”

After sometimes Googling around, I found no satisfactory result and then I just nagging around kicking some unexplainable objects in the neighborhood putting the blame of this incompetency to the whole world (just kidding….) then some angels (actually some disgusting tiny smelly friends who lives inside my empty head) comes and bump me an idea on how I can slice with Inkscape.

First, I need a mockup to slice.  Let use the ugly first WP theme I fiddled with the last time.

Then, I create a rectangle with the exact dimension of the final sliced object dimension will be.  Let say, I need to make a background image for my content div to make a “rounded rectangle” content box effect.  In this case, a 50% transparent red rectangle with 900px wide (the same width with the content) and 30px height (approximately where the rounded corner radius).  I use tranparent red so I can see the rectangle cleary on the mockup.  You can use any color or transparency or even any stroke style for your own works.

Then align the red box with the content box or header bottom.  You can access object aligning features of Inkscape by pressing Shift+Ctrl+A.  Try to play with the feature for a while and you will be an Inkscape aligning expert in no time…

Then, you will have the rectangle exactly as the final slice will be.  Then select the transparent red rectangle and remove the fill and / or stroke style by right clicking the fill / stroke panel located on the bottom left of the inkscape window.  Careful don’t lose selection by clicking any other object since the transparent red box will become ‘invisible’.

After that, you can export to bitmap by using menu File->Export Bitmap or by pressing Shift+Ctrl+E key.  You will have the following dialog box.

Choose Selection for Export area, let other parameters set to default, and you can select the export file location and name by typing it on the textbox or use the browse button.  All bitmap export from inkscape is only in *.png format, so if you want to use jpg or gif, you have to convert it with another image manipulation tools (GIMP, Picasa, etc).  When you think it is all set, don’t forget to click the Export button.  I missed this step several times since after selecting the export file location by using browse button, the OK button on the end of the browse process is quite deceiving.  And if you happened to select more than one object when exporting, please make sure that the Batch export all selected objects check box is unchecked.  If not, you will have a lot of images (subsequently with the number of the object you have selected).

Maybe it is not a perfect slicing tool or method anyway, but it does do the trick for me.  I’m beginning to build a bad habit of ‘sketching’ on any part of  inkscape document and export the selected object(s) only.

Advertisement