<!-- skill: Photopea | version: 1.0.0 | description: Free browser Photoshop-alternative — PSD editing, templates, API automation | category: Video & Design -->

## Instructions
- Photopea (photopea.com) opens PSD/PSB/XCF/Sketch/Figma/AI in the browser — same layer/mask/adjustment model as Photoshop, free.
- Non-destructive habits transfer 1:1 (Smart Objects, adjustment layers, masks). Keyboard shortcuts match Photoshop by default.
- Templates: File > New from template, or script repetitive exports; save back as .PSD to keep layers, or .PNG/.JPG/.WEBP for delivery.
- Automation without Photoshop: Photopea API/Scripting (`app.activeDocument`) can batch-process in the browser; for servers use PSD.js or Python `psd-tools` instead.
- Fonts: missing fonts get substituted — install/activate the exact family first for text-heavy work, or convert text to shape on final export.
- Large files: work at reduced zoom, merge stamp layers (`Ctrl+Shift+Alt+E`) before heavy filters, export slices.
- PSD round-trip rules: keep text live until final, keep Smart Objects un-rasterized, save a `.PSD` master locally before any `Export As` — web exports are one-way.
- Artboards for multi-size sets (1080x1080 + 1080x1920 + 1200x628 in one file); `File > Export > Artboards to Files` beats manual cropping.
- Recovery: Photopea autosaves to local storage — after a crash, reopen the same browser/profile first before clearing site data or the recovery is gone.
- Color: `Image > Mode 16-bit` while grading, convert to 8-bit sRGB on export; embed the profile or colors shift on phones.
## Examples
- Thumbnail pack: one PSD with artboard variants → export each artboard as JPG.
- Social set: 1080x1080 master → duplicate into 1080x1920 + 1200x628 via Artboards, adjust crops per format.
- Logo refresh: vector shape layers scale cleanly — export SVG for web + PNG 4x for print from the same shapes.
## Workflows
1. Open/upload source (drag-drop), Save as .PSD immediately (local or cloud).
2. Edit with Photoshop habits (masks, adjustment layers, Smart Objects).
3. Version via File > Save a Copy per milestone (v1/v2/final).
4. Export each deliverable (File > Export As, exact dimensions, sRGB).
5. Hand off: share .PSD + exported files + font list.
6. Archive: master PSD + exports + a `notes.txt` (fonts, colors, sizes) in one folder.
## Templates
```js
// Photopea scripting — batch export all layers as PNG (run in Console / Scripts)
var doc = app.activeDocument;
for (var i = 0; i < doc.layers.length; i++) {
  doc.activeLayer = doc.layers[i];
  doc.saveToOE("png"); // downloads each layer
}
```
// Photopea scripting — fit every artboard photo to a 1080px bound (pattern)
```js
// var b = 1080; scale active layer proportionally, then center on canvas
var l = app.activeDocument.activeLayer;
var w = l.bounds[2] - l.bounds[0], h = l.bounds[3] - l.bounds[1];
var s = 1080 / Math.max(w, h) * 100;
l.resize(s, s, "bicubic");
```
- Quick actions: Select Subject → mask → place on brand background → export (2-minute cutout flow).
- Thumbnail template: `1280x720` artboard, subject layer + blurred-bg layer + 3-word text layer at 140pt — duplicate artboard per video, swap subject.
- Export checklist per deliverable: dimensions / format / sRGB / file size cap / naming `project_platform_YYYYMMDD`.
```text
# 5-minute thumbnail sprint (same stack every video = channel consistency)
# Select Subject -> mask -> subject 120% -> bg copy blurred 8px + darkened 40%
# 3-word text 140pt + stroke -> Export JPG q80 1280x720 under 2MB
# Artboards: 1080x1080 + 1080x1920 + 1200x628 from one master, Export Artboards to Files
```
## Tools
- SARAH can't click the Photopea GUI — it prepares assets, dimensions lists, and export checklists; use `psd-tools`/`pillow` via SARAH shell for server-side PSD work.
- Bulk ops outside Photopea: ImageMagick convert/mogrify.
- Server-side PSD inspect: `pip install psd-tools pillow` + `psd-tools show` to list layers without opening the browser.
## Advanced
- API automation: `www.photopea.com#m=...` URL params + `postMessage` API drive Photopea from another page (open → apply script → export) for embedded editors.
- PSD.js / psd-tools pipelines: extract text layers for translation swaps, replace smart-object contents headlessly, render previews in CI.
- Smart-object swaps: double-click → paste new art → save — mockups (screens, shirts, billboards) update in seconds across all artboards.
- Selection stack: `Select > Subject` → `Select and Mask` (1–2px feather, −20% shift edge for hair) → `Output to Layer Mask`; refine with black/white brush at 30% flow.
- Troubleshooting: fonts substituted → install family or `Type > Convert to Shape` before handoff; file won't save → local-storage quota full (export PSD now, clear old recoveries); script error `undefined is not an object` → no active document/layer selected, guard with `if (!app.activeDocument) exit()`; colors dull after export → working profile vs sRGB mismatch, convert on export.
- Thumbnail sprint (5 min): Subject-select → mask → `Image > Transform` subject 120% → blurred darkened bg copy → 3-word 140pt text with stroke → Export JPG q80 — same stack every video builds channel consistency.
## Documentation
- Photopea docs: https://www.photopea.com/learn
- Scripting API: https://www.photopea.com/api (search "photopea scripting")
- PSD format reference: https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/