Cutting a design into slices with Paint by Zaweba
The Slice tools in Paint by Zaweba cut one design into named images with their own format and quality, then Export Slices writes them with an index.html.
Slicing means cutting one flat design into rectangular pieces, each saved as its own image. Web designers have done it for a long time to turn a mock-up into page graphics, and it is still useful for email templates, image maps, banner pieces and anything where parts of a picture need different formats or links. Paint by Zaweba has a Slice tool, a Slice Select tool, Slices from Guides, layer-based slices and Slice Options, with Export Slices writing the images plus an index.html.
Making slices
The Slice tool works like a rectangle: drag across the part of the design you want as a piece. The Slice Select tool lets you pick an existing slice to move it, resize it or change its options.
Slices from Guides is the fast way for grid layouts. Place guides where the cuts should go, then make slices from them in one step. That gives clean, aligned pieces with no slivers or overlaps, which is hard to get by hand.
Layer-based slices follow the bounds of a layer. If a button or a photo sits on its own layer, a slice made from it fits exactly, and it follows the layer if you move it.
Slice Options
Each slice has its own options: a name, a link, alt text, a format (PNG, JPEG or WebP) and a quality. The name becomes the file name, so give it something meaningful. The link and alt text go into the HTML that Export Slices writes, which is how a sliced banner can have clickable areas and still describe itself to screen readers.
Choosing formats per slice is one of the main benefits. A photographic area can be JPEG at a moderate quality, while a logo slice next to it can be PNG to keep its edges crisp, and a large background can be WebP to save weight.
Writing the slices out
Export Slices writes every slice as an image and an index.html that reassembles them. Open that HTML in a browser to see the design rebuilt from its pieces, complete with links. You can use it as is for a simple page or email, or take the images and the structure into a larger project.
Cutting cleanly
Cut along natural boundaries. A slice edge through the middle of a soft shadow or a gradient can show a faint seam if the two sides are compressed differently. Put edges where colour is flat, or keep similar areas in the same format and quality.
Keep text you might change out of photographic slices. If a heading might be edited, it is easier when it sits in its own slice, or as live text in the final page.
Use alt text properly. Describe what each meaningful image shows or does. Decorative pieces can have empty alt text, but buttons and links must say where they go.
Where slices fit
Slices are for when the design is a single composition that needs cutting. If your assets already live on separate layers, Export As with each visible layer, or Generate Image Assets from layer names, will usually be quicker. When you need precise rectangles, per-piece formats and a ready-made HTML page, Paint by Zaweba's slice tools are the right ones, and they work offline like the rest of the app.
