The Use of Filters and Transparency Layers in Website Design

The Use of Filters and Transparency Layers in Website Design

It seems that with one trend in website design, designers almost have another trend pushed upon them. This is the case with large background images – using a slide show with a variety of different photographs means that whatever color text you choose it will show up better on some than on others, so the solution has been to place a filter or transparent layer between the image and the text, meaning that the text will show just as clearly on any image.

This design trend does not only apply to photographic background images, some sites use halftones or transparency on solid color backgrounds, and the addition of a very small drop shadow makes white text look extremely crisp and sharp. Here we are showcasing a selection of websites that use this method to keep their text easy to read without compromising the quality of the images.

How They Work

I would imagine just about every designer knows how filters and transparency work when placed between an image and the text, but to show the amazing difference that such a layer can make, I have produced some images to prove it!

Images with White Text
Images with White Text

Black Transparent Layer at 25% Opacity Added
25% Transparency

Small, Black Drop Shadow on Text
Drop Shadow on Text

Halftone Layer at 40% Opacity
Halftone Layer

How to Create a Halftone Pattern with Photoshop

This method will work for any version of Photoshop, and is simplicity itself. The image below has a gradient-filled background with the halftone pattern layer above it.

How to Create a Halftone Pattern

Transparency and Filters in Action

ICRC Delegates at Work

This site uses a black transparent layer between the full screen slide show and the white headline text. As you can see in the screenshot below, the text stands out even against the man’s white shirt.

ICRC Delegates at Work

Light & Shadows

This site uses a very dark transparency that lightens slightly on mouse-over. A hint of color also appears on mouse-over, different colors for each panel.

Light & Shadows

Petr Novikov

This site uses a light transparency over a background video, again using white headline text.

Petr Novikov

Ndoto

This site has a full screen slide show with 3 images, each of which has a different color transparency. The screenshot below shows part of each image.

Ndoto

MVMT

With a grid-style layout, this home page uses a very dark transparency that is completely removed on mouse-over, revealing the full color photograph beneath.

MVMT

Cloudways

Here is a unique and gimmicky effect on the home page. The background image is animated, showing the guy typing on his keyboard, and the headline text is presented in a ticker-tape fashion so we can imagine he is typing the sentence, deleting, typing… etc. The sepia transparency helps the thin black text to stand out.

Cloudways

Louise Bradley

This website uses a block of transparency over the full screen background slide show – a somewhat different and creative approach.

Louise Bradley

DraughtMaster

This site uses a variety of layer styles to help the white headline text stand out. The screenshot below shows 4 of their pages using different layers: black transparency, water drop texture, bokeh texture and ice texture.

DraughtMaster

Mundial Memories

This site dedicated to the Brazilian World Cup Tournament 2014 uses a proportionately large, square halftone pattern over the full screen image.

Mundial Memories

Tap In

Another site that is a guide to the matches of the Brazilian World Cup Tournament 2014. This site uses a sepia transparent layer over the slightly animated full screen image.

Tap In

Yunik

This home page has a transparency with a bluish tint on its full screen background slide show that only consists of 2 images. As you scroll down the page there are more varieties of transparency including black, blue and an image using a halftone layer.

Yunik

Smart Codes

This site uses a halftone lined layer to make the text stand out. The screenshot below shows a portion of the text at full size as the size reduction has impaired the effect somewhat.

Smart Codes

Tinybigstudio

Here the designer (Pablo Dominguez) has used a very hot red transparency over a full screen image of himself at work. A yellow teardrop-shaped element holds a thumbnail image of himself also.

Tinybigstudio

La Ferme de Biarritz

Although the layout of this site is not necessarily high-fasion right now, the black transparency for the content area makes the white text readable against the sandy background.

La Ferme de Biarritz

Fresh Design

This site uses a black transparent layer at the perfect opacity for the white text to stand out on all their slide show images. The text also has a small, black drop shadow for even more clarity.

Fresh Design

Dr Laffourcade

For the designers of this site, black is the new black, and they have used a white transparent layer to emphasize their black headline text.

Dr Laffourcade

Believe.in

This site uses a halftone layer at the ideal opacity to keep the white headline text crisp and clear, yet not distort the animated background images.

Believe.in

Adveris

This design does not have a full screen background image, it has a solid blue background with a bokeh-style pattern on it. The mesh-style layer between the background and the page elements gives a very sharp and crisp edge to everything. The white text is enhanced with a small drop shadow.

Adveris

Yin + Young

This is the About page of the Yin + Young site. Using a very vintage typographic style, the old street that forms the background image of this page has an Instagram-like filter to cast bright light and allow the black text to stand out. This site uses quite a few transparency and filter-style effects, and interestingly, if you click on the Home button you will find yourself on one of two different home screens!

Yin + Young

Conclusion

The knock-on effect of one trend creating another seems to be happening more frequently with the advent of flat design. It clearly shows how trends are started by finding solutions to problems created by other trends – flat design itself was started out of necessity, to solve the problem of small screen size clarity and ease of use.

Have you come across any other methods of making text stand out on images of different colors and contrasts? Please share your opinions and links with us in the comments section below.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.