- 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.
1. Base Image
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
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)
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
4. Most Common: Drop Shadow
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
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.
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:
And that’s it. If you have other ideas leave them in the comments so we can check them out.