How to

How to use the image editor

Follow the workflow from image and canvas setup through framing, correction, background removal, text, shapes, styling, selection, layers, history and export.

Use Image Editor

Use Cases

When to use it

Make simple edits without opening a dedicated image app
Adjust an image on a canvas
Prepare images for social posts or documents
Use image tools by purpose
Prepare image edits in the browser
Check edited results on the spot

Capabilities

What this tool can do

Use an image editing canvas
Add image assets
Adjust placement on the canvas
Review edits
Save edited images
Edit images in the browser

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Choose the source images and final canvas size

Add photos or screenshots, then choose a canvas size for the destination. Add more images for a collage, logo or overlay.

Choose the source images and final canvas size: mobile controls and surrounding interface

What this area does

Every source image is on the canvas
The canvas ratio and size match the destination
An empty canvas can also be used

Where to use it

Add image

Choose JPEG, PNG, WebP, BMP or GIF, or drag files into the work area.

Add image: mobile controls and surrounding interface

Canvas size

Open Canvas size at the top; on mobile open Canvas first. Presets are grouped by social/video, photos and print ratios. Landscape 1280×720 suits YouTube thumbnails. The current dimensions and check mark identify your selection.

Canvas size: mobile controls and surrounding interface

Multiple images

Each image becomes a separate object that can be positioned and stacked.

Multiple images: mobile controls and surrounding interface

02 HOWTO

Fit the image to the area you want to show

Drag to reposition it and use the handles to resize or change the visible vertical range.

Fit the image to the area you want to show: mobile controls and surrounding interface

What this area does

The subject is not hidden
No unintended empty edge remains
The framing matches the intended result

Where to use it

Move and resize

Drag the image and use corner handles to change its size.

Move and resize: mobile controls and surrounding interface

Visible range

Select the image, open Image correction and choose Crop, or drag a middle handle on any edge. Changes apply when you release the handle. Escape cancels an active drag; Undo restores a completed edit.

Visible range: mobile controls and surrounding interface

Selection bar and Details

Open settings, then Appearance for opacity, corners, border, shadow and glow. Placement contains position and rotation.

Selection bar and Details: mobile controls and surrounding interface

Rotate an image

Select the image and open Placement, then enter an angle in Rotation. You can also drag the rotation handle above the image.

Rotate an image: mobile controls and surrounding interface

03 HOWTO

Place text that stays readable over the image

Choose a heading, subheading, body or caption preset. Add a background, outline or shadow when the photo competes with the text.

Place text that stays readable over the image: mobile controls and surrounding interface

What this area does

Heading and body sizes have clear hierarchy
Text works over light and dark areas
Direction, alignment and spacing fit the layout

Where to use it

Text presets

Choose one of 27 presets, then double-click to replace its content.

Text presets: mobile controls and surrounding interface

Typography

In Text, choose a font and one of its supported weights. Set size below it; the next row toggles bold, italic, underline and strikethrough. Text layout contains writing direction, box width, spacing and line height.

Typography: mobile controls and surrounding interface

Readability

Use color, background, outline, effects and shadow to create contrast.

Readability: mobile controls and surrounding interface

04 HOWTO

Frame the important area and point to it

Frame the target first, point to it with a pointer or line, then add a short label to create a clear viewing order.

Frame the important area and point to it: mobile controls and surrounding interface

What this area does

The intended focus is immediately clear
Callouts and arrows do not cover the subject
Labels match their pointer

Where to use it

Callouts

Choose rounded, dashed, circular or thick callouts.

Callouts: mobile controls and surrounding interface

Pointers and lines

Add solid, dashed, dotted or divider lines and one-way or two-way arrows.

Pointers and lines: mobile controls and surrounding interface

Labels and cards

Use price, sale, information and warning assets for short supporting text.

Labels and cards: mobile controls and surrounding interface

Hide private information

Open Add shape, choose Mosaic, then select Pixelate, Blur or Fill. Move and resize the region over the information to hide. Mosaic settings include strength and edge feathering. Deselect the region and check that no private details remain visible.

Hide private information: mobile controls and surrounding interface

05 HOWTO

Keep text, shapes and lines visually consistent

Reuse a small set of colors and line widths, then adjust opacity, borders, shadows and glow for each selected object.

Keep text, shapes and lines visually consistent: mobile controls and surrounding interface

What this area does

Matching roles share colors and widths
Outside borders and shadows are not clipped
Content behind translucent shapes remains clear

Where to use it

Fill and corners

Set fill, opacity, corners and padded text backgrounds.

Fill and corners: mobile controls and surrounding interface

Borders and lines

Select an object and use its appearance settings. For a line, open Line to set its style and endpoint shapes.

Borders and lines: mobile controls and surrounding interface

Shadow and glow

Set shadow color, opacity, angle, distance and blur, and use glow where available.

Shadow and glow: mobile controls and surrounding interface

06 HOWTO

Correct darkness, color and the background

Use Image adjustments for a dark, flat or soft photo. Remove the background when only the subject is needed.

Correct darkness, color and the background: mobile controls and surrounding interface

What this area does

Highlights and shadows retain detail
Skin or product colors look natural
Removed edges and effects suit the destination

Where to use it

Auto adjust and Light

Open Image correction. Start with Auto adjust, then expand Light. Changed sections show a count and can be reset individually.

Auto adjust and Light: mobile controls and surrounding interface

Color and Detail

Adjust saturation, temperature, tint, hue, sharpness, clarity, blur and vignette.

Color and Detail: mobile controls and surrounding interface

Background and appearance

Remove the background, then set opacity, corners, border, shadow and glow.

Background and appearance: mobile controls and surrounding interface

07 HOWTO

Align several objects as one group

Modifier-click or drag around objects. One object aligns to the canvas; multiple objects align within their selection bounds.

Align several objects as one group: mobile controls and surrounding interface

What this area does

Every selected object has an outline
Moving preserves spacing
Edges or centers align within the selection

Where to use it

Add or remove

Use Shift, Command or Control while clicking.

Add or remove: mobile controls and surrounding interface

Area selection

Drag from the empty workspace around the objects.

Area selection: mobile controls and surrounding interface

Align and batch edit

Align edges or centers; matching object types can be edited together.

Align and batch edit: mobile controls and surrounding interface

08 HOWTO

Fix overlaps and protect finished objects

Use Layers when text falls behind a photo. Lock finished objects so they cannot be moved, aligned or deleted by mistake.

Fix overlaps and protect finished objects: mobile controls and surrounding interface

What this area does

Stacking order is correct
Finished objects are locked
Only unwanted objects are removed

Where to use it

Layers

Open Layers; on mobile open Canvas first. Drag rows to reorder, or use the forward/backward buttons. Items at the top appear in front.

Layers: mobile controls and surrounding interface

Copy and duplicate

Duplicate creates another object on the same canvas. Command/Control+C and V copy editable objects between browsers. Copy as image copies the complete canvas as a flattened image.

Copy and duplicate: mobile controls and surrounding interface

Lock and delete

Lock completed objects and unlock them before editing again.

Lock and delete: mobile controls and surrounding interface

09 HOWTO

Zoom in to review and recover from mistakes

Use zoom or fullscreen for fine edges. Undo and Redo handle recent changes; History returns to an earlier state.

Zoom in to review and recover from mistakes: mobile controls and surrounding interface

What this area does

Fine edges and hidden areas were inspected
Undo and Redo preserve the expected result
The selected history state appears on the canvas

Where to use it

Zoom and fullscreen

Use zoom controls or a trackpad pinch. Fit keeps the whole canvas visible when the viewport changes; a manually chosen zoom is preserved.

Zoom and fullscreen: mobile controls and surrounding interface

Undo and Redo

Undo the latest edit or redo a restored edit.

Undo and Redo: mobile controls and surrounding interface

History

Choose and restore an earlier editing state.

History: mobile controls and surrounding interface

10 HOWTO

Export in the format required by the destination

Choose PNG, JPEG or WebP based on transparency, photo content and file size. Use Copy for another app or Download for a file.

Export in the format required by the destination: mobile controls and surrounding interface

What this area does

The format fits the destination
Editing controls are absent from export
Text, transparency, borders, shadows and stacking were checked

Where to use it

PNG

Choose PNG for crisp text and lines. For transparency, open Canvas size and set Export background to Transparent (PNG / WebP). White is the default.

PNG: mobile controls and surrounding interface

JPEG and WebP

JPEG always saves with a white background. WebP can preserve transparency when Transparent is selected in Export background. Check the saved dimensions and appearance.

JPEG and WebP: mobile controls and surrounding interface

Copy and Download

On desktop, choose a format above the canvas and press Save. On mobile, open Save, choose a format, then press Save in the panel. Copy as image copies the complete canvas; object copy uses Command/Control+C.

Copy and Download: mobile controls and surrounding interface

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

Before editing

Decide where the finished image will be used

Choose the original ratio or a square, landscape, portrait, OGP, A4 or custom canvas first so you do not need to rebuild the layout later.

While editing

Controls change with the selected object

Select an object and use Open settings at the upper right. Settings appear on the right on desktop and below the canvas on mobile. Choose a tab to change the settings shown.

Before export

Deselect objects and review the finished image

Check readability, hidden areas and stacking before choosing a format. Keyboard controls are available from Help in the editor.

Mobile

Adjust the settings height

On mobile, drag the handle above settings to change its height. Swipe it firmly down to close; reopen settings from the control below the canvas.

FAQ

Questions about Image Editor

Questions that make decisions easier before use are summarized first.

Is this separate from Image Mosaic?

Yes. Image Mosaic is a dedicated tool for hiding private or unnecessary areas, while Image Editor is treated as a general image editing entry point.

Are image files sent externally?

Image editing is designed to run in the browser. If a future feature requires external communication, it will be indicated on screen.

Which image tools can I use with it?

Use it alongside Image Crop & Resize, Image Mosaic, Image Compression, and other image tools depending on the task.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

Compress multiple images in their original format, compare size changes, and save the results.

View guide

Learn where to load multiple images, choose format and quality, review conversion results, download individually, download as ZIP, and convert again.

View guide

Learn where to load an image, crop, resize, keep aspect ratio, choose format and quality, preview, copy, and download.

View guide

Image Tools Video Tools Text Tools Developer Tools Design Tools Generator Tools

How to use the image editor

When to use it

What this tool can do

How to use each screen area

Choose the source images and final canvas size

What this area does

Where to use it

Add image

Canvas size

Multiple images

Fit the image to the area you want to show

What this area does

Where to use it

Move and resize

Visible range

Selection bar and Details

Rotate an image

Place text that stays readable over the image

What this area does

Where to use it

Text presets

Typography

Readability

Frame the important area and point to it

What this area does

Where to use it

Callouts

Pointers and lines

Labels and cards

Hide private information

Keep text, shapes and lines visually consistent

What this area does

Where to use it

Fill and corners

Borders and lines

Shadow and glow

Correct darkness, color and the background

What this area does

Where to use it

Auto adjust and Light

Color and Detail

Background and appearance

Align several objects as one group

What this area does

Where to use it

Add or remove

Area selection

Align and batch edit

Fix overlaps and protect finished objects

What this area does

Where to use it

Layers

Copy and duplicate

Lock and delete

Zoom in to review and recover from mistakes

What this area does

Where to use it

Zoom and fullscreen

Undo and Redo

History

Export in the format required by the destination

What this area does

Where to use it

PNG

JPEG and WebP

Copy and Download

Notes

Decide where the finished image will be used

Controls change with the selected object

Deselect objects and review the finished image

Adjust the settings height

Questions about Image Editor

Is this separate from Image Mosaic?

Are image files sent externally?

Which image tools can I use with it?

Related guides

How to Use Image Compression

How to use Image Format Conversion

How to use Image Crop & Resize