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:
- 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.
- 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
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