Follow

How do I edit an image added to my page using Image Tools? How do I use the Image Editor?

The Image Tools tab and ribbon is available when you select an image. There are a number of tools available for editing images:

 

  • Hotspots
  • Modify image in the Image Editor
  • Change an image for another in the Media Library
  • Reset Dimensions of an image you've distorted
  • Use Rotation to enter a number of degrees to rotate the image by, or use the arrows to rotate around.
  • Add a Rollover image and effects
  • Open Properties for more details such as adding alt text and tags

 

Image Editor

The Image Editor is a collection of tools to modify images which have been added to Claro.

Changes made to an image are actually saved as a new, modified image in the Media Library. Your original image still resides in the Media Library (and on any other pages you may have added it to).

To see a video tutorial, play Claro Image Editor QuickView:

.

 

To use the image editor:

  1. First, add an image to your page.
  2. Select the image.
  3. Select the Image Tools tab.
  4. Then, select the Editor button.
  5. The Image Editor opens.

Zoom

Move this slider in the lower right corner to zoom the display. It has no effect on the size at which the image is saved.

Top Toolbar

The tools along the top bar include features to undo and redo, reload the original, save or delete changes, re-size, rotate, and apply brightness and contrast as well as other color changes.

Undo and Redo

You can think of each action that you take in the Image Editor as being added to the top of a list.

The Undo button will reverse the last action that was added to the list. Each time you click Undo, the previous action on the list will be reversed. 
Note: Some actions are only added to the list when the particular tool’s Apply button is clicked. You cannot Undo a Save action.

If an action has been reversed, the Redo button will perform the action again. It can also be used a number of times to Redo previous actions on the list.

Reload Original Image

The Reload Original Image button will load the most recently Saved image (ignoring all of the actions which have been Applied to the image).
Note: This action is also one which can be reversed with the Undo button. After you have Saved an image and exited, you can still retrieve the original image by inserting it from the Media Library.

Save and Exit

The Save and Exit button will save the current state of the image and exit the editor. If you have changed the dimensions of your image, you can choose to apply these changes to the image on the stage or keep the original element dimensions.

The modified image is a new image. It is not saved over the original image. Each time you click Save, a new image is stored.

Cancel and Exit

This cancels all changes and exits the Image Editor.

Image Size

To set the size in the Image Editor, first determine if you want to constrain the dimensions to the original aspect ratio by checking the Constrain button link icon. Then, enter numbers in the text boxes for width (W) and/or height (H). Click the Apply Resize button when the dimensions are correct and to update the preview.

Rotate

Click the Rotate Right or Rotate Left button to rotate the whole image 90 degrees to the right or left. The display changes immediately without having to click an Apply button.

Brightness and Contrast

Click the (+) or (-) buttons to increase or decrease brightness or contrast.

Color Changes

Click any of the color icons to apply changes to the image such as Sepia, B&W (black and white/grayscale), Red, Green, or Blue. These changes can be applied incrementally as well by clicking the button again.

Left Toolbar

The tools along the left bar include features to crop, apply more subtle color or brightness/contrast changes, add special effects, erase parts of the image, extract parts of the image, and add borders.

Some tools have their own Apply and Cancel buttons.

The sliders in each area can be operated using a click-and-drag action or by simply clicking on the slider bar. If you use click-and-drag, the values are displayed above the slider bar as you move the slider. You can also type in the values.

To modify the image, move the slider(s) in one area and click the Apply button. This will apply the changes and return the sliders to their initial positions.

Note that changes are cumulative. That is, changes can be applied to previous changes. To step back through your applied changes, use the Undo button.

Crop

Click the Crop button to display a preview rectangle within your image. There are two ways to cut away part of your image: drag the corners of the rectangle OR enter appropriate sizes in the W and H boxes. If entering sizes, the dimensions can be constrained by checking the box between them. When the preview rectangle is positioned correctly, click Apply and the image will be cropped.

Color

Click Color to change the RGB values and saturation:

  • Hue – Red, Green and Blue values can be changed from their most recent values by adding or subtracting up to 255 units of color. The values are changed by the number of units indicated, until they reach either 255 or 0. For example, if the red value of a particular pixel starts at 100 units, increasing it by +155 units will take it to 255 units. Any further increase will be ignored.
  • Saturation – Saturation refers to the dominance of hue in the color. It is often thought of as how much white is mixed with the color, such as in “pastel” colors. Saturation can be increased or decreased by 100% of its most recent value.

Brightness/Contrast

Click to change the brightness or contrast values.

  • Brightness – In the HSV color space, Brightness is Value. It refers to how light or dark the image is. Brightness can be increased or decreased by 100% of its most recent value.
  • Contrast – Contrast is the ratio of the lightest to the darkest pixels in the image. In many images, this can be a way to make the image look like a “negative”.

FX / Effects

Click this button to blur the image or increase the amount of sharpness or create emboss effects.

  • Blur – This tool will blur the image in amounts from 0 – 100%
  • Sharpness – This tool will increase the contrast between bordering areas in the image.
  • Emboss – The emboss function makes the image look as if parts of it have been pressed into the background. It generates artificial shadows at the borders between unlike areas.

Erase

Select either a circle or square shape and adjust the eraser size as appropriate.

Extract

This tool will make some pixels in your image transparent. As you click a pixel in the image, the extract tool will examine bordering pixels and also make them transparent, depending on the tolerance setting. A low tolerance will mean that only pixels which are very close in color to the selected pixel will be made transparent. If Continuous is unchecked, pixels of that color anywhere in the image will be affected.

Borders

Select the border color and thickness in pixels. Check Inset to have the border occupy space on the inside of the image rather than the outside.

 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments