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 (check out 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.
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 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 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.
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 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
Overlay 3: 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.
Difference between pixel pattern with 1 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 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.