How to position multiple screenshots in one graphic

Need to show several screens in one image, but the screenshots are different sizes or keep covering each other? A little planning makes the result easier to scan and helps keep important details readable.

Use the Photo Editor to place screenshots on a shared canvas as separate layers. You can move images independently, arrange them side by side or in a sequence, and add text labels where they help explain the steps.

Position the screenshots

1. Open the Photo Editor and decide what the graphic needs to show. For example, a setup guide may need three screens in order, while a comparison may need two screens at the same size.
2. Choose a canvas that fits the intended use. A wide layout works well for a presentation slide or webpage. A taller layout can fit a phone walkthrough. Leave room around the edges for margins and, if needed, a short heading.
3. Add the screenshots to the project as separate layers. Keeping each image separate means you can position one without shifting the others. If a screenshot includes extra browser or desktop space, decide whether that context helps the reader before you arrange it.
4. Select each screenshot layer and move it into place. For a row or column, line up the image edges and keep the gaps consistent. If the images overlap, place the most important screen on top and make sure the overlap does not hide a button or detail the reader needs.
5. Check the full graphic at its intended viewing size. Make sure labels are legible, screenshots are not cut off, and the spacing looks even. Save or export the finished image using the editor's available file controls.

Keep the original screenshots unchanged while arranging them. If you need to try a different layout, move or resize their layers rather than flattening the project too early. That makes it easier to revise the positions later.

Choose a layout that explains the screens

Side by side for a comparison

Place two screenshots next to each other when the reader needs to compare them directly, such as a setting before and after a change. Use the same displayed width if possible. Align the top edges so the reader can move between the images without searching for the starting point.

Top to bottom for a sequence

Stack screenshots in reading order when they show steps in a process. Leave enough space between them to distinguish one screen from the next. If the graphic needs numbered instructions, use the text tools for brief labels, such as “1. Open settings” and “2. Choose an input.” Keep labels outside the screenshots so they do not obscure the original interface.

Overlap for a focal image

A small overlap can make a graphic feel less like a plain grid, but use it sparingly. Keep the main screenshot in front and avoid covering text, controls, or status messages. If the overlap makes it unclear which image to look at first, separate the layers and use spacing instead.

One large screen with smaller details

Use one full screenshot as the main view and place a smaller screenshot beside it to show a detail or alternate state. The smaller image should still be large enough to read. If the important text becomes tiny, use fewer screenshots or give the detail its own space instead of shrinking the whole image.

Fix common positioning problems

1. Move clipped images inward. If a screenshot runs off the canvas, select its layer and reposition it so the full image and a clear margin are visible. Check all four edges, not just the side nearest the center.
2. Keep the image proportions. Avoid stretching a screenshot wider or taller to make it fit a slot. That distorts interface text and controls. If it does not fit, change the layout or canvas rather than forcing its shape.
3. Put hidden content back on top. If one screenshot covers another, use the layer list to select and reorder the images. Move the screenshot that should be in front above the other layer, or adjust the overlap until both screens remain clear.
4. Even out gaps and edges. If the layout looks lopsided, move the images so their edges align and the empty space between them is similar. It can help to adjust one layer at a time and then review the whole canvas again.
5. Make small text readable. If interface details are hard to see, enlarge the screenshot within the canvas or reduce the number of images. Do not rely on a viewer zooming in to understand the main point.

Plan the canvas around the screenshots

The canvas is the final image area, so choose its shape before spending time arranging layers. For a wide graphic, a 16:9 canvas is a useful starting point. For a vertical walkthrough, choose a taller shape. The exact pixel dimensions depend on where the image will be used, but the main rule is to work at a size that leaves the screenshots large enough to read.

Try to keep a consistent margin around the group of screenshots. A margin of about 40 pixels on a 1600-pixel-wide canvas is a reasonable starting point, not a strict requirement. Leave extra room if you plan to add a title or captions. Avoid placing important content right against the edge, where it may look cramped or be cropped by a later layout.

Photo Editor runs in your browser, and the screenshots and project stay on your device while you work.