How To Apply Filters & Visual Effects to An Image

This article will explain how to apply a variety of filters to images. 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 to meet your requirements.

In order to apply filters and visual effects to an image, you need to 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 Create or edit a page

Login to the Sinorbis platform and select Website from the title bar. Then select Create from the Content dropdown menu or +Create Page from the main window.

 

 

Select a template for the type of page you wish to add.

 

 

Click Start Editing at the bottom of the page to move onto the next screen.

 

 

 

2 Add an image component and image

Click the desired location for your image in the window on the right, then drag and drop the image component into the editor. 

 

 

The image component will display in the right-hand window. Next, click the cloud arrow image to upload an image.

 

 

Find the image you want to add and drag the file into the section titled ‘Drop files to upload’. Click OK to add the image.

 

 

For more information on editing and formatting images, see:

• Editing and formatting images

 

 

3 Access image settings

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

 

 

Scroll down and select Image Effects from the menu.

 

 

 

4 Apply the 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 default and represents the original image (no transparency). 

 

Blur

Applies a blur effect to the image. A larger value will apply more blurring to the image. If no value is specified, 0 is used. 

 

Brightness

Adjusts the brightness of the image. 0% will make the image completely black. 100% is default and represents the original image. Values over 100% will provide brighter results. 

 

Contrast

Adjusts the contrast of the image. 0% will make the image completely black. 100% is default and represents the original image. Values over 100% will provide results with more contrast. 

 

Grayscale

Converts the image to grayscale.  0% is default and represents the original image. 100% will make the image completely gray (used for black and white images). 

 

Hue

Applies a hue effect to the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0° is 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 default and represents the original image. 100% will make the image completely sepia. 

 

Invert

Inverts the samples in the image. 0% is default and represents the original image. 100% will make the image completely inverted. 

 

Any adjustments you make will be 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 will now appear in the main page.