Image Editor

The Image Editor provides a set of simple, interactive tools for applying Transforms, such as Resize, Crop and Rotate / Flip, and various Effects and Filters, including Brightness, Contrast, Hue, Saturation, and some fun vintage photo filters, such as Pinhole, Polaroid and Kodachrome.

Layout

The layout of the Image Editor is divided into 2 main sections - the Canvas area on the left where a preview of image being edited is displayed, and the Tools panel, which contains the Transform and Effects tools in 2 tabs. Any transforms or effects applied to the image are shown in the image preview.

The Image Editor includes unlimited levels of undo. You can undo an action by clicking the Undo button. Click the Revert To Saved button to revert the image to the original or last saved state.

Clicking the Save button will prompt to save the edited image. The Save button remains inactive until a Transform or Effect is applied to the image.

The Image Editor layout

Transform Tools

Three types of common image transforms are available - Resize, Crop and Rotate - and each is activated by clicking on the transform name to display its options. For Resize and Crop, activating the transform enables a set of draggable handles to interactively set the transform options.

Resize

The Resize options include fields to set the Dimensions - the Width and Height values - to resize the image to. When the Proportional box is checked, changing one of the dimension values will automatically update the other, based on the original image proportions.

Resize an image by setting dimensions
Resize an image by setting dimensions

A pre-defined Preset can also be selected to resize the image to. Selecting a preset will update thw Width and Height fields with the preset values.

Resize an image by selecting a preset
Resize an image by selecting a preset

The image can also be resizing by dragging any one of the eight handles around the image. When the Proportional box is checked, dragging any handle will always resize the image proportinally, maintaing the aspect ratio. If the Proportional box is unchecked, only dragging one of the four corner handles will resize the image proportinally.

Resize an image by dragging
Resize an image using the drag handles

Once the Resize dimensions have been set, the values can either be reset to the original by clicking the Reset button, or applied to the image by clicking the Apply button. When the Apply button is clicked, a temporary version of the image is created with the new dimensions and reloaded into the Image Editor. You need to Apply a Resize before setting any other Transforms or Effects. If the Resize is not applied, clickin on any of the other transforms, or the Effects tab, will reset the Resize.

Set the resize by clicking the Apply button
Apply the Resize by clicking the Apply button

Crop

The Crop tool allows you to select an area within the image to crop it to, ie: removing unwanted areas of the image outside of the selected area. This is done by resizing and positioning the crop window, either by Drag Resizing the window using one of the eight handles around the edges, manually setting a Width, Height and X and Y position for the window, or selecting a Preset.

Using one of the 8 handles around the edge of the crop window, click and drag to resize the window, then position it by dragging the window. The Width, Height, X and Y values will be updated automatically.

Drag resizing and moving the crop window
Drag resizing and moving of the crop window

Enter in the required Width, Height, X and Y values. The crop window will be resized and positioned accordingly.

Enter in the Width, Height, X and Y values to resize and position the crop window
Enter in the Width, Height, X and Y values to resize and position the crop window

Select a Preset from the list.

Select a suitable preset for the crop window
Select a suitable preset for the crop window

Once the crop window as been sized and positioned as required, the values can either be reset to the original by clicking the Reset button, or applied to the image by clicking the Apply button. When the Apply button is clicked, a temporary version of the image is created and reloaded into the Image Editor. You need to Apply a Crop before setting any other Transforms or Effects. If the Crop is not applied, clicking on any of the other transforms, or the Effects tab, will reset the Crop.

Apply the Crop by clicking the Apply button
Apply the Crop by clicking the Apply button

Rotate

Rotate is the simplest of the transforms, with buttons for rotating an image to the Right (Clockwise) and Left (Anti-Clockwise), and for Vertical and Horizontal flipping. Unlike Resize and Crop which require an additional click of an Apply button to omplete the transform, Rotate is applied to the image when the button is pressed.

Rotate Right (Clockwise) or Left (Anti-Clockwise)
Rotate Right (Clockwise) or Left (Anti-Clockwise)
Flip Vertically or Horizontally
Flip Vertically or Horizontally

Effects

The Effects tab includes a number of common Adjustments and Filters to apply to images.