This chapter of the Creative Desktop will provide a gentle introduction to: Bitmap editing with The Gimp; Importing images from a digital camera or scanner; Photo management with gThumb or similar; Vector artwork and illustration with Inkscape and Font management and creation. Everything you need to know to get you started on the path to producing professional quality photos and graphics.
The first challenge facing us is that what it takes to be creative can seem almost diametrically opposed to the usual geek logic prevalent in Linux-using circles. For many people, creativity begins in blue-sky or cloud-gazing mode. So we shall begin by taking a break from the computer and indulging in a gentle 'mind-shower' or 'brainstorming' session. The time and effort spent reading online manuals, reconfiguring your soundcard or kernel or whatever is all time lost for staring out of the window and thinking brilliant creative thoughts. Sometimes the embarrassment of riches offered by Linux can be the very thing that gets in the way of this.
My favourite tool for this job is the creative diary, for which I like to use a physical A4 book with lined pages and an analogue inscription tool (aka: a pen). Computers tend to force the mind to work using rather linear, granular logic. It is useful for the creative process to get away from this for a moment. Open up a blank page and start writing. Write anything you like, your exact thoughts precisely as you think them, disable your internal editor for now and simply fill up three A4 sheets or the equivalent with mental verbiage. Close, file and forget.
This is a very useful exercise first thing in the day or whenever you need to clear your mind. The usefulness of this technique will become apparent the more you do it. The most important part is to get into a flow with it and not worry about the results or try to edit your thoughts in any way. In its purest form you would never look at these notes again and possibly destroy them immediately. That is one approach, I like to use my diary as a store of useful ideas that I can draw upon later in the creative process.
This is where we define our project and indulge in the flights of fancy and other emotional predilections that give our project meaning. Too many technology driven projects suffer from being proof-of-concept pieces. This is a worthy exercise in itself, but we need to focus on our final product, music CD, game, cartoon series or whatever and the message that we want to get across. Firstly the project needs at least a working title, as well as a central character or two and some sort of seed plot or motivation behind the story. Did I mention fun? One of the most important reasons for using Linux creatively is not only that you can control every aspect of the project without having to ask anyone's permission, which in itself is pretty cool, but also that it is simply great fun.
For the purpose of this series we need a pretty broad-based project to use for our examples. I propose an all-singing all-dancing anthropomorphic gang of Linux advocates who are preparing to storm the world with open-source multimedia joy. For want of a better moniker we shall call our mythical multimedia production crew Pengwyn Parc. Great. They are all set to make it big on the international circuit now. They've got the songs written and rehearsed, they've got the dances choreographed, the video storyboarded and the penguin costumes. All they lack is a production budget. Inspired by the thought that it's possible to get a number one hit without the backing of a major record company these days, they've holed themselves up with a computer they saved from the skip and installed a whole load of free software on it in their hastily converted bedroom studio. Now they are ready to unleash the potential of open source software on the world, but where to start?
Preparing graphics and photos is probably one of the most common tasks you will need to deal with, so the GIMP is an appropriate place to start our adventure into the creative side of Linux. The application itself is one of the oldest flagships of creativity, without which our screens would be drab places indeed. Despite the awful acronym, it has become the primary graphical manipulation tool on the Linux desktop and in many cases it is just the tool for the job. Once you realise that everything you see on your screen can be manipulated using The GIMP, its omnipotence in the visual realms becomes very relevant.
So, let's fire up The GIMP from Graphics > GIMP Image Editor and get to work.
If you have never used The GIMP before you'll need to go through the User Installation dialog. It is normally fine to click Continue on each of the panels, when it is done The GIMP should boot up nicely and you will be presented with the two vertical toolbars and the Tip of the Day panel, get rid of the Tip of the Day for now, you can always read that later. At the top of the main column, which will probably be on your left, are three menus: File, Xtns and Help. Select File > New ... and you should be looking at a dialog called Create a New Image. From the drop down box marked 'Template' We're going to choose
Web banner common 468x60. One day I'm going to find a use for the
US standard Toilet paper setting I'm sure. Click OK and you will be presented with a nice blank banner ready for your smart new logo.
Back on the main column, you will see an icon panel beneath the main menu, this is your Toolbox, click on any of these and the various associated options will be shown in the bottom half of the column. We're interested in the Text tool right now, which appropriately looks like a T, and sensibly, this is also the keyboard shortcut. If you place the cursor over your new banner it will turn to an I-beam indicating that it is ready to insert text. If you click on your blank canvas, somewhere to the left I'd recommend unless you're writing in Hebrew, the GIMP text editor should appear. Type in some words. Great, now something should show up on your new canvas.
Going back to the Tool options on the bottom half of the main column, we can now adjust the text properties, find a nice font, resize and colour it to taste. You will notice an interesting option at the bottom of the list - Create path from text - click on it now. If you look over at the second column the Layers,Channels,Paths dialog should be prominently displayed. You will see that the GIMP has created a new layer for your text leaving the background blank. This is good. This dialog has four tabs which allow you to access the Layers (what you are looking at now), Channels, Paths and Undo history. Let's look at the Path you've just created by clicking on the Paths tab. You should see the path listed in the dialog box. By clicking on the blank space furthest to the left it is possible to view the path. Bear in mind that the path, similar to making a selection, won't affect the image itself unless you do something with it. The simplest thing to do is to use it to create an outline for the text. If you right-click on the entry in the dialog box it will bring up a context menu from which we want to select Stroke Path ... Give it a line width of 1 pixel (
1px) and apply. This should create a black border round your text. If you are not happy with your results you can always Undo (Ctrl+Z or the first item in the Edit menu) and reapply. Try experimenting with different foreground colours and line widths until you are happy.
Before you go much further save your work. Get into a habit of doing this every time you sit back from the computer and think 'What next?'. You will thank yourself for saving often. Save it as a .xcf - the native GIMP format while you are working on it, we can export it later.
You may want to experiment with the move tool (the arrow-headed cross icon or M key) to position the text where you want it, you can also use the arrow keys on your keyboard for this. Next we're going to need a cute anthropomorphic penguin character (of course). I've got one, but it's part of another picture. No problem, we can open up the image in the GIMP and cut around the image using the intelligent scissor tool, the scissors with a wiggly line icon that is labelled Select shapes from image. You will notice that all these tools have keyboard shortcuts too, this one is I. Once we have the shape outlined by clicking on various points around it, clicking in the middle of the shape selects it. From here we can Edit > Copy and Paste as New from the menu and save that as a separate image for now. You may want to use the Eraser tool to clean it up a bit. I generally prefer a small hard-edged circle 3 pixels wide and enable the Hard edge option for cleaning up work.
Let's leave that open and go back to our logo. This is where we have to start remembering which window we have in focus, which layer we are working on and what we have selected because changes only affect the selection on the active layer. If we right-click on the layers dialog again this time we can select New Layer ... it should be the same same size as the image by default and we want the Layer Fill type to be Transparency. Now our changes will only affect the New Layer. Now we can go back to our penguin picture and Copy it. It may be a good idea to resize it before we do that, bearing in mind that this banner is only 60 pixels high. Image > Scale Image ... will bring up a suitable dialog. If you leave the x and y coordinates locked, then changing one will automatically adjust the other. Then Select > All and Edit > Copy. Bring the banner back into focus and make sure the New Layer is still selected. Edit > Paste and then use the Move tool to position it where you want. You can then either right-click in the layers dialog and Anchor Layer or click in the image when you get the anchor cursor. Don't forget to Save.
For a final touch we want to brighten up the background, for which we're going to use a pattern fill. Select the paint bucket (Shift+B) from the toolbox and choose Pattern fill from the options underneath. Select a suitable pattern, I chose 'Pool Bottom' for this, now go back to the layers dialog and select the background. This step is very important, we don't want to wipe out what we've already done. Then you can click almost anywhere on the canvas and flood it with the chosen pattern.
I'm not happy with the contrast so with the background layer still selected I go to Layer > Colours > Hue-Saturation ... and play around with the values. I give it Hue
+30 and Lightness
-70 Leaving the saturation alone. Much better.
We now have a basic logo, which will serve us for now. We can export it using the File > Save as ... dialog and selecting a file type of something like PNG image. This will render it into a format usable by other applications. You will be prompted for various options, the defaults are probably going to be fine for most purposes.
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.
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.
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.
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.
Font management and creation is a subject which has long been shrouded in mystery. This chapter hammers out the truth about typefaces and guides us into our first foray with fontforge
Tabitha sits back from the screen and screws her face up again. "I don't like any of these fonts!". She has been wrestling with the design of Pengwyn Parc's new home page all morning.
Baz looks over her shoulder, "We could download some new ones off the Internet, there are loads of free fonts out there."
Tabitha tuts, "Yeah but most of them are reverse-engineered rip-offs of someone else's design."
"So what?" Baz retorts "Fonts should be free."
"Yeah, but we don't want to be using the same typeface as everyone else. Why don't we design our own? Then it would always be unique."
"Can you make your own fonts using Linux?" asks Ashlee, suddenly interested in the conversation. "Having our own designer typeface for our promo graphics would be really cool!"
"Yeah sure," sighs Baz, "Using FontForge, it's not that hard to actually do, but it is very time-consuming. And then you have to install the flipping things. Why don't you just use Tahoma or Verdana or something?"
"I'm already using Bitstream Vera Sans for the text, that's fine, and there's always Nimbus or Luxi, so there's no need to use awful fonts like Helvetica or Arial ever again!"
Ashlee makes sicky noises at the mention of Arial while Tabi continues enthusiastically; "I want something new for the headlines and titles and I just don't like any of the fonts we've got installed. I bet we can get our heads around it if we take it step by step"
Baz shakes his head in disbelief.
"What's a typeface?" asks Kenny.
A typeface is a collection of fonts with a similar or compatible visual style. A font is a collection of renderable glyphs organised into characters and a glyph is made up of the contours and shapes that represent a character, the same character can be represented by several different glyphs. Computer fonts must also contain information on how to map an input string of bytes into an output display of visual glyphs. This mapping is called an encoding. A font may also contain information on how to compose ligatures and accents.
The study of fonts and typefaces can become quite complex and esoteric, but fortunately it is not necessary to get involved in too much detail in order to get started. In this article we will be taking it nice and easy. That said, in order to produce results that look professional, clean, beautiful and comfortable, it is worth learning a little more about how fonts are displayed. The documentation that comes with FontForge is pretty extensive and comprehensive, so we'll just deal with the basics here.
Fonts are stored using various different File types:
The size of a font is usually measured in points, which are print dots, there are exactly 72 points to an inch. Ordinary text is usually between 9 and 12 points, headline fonts can be up to 72 points and larger. Pixels are screen dots, screens can vary in resolution from 72 to 96 dpi and beyond. Printing is usually done at upwards of 300 dpi. It is important to understand the differences between the available mediums.
The team spend the rest of the afternoon drawing alphabets in their creative diaries with a variety of black felt-tips.
"Make sure you leave enough space between the lines and keep the letters well separate, because we will need to be able to cut them out individually." Ashlee points out.
Tabitha scrumples up a page of her diary and starts again. By the end of the afternoon after several false starts, they each have a potential alphabet designed. They all agree that Kenny's is the neatest, so they put it in the scanner and import it into GIMP using the File > Acquire > XSane > Device dialog and following the instructions. If you don't have a scanner set up there are many ways of creating your letters, including directly in FontForge using your mouse and bézier tools, so don't despair!
FontForge is George Williams' free Open Source UNIX-based font editor for type 1 and TrueType fonts, previously called Pfaedit. It also does TrueType collections (TTC) and opentype fonts. When we open up FontForge from the desktop applications menu we are presented with an Open Font dialog. Click on New and you will be presented with an empty font view window. Double-clicking on a glyph will bring up an outline glyph window. This is where you edit the bézier splines that make up the individual contours. We can give our new font a name by clicking on Element > Font Info... We can also set a copyright notice here and rather a lot of other information which affects the whole font. The defaults are suitable for PostScript fonts, so we will accept them for now. TrueType fonts may benefit from different settings, but fortunately FontForge usually manages to do the right thing. You may also wish to use Encoding > Reencode to change what characters are available in your font. FontForge generally creates new fonts with an ISO-8859-1, which contains (most of) the characters needed for Western Europe.
Tabitha found that simply copy-pasting the letter shapes from GIMP into FontForge didn't really work the way she had hoped, so she had to split them up into separate files using the GIMP and then import them individually into FontForge using the File > Import... function. The internal text format for fonts is called SFD. It is a format that is acceptable for communicating and storing fonts. Now would be a really good time to save your work in that format (File -> Save).
Now we need to resize the bitmaps to fit. Double-click on one of the glyphs again and select Back from the Layers palette, this will enable the background to be edited. You can then drag the image around so that it sits on the baseline and fits inside the 1000x1000 box in an appropriate manner. If you are working from scratch it is recommended to create a base glyph with all the lines your letters will need using the bitmap editor, a circled cross is often a good starting point, and then edit that to create all the letters you require, starting with A, R. O. H & T. You will notice that many of the letter shapes are related to one another, so new glyphs can be created by flipping shapes on the horizontal or vertical axes. This technique can be used to fill in glyphs that are missing from the original design and will produce consistency in the final look of the font.
If you have the autotrace program installed you can generate an outline from the image using the menu entry; Element > AutoTrace. Otherwise you will have to add the points yourself. Make the Foreground layer active and select the curve point tool from the Tools palette (The round circle on a line). Click around the shape on the corners and straight lines, preferably in a clockwise fashion, making sure you close the path by adding a new point on top of the old start point. It is then possible to fine tune the contours using a combination of the Points menu and dragging the control points around with the mouse. Remember to select the Pointer tool for this bit. The representation of the glyph will change in the font view window as you edit, so you can easily check your progress.
Note that the glyph for 'O' has two contours: the inner and outer circles. If all you see is a big black dot it is most likely to be because the inner contour is going in the wrong direction in relation to the outer contour. This is easily solved by flipping the direction of the inner contour. Within FontForge all outer boundaries must be drawn clockwise, while all inner boundaries must be drawn counter-clockwise. This condition applies to any glyphs involving enclosed spaces. The command Element > Correct Direction can be used to automatically correct this kind of error.
Once you have created the glyph shapes, the next task is to specify the spacing between the glyphs. The metrics window can be brought up from Window > New Metrics Window. From here you can adjust the spacings of each letter relative to the others either by typing values into the text fields below or dragging the shapes and lines into the desired positions. The widths of the glyphs and the kernings can be set automatically from the Metrics menu, but this can produce some alarming effects. Kerning is the process of setting the spacing between specific pairs of letters. This can take quite a bit of fiddling around and it is best to get the individual glyphs the right width before attempting to set any kernings.
FontForge also has facilities to create hints to help the font renderer find horizontals and verticals, and produce consistent serifs and stem widths at small point sizes. It is possible to create ligatures, accents and alternative glyphs as well. It can also deal with right-to-left and vertical alignments and most conceivable encodings. It can handle Chinese, Japanese and Korean fonts as well as Arabic type styles.
In order to make your font usable, you first need to save it in a standard font format (File > Generate Fonts...). Although it seems like there are a bewildering array of choices, in fact you want to Choose
PS Type1 or
TrueType in most circumstances. The default setting will serve us perfectly well for now.
Create a new directory for your fonts. Fonts appear to be stored in an alarming array of places, these can vary from distro to distro, so it's best to check your documentation for this. Be aware that some of these instructions may have to be carried out as root.
Don't touch the usual directories under
/usr/share/fonts/, which contain the base X11 fonts and instead create two new directories for selected TrueType and Type 1 fonts, for example
/usr/local/share/fonts/truetype/. You can also put private fonts in
~/.fonts/ if you want.
Now, either copy all the TrueType fonts (*.ttf) that you need into the
truetype/ directory or copy the Postscript fonts (*.afm and *.pfb) into the
type1 directory. Next, we need to tell X about your fonts. The process is slightly different for each format.
The old way of installing TrueType fonts involved entering the following commands in sequence from a terminal window:
ttmkfdir > fonts.scale
PostScript fonts used the
type1inst command instead of
If you view the directory you should now see two new files among the truetype fonts - "fonts.scale" and "fonts.dir". These files simply contain a list with the full font names for each TrueType font.
Now we need to add these new directories to the font server path - the list of locations which XWindows will search for fonts. Edit the X configuration file (
/etc/X11/xorg.conf) and find the "Files" Section; in most standard versions of this file it will be near the top. In this Section is a list of FontPath entries. All we need to do is add our new directory to this list, by adding a couple of lines like this:
64 Studio users can regenerate all the necessary files simply using fc-cache with the -f option. Should that fail you may have to edit the file
/etc/X11/xfs/config, find the line which starts with "catalog=", and add your directory at the end of the list, separated by a comma. There may be other files that you need to edit in order to make the fonts fully available to all applications. The fonts for OpenOffice.org usually need to be configured separately. You really must check your documentation for this part.
You will probably need to restart the font server for it to register the new fonts. The easiest way to do this is to log out and back in to your desktop. You may need to run
xset fp rehash as well. You can also easily add the new font paths to the running instance of the X server with the xset utility, like this:
$ xset fp+ /usr/local/share/fonts/truetype
$ xset fp+ /usr/local/share/fonts/type1
Once you've done this you can use
xset q to verify that the new path exists in the running server's font list. You can test it now by running the
xfontsel program from the terminal, or run the Font Selector program from the Utilities menu in GNOME. You should immediately see the name of your new font in the list. Your work is done and your new font is now ready to use.
Frequently asked questions about fonts