Home

How I Add Sketches to Blog Posts

Visual support is a great to add context and meaning to abstract or theoretical text. This is how I sketch for blog posts today.

Adding visual references to blog posts is a great way to help a reader understand an abstract or theoretical concept. You know the old saying — A picture is worth a thousand words. A graphic can help clear up an abstract concept without having to force another handful of paragraphs down readers' throats.

But when it comes to making the graphics, I've always struggled. I like good design, I appreciate good design, I'm a bit of a perfectionist, and I'm also not very good at designing things.

In my early blogging days, I made used an art program like Adobe Illustrator or Sketch. This article has an early version of my approach (branded for the blog on which it was first published). But getting those right was time-consuming. I wanted the graphics to remain refined, but I didn't work in those art programs for hours trying to get it right. I knew I wasn't going to be efficient with my approach, given the low frequency at which I had to create art files.

Within the last year, my writing has transitioned more conceptual and theoretical — a healthy balance of how-tos and what-ifs. That has pushed me to figure out how to get back into adding visuals to posts. I didn't want to go down that same road of tedium and frustration.

After working through the kinks, I have a practice I'm relatively with today. It's looks a little clunky on paper, but it gives me the speed and flexibility I require to be effective.

The Equipment

The hardware and software I use includes:

  • An iPad (I got the least expensive one and it works great)
  • An Apple Pencil (the old generation)
  • Notability for both the iPad and the Mac

The Process

This is my process today:

Step 1: Create sketch in Notability on iPad using the Apple Pencil.

Blog Posts Sketch - Step 1

Step 2: Open the note in Notability on the Mac laptop.

Blog Posts Sketch - Step 2

Step 3: Open the PDF in Preview and export each page individually as a JPG.

Blog Posts Sketch - Step 3

Step 4: Open the JPG up in Preview. Crop it and re-save.

Blog Posts Sketch - Step 4

Then I have the images I need for the post. And I have the sketches stored digitally in Notability, so if I need to go back and edit at some point, it's no big deal, I just go through all these steps again.

Why I Like This Approach

On one hand this seems like a lot to jump through just to get a simple sketch on a blog post. But it really gives me everything I want:

  • It feels like a sketch, and that's important to me in building a consistent brand.
  • It's faster for me to build a sketch with what feels like doing it by hand rather than with a mouse and keyboard.
  • It's relatively easy to edit if I need to change something later on.

That's it!

How do you add sketches to your posts? What do you or don't you like about this approach? I'd love to hear from you.

Let's Connect

Keep Reading

How the Web Works

Learn how the web works.

Jun 03, 2013

One of My Favorite Performance-Boosting Netlify Plugins

Inlining critical CSS is a breeze for classic SSG sites built and deployed using Netlify. Here’s how it works.

Jun 25, 2022

Absolute vs. Relative Positioning

The golden rule of absolute positioning.

Nov 20, 2012