Snug Site

How to prepare an image for white text

In this Photoshop Guide, I would like to show you how to prepare an image for white text. To be more specific: How to create a colourised version of an image for white font suitability.Placing a bold white font over a colourised image is one of the biggest trends in Web Design today. It looks professional, and allows for Words and Imagery to convey a message in a confined space, while also capturing the Colour theme of a Brand.The effect is easy to create in Photoshop, and allows for almost any image you choose to be used as an accompaniment to the words on a page.For this Guide the White Font has been added in Photoshop, although this would usually be done by adding the White Text over the a Background Image you create using HTML/CSS. This is so that the Words can still be crawled, contributing to your SEO.
Let’s go from this…
wt1t
…to this.
wt6

How to prepare an image for white text

Step 1: Lens Blur

This may not be required with most images. The concept here is that a background image should not appear as clear as the foreground font (especially important if there is any background font). The image will appear out-of-focus, giving the impression that it’s in the background, behind the text.

Select Filter > Blur > Lens Blur…

You can use the default settings – but ensure you retain the recognisability of the image and distinct elements within the image.

Here I used a ‘Radius’ of 8.

wt2

Step 2: Black and White

To prepare the image for colourisation, we will first make it Black and White. Default options are typically fine here, however advanced manipulation of the options could achieve better results.

Select Layer > New Adjustment Layer > Black and White…

wt3

Step 3: Photo Filter

Now we want to colourise the image.

Select Layer > New Adjustment Layer > Photo Filter…

wt4

Under the Photo Filter Properties you will want to change from ‘filter’ to ‘color’

Ensure that ‘Density’ is up to 100%

Now choose your colour: (I went with #00b4ff) – Ensure your colour isn’t too dark or too light.

wt4

Step 4: Curves

The image above looks good – except for a few dark areas that are creating some contrast, which causes the eye to dart around the lettering a little bit. This can be cured by making the darker areas lighter.

Select Layer > New Adjusment Layer > Curves…

wt5
You will want to play around with these curves until you achieve maximum readability. To lighten the dark spots, drag the lower left corner of the curve matrix upwards. This may require some experimentation, the aim is to increase readability, and not obfuscation of the image, ensure the image is still recognisable.

wt6

Share this article...

Facebook
Twitter
LinkedIn
Email

Related Articles...