Images and crop

An image in Brilliant is just another kind of fill, so it lives on the same rows, and opens through the same picker, as any color. This page covers getting an image onto the canvas, the four ways it can scale inside an element, and crop mode for positioning it by hand.

Get an image onto the canvas

There are three ways to bring an image in:

• Paste it with ⌘V. Screenshots, images copied from a browser, and files copied in your file manager all work.

• Drag an image file out of your file manager and drop it onto the canvas.

• Import it with ⌘⇧O, which also handles SVG and .bl files.

However it arrives, the image lands as a rectangle with an image fill, ready to move, resize, and restyle like any other element.

Brilliant reads PNG, JPG, GIF, BMP, and WebP on every platform. On macOS it also reads TIFF, HEIC, HEIF, and AVIF.

Swap an image with the picker

Because an image is a fill, you replace it through the color picker. Click the color rectangle on an image fill row in the right toolbar to open the picker in image mode. New to the picker? Start with Color and fills.

In image mode the picker shows a preview of the current image in place of the usual color controls. From there you can:

• Select a new file from disk by clicking the preview.

• Drop an image file onto the preview.

• Paste an image or an image URL with ⌘V.

The expanded image fill row in the right toolbar also has a replace button that opens the same image mode.

Scale modes

Every image fill has a scale mode that decides how the picture sits inside its element. Set it from the Scale Mode dropdown in the image fill's expanded row in the right toolbar.

• Fill (default): the image covers the whole element, cropping whatever overflows. Aspect ratio is preserved.

• Fit: the image sits entirely inside the element, letterboxed if the two shapes don't match. Aspect ratio is preserved.

• Crop: you position the image by hand with the crop editor (below).

• Repeat: the image tiles at its natural pixel size across the element.

Switch the mode below and watch one element window hold the same picture four ways. The blue box is the element; the picture is a shape-built stand-in for a photo, because live docs can't load a real raster, but the window really clips it, so fill crops the sides, fit letterboxes the top and bottom, crop reframes a slice, and repeat tiles.

Switching from Crop to any other mode discards the crop you set.

Crop an image in place

Crop mode turns the element into a window onto the image: the element stays put while you pan, scale, and rotate the picture behind it. It works on image fills and image strokes alike.

Enter and exit

Crop mode needs the Move tool, so press V first, then enter it any of these ways:

• Double-click an element that has an image fill.

• Select the element and press Enter.

• Choose Crop from the Scale Mode dropdown.

Text and vector elements are the exception: a double-click or Enter takes them into text or vector editing instead, so use the Scale Mode dropdown to crop those. A frame with contents drills into its children, but an empty frame with an image fill crops like any shape, which makes it a handy clipped image container.

To leave crop mode, press Enter or Esc, double-click again, or click once on empty canvas.

Move, scale, and rotate the image

Inside crop mode you work with two things: the image and the element window around it.

• The image. Drag anywhere on the picture to pan it. Drag its corners or edges to scale it, holding Shift to keep its aspect ratio. Drag just outside a corner to rotate it.

• The element. The blue brackets at the element's corners and edges resize the window itself. As you resize, the image stays pinned in place instead of stretching with the window.

Behind the window, the full image is shown faded so you can see everything you have to work with. Every pan, scale, and rotate is its own undo step, so ⌘Z walks the crop back one change at a time.

Keep an image fixed when resizing outside crop mode

Normally, resizing an element stretches its image fill along with it. To resize the element but keep the image fixed in the world, hold ⌘drag on a resize handle. On Windows and Linux, hold Ctrl instead. This applies to image fills; the image is converted to Crop mode automatically so its framing is preserved.

Next

• The picker in full: Color and fills.

• Strokes, shadows, and glows: Strokes and effects.