Exporting parts of a drawing with slices in Vectornation

Sometimes you don't want the whole artboard as one picture. You want the logo on its own, each button from a sheet of interface designs, every icon in a grid, or the separate panels of a banner. Slices in Vectornation by Zaweba mark out those areas, and one export writes them all as separate images.

Making slices

The Export cutter, on Shift+K, makes a slice when you drag a rectangle over the canvas. Everything inside that rectangle becomes one exported picture. Draw as many as you need. They can overlap artboards, sit inside one, or cover just a corner of a larger illustration.

Slices can also be created from guides. If you have already set up guides to divide a design, for instance a strip of equal panels or a grid of icons, making slices from them is quicker and more accurate than dragging each rectangle by eye. This was added in version 0.9.15, and it pairs well with the layout grid command in the View menu, which builds columns, rows, gutters and margins as guides.

Editing with the Cut picker

The Cut picker selects and edits slices. Use it to adjust a slice that is a little too tight, to move one onto a different part of the design, or to tidy a set so their edges line up. Keeping slices exact matters more than it seems, because a slice that is one unit too small will clip the edge of a shape, and the mistake only shows up once you look at the exported images.

Exporting

When the slices are ready, File > Export > Slices writes one image per slice. That turns a single drawing into a folder of separate files in one step. It is a natural fit for web graphics, app icons designed on one canvas, social media sets cut from a long banner, or a sprite sheet of game assets.

Because the images come from the vector drawing, you can change the design and export again whenever you like, at whatever resolution the job needs. Edit the master, run the export, and every slice is refreshed together, which beats cropping a big picture by hand in a pixel editor each time.

Slices, artboards or export for screens

Vectornation gives you more than one way to get several images out of a drawing, so it helps to choose well. Artboards are best when each output is a page in its own right, with its own size and layout. Slices are best when the outputs are parts of one shared design, especially when they need to line up with each other or come from a grid. The app also exports for screens at several sizes at once, which suits a single graphic that needs many resolutions. Many projects use a mix of all three.

Tips for tidy results

Plan the slices before you draw them, so each one covers a single, clear piece of the design. Snap slice edges to guides or to the artwork so there are no stray gaps of background around a shape. Watch out for neighbouring artwork creeping into the edge of a slice, since anything inside the rectangle is part of the picture. And after the first export, open a few of the files and check their edges before you send the whole set to someone else.

Set up once, slices save a surprising amount of repetitive work, and they make it painless to keep a whole family of images in step with one master drawing.