Categories
Graphic Design

Readability Techniques: Text over an Image

- Updated: June 29th, 2020 -

Placing text on an image can be a very elegant addition to an image and a brand, if done correctly. Every image and font choice has its own set of creative solutions and boundaries when it comes to text overlays. In this quick step-by-step guide I’ll show a couple techniques for achieving the necessary contrast when adding text to an image. The goal is to use the text to add dimension and context to the image, yet keep the image the center of focus. The Gradient Overlay method below tends to be the most portable for my needs as this technique works on any image.

Photo Usage: Seattle Skyline by Abigail Keenan via Unsplash

1. Base Image

/Users/monte/Desktop/text-on-image/01_assets/screenshots/1-text-over-image-base-image.jpg
Seattle bathed in a lot of sunlight. This image is heavily detailed and the color is fairly washed out, making it difficult to overlay readable text.

Now getting down to it, I chose this image because it’s a very tough image to overlay white text on top of. This wouldn’t be ideal image to use in the first place, but there are times that this is what we’re working with, so best to find a way and make it work well.

2. Zero Styling: Overlay Text

/Users/monte/Desktop/text-on-image/01_assets/screenshots/2-text-over-image-text-no-style.jpg
The text adds nothing except confusion to the image

Now we have the text on the image in an intentionally difficult area. It’s not easily readable at all and therefore it doesn’t work.

3. Fastest: Color Overlay (Color Cast)

/Users/monte/Desktop/text-on-image/01_assets/screenshots/3-text-over-image-color-cast.jpg
The text looks like it’s getting a little closer, but still isn’t readable (however I prefer the image much more after the effect).

This is a simple stylizing technique that works when the image doesn’t have to be as prominent and a filter can be applied to the image. You can add a color cast with any color hue although grey works very well too. In this example, I’m lifting a darker color from the image itself which lends some nice contrast to the image. Because of the contrast change, it’s also helping make the text a little bit more readable, but not much considering the placement of the text on a very washed out image. If this were a darker image it may work fine. Even moving the text over to the right side could work better too but you will notice there is still a problem with the S against the lighter building beneath it.

Color Overlay Properties Used:

  • Fill Color: #1D2E38
  • Opacity 100%
  • Blend Mode: Soft Light
Color Overlay / Cast

4. Most Common: Drop Shadow

/Users/monte/Desktop/text-on-image/01_assets/screenshots/4-text-over-image-dropshadow.jpg
I know, the ubiquitous Drop Shadow… but subtlety goes a long way with this effect.

The drop shadow effect has been worked over through the years, however it’s still a good companion on the tool box. It’s all about subtlety with this effect. In this example, it helps, but it’s still not enough considering the base image and the color of the text. There’s simply not enough contrast between the two and that’s what we need to create. We would really have to intensify the effect to make it possibly work but certainly not at the expense of overdoing it.

Drop Shadow Properties Used:

  • Blend Mode: Multiply
  • Opacity 52%
  • Radius (spread): 16px
  • Offset: 3 – 10px
  • Intensity: 18%

5. Most Portable: Gradient Overlay

/Users/monte/Desktop/text-on-image/01_assets/screenshots/5-text-over-image-graident-overlay.jpg
Nice, approaching something that could work on its own.

This is my primary choice because it simply works across all images and doesn’t get in the way of the image itself, which your photographer will appreciate. It’s a handy option too because you can also layer on different options above as we’ll see here shortly.

The gradient overlay specs:

  • Fill: Black gradient to transparent (bottom to top)
  • You can also use a darker color taken from the image if you like, I found that it felt a bit too much like a wash though in this example.

Combinations

Why not? It’s all about creativity and if your inner artist is talking to you, it’s best to listen. Although the gradient overlay does a great job bringing out the text on what would be an otherwise impossible situation, we can also add that drop shadow back in. As well, I really liked the color cast effect with the image itself so let’s give that a look. Just remember, we want the text to compliment the image, not overpower the image, at least most of the time.

Here are the remaining explorations:

Gradient Overlay with Drop Shadow
Color Cast, Gradient Overlay – My personal Preference with this photo. The text is easily readable but balanced with the image. Note that the gradient overlay is far more pronounced as the color cast affects the gradient transparency as well. You may need to adjust the gradient overlay layer accordingly to your style.
Color Cast, Gradient Overlay with Drop Shadow – maximum contrast. Notice how the same drop shadow lends itself as being more opaque since it’s layered on top of the previous gradient overlay. Big difference from the initial non-stylized image and text.

And that’s it. If you have other ideas leave them in the comments so we can check them out.

Leave a Reply

Your email address will not be published. Required fields are marked *