Styling & Editing Images Directly in Smart Builder

Say you upload an image to Smart Builder and realize it needs a bit more finetuning.

Smart Builder offers built-in image controls that allow you to customize, edit, and stylize images, directly within the builder from the editing canvas, such as: 

1. Cropping
2. Resizing, 
3. Finetuning, and 
4. Adding Filters to your images. 

This article will explain how to edit your images directly in Smart Builder. 

First, you'll want to upload your image. See Adding Images & Videos to Smart Builder to learn how to upload images or how to access the Image Library in Smart Builder. 

Once you've added an image, you can edit it.

Launching the Edit Image Properties

1. Single-click an image in Smart Builder.
2. From the buttons that appear, click the pen icon to launch the Edit Image settings:
   
   
3. In the Edit Image settings pop-up, click the upload icon, and the Choose Image library will appear.
4. Click one of the image control options from the right-hand side to launch the editing canvas:
   

You can make edits to your image here within the editing canvas.

Cropping Images

Cropping images will remove any unwanted space or objects from your image. If you're looking to focus or frame on parts of the image, it's best to crop it:

Drag the corners of the image till you reach the desired size:

You can also Scale or Straighten the image as well.

For a glossary, see the end of this article. 

Resizing Images

Resize your image & set custom width and height dimensions using the Resize property:

Finetuning Images

Adjust the brightness, contrast, saturation, and more for your image. Use the slider to increase or decrease the strength of the edit: 

For a glossary of each property, see the end of this article.

Filtering Images

Adding filters to an image can help enhance your image's tone, appearance, or contrast. There are a handful of filters to try out in the canvas: 

Undo, Redo, or Reset Options

Click the arrow buttons at the top right-hand corner to undo or redo edits to the image.

To reset the image to its original state, click the reset button at the top left-hand corner:

Adding the Image back to Smart Builder

When you're happy with the edits made to your image, you can re-add the image back into Smart Builder.

1. Click the Save as New Image button at the top of the editing canvas:
   
2. The Image Library will appear
3. Select the image you've just edited.
4. Click the Choose Image button at the top; the image will appear in the Smart Builder.
   

Glossary

Crop: Trim or remove excess or wanted space from your image.

Scale: Resizes the image by scaling in or out (zooming in or out). Increase the scale percentage to focus in or out.

Straighten: Rotates the image left or right to straighten it.

Brightness: Refers to the overall intensity or lightness of the image.

Contrast: Adjusting contrast helps you focus on different features of the image based on the amount of color/greyscale.

Saturation: Increases the overall hue or intensity of the colors in the image.

Exposure: Similar to brightness, exposure impacts how light or dark an image appears.

Temperature: Increases or decreases the warm or cool tones of the image.

Gamma: Adds or removes shadows from your image.

Clarity: Sharpens your image; the higher (+) the clarity, the sharper your image appears.

Vignette: Adds a darkened (+) or lightened (-) border around the edges of your image.