How To Apply Filters & Visual Effects to An Image

This article explains how to apply filters to an image. You can apply and adjust the following filters and visual effects to an image component: blurring, opacity, brightness, contrast, etc.

Applying visual effects and filters allows you to customize the images that appear on your website.

In order to apply filters and visual effects to an image, carry out the following four steps:

1. Create or edit a page.
2. Add an image component and image.
3. Access image settings.
4. Apply the desired visual effects.

1 Opening a page

Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

1. Hover your mouse pointer on a page.
2. Click the Edit button. The Edit Content area opens.

Drag an Image Component to a workspace.

2 Adding an image

Click the cloud arrow image to upload an image. There are three ways to place a picture inside an Image Component.

1. Locate a picture on your computer and then drag it to the image box in the Image Settings panel.
2. Click the Cloud button to upload an image from your computer.
3. Click the finger pointer button to insert an image from your File Manager.

• For more information about editing and formatting images, see Editing and formatting images.

3 Accessing the filters

Hover the cursor over the image and click the Settings icon (which looks like a cog) to access the image settings panel.

Scroll down and click Image Effects.

4 Applying visual effects

In the Image Effects window, you can adjust the settings for opacity, blur, brightness, contrast, grayscale, hue, saturate, sepia, and invert.

• Opacity - Sets the opacity level for the image. The opacity level describes the transparency level, where 0% is completely transparent. 100% is the default and represents the original image (no transparency). 
• Blur - Applies a blur effect. A larger value applies more blurring. If no value is specified, 0 is used. 
• Brightness - Adjusts the brightness. 0% makes the image black. 100% is the default and represents the original image. Values over 100% provide brighter results. 
• Contrast - Adjusts the contrast. 0% makes the image completely black. 100% is the default and represents the original image. Values over 100% provide results with more contrast. 
• Grayscale - Converts the image to grayscale.  0% is the default and represents the original image. 100% makes the image completely gray (used for black and white images). 
• Hue - Applies a hue effect. The value defines the number of degrees around the color circle the image samples will be adjusted. 0° is the default and represents the original image. 
• Saturate - Saturates the image. 0% will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% result in a highly saturated image.
• Sepia - Converts the image to sepia. 0% is the default and represents the original image. 100% makes the image completely sepia. 
• Invert - Inverts the samples. 0% is the default and represents the original image. 100% makes the image completely inverted. 

Any adjustments you make are shown in the preview image in the top right corner of the Image Effects window. Once you are happy with the visual effects, click OK to continue. The edited image now appears on the main page.