Create custom graphics with limited talent and free software

One of the easiest ways to add character to your website is a judicious and consistent use of imagery. A few images customized to match to your company’s voice go a long way to establishing a distinct visual and emotional aesthetic to your application.

One of my favorite uses of imagery is adding doodles to unsatisfying interactions, such as error dialogs. They add a bit of delight to otherwise mediocre experiences. Creating your own awesome doodles is relatively easy and doesn’t require expensive software, so you really have no excuse not to bring a bit of joy to your user’s experience.

Anatomy of A Good Doodle

When creating a doodle you should keep the following in mind.

  • Doodles play a supporting role in your application. They shouldn’t distract people from performing their tasks or focusing on their content.
  • Doodles do not need to be very polished. In fact, if you’re adding incredibly detailed imagery to error messages you run the risk of leaving the impression that you care more about making pretty pictures than fixing bugs.
  • Doodles need to be charming and a bit of humor always helps.

Now that we know what we’re optimizing for, let’s get started.

Find Some Paper, Make A Doodle, Take A Picture

The first step is to draw a doodle on any piece of paper. Stick figures, smiley faces, and simple shapes will work just fine. Don’t worry about mistakes, they can all be cleaned up later. I recommend using a sharpie or brush-tipped pen because it makes the tracing we’ll be doing later easier.

Once you finished drawing, whip out a phone or camera and take a picture. Here’s what I came up with:

picture of doodle.png

Import Doodle, Trace the Doodle

Send your picture to your computer and open it your favorite image editor that supports layers. Free image editors like Gimp or Paint.Net will work just fine. I’m going to use Gimp in this example because there’s a version of it for basically every operating system.

Once inside the image editor, go through the following steps:

  1. Create a white background layer.
  2. Select the layer your picture is in and set its opacity to 50%. This will make it easier to see what parts of the picture you have finished tracing. If your picture is very large, you can resize it at this point.
  3. Create a transparent tracing layer and select it. This is where you’ll trace the paper doodle.
  4. Select the brush tool and configure it with the following settings:
    • Size: 5px - This determines how wide the “tip” of your brush is.
    • Opacity: 80% - This determines much solid the brush stroke will be. I like the 80% because creates a nice effect when your brush strokes overlap.
    • Hardness or Edge: 50% - This determines how sharp the edge or your brush stroke is.
    • Enable stroke smoothing if your image editor supports it. It will create a cleared line.
  5. With the brush tool, start tracing your paper doodle in the tracing layer.

set up canvas with arrows.png

Export & Optimize

Once you finish tracing, hide the original picture’s layer, and you’re almost done. Your canvas should look something like this:

final canvass.png

At this point you can choose to add a few finishing touches. You can add color, add shadow, change the image size, or clean up any stray brush strokes. Once you’re happy, hide the white background layer and export your doodle as a PNG. This will give you a nice image with a transparent background.

Finally, run your image through a compression service like TinyPNG.org to get the smallest possible image file size.

Here is my final image:

doodle optimized.png

Use the Doodle

Congratulations! You just created an awesome custom image, all that’s left is to use it. Here’s a example of my doodle in a sign in form:

doodle in form optimized.png