Add a unique touch with Transparent overlays

Transparent overlays can both give a website a more unique and differentiated touch and be a good way to cover up images and videos with low resolutions. Download different types of ready-made transparent overlays that you can use on your websites at the bottom of this article.


what is a transparent overlay?

Transparent overlay is a filter that goes on top of a row background (image or video) and is added in the row settings overlay. A transparent overlay is basically an overlay that you create in your desired image editing software and upload to the Editor as background filter media (see section 2.3. in this article). 

As you mainly create the overlays yourself - with the exception of the example overlays we're providing for free in this article - it's only your design skills and imagination that sets the limit for the look and feel of your overlays. In this article we'll focus on three different types of overlays to inspire you and to give you a good starting point for using overlays in your design work. 

transparent overlays optimize your website

WHy use transparent overlays?

The transparent overlays give your website unique character and can add vibrance or composure. 

The color-to-transparent overlay is specifically good when you have placed your top row behind the header as it makes sure that your main navigation is always readable. 

The color-to-color overlay is great for creating a more vibrant expression that stands out and catches attention. 

The pixel pattern overlay gives your website a more sturdy expression.


Overlay 1:COLOR TO TRANSPARENT (HORIZONTAL REPEAT)

The first type of overlay is one that moves from a near-solid color to being transparent. When using colors on your overlays, except black/white scale, it's recommended that you pick a color that matches the primary colors in use on the website to avoid creating visual imbalances.

how to use transparent overlay

HOW TO CREATE THE OVERLAY IN AN IMAGE EDITING SOFTWARE

Create a transparent overlay from one color to transparent in your image editing software by following these two steps:

  • Create a file fading from black at the top (or a color of your choice) to transparent at the bottom
  • Make the file 70% transparent 
how to create a transparent vertical overlay

HOW TO USE IT IN THE EDITOR

As you can see on the image above, the transparent overlay is created in a narrow and long format (vertical format). This means that when using this overlay in the Editor, remember to choose the "repeat horizontal" option to make the overlay cover all of your background image.

how to use vertical overlay

Overlay 2: From color 1 to color 2 (vertical repeat)

Another way to use transparent overlay is by moving from one color to another. As was the case for the overlay color to transparent, it's recommended that you stick to the same color scale as your primary colors on the website.

HOW TO CREATE THE OVERLAY IN AN IMAGE EDITING SOFTWARE

Create a transparent overlay from one color to transparent in your image editing software by following these two steps:

  • Create a file that is part one color and part another color 
  • Make the file 70% transparent 
how to create colorful overlay

HOW TO USE IT IN THE EDITOR

As you can see on the image above, the transparent overlay is created in a narrow and long format (vertical format). This means that when using this overlay in the Editor, remember to choose the "repeat horizontal" option to make the overlay cover all of your background image

How to use transparent overlay

Overlay3: Pixel pattern

The pixel pattern overlay is a great way of adding a more graphical and sturdy touch to your website. It can also be used to "cover up" a low-quality video or image as the patterns takes the focus from the image quality and effectively hides any fuzziness caused by low resolution. We have two different versions of pixel patterns: a 1-pixel and a 4-pixel pattern, where the 1-pixel gives a smaller but denser pattern and the 4-pixel a bigger but more dispersed dot pattern.

Pixel pattern

Difference between pixel pattern with 1 pixel and 4 pixels

HOW TO CREATE THE OVERLAY IN AN IMAGE EDITING SOFTWARE

Create your own pixel pattern in your image editing software by creating a colored square in the desired amount of pixels. Remember to leave blank space to the right and below your object as demonstrated on the image above. After you've created the colored square, change the transparency to 70% to avoid having an overly dominant overlay.  

How to create pixel pattern

How to use it in the editor

As the pixel pattern consist of a small box that has to be repeated across your background, you'll have to use the "repeat both" setting under Repeat. The blank spaces between the dots on your graphic makes sure that the pattern doesn't create an entirely black overlay but keeps the squared look and feel.

How to use pixel pattern

Download all overlays