App Screenshots Overlay Management

Create and manage overlays on screenshot designs: text, images, icons, and magnifiers.

Text Overlays

Best Practice: Screenshot Copy Rules

Screenshots are advertisements, not documentation. Each caption sells one idea.

• 3–5 words per line (max 2 lines) — must read at thumbnail size
• Benefits, not features ("Save 2hrs/week" not "Automatic tracking")
• One idea per headline — never join with "and"
• Text < 20% of image area
• Top 25–30% of canvas (above device frame)
• Centered alignment with full-width text box

Three approaches per caption:

Add Text (Centered — Recommended)

# The centering formula: --x 0 --width <canvas-width> --align center
appshots editor add-text \
  --text "Track Your Habits" \
  --font "Poppins" --size 90 \
  --color "#FFFFFF" \
  --y 80 --x 0 \
  --width 1290 --align center

Add Text (Multi-line)

appshots editor add-text \
  --text "Your Habits\nYour Way" \
  --font "Poppins" --size 80 \
  --color "#FFFFFF" \
  --y 60 --x 0 \
  --width 1290 --align center

Update Text

appshots editor update-text --id <overlay-id> \
  --text "New Text" --font "Inter" --size 72 --color "#000000" \
  --x 50 --y 100 --width 900 --align right \
  --scale 1.2 --rotation 5

Text Alignment Options

Recommended Fonts

# Browse available fonts
appshots editor list-fonts --query "poppins" --limit 50

Image Overlays

# Add image overlay
appshots editor add-image --file /path/to/badge.png --x 100 --y 200 --width 300 --height 300

# Update position, size, opacity
appshots editor update-image --id <id> \
  --x 50 --y 100 --width 400 --height 400 \
  --scale 1.5 --rotation 15 --opacity 0.8

Icon Overlays

# Search icons (Material Symbols + SF Symbols)
appshots editor list-icons --query "star" --style material
appshots editor list-icons --query "heart" --style sf

# Add icon
appshots editor add-icon --codePoint 57424 --size 60 --color "#FFFFFF"

# Update icon
appshots editor update-icon --id <id> --size 80 --color "#FF0000" --rotation 45 --opacity 0.8

Magnifier Overlays

Magnifier overlays create zoom-in callouts to highlight specific UI details:

# Add magnifier
appshots editor add-magnifier

# Update magnifier properties
appshots editor update-magnifier --id <id> \
  --x 100 --y 200 --width 300 --height 300 \
  --zoom 2.5 --corner-radius 20

Overlay Management

Listing & Selecting

appshots editor list-overlays                    # See all overlays with IDs
appshots editor select-overlay --id <overlay-id>  # Select by ID

Positioning

appshots editor move-overlay --dx 10 --dy -5     # Move relative to current position

Copy, Paste, Delete

appshots editor copy-overlay                     # Copy selected overlay
appshots editor paste-overlay                    # Paste from clipboard
appshots editor delete-overlay --id <overlay-id>  # Delete specific overlay

Z-Order (Layering)

appshots editor bring-forward                    # Move up one layer
appshots editor send-backward                    # Move down one layer

Grid & Alignment

Use the alignment grid for precise positioning:

appshots editor set-grid --show --snap --dots --center --size 50