Automating image creation with ImageMagick

I sometimes evangelise about how important it is for engineers to be familiar with “professional-grade” drawing software. My heart sinks when I see people drawing diagrams in MS Paint (the free drawing tool that comes with Windows). Software of that kind is not appropriate for producing detailed drawings – it’s very labour-intensive and the results typically look amateurish. By comparison, drawing a diagram with a “proper” vector drawing tool is very fast and typically produces much better results.

I recommend that engineers should be competent with at least two drawing tools:

  1. A vector drawing tool. Each drawing consists of a number of parameterised elements (rectangles, ellipses, lines, curves, etc). The colour, size, shape and other parameters of each object can be modified at any time. Crucially, objects can be moved relative to one another and one object can be moved in front of or behind another. My favourite drawing tool is Inkscape, which is free and extremely powerful.
  2. A raster drawing tool. Each drawing consists of a grid of pixels. A raster image can be thought of as a mosaic made up of many tiny square tiles. Each individual tile is of just one uniform colour, but when viewed from a distance many tiles together combine to produce a clearly visible image. Each pixel in a raster image is like a tile in a mosaic. The colour of each pixel is stored as one or more numbers (one number for a pixel in a greyscale image, or three numbers for the red, green and blue components of a pixel in a colour image). A fourth number is sometimes used to record the alpha value (opacity / transparency) of each pixel, if some areas of the image are transparent. Crucially, professional grade raster drawing tools store an image as a number of “layers” which can be edited individually. Such an image can be thought of as similar to several sheets of acetate placed on top of one another, each containing a different element of the final drawing. The raster drawing tool I recommend is GIMP (GNU Image Manipulation Program), which is free and very powerful, but admittedly a little difficult to get started with.

Inkscape and GIMP are the drawing tools I use most frequently in my own work, but there is a third software package called ImageMagick that I rely on a lot for creating images. ImageMagick is the primary topic of this post. It provides a set of powerful command line tools for image processing, which allow image creation and modification to be easily automated.

I am sometimes asked to help out with web design and publishing tasks. A typical problem would be to create a banner image for a web site, using a number of visual elements such as scanned hand-drawn designs. Often, it’s desirable to be able to preview a number of variations on the same design, for example using different colour combinations or varying the relative size of different objects in the image. Combining a number of visual elements with custom colouring is reasonably straightforward in GIMP, but generating multiple versions is labour-intensive. This is the kind of task to which ImageMagick is ideally suited.

By way of illustration, I’ll put together a banner image for a web site documenting an imaginary robot called “Brobot”. I’m starting off with the following sketch which I’ve just drawn (literally) on the back of an envelope:

The size of the original sketch image is 960×1280 pixels. The first thing I want to do is extract the two elements I plan to use – the image of the robot and the word “BROBOT”. This can be done using ImageMagick’s convert tool, as follows:

convert brobot_sketch.jpg -crop 245x285+170+170 head.png
convert brobot_sketch.jpg -crop 435x130+380+745 name.png

This gives me the following images:




I want to increase the contrast of each of these (make the white whiter and the black blacker) and I would also like to thicken the lines a bit.

I’ll have to come back and fill in the details later, but here’s a summary of the complete process and finished result:

# Create a cut out of the name with a transparent background
convert brobot_sketch.jpg -crop 435x130+380+745 name.png
convert name.png -type Grayscale name.png
convert name.png -threshold 80% name.png
convert name.png -negate -morphology Dilate Disk:1 -blur 1 -negate name.png
# white on transparent version
convert name.png -negate -background white -alpha shape name_white.png
# black on transparent version
convert name.png -negate -background black -alpha shape name_black.png

convert brobot_sketch.jpg -crop 245x285+170+170 head.png
convert head.png -type Grayscale head.png
convert head.png -threshold 70% head.png
convert head.png -negate -morphology Dilate Disk:1 -blur 1 -negate head.png
convert head.png -negate -background "black" -alpha shape head.png

# Create a light blue banner, then paste the head and name onto it
convert -size 640x120 xc:#A0A0FF banner.png
composite -compose atop -gravity West -geometry "x120+80+0" head.png banner.png banner.png
composite -compose atop -gravity East -geometry "x100+80+2" name_black.png banner.png banner.png
composite -compose atop -gravity East -geometry "x100+78+0" name_white.png banner.png banner.png

This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s