Jul 22, 2015
Placing text directly on an image can be an effective design choice- but if done incorrectly, it can look messy and cluttered. The goal is to be able to incorporate the text so that your message is communicated clearly (while your site looks super amazing!) Here are some tricks for you to try out:
1. Add a background shape
Frame your text by using a shape to separate it from the image. This will draw the eye towards the text. Try lowering the opacity of the shape for a more modern feel.
Use a rectangular shape:
Use a circular shape:
*Website.com users: add a coloured shape and layer it on top of the image and below the text.
2. Blur the image
To make text stand out, blur the image so that it is not in focus. You can blur the entire image, or just blur the section of the image that the text is sitting on.
Blur the entire image:
Blur a section of the image:
*Website.com users: create the effect by adding a white or gray shape, and decreasing its opacity to about 30%. Make sure the shape is layered on top of the image and below the text.
3. Pay attention to placement
If you're using a large background image, be sure to look at the big picture. There should be a natural place where you can incorporate the text. Is the model facing a certain way, or is there a blank space that the eye gravitates towards?
4. Play with contrast
Use a lighter text colour over a darker image, and darker text over a lighter image. Or, play around with colour contrast, like blue text over a yellow-toned image. The key is to make your text pop out from the background image.
5. Use shapes to direct attention
Adding fancy shapes like arrows and hands can help direct the eye towards the text. For example, using an arrow that points towards the text will draw attention to it.
There ya have it! Try out a few of our tips and let us know how it goes!
*Website.com users: A lot of these tips require adding a shape and customizing the shape's style. Check out our tutorial on using shapes to separate your text from the image.
- (no comment)