The alpha testing program is now open to the public! We’d love to hear your feedback.Join!

Assets

Media

Browse a project's images, then edit them in the image editor: crop, adjust, add text, shapes and watermarks, and save a version or a new asset.

Basics

Editing an image

To edit an image, open a project in Assets and choose Media → Image Editing in the sidebar. The editor opens the project's image that changed last.

  1. To edit a different image, choose the image's name at the top left, or Open image. Pick one of the project's images, or choose Open from computer.
  2. Pick a tool on the left, and change the image with the panels on the right.
  3. Choose Save, or press Ctrl S (⌘ S on Mac), and save the edit as a new asset, a new version or a download.

Nothing you do in the editor changes the stored image until you save it as a new version. The top bar shows Unsaved changes while you have edits, and your browser asks before you leave the page. Opening another image with unsaved edits asks first, with Keep editing or Discard & open.

Very large images are edited as a working copy at most 4096 px on the longest side; the Canvas tab says so when that happens.

Image Editing

Editor tools

The tools run down the left edge of the image editor. Each one shows its options in the bar across the top of the canvas.

  • Move (V): select, move, scale and rotate layers. The arrow keys nudge the selected layer by 1 px, or 10 px with Shift.
  • Hand (H): drag to pan. Holding Space pans with any tool.
  • Crop (C): drag the frame, pick a ratio (Free, Original, 1:1, 4:5, 3:2, 16:9 or 9:16), then press Enter to apply or Esc to cancel.
  • Text (T): click the canvas to add text.
  • Shape (U): drag to draw a Rectangle, Ellipse or Line. Shift keeps it square.
  • Brush (B): paint freehand strokes, with a size and color.
  • Eyedropper (I): click the image to sample a color.

Undo and redo are at the top, and the editor keeps up to 60 steps. Hold Compare, or the \ key, to see the original; Reset all edits starts over.

Image Editing

Adjustments and looks

With the image itself selected, the panel on the right of the image editor has three tabs: Adjust, Looks and Canvas.

Adjust has a slider for each setting, all starting at 0:

  • Light: Exposure, Brightness and Contrast, from -100 to 100.
  • Color: Saturation, Vibrance, Temperature and Tint, from -100 to 100, and Hue, from -180° to 180°.
  • Detail: Sharpen, Blur, Grain, Pixelate and Vignette, from 0 to 100.

Looks applies a ready-made style, each shown as a small preview: Original, Mono, Noir, Sepia, Vintage, Kodachrome, Technicolor, Polaroid, Brownie or Invert. Choose Original to remove it. A look and your adjustments work together.

Image Editing

Canvas, watermarks and placed images

The Canvas tab of the image editor works on the whole image.

  • Artboard: shows the image's size in pixels, with Rotate left, Rotate right, Flip H, Flip V and Crop.
  • Watermark: type the text (© Studio to start), pick a position (Bottom right, Bottom left, Top right, Top left or Center) and an opacity (70% to start), then choose Add watermark layer.
  • Place image: Library adds one of the project's images as a new layer, and Computer adds one from your computer. You can also paste an image, or drop one on the canvas.

Select a text, shape or placed image to edit it instead: the panel then shows its position and rotation, opacity and blend mode, fill and stroke, and for text its font, size, letter spacing and line height, with buttons to align it to the canvas, duplicate it or delete it.

Image Editing

Layers, history and variants

The panel under the properties in the image editor has three tabs.

  • Layers: every text, shape, brush stroke, watermark and placed image, on top of the locked background image. Click a layer to select it, rename it, or duplicate or delete it with its buttons. Add text and Place image add new ones. Ctrl ] and Ctrl [ move the selected layer forward and back, and Delete removes it.
  • History: the steps you've taken since opening the image.
  • Variants: the new assets saved from this image, with their count on the tab. Click one to open it. An image opened from your computer has no variants until you save it as a new asset.

Image Editing

Saving an edit

To save your edit, choose Save at the top right of the image editor (Ctrl S). Export opens the same dialog, set to download.

  • Save as: New asset, New version or Download. New version is offered only for an image from the project.
  • Name: for a new asset, the image's name plus (edited) to start.
  • Format: WebP (the default), JPEG or PNG.
  • Quality: for WebP and JPEG, from 10% to 100%, 90% to start.
  • Size: width and height, linked so the shape stays the same unless you unlink them, with 25%, 50% and 100% shortcuts and Source size for a downscaled working copy. Up to 16384 px a side.

A new asset is a Draft in the same folder with the same tags, linked to the original as a variant; an image opened from your computer goes in Project root. A new version becomes the image's current file, and the previous file stays in its version history. Download saves the file to your computer and uploads nothing.

Images

Browsing images

Media → Images lists the project's images and camera RAW files. The figures across the top count Images, RAW sources, the Storage they use and those with no recorded dimensions (Missing dims).

Filter by orientation (All orientations, Landscape, Portrait, Square or Unknown), by source (All sources, RAW only or Non-RAW) and by status, or search by name, format, tags and dimensions. The list shows 25 images a page.

Click an image to see it larger, with its dimensions, orientation, format, size, folder, last update, tags and file type, and a download button. To add images, upload them in the Asset Library or Upload Center; see Uploads and requests.

Reference

Image editor shortcuts

These keys work in the image editor except while you're typing in a field. The Keyboard shortcuts button in the top bar lists them too. On a Mac, use ⌘ where the list says Ctrl.

  • V Move, H Hand, C Crop, T Text, U Shape, B Brush, I Eyedropper
  • Ctrl Z undo, Ctrl Shift Z or Ctrl Y redo
  • Ctrl J duplicate the layer, Delete or Backspace delete it
  • Ctrl ] bring forward, Ctrl [ send backward
  • Ctrl S save
  • Space (hold) pan, \ (hold) compare with the original
  • Ctrl 0 fit to screen, Ctrl 1 actual pixels, Ctrl + and Ctrl - zoom
  • Enter apply the crop, Esc cancel the crop or deselect
  • Arrow keys nudge by 1 px, or 10 px with Shift