12 Inspirational Designs for Adding Text over Images

July 7, 2014
Designers
LinkedInTwitterFacebookEmail

As any up-to-date blogger knows, it’s important to include an image on each post for, at the very least, the rapidly growing Pinterest crowd. I, myself am a devoted “Pinner” and hate the inconvenience of not being able to save a link simply because there wasn’t an image on the page that Pinterest could find.

That being the case, not all of my post’s featured images are that great. Over the past couple of months I’ve started saving (on a Pinterest board, no less) some great ideas for adding text over images. Here’s a few of my favorites.

partially transparent background

This one’s got a nice partially-transparent white background with the title in all caps. But, unlike the idea below, the white background starts in the middle of the image and doesn’t go all the way across

partially-transparent white background with the title in all caps

While it has the same basic idea as the one above, this one includes a New Blog Post note above and the website URL. Also, the white background is in the middle and all the way across.

white background is in the middle and all the way across.

A different contrasting look, this one uses a dark background with a white line to help it look a little more official. It also includes the URL. Including the URL is a great idea if you plan on having people Pin your image.

dark background with a white line

Using a great photo, this one imprints the words directly on it, but fades the image out behind the text. The words are a bit hard to read in this smaller image, but seems fine when you zoom in.

imprints the words directly on it, but fades the image out behind the text

Similar to the one above, this one puts the text on top of the faded out image, but uses capitalization for the title and includes a subtitle below.

capitalization for the title and includes a subtitle below.

Of course I love this one! Life without adventures is a pretty boring life! Instead of imposing the text on the images, they put it above and below the image and added a border.

above and below the image and added a border.

Again with the white transparent background, but the text is much smaller. They have a nice layout for the text with titles, descriptions and meta information.

white transparent background, but the text is much smaller.

Moving back to the text directly over the image, this one faded out the entire image so that the text was reasonable. They also added a floating button there (may or may not work depending on your post and the text you’d use).

this one faded out the entire image so that the text was reasonable.

Going uber-simple, this one just fades out the background and adds the white text overtop. A small horizontal line separates the quote from the quoted.

fades out the background and adds the white text overtop

While this one’s similar to the ones at the top, they lines the text up on the left and changes the weight of the font. It’s a nice look.

lines the text up on the left and changes the weight of the font

Text over images is all the rage for wedding “save the date” cards. This one uses the blank space on the image and stylizes the text.

blank space on the image and stylizes the text.

Love this one! Not just because its design, which is awesome, but also that it leads to Sevenly (Shirts for a cause – to help free girls from child prostitution). All the text has a color behind them, but the shapes help make it interesting.

Summary

Next time you need to make a featured image with text for your post, check out these ideas – you just might find something that works great for you!

 

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comments