photoaicompany. Open the app

Interactive studio

List Layers — live workspace

Your design's full layer stack, bottom to top — with IDs ready for every other tool. Every control below is live: configure, run, and watch the results.

Live workspace Ready

Try it: list your layers

No output yet.
Configure the controls above, then press Run — your result appears here.

Onboarding checklist

  1. Choose a design from the dropdown.
  2. The full layer stack renders immediately, numbered from the bottom of the stack to the top .
  3. Each row shows the layer type, a summary of its content, and its unique ID with a copy button.
  4. Click Refresh anytime to re-read the current stack after edits from other tools.

Steps tick themselves off as you work — or tap any step to toggle it.

List Layers techniques

Team collaboration — Every layer visible at a glance
Every layer visible at a glance
Marketing slogan on paper — Reorder the stack with precision
Reorder the stack with precision
Vintage cameras and lenses near camera roll on table — Lock the layers you love
Lock the layers you love
Colleagues planning a business — Named layers keep files sane
Named layers keep files sane

Keep going

Layout Add a Shape Drop rectangles, circles, stars, polygons and more onto your canvas. Open tool Layout Align Elements Snap two or more layers to a shared edge or center axis. Open tool Layout Group & Ungroup Elements Bundle layers into one movable group — or release them back apart. Open tool

Every photoaicompany design is a stack of layers: text, images, shapes, and groups, each sitting above or below the others. The List Layers tool shows that stack in true z-order — bottom to top — so you always know exactly what is covering what.

Each row is a working inventory of your canvas. The type icon-word tells you whether it is text, an image, a shape, or a group; the summary tells you its content (the shape kind, the first words of a text block, a group's member count); and the copyable ID is the handle every other layout tool needs. Reorder a layer, align two of them, group them — this list is the reference all of those operations point back to.

Designs evolve fast, so the list refreshes on demand: add a shape, run a reorder, or group two layers, and one click re-reads the live stack. It reads from the same document the full photoaicompany editor uses, so what you see here is exactly what you would see there.

How it works

  1. Choose a design from the dropdown.
  2. The full layer stack renders immediately, numbered from the bottom of the stack to the top.
  3. Each row shows the layer type, a summary of its content, and its unique ID with a copy button.
  4. Click Refresh anytime to re-read the current stack after edits from other tools.

Tips

  • Layer 1 is the bottom of the stack; if text is hidden, it is probably sitting below a shape.
  • Copy a layer ID here, then paste it into reorder-layer, align-elements, or group-elements.
  • Refresh the list after using other tools — this page always shows the live, current stack.

What it costs

Free on this site — and it can't be metered. List Layers uses no AI and runs entirely in your browser: no usage counters, nothing sent to our servers to bill. When credit metering arrives in the app, local operations like this one will never consume AI credits — only server-side AI generations will.

Frequently asked questions

Which end of the list is on top?

Layer 1 is the bottom of the stack — whatever is behind everything else. The last layer is on top. If a headline is hidden behind a shape, it is sitting lower in the list than the shape.

How do I change the order?

Use the reorder-layer tool to move any layer forward, backward, to the front, or to the back. This page's list refreshes so you can confirm the new order.

What do group layers look like in the list?

Groups show as a single layer with their member count, e.g. group#ab12 (3 items). Expand and edit them in the full photoaicompany editor, or ungroup them with the group-elements tool.

Related layout tools

Layout

Add a Shape

Drop rectangles, circles, stars, polygons and more onto your canvas.

Layout

Reorder a Layer

Move any layer forward, backward, to the front, or to the back.

Layout

Align Elements

Snap two or more layers to a shared edge or center axis.

See the transformation

List Layers — before & after

A messy water color palette in plastic container — before List Layers
Overhead shot of people in a meeting — after List Layers
BeforeAfter photoaicompany

Drag the handle — it glides with physics when you let go. List Layers, transformed in one pass.

Watch it work

See List Layers in motion

Drag the cards, scroll the scene — the tool explains itself.

InputTransformOutput
Cameras on leather straps hanging from persons shoulder — List Layers motion card

A canvas that keeps upList Layers — frame 1 of 4

Accessories in decorated cups — List Layers motion card

Type that performsList Layers — frame 2 of 4

Vibrant abstract art with flowing gradient colors — List Layers motion card

Photos with presenceList Layers — frame 3 of 4

A woman sitting in a studio — List Layers motion card

Export without fearList Layers — frame 4 of 4

Drag the cards — they glide with inertia. Scroll — the blob morphs and the dot traces the flow.

The full walkthrough

How List Layers works, step by step

List all layers in your photoaicompany design in z-order — bottom to top — with type, summary, and copyable element IDs. Free.

1

Design

Duplicate before experimenting: the original stays safe while the copy takes risks. Archive finished designs instead of deleting — old work becomes tomorrow’s template.

Pro tip: One design, one job. Split multi-purpose files early.

Elegant perfume bottle on soft silk fabric — List Layers annotated figure
Icons — List Layers
PNGJPGPDFMP4
CommentsBrand kit
Step 1: Design — List Layers, annotated
  1. 1
    Design control This is where you set design — changes preview live on the canvas.
  2. 2
    Live canvas Every adjustment renders instantly — what you see is what exports.
  3. 3
    Result Happy with it? The design updates in place, ready for the next step.
2

Re-read the live layer stack

Layers are the stack your design is built from — what’s on top wins every argument with what’s below. Name layers as you go; “Layer 47” is a mystery you’ll solve at the worst moment.

Pro tip: The layers panel is the design’s table of contents — keep it readable.

A group of people discussing marketing plans — List Layers annotated figure
List Layers
Stroke100%
Fill93%
Filters86%
Crop79%
Text72%
Canvas65%
Step 2: Re-read the live layer stack — List Layers, annotated
  1. 1
    Re-read the live layer stack control This is where you set re-read the live layer stack — changes preview live on the canvas.
  2. 2
    Live canvas Every adjustment renders instantly — what you see is what exports.
  3. 3
    Result Happy with it? The design updates in place, ready for the next step.
Know your workspace

Anatomy of the List Layers workspace

Five regions do all the work. Learn them once and every tool on this site feels familiar.

List Layers — untitled.pacText
FlipEffectsExportBackgroundAdjust
Vibrant abstract colorful wave pattern art — List Layers annotated figure
Grid
Fill
Icons
Opacity
Anatomy of the List Layers workspace
  1. 1
    Toolbar Every tool lives here — pick one and the canvas listens.
  2. 2
    Canvas Your design, live. Drag, resize, and edit directly.
  3. 3
    Layers The stack your design is built from — top wins.
  4. 4
    Export One click sends the finished design out as PNG, JPG, or PDF.
  5. 5
    Properties Fine-tune whatever is selected, right where you work.
Level up

List Layers techniques that look professional

Four field-tested techniques, each shown on real photography. Steal them all.

Professional photoshoot makeup session — List Layers technique
Steal structure, not style. Borrow the layout logic you admire, then dress it in your own voice. Apply this inside List Layers today — the improvement is instant.
Sony cameras on white bench — List Layers technique
Preview on the real device. A design judged on desktop and consumed on phones needs a phone check before shipping. Your List Layers work will show the difference immediately.
Blue boat board — List Layers technique
Design the system, not the page. Styles, spacing, and components that repeat become a language — speak it fluently. This is doubly true when the job is List Layers.
Hashtag campaign text on desk — List Layers technique
Less, but better. Remove one element and see if the design improves — repeat until it stops improving. Keep this in mind every time you open List Layers.
Avoid the traps

Three mistakes to avoid with List Layers

✕

Ignoring the safe zones

Platforms crop edges and cover corners with UI. Fix: keep critical content inside the central 80%.

✕

Five fonts in one design

Every extra typeface dilutes the message. Fix: one family, up to three weights — restraint reads as confidence.

✕

Decorating before messaging

Effects applied before the words are final get redone. Fix: lock the copy first, style second.

End to end

A complete List Layers workflow

Five moves, start to shipped. This is how the work actually flows.

  1. 1

    Start in the editor

    Open a blank canvas or a template — List Layers works on anything with pixels. The tool never asks you to start over.

  2. 2

    Do the core move

    Run List Layers the way the walkthrough above shows. Get the big decision right before touching details.

  3. 3

    Refine with a second tool

    Pair it with All tools — tools compose, and two simple moves beat one complicated one.

  4. 4

    Check it on a phone

    Most designs are consumed on phones. Preview small, fix what breaks, then continue.

  5. 5

    Export and ship

    Export in the format your destination wants, keep the master design, and move on to the next one.

Good to know

More List Layers answers

What’s the single most useful tip for List Layers?

Layer 1 is the bottom of the stack; if text is hidden, it is probably sitting below a shape.

What do beginners get wrong with List Layers?

Copy a layer ID here, then paste it into reorder-layer, align-elements, or group-elements. Start simple, then layer on complexity once the basics feel automatic.

Is List Layers really free?

Yes — List Layers is free to use in your browser, and your work saves to your account. Premium plans add AI credits, team features, and higher export limits; the tool itself never holds your design hostage.

Visual guides

Every fact, visualized

Ten detailed infographics — every number real, every label earned. Built for List Layers, only on this page.

How List Layers worksThe exact control order, from blank canvas to finisheddesign.1DesignSet design and watch the canvas answer instantly — everycontrol in this tool previews live.2Re-read the live layer stackSet re-read the live layer stack and watch the canvasanswer instantly — every control in this tool previewslive.
List Layers step-by-step workflow
Anatomy of the List Layers workspaceFive regions do all the work — learn them once.ToolbarEvery tool lives here. Pick one andthe canvas listens.CanvasYour design, live. Drag, resize, editdirectly.LayersThe stack your design is built from —top wins.PropertiesFine-tune whatever is selected, rightwhere you work.TemplatesStarting points that are 70% rightbefore you touch them.ExportOne click out as PNG, JPG, PDF, orMP4.
List Layers workspace anatomy
Export formats, decodedPick the format your destination actually wants.PNG — crisp graphicsText, logos, transparency. The default for anything withletterforms.JPG — photosSmall files for photographic images. Never for text-heavygraphics.PDF — print & documentsMulti-page, print-ready, keeps vectors sharp at any size.MP4 — motionAnimated designs and video exports for social and ads.
List Layers export guide: the right format, every time
Which format for which jobA quick matrix — screenshot it.PNGJPGSocial graphics with text✓Photographic posts✓Print flyers✓Video & animation
Which format for List Layers: the quick matrix
List Layers vs doing it manuallyWhat the tool actually saves you.✓Runs entirely in your browserNo install, no updates, no disk space sacrificed.✓Free tier that is a real workspaceNot a trial — the editor, templates, and core tools stayfree.✓Every control previews liveChange a setting and see the result instantly.✓Templates + AI assistance built inStart from 70% done instead of a blank canvas.✓One-click export in every formatPNG, JPG, PDF, MP4 — sized for each placement.
List Layers advantages
Keyboard shortcuts that pay offLearn these once — they work across the whole editor.Ctrl/⌘ + ZUndo. The most-usedshortcut in any creativetool.Ctrl/⌘ + C / VCopy and paste anyelement, across designs.Ctrl/⌘ + DDuplicate the selectionin place.DeleteRemove the selectedelement instantly.Ctrl/⌘ + SSave your design rightnow.+ / −Zoom the canvas in andout.
Shortcuts that speed up List Layers
Contrast rules that keep text readableReal standards, not opinions.4.5 : 1 — body text minimumWCAG AA: regular text needs this contrast against itsbackground.3 : 1 — large text minimumHeadlines 24px+ (or 19px bold+) get a lower bar — still abar.Grayscale testConvert mentally to gray: if the text vanishes, the colorfailed.Scrim rescueA soft dark veil behind white text saves impossiblephotos.
Contrast rules for List Layers text
Mistakes → fixesThe three traps, and the way out of each.✓Text touching the edgesCopy crammed against the canvas edge feels accidental.Fix: give every text block breathing room — margins arefree.✓Tiny text on busy photosSmall type disappears into photographic detail. Fix: growthe size, add a soft scrim behind it, or move the copy toa quiet zone.✓Ignoring the safe zonesPlatforms crop edges and cover corners with UI. Fix: keepcritical content inside the central 80%.
List Layers mistakes and fixes
Where List Layers earns its keepFour jobs this tool was born for.SocialPosts & storiesSized right,exported sharp,shipped daily.BrandMarketing assetsOn-palette,on-font, everysingle time.DocsPresentationsSlides andone-pagers thatlook designed.PrintFlyers & cardsPDF export keepsevery edge crisp.
List Layers use cases
Quick answersStraight from this page — no digging required.Which end of the list is on top?Layer 1 is the bottom of the stack —whatever is behind everything else.The last layer is on top. If aheadline is hidden behind a shape, iHow do I change the order?Use the reorder-layer tool to moveany layer forward, backward, to thefront, or to the back. This page'slist refreshes so you can confirmWhat do group layers look like inthe list?Groups show as a single layer withtheir member count, e.g. group#ab12(3 items) . Expand and edit them inthe full photoaicompany editor, o
List Layers quick answers

Live telemetry

LIST LAYERS — CAPABILITY TELEMETRY

Live counts from this page · hover any bar

0Form controls
0Guided steps
0Pro tips
0Use cases
Breakdownlive
Canvas
Action
Canvas
Action
Cumulative depthlive
Lab controls: 2Lab controls+ Steps: 6+ Steps+ Tips: 9+ Tips+ FAQs: 12+ FAQs+ Use cases: 18+ Use cases

Complete guide

Everything List Layers can do

The full capability picture — features by plan, every control explained, real use cases, and the spec sheet.

Feature availability

Every capability of this tool, and which plan includes it.

CapabilityFreeProBusiness
A design from the dropdown.✓✓✓
The full layer stack renders immediately, numbered from the bottom of the stack to the top.✓✓✓
Each row shows the layer type, a summary of its content, and its unique ID with a copy button.✓✓✓
Refresh anytime to re-read the current stack after edits from other tools.✓✓✓

Control map — every field, explained

Each control on this page, and what it actually does when you run the tool.

ControlWhat it does
DesignChoose a design from the dropdown.
Re-read the live layer stackClick Refresh anytime to re-read the current stack after edits from other tools.

Use it for — List Layers in real work

1

Find the layer under everything

2

Rename for sanity

3

Debug a stacking issue

4

Select the unselectable

5

Audit a complex file

6

Learn how a template is built

Spec sheet

ShowsFull stack, top to bottom
SelectClick to select on canvas
RenameDouble-click
VisibilityToggle per layer
FreeUnlimited
LiveUpdates as you edit

Keyboard reference

KeysActionScope
Ctrl/⌘ + ZUndo the last changeBrowser-standard
Ctrl/⌘ + Shift + ZRedoBrowser-standard
Tab / Shift+TabMove between fields in orderBrowser-standard
EnterActivate the focused buttonBrowser-standard
EscClose dialogs and menusBrowser-standard
DeleteRemove the selected layer on canvasEditor

List Layers — made visual

Twenty living mockups of List Layers, generated for this page only.

Vibrant abstract expressionist painting in blue and gold — List Layers layers-panel mockup
List Layers
Background100%
Align93%
Adjust86%
Arrange79%
Blur72%
Colors65%
List Layers in the wild
CommentsFiltersArrangeColorsHistory
List Layers — Shadow
4.9kExport
312Crop
98%Grid
Close up shot of a monitor screen — List Layers dashboard mockup
Unbounded List Layers, by design
List LayersTemplates
Stylish woman in pink heart glasses by window — List Layers resize-canvas mockup
1:14:516:99:16
List Layers — designed to convert
List LayersExport
Position your brand instruction on office desk — List Layers template-card mockup
Share
Resize
Projects
The List Layers canvas, mid-creation
Camera with photographer equipment — List Layers phone mockup
List Layers
GradieDuplicVersioStroke
Field notes: List Layers in the wild
photoai.company/assets
Rectangular brown wooden table — List Layers browser mockup
List LayersAlign · Background
Fonts
Text
Templates
The visual rebuild of List Layers
Purple and pink human illustration — List Layers export-dialog mockup
Gradient — List Layers
PNGJPGPDFMP4
ShareGrid
Minutes in, List Layers out
List Layers — untitled.pacHistory
GridBrand kitRulersOpacityEffects
A woman wearing a white dress in a photoshoot — List Layers editor mockup
Resize
Blend
Background
Blur
Claim this List Layers as your own
Cameras on a wooden surface — List Layers layers-panel mockup
List Layers
Rotate100%
Rulers93%
Comments86%
Duplicate79%
Canvas72%
Grid65%
List Layers in a single click
BlurCropStylesRulersLayers
List Layers — Grid
4.9kBlend
312Zoom
98%Resize
Professional camera gear with canon lenses — List Layers dashboard mockup
List Layers — every pixel reconsidered
List LayersProjects
Klarket red leather pouch case and red notebook beside red pen — List Layers resize-canvas mockup
1:14:516:99:16
List Layers — the template that fooled the client
List LayersBrand kit
Blue boat board — List Layers template-card mockup
History
Frames
Styles
List Layers, rendering in real time
Man using desktop computer — List Layers phone mockup
List Layers
HistorBlendFlipStyles
The List Layers export, inspected at 200%
photoai.company/grid
Photograph of empty paint tubes — List Layers browser mockup
List LayersCrop · Stroke
Blend
Fill
Canvas
List Layers — maximum output, minimum effort
Hashtag campaign text on desk — List Layers export-dialog mockup
Zoom — List Layers
PNGJPGPDFMP4
FiltersAlign
List Layers — a little mockup sorcery
List Layers — untitled.pacVersion
ExportFramesFillEffectsHistory
Man making presentation in office — List Layers editor mockup
Assets
Adjust
Zoom
Stroke
List Layers at maximum fidelity
Holding wooden box with charcoal drawing supplies — List Layers layers-panel mockup
List Layers
Blur100%
Blend93%
Rulers86%
Masks79%
Layers72%
Duplicate65%
Export-grade List Layers, straight from the canvas
RulersVersionFontsDuplicateAdjust
List Layers — Styles
4.9kMasks
312Blend
98%Projects
Gray laptop computer turned on — List Layers dashboard mockup
From nothing to List Layers, brilliantly
List LayersProjects
Close up photography of imac turned on — List Layers resize-canvas mockup
1:14:516:99:16
Studio notes on List Layers
List LayersShare
A group of people discussing charts — List Layers template-card mockup
Assets
Crop
History
Some mockup magic for your List Layers

The List Layers stock library

Hand-picked photography for List Layers — refreshed on this page alone.

Tattoo designs next to a pencil — stock photo for List Layers
Pencil down, idea captured — List Layers at its most useful
A messy water color palette in plastic container — stock photo for List Layers
Color, turned all the way up. List Layers makes the complicated look casual
Vibrant abstract digital art with flowing patterns — stock photo for List Layers
Pure geometry, no noise — List Layers earns its place in the toolbar here
A woman holding a paintbrush — stock photo for List Layers
Fresh off the brush — List Layers keeps the craft, drops the chore
Close up of yellow paint — stock photo for List Layers
Fresh off the brush. List Layers, and the deadline stopped being scary
Abstract shapes on blue background — stock photo for List Layers
Pure geometry, no noise — proof that List Layers is a working tool, not a demo
Computer on a desk in a bedroom — stock photo for List Layers
List Layers, frame by frame — Desk check is the receipt
Three cosmetic bottles on white surface — stock photo for List Layers
From rough to Texture you can almost feel: the List Layers workflow, end to end
Vibrant abstract swirls in artistic composition — stock photo for List Layers
Pure geometry, no noise. List Layers, and the revision cycle just got shorter
Studio shot of a man unboxing a package — stock photo for List Layers
List Layers, no learning curve — Inside the studio says it better than a manual
A person using computer — stock photo for List Layers
On the laptop screen — List Layers doing what it was designed to do
Team having a meeting — stock photo for List Layers
No templates were harmed: Faces first, built freehand with List Layers
Creative team collaborating on project in office — stock photo for List Layers
List Layers, composed with intent — Desk check is the evidence
Man with color samples — stock photo for List Layers
Proof of List Layers, exhibit A: Color, turned all the way up
Paintbrushes and paint tubes on table — stock photo for List Layers
Fresh off the brush — List Layers, tuned until it feels invisible
House sketch with eraser — stock photo for List Layers
Before List Layers: a blank canvas. After: Pencil down, idea captured
Low angle view of lighting equipment on shelf — stock photo for List Layers
The List Layers payoff, illustrated: Chasing the good light
A group of people having a meeting in the office — stock photo for List Layers
List Layers at full stretch — Desk check, zero compromises
Try List Layers freeSee plans