Layers in editor for multiple images

Question

I'm working on a desktop software that is in its core a simple image editor (apply filter, draw on image etc.) but the catch is that the user should be able to open multiple images, edit, and compare them at the same time.

Drawings and filters are layers upon images that can be toggled (show/hide) and reorderd.

I'm looking for a comprehensible UX pattern to display multiple images and their corresponding layers. Should I aim for a design similar to wellknown image processing software like Photoshop and have a sidebar containing all layers (each in a subsection per image)? Or display each image in a seperate GUI element with its layers at the bottom? Or any other ideas?

I'd be thankful for ideas and inspirations.

Answer 1

It does sound like something similar to Photoshop and Illustrator's handling of layers would be a good fit. Assuming there is no benefit to the user in being able to see the list of layers for all images at once (which sounds rather overwhelming), I'd display the layers for the selected image.

Like this, perhaps:

Obviously, the images would be larger than I've shown in this wireframe.

Answer 2

I'd suggest keeping the layers attatched to the image they belong to.

Removing them to a different part of the interface risks confusion.

Try something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Is takes up minimal room in the UI, is extensible (within limits), and would allow for a responsive layout.