Submitted by Tim on Wed, 09/05/2007 - 14:11

Manipulating pixmaps is all very well, but when it comes to creating original, scalable graphics we need to investigate Inkscape's vector drawing, bézier curves and calligrapy tools. This is a gentle introduction to the art of editing SVGs with a little bit of ImageMagick thrown in for good measure.

Ink blots in the copybook

The creative path rarely runs smooth. Pengwyn Parc had a project meeting and decided that they don't like their new logo after all and nobody likes the penguin suits. Faced with a problem like this, they have no choice but to think laterally. Perhaps we shouldn't worry too much about coming up with a complete new image or even a new logo, instead we will look at other ways our team might create alternative designs that could be incorporated into a new logo. These designs could be used in various different ways, on the website and in the product itself, so it will pay to think ahead.

There are several classic approaches to lateral thinking. The first is to write down the problem in your creative diary. Stick a 'Do not disturb' sign on your door, give yourself time to ponder and let your mind wander. Often the process of defining the question, as most programmers know, will give rise to the answer. If not, allow yourself time to chew it over and to consider the ridiculous and apparently impossible. Remember, the editor is banned from creative diary sessions. If that still doesn't help you may want to try some random advice, such as drawing one of Brian Eno and Peter Schmidt's Oblique Strategy cards. If you find yourself coming up against a brick wall, stop going forwards and start looking for ways around the problem.

Our design team disappeared clutching their creative diaries and agreed to meet up in an hour's time. Ashlee managed to come up with some dubious potential project titles: "A little something for the weekend, Reverend?" and "Kneel in Respect (before Pengwyn Parc)". Baz reckoned they should simply call the project "Headache", his idea didn't seem to go down too well with the others. Kenny got some ideas for a rap and Tabitha ended up with a page full of doodles. The doodles aren't really good enough to scan in, they want smart computer graphics, preferably in a format that can be easily resized.

Baz snorts; "I bet Linux doesn't have anything like Corel Draw?"

"No," Tabitha replies thoughfully, "but it does have Inkscape." She clicks on the appropriate menu entry and a new document opens up.

As you can see, our little brainstorming session hasn't got us much closer to a new logo or indeed any semblance of a plot, but we now have some main characters, potential titles and a different approach to making new graphics. Lateral enough for you? Let's see what Inkscape can do for us now.

The Great Inkscape

Inkscape is well documented, start at Help > Tutorials > Inkscape: Basic and work your way through. The tutorials themselves are in SVG format, so you can try things out as you read them. There is a satisfying recursiveness about this. The learning curve for Inkscape is nice and gentle, the tutorials can be worked through in a day, by which time you will already have come up with some pleasing designs and have gained enough confidence to develop your ideas through further experimentation.

SVG stands for Scalable Vector Graphic, which is a standardised format based on XML, so it can even be edited using a text editor if need be and is immediately usable outside of Inkscape. It can also export to PNG and a few other useful formats. Most of the commands are available through logical keyboard shortcuts. You don't have to learn all the shortcuts at once as all the commands are available from menus too. Once a particular tool is selected, all its parameters show up in the controls bar beneath the menus. This can be great for quick edits or putting in specific values.

Like the GIMP, Inkscape has a variety of pre-formatted document sizes including standard paper sizes, CD covers and icons. It also has a nice selection of pre-formatted shape tools that will satisfy the five-year old in most of us and provide a useful way to start playing around with the possibilities of this application. The shapes can be manipulated via their handles, square ones for resizing and round ones for reshaping. The star tool is rather cool and as warned, somewhat addictive. You can make all sorts of shapes from mandalas to randomised ink-blot shapes as well as conventional stars. It is possible to achieve many different effects purely using Inkscape's powerful shape tools.

If the effect you want requires more complex editing you can convert the shape to a path (menu: Path -> Object to Path), which allows you to edit the bézier curves more precisely. Editing bézier curves is a slightly peculiar process if you are not used to it, but it is well worth becoming acquainted with this art if you want to create smart computer graphics. If you click on one of the square nodes, its 'handles' will be displayed along with those of the adjacent nodes either side. By experimenting with pulling out and adjusting these handles, pretty much any shape you imagine can be produced with a little practice.

The calligraphy tool is another great source of immediate gratification. For actual calligraphy, it is useful to provide yourself with some guide lines, which can be pulled out of the rulers on the top and left hand side of the document just as you would do in the GIMP. The tutorial recommends the use of a graphics tablet if you are really serious about your calligraphy, but for the dabbler, the mouse will do just fine. Once you are done, the results can be filled and stroked and the curves edited the same as with the shapes.

Alternatively text can be created using the text tool. Whilst still in text mode it is possible to alter the kerning of the whole text or individual pairs of letters or move them up and down relative to the baseline, which can produce some interestingly funky effects. The text can also be made to follow a path or flowed inside a text box and of course converted entirely into a path. It is useful to remember that SVGs will use the fonts that are installed on the system, so this may change the look of the final design on different systems that don't have the same fonts installed. Converting the text to paths will get round this problem and also allow you to make further transformations.

Format Conversions

Once you are happy with your design save it and you're done, the SVG format can be used in many contexts within Linux. Sometimes you may need to save in other formats or export the image. What's the difference and why are there so many different formats? Let's start by looking at File > Save As... This offers us the opportunity to save as SVG, SVGZ, PS, EPS, EPSI, POV, AI, PDF, DXF or TEX formats, these options save the vector information into formats useable by other applications to varying extents. Exporting is the process of rendering the image into a static bitmap: File > Export Bitmap... The dialog allows you to select a particular area of the image or part of the page and allows you to specify the bitmap size. Best to let Inkscape automatically work out the dpi (dots per inch) unless you really know better. The format you choose is up to you, Inkscape can export to a wide variety of formats. If the graphic is going to be used only within Linux then PNG is probably the best choice. PNG is also a good substitute for the awkwardly licensed GIF on webpages. BMP is the Windows standard as TIFF is for Macs, you don't really need to know about any other formats unless you know you do.

If Inkscape can't handle the conversion you can always import the bitmap into the GIMP and perform further alterations before saving it into the wide array of formats that the GIMP supports. You can even save it as an ASCII art file in TXT format if you really want! If you want to apply the same operations to many images or repeat a specific operation at different times to the same or different image, it is worth knowing about ImageMagick. This allows you to do neat stuff like converting all your screenshots into a directory of numbered thumbnails using one single command:

$ convert '*.png' -resize 100x100 thumbs/%03d.jpg

The documentation for ImageMagick is pretty comprehensive, in combination with Inkscape and the GIMP it should be possible to realise any static 2d image you can imagine. It shouldn't take long before you are able to produce suitable images to brighten up your webpages and promotional materials. I have only given the briefest of introductions here, over time you will discover the wealth of functions these applications have to offer.

Of course, Pegwyn Parc are impatient; Baz is already designing a 3d role-playing adventure game in his head; Ashlee thinks they should do a Flash animation for one of their songs; Kenny wants to broadcast their next gig on the internet. Tabitha reminds them that they have a lot to learn before they are ready to launch a full-scale multimedia production. However, if they take it step by step, building on the knowledge they already have, they should be able create something usable and professional looking without having to get bogged down in details.

Happy Creating!


Oblique Strategies

Inkscape documentation

Introduction to ImageMagick
Command Line tools