How to Make Pencil on Tracing Paper Look Good with Gimp

Here’s a useful little discovery. I’ve just drawn a cartoon about Trump winning the US Election. It was in pencil on tracing paper. Pencil is often said to be hard to scan, but this, after some thresholding and tidying up in the free image-editing program Gimp, worked very well as an image to display on the web.

I’d roughed out the design in pencil on scrap paper. I then put tracing paper over the top and traced onto that, cleaning up some of the lines as I did so. I could have used a lightbox, but I wasn’t at home, and tracing paper is easier to carry. It’s also easier to work on, because it lies flush with the desk. However, many of my pens tend to smear on it, which meant I’d either have to recopy onto another surface or try to scan the pencil drawing. I decided to try the latter. So this is what I started with:
Original Trump cartoon drawn on tracing paper. Three aliens are looking at a newspaper announcing Trump has won: one says '... leader. ... On second thoughts, do not bother.'

I then scanned that at 600 DPI greyscale, giving me this:

The next stage was to threshold it. This reduces the image to black and white. The Gimp thresholding tool displays a histogram showing the distribution of intensities. By moving the slider triangles just under the histogram, or by changing the numeric fields, one can change which greys map to black and which map to white. I show this with the three examples below. I know from experiment that the middle one has the best threshold: the others are shown for comparison.

Here, all pixels with intensities from 152 to 255 become white, while those below 152 become black.
Greyscale scan thresholded at 152

Here, the threshold is 172, so all pixels with intensities from 172 to 255 become white, while those below 172 become black. So some lighter greys become black than above, meaning that lines are thicker and less broken. The aliens, for example, now have complete outlines.
Greyscale scan thresholded at 172

And here, the threshold is 192, so all pixels with intensities from 192 to 255 become white, while those below 192 become black. So even lighter greys have become black, and the lines are thicker still. In fact, some of them are no longer lines: too much of the background has been incorporated.
Greyscale scan thresholded at 192

So I thresholded the image at 172. Some lines needed a bit of editing: thus the newsvendor’s left arm needed its outline paring down. A few other changes, including a new caption and my signature, and this is the result. I think it worked well.
Final Trump cartoon

How to Make a WordPress Blog Theme Match an Existing Website II

(Continued from “How to Make a WordPress Blog Theme Match an Existing Website”.)

I then copied the page source to a file called index.php in blog/wp-content/themes/bandolier. This is a so-called “template file”. WordPress uses some complicated rules about which template file to use to display different kinds of information. These are explained in the WordPress Theme Handbook page on “Template Hierarchy”, in the section called “The Template Hierarchy In Detail” and the interactive diagram just before it. When handed URLs such as http://www.j-paine.org/blog or http://www.bandolier.org.uk/blog, which refer to the WordPress main directory, WordPress displays what it calls the “front page”. The site owner can set this to be either a static page or a list of blog posts. I did the latter. And according to those rules, WordPress will display these by running index.php.

Actually, that’s not quite true. WordPress will check for front-page.php and home.php first. If it doesn’t find them, it will use index.php. See “The Template Hierarchy In Detail”, subsection “Front Page display #”. But anyway, for simplicity and to follow Tania’s instructions, I used index.php.

Although my Bandolier theme was far from complete, the next stage was to activate it. Go to the WordPress dashboard, and click on Appearance > Themes. The theme is there in the collection with all the default themes. So

Screenshot of theme-selection page with Twenty Sixteen theme active Screenshot of theme-selection page with Bandolier theme active
Activate the theme and go back to your main URL

The next stage was to adjust for the fact that my index.php, although an exact copy of a perfectly good HTML file, was running in a different environment. So, again following Tania’s write-up, I did the following:


Screenshot of my experimental Bandolier blog-posts page…………

blog/wp-content/themes/bandolier/
  • style.css
  • sidebar.php
  • index.php
  • content.php

How to Make a WordPress Blog Theme Match an Existing Website

I’ve been hosting the Bandolier evidence-based medicine site for Oxford pain researcher Andrew Moore. I’d previously collaborated with him on analysing drug-trial data, but this was the first time we’d worked together on a website. One thing we thought we might want to add was a WordPress blog; and since Bandolier has a very distinctive style, I needed to make a WordPress theme that would give the blog the same style. This sort of thing is quite common in computing: you’ve got two completely different pieces of software, and you have to make one match the other, even though they’re written by different people with different tools. Luckily, I found Tania Rascia’s “Developing a WordPress Theme from Scratch”.

To appreciate the style I needed to emulate, look at the screenshot below of an existing Bandolier page. The site is about evidence-based medicine and pain, so the pages explain such things as the evidence for ways of easing back pain, safety in acupuncture, and the placebo effect. The page shown here is about clinical trials.
Screenshot of an existing static Bandolier page, one about clinical trials

Before I could style a blog, I had to set one up. This meant installing WordPress, which I did as described at WordPress Codex’s “Installing WordPress”. I put it into a subdirectory called blog under the main Bandolier site.

I then joined Tania’s page at the section headed “Creating your custom theme”, and made a subdirectory called blog/wp-content/themes/bandolier. Themes always live in .../wp-content/themes. So, for example, when I was styling AudioTheme’s Promenade theme for a customer, I had a subdirectory called promenade holding the original theme, and another called promenade-child which contained my adaptations.

The first file I had to create in blog/wp-content/themes/bandolier was a stylesheet, style.css. As the WordPress Codex explains on its “Theme Development” page, this provides not only the kind of visual styling information that you get in any CSS stylesheet, but also information about the theme. This is essential for WordPress to use the theme properly, and goes in the comments at the top:

/*
Theme Name: Bandolier
Author: Jocelyn Ireson-Paine
Description: Bandolier site templates converted to WordPress
Version: 0.0.1
*/

Actually, for these experiments, this was the only stuff in the stylesheet. I let the blog’s styling depend on default styles, e.g. for paragraph fonts, set up in other stylesheets, the existing Bandolier ones.

The next thing was to start styling, and decide what a list of blog posts should look like. On my site, for example, that’s http://www.j-paine.org/blog, and opening it in my browser gives me a complete list of posts, each with its title, date, and text. Where could I fit these on the Bandolier site? Well, there’s an obvious content area — starting at the heading “Clinical trial” in the above screenshot, and ending at a horizontal line. So I took an existing page, and played around with the page source and the Firefox Inspector, looking for the relevant HTML elements:
Screenshot of me looking for the clinical-trial page's content area in Firefox Inspector

(Continued.)