About
Welcome to Panela, Matt Harrison's take on mostly Open Source, Linux, Python, innovation in those areas, other buzzwords and Dick Proenneke. It comes complete with the illustrations as needed. Note the opinions expressed here are merely my opinions and not the opinions of my employer.
about MattBattle for Vesta
Space Combat Enters the 3rd Dimension on iPhone
Buy Battle for Vesta! Only $1.99 in the AppStore.
My RSS Feeds
Slicing web pages with inkscape (and python)
Using the plugin
Was watching this video describing how to "slice" web page designs two days ago and it inspired me. After a tiny bit of digging I found that one can easily script inkscape using python.
Here's the process I've used for slicing web layout with Inkscape. Create your webpage layout (set page units to "px", width/height appropriately and snap to 1 pixel intervals. This should allow pixel perfect alignment). Then create a new layer, naming it slices. Draw rectangles over the areas you want to slice (set x,y,width,height to whole pixel values). Name these rectangles using the Object Properties found in the right click contextual menu (the saved images name will be based on that value, so name them something like "header" instead of the default/non-useful "rect4312"). This is all explained in the video above.
What the plugin then does is iterate over all of the rectangle definitions found in the slice layer and set the opacity of the slice rectangle to 0. (That allows you to make slightly transparent slices, which are easier to deal with than invisible ones) It then creates pngs for every slice. After completing the slicing, it then sets all the slice rectangles to red at 25% opacity. To continue working on your design without having to deal with the slices being selected, just "lock" the slice layer and your clicks should fall through. You can also click the "eye" on the slice layer to not view it.
Oh yeah, I guess one should install the plugin. On gentoo I need to put the .py and .inx file into /usr/share/inkscape/extensions, then after a restart of inkscape the plugin will appear in Effects->Export->Export Layer Slices. The code is here (slicer.tar.gz)
Creating an inkscape plugin in python
Scripting inkscape was pretty straightforward. I did it by looking at the other plugins and not reading (or knowing about) the script wiki entry I listed above. The basic idea is to create a class that subclasses inkex.Effect, and implement an "effect" method. The .inx file is a simple xml file to designate where in the gui your plugin appears as well as provide for input required by your plugin.
update - Code is now up on github.
Nice work.
Would it be useful for more complex designs to make the slices different
colors, or even add some text to them that says what they are? Maybe
borders would work as well?
Thanks Heathenx for your comment and your screencast, it was an excellent
well done intro to slicing with inkscape!
Great article, very useful : thanks.
Thanks for the article. Something related: I read that the version of
Inkscape in development will include a 'batch' mode export to export
multiple areas. See http://inkscape-forum.andreas-s.net/topic/113025.
I am starting to use inkscape to make my web layouts. I am making manually
what your script should do (it doesn't work for me, may be because I use
Windows), and I have overlapping slices, so in a vertical stack of images
(i.e. a menu with several options) each slice adds an additional pixel, and
there is a vertical displacement with the slice in the immediate side. Did
you have this problem? How did you solve it? I am calculating one pixel
less when I export the bitmap, but it is annoying.
Thank you very much in advance
juanmaria- I'm not seeing the off by one pixel export. Are you sure you
are using whole integer values for x,y,w,h? Is the document set to use
'px' as the default units? Re: the plugin on windows. Well the plugin
doesn't even work on the .46 version of inkscape on linux! I'll see if I
can update it. It should be pretty easy to remove the non-crossplatform
issues with the code. Cheers
Didn't work for Inkscape 0.46 and Ubuntu 8.10, I rewrote the whole script,
see http://ciantic.blogspot.com/2009/02/inkscape-slicer.html if you are
interested about my version.