How to Use the Layer Editor: Text, Gradients, Shapes, Magnifier and Groups

TL;DR

AppShots is a real layer editor: text with gradient fill and outline, images, shapes, a magnifier lens and device frames; solid, linear and radial gradient backgrounds per page or global; and the usual align, distribute, snap, lock, group and undo tools.

The problem

Template-only screenshot tools work until your idea doesn’t fit the template: a callout arrow pointing at one feature, a headline that overlaps two screens, a magnified detail. Then you export, open a general design tool, redo the device frames and lose the exact App Store sizes you started with.

What’s in the editor

Layers:

  • Text with a solid or gradient fill and an optional outline
  • Images (including SVG and WebP), with fill modes
  • Shapes: rectangle, ellipse, line, arrow, polygon, star and more
  • A magnifier lens that enlarges whatever lies beneath it
  • Device frames, covered in device frames

Backgrounds: solid, linear and radial gradients with multiple stops, set globally or per page, with a full colour picker (HSV, hex/RGBA, opacity and a screen eyedropper). Save backgrounds you like for reuse.

Arranging:

  • Multi-select, align and distribute
  • Drag, rotate, scale, snap and nudge with arrow keys
  • Lock, show/hide and reorder via the layer tree
  • Group (⌘G), including nested groups
  • Undo and redo throughout; cut, copy and paste layers across windows and projects
  • Right-click menus for the same actions

Steps for a good caption page

  1. Set the page background.
  2. Add the device frame and screenshot.
  3. Add a headline layer. Keep it short, large and high-contrast.
  4. Add a shape or arrow only if it explains something.
  5. Group the headline and its decoration so they move together.
  6. Lock the background so you don’t nudge it.

Tips

  • Design at the real export size. The canvas coordinates are the target pixels, so what you see is what ships.
  • Use the magnifier for fine UI. Small controls become legible at thumbnail size.
  • Keep text within a single page unless you mean it to span, so panorama seams don’t cut a word.
  • Consistency beats flair. Same font, same margins, same corner radius on every page.

FAQ

Can I add a magnifier or zoom callout? Yes. The magnifier lens is its own layer that enlarges whatever is beneath it and exports as seen.

Can I group layers? Yes, nested groups, with a modifier-click to select a single layer inside a group.

Can layers cross page boundaries? Yes. A project is a band of pages, so a layer can span pages. See the panorama guide.

Does text support fonts I install? There is a built-in font library with Latin, CJK and others, and you can upload your own ttf, otf or woff2 fonts.

The app AppShots →