Social Media Design 101

Lecture: Creating web site graphics with the GIMP. You can also create banners / logos using the GIMP-based CoolText graphics generator » http://cooltext.com MS Internet Explorer has notoriously lagged behind other browsers in its inability to properly handle transparent PNGs. You’ll find a workaround in the article ‘Cross-Browser Variable Opacity with PNG: A Real Solution’ » http://www.alistapart.com/articles/pngopacity Workshop: Introduction to GIMP.

Image processing with the GIMP

This tutorial is intended as a very rudimentary introduction to image processing and, in particular, image processing with the GIMP. Below, therefore, are some further documents that you may find useful:

• GIMP web site: Gimp.org
• Tutorials: Basic tutorial and Grocking the GIMP
• Listings of further tutorials can be found at: The GIMP Tutorials Pointer Page
• A very good tutorial for graphics in general can be found at: http://webdevfp.uwyo.edu/webdesign/default.htm
• Lots of good tutorial videos on YouTube and elsewhere. View this one for starters:

Why choose GIMP rather than Photoshop?

• It’s free! (it’s ‘open source software’)
• It has more than 220 plug-ins, many of them more powerful than Photoshop’s
• It predominantly targets web design in a way that Photoshop doesn’t; hence it has tools that Photoshop lacks
• Layers are handled much more flexibly in GIMP than in Photoshop
• GIMP has a more intuitive way of dealing with patterns (thumbnailed in a separate window) — simply click to select
• GIMP has far more extensive scripting capabilities
• GIMP can interface directly to a web database
• GIMP is faster than Photoshop

Why might you choose Photoshop rather than GIMP?

• Photoshop supports CYMK and pre-press spot colors such as PANTONE; GIMP doesn’t. But that’s an issue only if you’re publishing on paper rather than on the web.

See comparison between Photoshop and GIMP at: http://www.linuxorbit.com/features/terril1.php3

File formats for the web

The GIMP can open and manipulate a large number of file formats. Common formats are TIFF, BMP, PSD (Photoshop), FaxG3, and TGA, as well as the GIMP’s native file format XCF. You can also open, view, and print PostScript and PDF files with the GIMP. Only three file formats are used within web pages, however: GIF, JPEG, and (more recently) PNG.

GIF (pronounced “giff”) is best for small graphics, sketches, simple non-photographic images, and is the only format supporting (and therefore the one to use for) transparency and animation.

JPEG (pronounced “jay-peg”) is best for photographic images and TrueColor web graphics.

PNG (pronounced “ping”) Intended as a replacement for the proprietary CompuServe GIF format. Rarely used so far. Web reference: Greg Roelofs, PNG: The Definitive Guide, O’Reilly & Associates, 1999

Image types

The GIMP provides three types of images: true color, grayscale and 8-bit indexed color images. An alpha-channel can be added to each of that three types so that we have six types altogether. The differences between these six types are shown below:

TrueColor images

Each pixel of a true color image consists of a RGB-triplet. A RGB-triplet needs three bytes in memory, because each red, green and blue part of a color can take values between 0 and 255. These parts are also known in the GIMP as color channels. With three color channels you can compose up to 256 * 256 * 256 = 256ˆ3 = 16.777.216 different colors – more than enough for smooth coloring.

Grayscale images

In contrast to True Color images a pixel of a grayscale image needs one byte in memory only. That is, because you have 256 different values for brightness: 0 represents black, 255 represents white.

Indexed color images

Indexed color is a subset of RGB. Indexed formats are mapped to a smaller color palette – 256-colors or less. All GIF images–whose bit depths can range from 1 to 8–are, by definition, indexed images.

The default for GIMP is RGB (TrueColor). To create an indexed image (an image with a small, fixed set of specific colours) you will first create it as RGB and then convert it. (You can’t start out with an indexed image since GIMP obviously can’t predict exactly which colours you’ll want to use in your image.)

Working with the GIMP

When you open the GIMP application, you will choose either to create a new image file or to open and work with an existing image. To open a new image file, click the File menu and select ‘New’. The dialog box, right, will appear: select image size, resolution (standardly 72*72 for the web), image type, and fill type (i.e., the colour of your blank ‘canvas’), and then click OK to open the new image. To close it, click the ‘Close’ box, top right, or right-click on the image and select File>Close.

Selecting an image from your hard disk

You can open a graphics file from the File menu, which will pop up the Load Image dialog box: change directories in the left hand window, and then select a graphics file from the right hand window. Alternatively, go to the Xtns menu, and select ‘Guash’. The GIMP image browser Guash allows you to display the images in any folder as thumbnails. Click once on a folder or image, in the Guash browser, to select it; click again to open it. If you double-click an image, it will open in a new GIMP window. (You can also ’shortcut’ to folders using the Jump button, top right of the browser window.)

Using the tool palette

Double-clicking on any tool will open the dialog box of options for that tool. The first six tools in the toolbox are selection tools: rectangle, oval, lasso (irregular hand-drawn region), magic wand (or ‘fuzzy select’, as it’s called in the GIMP: for selecting contiguous regions), regions using Bezier curves, and the ‘intelligent scissors’ (shapes from image).

The next is the Move tool, used for repositioning / dragging selected areas or layers across the image. The magnifying glass is the ‘zoom’ tool. The knife is the ‘crop’ tool. Next is the rotate / scale / shear / perspective tool. The next (the 2-way arrow) is the ‘flip’ tool: click to flip horizontally; CTRL-click to flip vertically. If no selection is made with a selection tool, the flip is applied to the whole image; otherwise only to the selection.

The T is the text tool; followed next by the colour picker: click on the image with this tool to change / select either foreground colour or background colour (see more later). The next, the paintbucket, is the ‘fill’ tool: to fill an area with a colour or pattern. And next is the gradient tool.

In the next row are respectively: the freehand pencil tool, the paintbrush, the eraser, the airbrush, and the ‘clone’ tool. They’re all self-evident except for the last: this allows you to paint with patterns or with parts of an image (further explanation later in this tutorial).

The next row of tools is not so obvious, and all will be explained later in the tutorial. The first is the ‘blur / sharpen’ tool; the second is ‘draw in ink’ tool, similar to the pencil but ‘painting’ freehand lines. The third is the ‘dodge / burn’ tool; the fourth the ’smudge’ tool. The last is a tool for measuring distances and angles. At the bottom of tool pane are, left, the foreground and background colour selectors and, right, the brush, pattern, and gradient pallettes (they’re called ‘Dialogs’ in the GIMP.)

In the following sections we’ll look at each of these groups of tools in a little more detail.

The Selection Tools

Holding down the Shift key while selecting will allow you to select two or more different areas at the same time. Holding down the CTRL key and dragging a second selection over the first will subtract the latter area from the initial selection. Holding down Shift-CTRL while selecting will leave you with just the intersection of the selected areas. [The best way to remember this is that, in general, the Shift key adds and the CTRL key substracts.]

The selection ‘floats’ until it is either anchored in the background or in a new layer. To create a new layer with it, right-click and select Dialogs>Layer, Channels & Paths (or Dialogs>Layer, Channels & Paths) — see figure, left. But if you don’t want, at this point, to create a new layer with it, yet still wish to save it for possible use later, you can preserve it in an ‘alpha channel’, a storage place for selections. In this case, right-click on the selection and choose Select>Save to Channel. You can later retrieve it with the Channel to Selection command.

For most selection tools you have the option of ‘antialiasing’ (softening the edges between high-contrast areas) and ‘feathering’ (making peripheral parts of the image progressively transparent, like old bromide photographs — see the example below, created using first the lasso tool with feathering and then subsequently the oval selection tool). Feathering is also useful for selections that you wish to blend in with a background image (i.e., for ‘blending’ two images together.)

The rectangle, oval, and lasso selection tools are fairly obvious and probably don’t need explanation. The more interesting tools are the Magic Wand (‘fuzzy select’) and the Bezier tools.

The Magic Wand enables you to select, with one click, whole areas of similar colour without a contour, i.e., up to the point where there is a marked contrast of hue between one pixel and its adjacent pixels. When ‘Sample merged’ is checked, it will select across all layers in an image; unchecked, it will select only from the active layer.

The Bezier tool gives you a little more control over your selection: you trace out an outline by clicking around a figure, finally closing it by clicking back on the start point (a sort of ‘drawing by numbers’). This outlines the selection with a sequence of straight lines. (If you make an error of placement, simply press CTRL and drag the point to where it should be.) If you then want to smooth out any parts into curves, simply select any point by clicking on it: two little handles appear, and you can create curves by dragging the handles (long for flattened curve, short for steep curve). When you’re happy with the shape of your Bezier curve, simply click within it to select it.

Finally, the ‘intelligent scissors’, rather like the lasso in some respects and like the Bezier curve in others, allows you to create a rough outline around an area, from which it makes a ‘best guess’ of what shape you intended.

The Paint Tools

Characteristically you will be using GIMP as an “image manipulation program” (which is what the ‘IMP’ part of the name stands for). But there are also tools such as Gfig for drawing (Filters>Render>Gfig) if you want to use them. Keep in mind, however, that the GIMP works with raster (bitmap) images rather than vector graphics, so you will (as it were) be ‘drawing on canvas’ in a way that cannot subsequently be resized or edited.

The best way to learn what the tools can do is probably to simply play around with them (that’s precisely how I learnt, myself). Below, however, are some brief notes on each:

The first of the paint tools on the pallette is the ‘color picker’. Seleting this tool, and then clicking on an image, will set the current paint colour to the colour of the pixel you have just clicked. (Clicking on the foreground/background icon, bottom left of the pallette, will set the colour of either foreground, if topmost, or background.) When you click, a dialog box pops up, showing the RGB values, The Alpha value (if any, and the hex triplet (used to set web colours in HTML). This will be, until you change it, the colour applied by any paint tools you subsequently use.

The ‘bucket’ (or ‘fill’) tool will fill a layer that already has colour or alpha information. Double-clicking on the tool icon, a dialog box will pop up. The value of ‘Threshold’ determines the area size of the fill: working in much the same way as the Magic Wand, it will spread outwards up to the point where the colour or alpha value becomes too ‘different’. The value of Opacity will determine the transparency of the fill. Select the type (FG = foreground colour, BG= background colour) of fill; selecting Pattern as type will use the selected pattern (from the Pattern Selection pallette) as the fill.

By default, the Gradient tool fills a selected area with a gradient blend of the foreground and background colours. (If no area is selected, then the gradient will be applied to the whole image.) In the option dialog, you can also set the gradient to blend from foreground colour to transparent; you can set the opacity of the gradient fill; and you can set its shape.

An interesting blend option is ‘FG to BG (HSV)’ (HSV stands for Hue, Saturation, Value). HSV is based on a 360-degree ’spectrum circle’: FG does simply make a transition form, say, red to blue via shades of purple but, rather, follows the colour circle from red through the full spectrum of yellow, green, and cyan, until it reaches blue. The image to the right used first a ‘FG to BG (HSV)’ blend with, subsequently, the SuperNova filter applied to the centre of the image.

Text Tools

The text tool in the tool pallette will create text as a ‘floating selection’ until it is ‘anchored’ in a layer: ensure, however, that you select the right layer before you type the text, as that will be the layer it will be anchored to! To select the layer, choose Layers>Layers, Channels & Paths, and then click the layer you wish it to be written to. You can otherwise generate text graphics as new layers with either Dynamic Text (Filters>Render>Dynamic Text) or FreeType (Filters>Render>FreeType). Dynamic Text is a GIMP 1.2 plug-in that works like the text tool but allows you to write multi-line text that you will also be able to modify later if you wish. FreeType is a very flexible tool for designing text graphics, allowing antialiasing, kerning, rotation, X-Y scaling, shearing, and letter spacing.

Filters

The filters are too numerous for me to give descriptions of each one of them. And, in any case, the best way for you to discover what they can do is for you to play around with them yourself.

Using Script-Fu to Automate Tasks

Script-Fu is a set of ‘macros’ (routines) for automating common tasks such as the creation of buttons and logos.

Creating Client-side Image Maps

An ‘image map’ is quite simply a graphic over which you have defined localised ‘hotspots’ that will, on clicking, function as links to other locations (e.g., to other HTML files) or that will trigger actions / behaviours (e.g., using Javascript). To get some practice at generating image maps, you might begin by drawing a simple image, or importing a ready-made image to work on: you will be able to define ‘hotspots’ on this image. (In order to help you grasp how imagemaps work, I’ll start by describing the process as though one were doing it ‘manually’, and then subsequently show how one would do it using the ImageMap filter in the GIMP.) The example I’m going to use in this tutorial is in fact the GIMP tool pane (see image, left), which we shall turn into an image map for associating tools with their explanation. In this example, I’m mapping only the rectangular selection tool, the text tool, the current brush shape, and the foreground/background colour selector. Click each of them now to test it out. The first step is to find and note the following coordinates for each area in the image that you will define as a ‘hotspot’. For rectangular shapes, they are the following:

• the x-coordinate for the top left pixel of the selected area
• the y-coordinate for the top left pixel of the selected area
• the x-coordinate for the bottom right pixel of the selected area
• the y-coordinate for the bottom right pixel of the selected area

For circular shapes:

• the x-coordinate for the centre of the circle (i.e., pixels from the left of the image)
• the y-coordinate for the centre of the circle (i.e., pixels from the top of the image)
• the radius of the circle, in pixels

For irregular polygons, the coordinates are a sequence of pairs: x1, y1, x2, y2, …, xN, yN, where each pair represent the x-y coordinates of a point in the polygon. The first x and y coordinate pair and the last should therefore be the same in order to close the polygon. Then write the coordinates into a matrix with the following format: <AREA + shapename + COORDS= + list of coordinates + HREF + url> such as the following:

<AREA SHAPE=”RECT” COORDS=”5,58,32,79″ href=”rectSelectTool.html”>

<AREA SHAPE=”RECT” COORDS=”31,109,61,134″ href=”textTool.html”> <AREA SHAPE=”CIRCLE” COORDS=”98,207,13″ href=”currentBrush.html”> <AREA SHAPE=”POLY” COORDS=”14,194,44,194,50,212,67,212,67,234,34,234,34,221,13,221,14,194″ href=”FgBgCols.html”> This will then be enclosed within the tag <MAP Name=+map-name> … </MAP> and followed by the image element for the image file, for example: <IMG src=”+imagename” border=0 USEMAP=”#+map-name“>

Creating Client-side Image Maps with the GIMP

There is an imagemap creation tool in the GIMP (Filters>Web>ImageMap> that …