7 techniques to design killer graphics for your blog posts
Design | September 10th, 2014
There’s never a shortage of blog posts to read, so how do you decide which ones are worth your time and which to ignore? I always try to read high quality, well thought out articles and tend to skip the blog posts that look hastily slapped together.
Good graphics will go a long way towards making a blog post look interesting and high quality. Today I want to show you how to create graphics that make people want to read and share your work.
Prerequisite: finding good photos
Not all of my techniques require photos, but they are the easiest starting point for unique, high quality graphics. Let’s talk about where you can find good photos. There are tons of sources, but let’s focus on just three (you can suggest more in the comments).
I’ve used this site for nearly a decade. It used to be called sxc.hu, but they’ve just rebranded with a more user friendly name. Create an account and then you can search and download thousands of high quality images.
I like to browse through the Abstract category to see get a random selection of photos.
Unsplash is a collection of completely free (you don’t even need to attribute the photographer) photos. They release a new bundle of 10 photos every 10 days. And the quality is fantastic! The only issue is that there are now so many amazing photos that it is hard to find exactly what you are looking for. My solution is to scroll quickly through the site (it has infinite scrolling) and open each new photo in a new tab. Here are three random photos from Unsplash:
Flickr Creative Commons
If you need something more specific, Flickr Creative Commons search has been my go-to place for years. When doing an advanced search you can specify what licenses you want to search within. In most cases you need to attribute the photographer, but that’s easy with a simple text link.
1. Adding color + detail
A photo will add a lot to any blog post, but anybody can use the sites I mentioned above to get one, so you’ll have to take a couple of extra steps if you want your image to stand out.
Here’s a short video tutorial on how to turn a good, but very common, photo into something unique to your site.
My next go-to method is to add icons. You can create simple, effective graphics just by adding a few simple icons to it. This image was for a post about how content combined with marketing automation can lead to new clients. Originally I was going to design something fancy to illustrate the point, but then I realized I could get a similar effect in five minutes if I used three free icons.
For the graphics within the post I used icons from The Noun Project to represent each season. This explains at a glance the concept that took a few paragraphs to explain with text in the original post.
And finally, here’s one more basic illustration made entirely with free icons for my post on creating and consuming content on different devices:
3. Photos + Icons
To take your images to the next level, tell a new story with your photos by combining them with icons.
4. Making text interesting
It’s often tempting to write your post title into the image itself. That’s fine, but only if you do something interesting with it. Pat Flynn does a great job with that on his blog. Notice how he lays two fonts creatively on top of a relevant photo. Just be careful with this; if you screw it up, it looks really bad.
A combination of fonts (and a fancy ampersand) helped make this image for a workshop Brennan Dunn and I taught seem much more interesting. Note how we’ve applied all the techniques we’ve talked about up to this point to this image:
The easiest thing to do is simply add some color. Ideally, you should use a color that matches your image. Here’s a simple tutorial in which I’ll also show you how to add a shadow detail to the text:
Shapes and lines
The next technique is to add simple shapes and lines to make your text more interesting. That’s what I did for this ‘designing with CSS3’ post. The simple blue banner really makes the post title stand out.
Combining a photo with some fancier text designs can make a great background. Here’s a brief tutorial:
Some of my favorite design styles are handwritten and organic. You could try to create that look with special fonts and textures, but there’s often nothing better than just going old-school and using a pen and paper. That’s exactly what Sean McCabe does here, with what could be an entire blog post in a single page of his notebook:
Now if you’re a little intimidated, don’t feel bad. Sean’s a pro. You can start much simpler with more basic techniques.
Last July at WDS I was hanging out with my good friend James Clear for an impromptu work session. He wanted simple graphics for his blog, and his current tools were a pen and little 3×5 note cards. He’d sketch out a simple illustration for his post, then take a photo with his iPhone (the trick is to not cast shadows on the paper).
Then you’d bring the photo into Photoshop and use Levels to make the background white.
From there you can use the darken blend mode to put the pen drawing on any color background.
This worked well for James and he used it in a few posts, but he wanted to add a little more to each image. So I suggested adding color with some simple brushes. We bought a copy of Kyle Webster’s brushes (who was randomly about 2 blocks away at another conference at that exact moment) and added some color.
Here are a few of the simple graphics James drew using the technique:
These are clean and simple, while still feeling organic. These do a great job of illustrating a point and breaking up what would otherwise be a massive block of text.
6. Organic, without getting your hands dirty
Now some of you may be complaining about having to interact with something in the real world. After all, it’s dangerous out there. Ink stains and paper cuts are just two of many possible risks you face by stepping away from the computer.
If that’s you, I’ve got another technique for you. You’ve got an iPad, right? Good. Download Paper by 53. This drawing app provides natural feeling brushes and a graphics rendering that will smooth out your poorly drawn lines, and it makes you look far more talented than you actually are.
Here are a few graphics that I made for my own blog posts:
Don’t I look talented? …don’t answer that.
7. Quotes and Tweetables
Sometimes you say something so smart that you want to make sure everyone reads it. You can pull that out into a little graphic to show off just how intelligent your ideas really are.
Josh Pigford from Baremetrics does a great job with these:
I’m always trying to be as cool as Josh, so I designed a few quotes for my own blog posts. Josh may be clever, but he’s not as clever as my dear friend Oscar Wilde. Plus, I recorded each of these design sessions so you can learn how to do it yourself!
Just the minimum to make a nice pull quote.
Add some interesting colors and textures to create a new look.
Using techniques from earlier in the post we can turn any photo into a great quote background.
Photoshop for Web Design
Over the last year I’ve been working on a course called Photoshop for Interface Design. Recently I added a bunch more content on how to design blog graphics, sales pages, and more so that it is focused not just on designing software interfaces, but also on web design itself.
If you’ve ever tried to learn Photoshop and been frustrated with all the useless tutorials and training focused on photographers, this is the course for you! I cut through all the features in Photoshop that don’t matter for web and app designers and focus entirely on the skills you actually need.
The updated course launches on September 23rd. You can learn more and get on the waiting list here: Photoshop for Web Design.
Get all the PSDs for free
If you want to customize any of the graphics we put in today’s article, you’re in luck! I put together a zip file that includes all the Photoshop files. Download them, customize them, and use them in your own posts!