Mastering the Slice Tool in Photopea: A Step‑by‑Step Guide

Photopea’s slice tool lets designers divide a single canvas into independently exportable regions—ideal for crafting responsive web layouts, interactive image maps, or multi‑format graphics. Whether you’re a seasoned Illustrator user or a newcomer to online editors, understanding this feature unlocks a new level of control over pixel‑perfect assets.

Why Slice the Image?

In modern web design, content often needs to adapt to varying screen sizes and devices. By slicing, you can export each segment as a separate file or embed it directly into HTML with clickable hotspots. The tool also streamlines batch exporting: you set your slices once, then generate PNGs, JPEGs, or even CSS fragments with a single command.

Getting Started – Setting the Canvas

Open your artwork in Photopea by dragging the file into the workspace or selecting File → Open. For optimal slicing, work in the highest resolution you plan to distribute.
Activate the Slice tool from the toolbar (shortcut U and then Shift + S). A light gray cursor appears, ready to carve the image.
Choose a slicing mode. Photopea offers three: Slice By Grid, Slice By Shape, and Slice By Image. Most beginners start with manual slices; more complex layouts benefit from grid or shape presets.

Creating Slices – Drag, Double‑Click, and Precision

Manual slicing remains the most flexible approach. Hover over the canvas; click and drag to outline a rectangle. Release to create a new slice. Repeat until the whole image is covered or until you isolate specific elements.

For exact measurements, double‑click the slice border to open the Slice Options dialog. Here you can specify exact dimensions, alignment, and even the target file format. Naming slices during this step saves time later—especially when you plan to export dozens of sections.

Shortcut Tips

Press Ctrl + Alt + Shift + S to toggle the Slice Selection Tool, allowing you to move or resize slices without re‑drawing.
Hold Shift while dragging to constrain proportions to a square.
Use Ctrl + G to group slices for collective transformations.

Organizing Slices – Naming, Masks, and the Slice Manager

When a project grows, a cluttered slice list can be a nightmare. Open the Slice Manager (Window → Slice) and inspect each item. Drag slices into logical groups—header, sidebar, or product image—and rename them with descriptive labels such as hero‑banner or cta‑button. Applying layer masks to slices can preserve transparency in PNG exports, ensuring that icons and logos remain sharp.

Exporting – From PNG to HTML and Beyond

Photopea’s Export As feature offers three primary pathways:

Export Entire Slice Set: Choose File → Export As → All Slices to generate a ZIP archive containing each slice in the chosen format.
Export Selected Slices: After selecting slices in the manager, right‑click and pick Export As → PNG/JPEG/WEBP for individual files.
Export to HTML: This is where the slice tool shines. Select File → Export As → HTML to create an HTML file with <img> tags and inline CSS for each slice. The result is ready for integration into web projects, complete with responsive breakpoints if you used the Slice By Grid mode.

Common Pitfalls and Tips

Overlapping slices can cause duplicate pixels or broken links. Keep the Slice Manager open and double‑check that slices do not intersect unless intentional.

Proportional scaling is essential for responsive layouts. When exporting to CSS, enable the Retina option to provide high‑density images for retina displays without increasing file size significantly.

Missing hotspots can break interactive maps. Use the Hotspot mode to add clickable areas without exporting them as image files, then link each hotspot to a URL in the final HTML.

Practical Use Cases

Interactive product galleries – Slice individual product images and wrap them with links to detail pages.
Image maps for dashboards – Create slices for each icon, export the map HTML, and embed it into your dashboard template.
Responsive hero sections – Slice background images into mobile, tablet, and desktop slices, then load the appropriate one via media queries.

Advanced Tricks – Layer Comps and Smart Objects

If you’re working with complex compositions, wrap your slices in Layer Comps to toggle visibility for different design iterations. For repeated use, convert a slice to a Smart Object—you can then edit the content without breaking the slice boundaries.

Mastering the slice tool in Photopea empowers you to produce clean, modular assets that scale across devices, all within a browser‑based environment. By following the steps above, trend‑aware designers can elevate their workflow, ensuring pixel accuracy while keeping the creative process agile.

3D Warehouse