Reset password:

Strategic insights
Inside the Graphics of Baekdal

Written by on July 15, 2011

One thing that Baekdal has always been famous for, is the use of graphics and illustrations in the articles. I get a couple of requests each month from readers wanting me to explain just how I make them.

I have promised to do so many times, but I just haven't got around to it ...until now! So this is the secret insider information of the graphics of Baekdal :)

The process

Before I start to talk about the graphic itself, I want to tell you a little bit about the process of writing an article. Most writers start off by writing the article, and then they figure that it needs a picture to "spice it up." The problem with that approach is that the graphics is not really part of the story. It is just eye-candy.

That is not how I write my articles. I usually start off by telling the story through the illustrations. Then when I am satisfied, I move on to write a more detailed explanation around the graphics.

One example is my recent article about Google Circles (and how it needs to be turned upside down). Before I started to write anything, I sketched out the concept in Apple Keynote - and in the same process I created the graphic for the article. The graphic is actually the primary element, the text in the article just has a supporting role.

It is same with this article. All the pictures and illustrations you see now were created first, before I started writing any of the text.

The tools

I only use two apps for creating all the graphics. I use Apple Keynote for about 98%, and I use Photoshop Elements (the cheap version) to do minor things like resizing a picture, creating a perspective effect (for screenshots), or adding a slight touch of blur.

In Keynote I only use the standard tools, arrows, boxes etc. And, I only use the standard backgrounds. There is nothing fancy going.

Let me give you three examples of how I create the graphics. An illustration containing a graph, a screenshot, and the small black men that you see in many of my articles.

Creating illustrations

Here is an example how most people create illustrations for, say, a graph illustrating the growth in sale. They just add two circles, type in some text, add a standard arrow, and that is it.

It looks like crap. It is unbelievably boring, and there are about a billion things wrong with it.

The biggest problem is not the graphics itself, but rather that there is no story. It is just shapes on a blank screen. What you want to do instead is something like this:

The number of elements are exactly the same. It takes the same amount of time to make it. But the difference is that it now tells a story. The illustration is about growth in relation to the past vs. present. So you want to make sure everything is growing. The circles should be growing. The lines should be rising. The headline should slant upwards.

The actual graphic changes are minor. I have slightly changed the colors. You never want to use the default palette. This is something you learn when you work in the fashion industry. Never use a plain red color. Always use a slightly different type of red. Even a 2% change in color makes a huge difference.

The headline has been written with a font that mimic real handwriting. I found this one over at DaFont.com. What you want is to use a very simple font. Don't try to be fancy.

And finally, instead of using a black border (which is boring), I used a white border with a rough look. It is standard border type in Apple's Keynote.

But the graphic still lacks the magic "baekdal touch." It looks flat. The trick is to make it look real. As in physical shapes taken with a digital camera.

The first step is to give the shapes a bit of mass, and you do that by simply adding a shadow. But here is the thing. You don't want to use a standard shadow, they are way to "engineered". What I use is a custom made shadow. It is just two circles which have been blurred at different strengths. It looks like this:

I have saved this shadow in a transparent PNG file that I can quickly drag into any document I might be working on.

The result looks like this. Suddenly the circles feel more like objects than a circle. It is very simple trick.

But the graphic still look computerish, so the final step is to add a background shadow. And just like the shadow under the circles, this is a PNG file I created several years ago. It is a white image that with a slightly darker edge created simply by using a very wide brush in Photoshop.

This is added to the illustration, and just for fun you can add a slight touch of blur to the "old data" just to make the "78% circle" pop out even more. It now looks a lot more real - and as we all know, people tend to trust "real things" more than virtual ones.

And that's it. There is nothing fancy about it. I'm not using any special tools. The real trick is to make sure the graphic tells a story, slightly adjust the borders, fonts and colors, and add two shadows.

This is the recipe for every illustration on Baekdal.

Screenshots

I do exactly the same thing when it comes to screenshots. Except that I often add a bit of perspective. Here is a screenshot from Twitter:

Just bring it into Photoshop, slightly rotate and skew it, just to give a bit of perspective. Then crop it to focus on the area you want to talk about.

The result looks like this, and it already looks more real.

The finishing touch is once again to add the background shadow (the same one as above), and maybe a slight blur to the areas you don't want people to focus on.

Sometimes I will add the "screenshot" effect to the illustrations. Here is an example I posted a few days ago. It is the brainstorming outline I am working on for my next book. This is basically just a mindmap. But instead of using boring mindmap apps, I just use Apple Keynote. The lines are just standard lines with a rough edge type. Instead of using straight lines (which again is boring), I am simply using slightly curved ones.

Then I took a screenshot, copied it into Photoshop, slightly rotated and skewed it, and added the background shadow layer.

The black men

Back in 2010 I got fed up about using the toilet shaped men that are in common use around the web. One example is in my article "How social media destroys traditional marketing."

It looks nice, but I'm reminded of toilets when I see those men. So I wanted to create my own men while maintaining that iconic look. And I wanted to give them feelings and facial expressions (they needed to be a better part of the story).

So what I came up with was these guys.

As you can see, they are a lot cuter than the boring "toilet-men." But how did I create them? Well, like everything else, it is really simple. It is just five black rectangles placed on top of each other + a circle.

Here is how:

Then for facial expressions, I could draw them using curved lines, but a much easier way is to, again, head over to DaFont and uses one of the many dingbat fonts shaped like a head.

And for extra visual elements, like the package trolley, just head over to iconarchive.com. There you can find a huge mix of great icons.

And then let your imagination run wild.

Once again, add the two shadows to make it look more real + in this case a reflection (standard effect in Apple Keynote).

That's it!

Of course, the point of this article is to give you a few tips and ideas for creating your own style. Every publication should have their own visual style, so don't copy my style - make your own.

The trick is not to be fancy or to use seriously expensive "creative suites." The picture above was created entirely in Apple Keynote, and it only took about a minute to do.

The real trick is also to not think of the graphic as graphic design - think of it as a story.

Share on

Thomas Baekdal

Thomas Baekdal

Founder of Baekdal, author, writer, strategic consultant, and new media advocate.

Follow    

Baekdal PLUS: Premium content that helps you make the right decisions, take the right actions, and focus on what really matters.

There is always more...

The Many Business Models of News »

ONLY FOR
SUBSCRIBERS

21
PAGES

The Economics of Individual Media »

ONLY FOR
SUBSCRIBERS

31
PAGES