Image editing designs

We have some old mockups for editing in the image viewer. However, they were a bit basic and could do with more thought.

Goals

In the past we've had user feedback that GNOME misses simple image editing capabilities - using something like GIMP to crop an image is not straightforward. The advantage of built-in editing features is that they're right there.

The main goal is to provide a quick and accessible image editing experience for common use cases. This is a built-in tool More complex and advanced image

Goals:

• Basic editing for common use cases
  • Desktop use cases include:
    • Simple edits to get an image ready to be used in a presentation, on a website, in a document (crop, rotate, flip, resize)
    • Annotating a screenshot before sharing it, perhaps to highlight a bug or something you want draw attention to
  • If the device is mobile and has a camera, photo processing becomes more important and expands the feature list to include things like: adjusting lighting and color, sharpening, contrast, vignette, healing/cloning, filters...
• Adaptive design: should work across form factors
• Integrate into the image viewer: should have a good transition between viewing and editing

Non-goals:

• Technical terminology that require background knowledge. Examples: white point, black point, saturation, temperature
• "Advanced" processing: hand tweaking curves, masks, selective adjustment of color channels, adjusting brightness according to color, etc etc
• Showing more than one way to do the same task (example choosing between vibrance, chroma, saturation)

Open questions:

• Background removal

Notes

There seems to be fairly strong conventions for image editing designs: on desktop editing controls are generally in a sidebar. On mobile the assumption is that the device will be in portrait orientation. Image editing controls occupy a section at the bottom of the screen.

Relevant Art

Windows

Mac

Google

iOS

Android

Sly

Tentative Design

Design Notes

• The design uses a sidebar which has the same size for each edit mode. This isn't the most efficient layout in all cases. However, it helps with consistency and reducing movement when switching between modes.
• The designs for narrow versus wide widths is quite different. However, this is difficult to avoid for image editing - the constraints for different form factors strongly point in different directions.