Steam Store Screenshot Composition Safe Zones - Five Gates Before October Next Fest (2026)

Players scroll your Steam gallery in under two seconds per image. If the hero is cropped by the HUD, the focal enemy sits in dead center mush, and screenshot three looks like a different game than your capsule, you lose the wishlist before they read a single bullet.

May 2026 is the right month to fix composition—not October, when you are exporting fest builds. This Art & Design guide is a five-gate pass for screenshot layout and continuity, complementary to pixel UI contrast rules and your color script primer.

What you will have after ninety minutes

Five PNGs that survive phone-width squint, a beat sheet that answers player questions in order, and an evidence folder a publisher can open without asking “which build is this?” That is the deliverable—not “prettier art.”

Who this is for

• 1–3 person teams where marketing and art are the same human
• Games with busy HUDs (roguelites, builders, RPGs)
• Studios preparing October 2026 Next Fest who already fixed copy with the truth audit challenge

Time: ~90 minutes for first pass; 20 minutes per screenshot thereafter.

Why this matters now (May 2026)

Players decide whether to wishlist from thumbnails, not from your carefully worded long description. Composition is the first honesty signal after the capsule—before they ever launch the demo.

1. Discovery coherence — Store surfaces increasingly treat capsule + screenshots + trailer as one visual fingerprint; mismatches compound into lower “More Like This” fit.
2. Fest screenshot density — More indies ship five polished stills; muddy composition reads as “mobile port UI clutter.”
3. Stack rationalization — One storefront focus means fewer chances to redo art—first gallery pass must hold.

If you only fix one surface this month, fix screenshots before trailer polish—more players see stills than watch minute one of video. That priority order saves real art hours weekly.

Direct answer (TL;DR)

Export proofs to release-evidence/marketing-and-demo/screenshot-composition-2026-<date>/.

Gate 1 — HUD and text safe zones

Steam crops and overlays vary by client. Treat outer 8% of each capture as hot—avoid placing:

Think of the safe zone like a title-safe area on broadcast TV: the action can feel full-frame in-engine while the marketing crop still breathes. Players never see your overlay guides; they see whether the health orb survived the store carousel crop.

• Health bars split by edge
• Quest text truncated
• Minimap corners clipped
• Damage numbers only in danger zone

Workflow:

1. Open capture in editor; overlay 92% center rectangle guide.
2. Nudge camera or UI scale until essentials sit inside.
3. Save gate1-before-after.png pair in evidence folder.

Engine tips:

• Unity: Use safe-area component on canvas scalers for capture scene.
• Godot: MarginContainer anchors for HUD root.
• Custom: Letterbox intentionally rather than accidental crop.

Pairs with mission board UI scope when HUD complexity is the root cause.

Gate 2 — Rule-of-thirds focal anchors

Center-weighted bosses look fine in isolation; in a five-up gallery they blur together.

Pattern:

• Place primary subject on left or right third line.
• Leave negative space for store UI chrome on opposite side.
• Reserve center for symmetrical boss reveals in one shot only.

Anti-patterns:

• Two competing focal points at equal visual weight
• Diagonal action lines exiting frame with no entry cue
• Depth-of-field blur on subject (reads as smudge at thumbnail size)

Gate 3 — Phone-width silhouette test

Resize export to 360 px wide (height proportional). Ask:

• Can I name the genre in 3 seconds?
• Is the player character the largest readable shape?
• Do hazards read as hazards, not background noise?

If no, increase subject scale 10–15% or simplify background props before color passes.

Top-down teams: Cross-check boss room lighting sanity before re-capturing.

Gate 4 — Capsule-to-screenshot color continuity

Extract five swatches from capsule art (dominant, secondary, accent, shadow, highlight). For each screenshot:

If screenshot three introduces neon purple not in capsule, either recapture with grade or update capsule in quarterly capsule rhythm—not both silently.

Beginner path: Follow your first color script before this gate.

Gate 5 — Gallery narrative order

Order tells a micro-trailer:

1. Hook — fantasy / tone (one striking moment)
2. Loop — core minute-to-minute verb (combat, build, drive)
3. Depth — systems (inventory, skill tree, map)
4. Spectacle — boss, biome, set piece
5. Trust — cozy hub, UI polish, or social moment

Shuffle until a stranger predicts gameplay order without text.

Do not put text-heavy settings menus in slot one unless the game is a sim tycoon.

Ninety-minute capture sprint

Schedule capture when lighting in build matches shipping intent—re-capturing because a Tuesday lighting check-in changed rim colors is how art sprints eat marketing weeks.

Alt text as composition documentation

Alt text is not SEO stuffing—it records intent:

“Top-down roguelite combat on ice biome; player left-third; red telegraph circle visible; HUD inside safe frame.”

Store in evidence folder as alt-text.md for truth audit parity.

Gate 1 deep dive — safe zone templates

Create a reusable 1080p overlay (1920×1080):

• Outer margin: 77 px each side (~8%)
• “Do not place text” band top 120 px if Steam client overlays appear in your region tests
• Center safe action rect: 1536×840

Import overlay as top layer in Krita, Photoshop, or Photopea for every capture session. Delete overlay before export—keep overlayed .psd in evidence for diligence.

Split-screen co-op: Each player’s HUD needs its own safe island—do not stack both HUDs on the same third line.

Gate 2 deep dive — gallery variety without chaos

If slots 2 and 4 look identical at thumbnail scale, redo one—players assume duplicate assets.

Gate 3 deep dive — thumbnail grid simulation

Steam library and search results shrink images further than store page.

Test stack:

1. Export 184×103 px thumbnails (approximate library cell)
2. View 5-up in a blank Figma frame with 8px gutters
3. Ask: “Which is our game?”—if none pop, increase value contrast before hue changes

Pixel art: Disable filtering blur in viewer; use nearest neighbor export path.

Gate 4 deep dive — grading without breaking script

When captures fail swatch test:

1. Adjust global lift/gamma first (whole image)
2. Then split-tone shadows toward script shadow swatch
3. Last: local saturation on accent props only

Avoid per-shot LUTs that make screenshot 5 look sunset while screenshot 1 is noon—unless time-of-day is the marketed feature.

Document LUT name in gallery-order-v3.txt footer.

Gate 5 deep dive — beat sheet worksheet

# Gallery beat sheet - <title>

| # | Player question answered | Shot filename |
|---|--------------------------|---------------|
| 1 | What is the vibe? | 01-hook.png |
| 2 | What do I do minute-to-minute? | 02-loop.png |
| 3 | Is there depth? | 03-systems.png |
| 4 | Any wow moment? | 04-spectacle.png |
| 5 | Can I trust polish? | 05-trust.png |

If you cannot answer the question in the column, replace the shot.

Capture scene hygiene checklist

• [ ] Hide FPS counter and version strings unless marketing them
• [ ] Use shipping post-processing, not debug cinematic
• [ ] Lock time-of-day across set unless beat sheet requires change
• [ ] Disable player-named debug labels
• [ ] Use highest stable resolution; downscale once with sharp kernel
• [ ] Capture lossless PNG; compress only at Steam upload if required

Ultrawide and 16:10 desktop crops

Many players browse on ultrawide monitors. After gate 3 phone test, crop center 16:9 window from 21:9 capture—verify gate 1 still holds. If HUD was safe in 16:9 but clips in ultrawide, reframe camera—not UI cheat scaling.

Accessibility composition notes

Colorblind modes: if game offers them, one screenshot should show mode icon in safe zone with alt text explaining mode—not five identical palettes.

Text scaling: if demo supports 125% UI scale, capture one shot at default and note scalability in alt text—do not fake 125% in Photoshop.

Working with contractors

Brief external screenshot artists with:

1. Overlay PNG and gate PDF (export this article’s tables)
2. Locked build ID and cheat flags disabled list
3. Swatch strip PNG from capsule
4. Beat sheet empty template

Reject deliveries missing gate1-before-after.png proofs—prevents “pretty but wrong” revisions.

Fest month freeze policy

Matches price-anchor fest freeze philosophy—visual stack stable while traffic spikes.

Integration with truth audit week

Run composition pass after copy truth audit if claims changed (co-op removed, scope shrink). Run before truth audit if gallery still shows removed features—composition pass catches lies visually.

Suggested order for May 2026:

1. Truth audit (words)
2. Composition gates (images)
3. Capsule A/B calendar (quarterly)

Synthesized forum patterns (not metrics)

Teams report:

• Visit-to-wishlist lifts when gallery order follows beat sheet—even unchanged capsule
• Fewer “what kind of game is this?” demo comments
• Faster partner approvals when evidence folder includes phone-width folder

Your mileage varies; keep before/after screenshots in evidence.

Engine capture recipes (short)

Unity: Dedicated ScreenshotStage scene with cine camera + timeline for poses; disable dynamic resolution.
Godot: SubViewport at fixed size; get_viewport().get_texture().get_image().save_png().
Unreal: HighResShot with ShowFlag toggles documented in README.

Seven pro tips

1. Capture extras—cull beats re-capture panic.
2. Name files with gate numbers (03-systems-gate3-pass.png).
3. Never use Steam F12 if it drops UI layers—use engine capture.
4. Compare to enemy telegraph shape language for combat shots.
5. Store raws cold; upload warm exports only.
6. Re-run gate 3 after every UI scale change.
7. Schedule quarterly re-pass with capsule iteration calendar.

Extended FAQ

Animated GIF storefront assets?
First frame must pass gate 3; motion is separate.

We use AI background cleanup.
Gate 4 still applies; disclose generative assist.

Vertical game?
Rotate safe zone thinking—top/bottom 8% hot for mobile overlays.

Demo differs from screenshots?
Truth failure—recapture or label in alt text.

Only pixel UI contrast failed platform review?
Run pixel UI readability then return here for layout.

What this guide does not cover

• Legal contrast ratios — see pixel UI readability
• Store copy honesty — truth audit week
• Trailer editing — separate timeline pass
• AI upscaling ethics — disclose per AI checklist

Pairing with conversion tooling

After gates pass, measure with top 18 conversion auditing tools—tools detect drop-off; gates prevent self-inflicted mud.

Operating review hook

Add to Block 4 (marketing):

- Screenshot composition tag: 2026-05-composition-pass
- Gates 1-5: all PASS / list FAIL #
- Gallery order frozen until: <date>

Common mistakes (2026)

1. Capturing with developer stats overlay
2. Using photo mode FOV that demo cannot match
3. Different bloom settings per shot
4. Text-only screenshot as image 1
5. Ignoring ultrawide crop on desktop store
6. Replacing all five shots weekly during fest month

Genre addenda

Cozy: Gate 5 ends on hub calm, not combat.
Horror: Do not hide UI for “atmosphere” if demo has UI.
Multiplayer: Show player count UI in safe zone if claim is co-op.
Pixel: Nearest-neighbor upscale only—soften breaks gate 3.

Evidence folder skeleton

release-evidence/marketing-and-demo/screenshot-composition-2026-05-16/
  README.md
  swatches-from-capsule.png
  gate1-safe-zone-overlay.psd
  phone-width-360/
  alt-text.md
  gallery-order-v3.txt

Link from release-evidence taxonomy.

Key takeaways

1. Five gates — safe zone, thirds, phone test, swatch continuity, gallery order.
2. Fix composition in May–July, freeze before September fest exports.
3. Capsule and screenshots must share a color script.
4. Alt text documents composition intent for truth audits.
5. 90-minute sprint produces evidence, not just pretty PNGs.
6. Contrast rules are a sibling doc—run both.
7. Busy HUDs need engine safe-area discipline.
8. Gallery order is a micro-trailer—plan it.
9. Phone-width test catches smudge compositions early.
10. One visual stack beats five beautiful accidents.
11. Overlay templates make gate 1 repeatable.
12. Fest-month freeze protects composition wins.

Decision tree

Capsule updated this quarter?
  yes → Run gate 4 swatch test on all shots
  no → Skip recolor; run gates 1-3,5 only
        ↓
Any shot fails phone-width test?
  yes → Re-capture (do not Photoshop zoom)
  no → Write alt text + freeze gallery date
        ↓
Truth audit claims match visuals?
  no → Fix copy or recapture before upload
  yes → Upload + log in release-evidence

Solo artist evening schedule

Publisher diligence one-pager

Export composition-pass-summary.pdf with:

• Build ID
• Five gate PASS table
• Thumbnail grid screenshot
• Link to truth audit tag if run

Attach to milestone emails per milestone checklists.

Lighting and composition together

Top-down teams: run dungeon lighting contrast rules before capture day—fixing exposure in post while violating telegraph clarity fails gate 3 anyway.

Devlog and community use

When posting work-in-progress shots to social, crop to same safe zones so Discord feedback matches Steam reality. Mismatched social crops train players to expect framing your store cannot deliver.

Post-launch patch discipline

If a patch changes HUD layout, rerun gate 1 only within 48 hours of ship—even if gallery is frozen for fest, schedule post-fest update ticket now.

Comparison to AI pixel-art pipelines

Teams using AI pixel art workflows must still pass gate 4—generated palettes love neon outliers. Human swatch lock after generation.

Wishlist truth and visual honesty

Composition cannot fix demo mislabels. If screenshot 4 shows co-op UI but demo is solo, rerun truth audit—not gate 2.

FAQ

We have only three screenshots.
Run all five gates on three; order still matters.

Can we use concept art?
Label in alt text; do not imply in-engine if not capturable.

Ultrawide monitors?
Still pass gate 3 at 360px—primary mobile discovery path.

Same pass for trailer?
Reuse swatches; trailer has separate motion rules.

We use AI background upscale.
Disclose; ensure gate 4 swatches still match capsule.

How many raw captures should we shoot?
Twelve minimum for a five-shot gallery so two failures per gate do not force a reschedule.

Can marketing reorder shots without art?
Only with an updated beat sheet signed by the art lead.

Does this apply to Epic or GOG galleries?
Same gates; export separate crops if aspect ratios differ.

Our game is 3D realistic, not pixel.
Gates still apply; gate 3 uses value silhouette, not pixel crispness.

We failed gate 4 but love the shot.
Update capsule to match or discard the shot.

Screenshot text localization?
One language per baked-in image file; do not Photoshop-translate.

VR titles?
Gate 1 includes comfort HUD; use store-approved in-headset preview stills where allowed.

Scorecard template (printable)

Mark PASS or FAIL per cell; any FAIL blocks upload until resolved.

Weekly spot-check after freeze

Even during fest freeze, spend five minutes on gate 3 phone-width checks if a UI patch ships—composition regressions often arrive as a moved minimap, not a bad shader. Log the spot-check date in release-evidence/marketing-and-demo/ so you remember why a post-fest gallery refresh was required.

Before/after evidence for partners

Store side-by-side before and after frames with one sentence of what moved (for example, “HUD inside safe rect; hero on left third”). Partners trust diffs more than adjectives.

Close: Composition is cheap to fix in May and expensive to fix during fest week. Run the five gates once, freeze the gallery, and spend October arguing gameplay—not whether your HUD ate the boss. Save the overlay PNG in your repo tonight; future you will not invent safe zones at 2 a.m. before upload. Pair this pass with the truth audit and color script siblings so words, palette, and framing tell one story.