y y y y y y y y y y y

Lesson #1 - Downloading & Setting up Gimp Lesson #2 - How to use the GIMP Part 1 (the Gimp Interface, Dialogs) Lesson #3 - How to use the GIMP Part 2(Working with Files) Lesson #4 - GIMP Selection Tools Lesson #5 - GIMP Bezier Tool Lesson #6 - GIMP Zoom, Move, Crop Lesson #7 - GIMP Transform Tools Lesson #8 - GIMP Text Tool Lesson #9 - GIMP Fill & Gradient Tools Lesson #10 - GIMP Drawing Tools Lesson #11 - Working with Layers

How to start using the GIMP - Part 1

Either watch the tutorial above OR follow along step by step as shown below. This tutorial will introduce you to the GIMP interface and some of the basics you'll need to know when using the GIMP. This is a 2 step tutorial. 1) Open the GIMP, if it isn't already (Double click on the GIMP icon on your desktop). 2) Click on File > New

3) In the properties box, pick the size of the canvas you want to work with.

For our example, we'll use 320 x 320. Change the next blue down arrow to pixels as shown. Then click on + Advanced Options and change the resolution to 72 x 72. The 300 x 300 is used more for print media than for web media. 72 x 72 is the standard for web graphics and results in similar quality and much smaller file size. 4) Click OK. 5) This brings up a new canvas window. You can now choose a tool from the menu and start drawing or designing or editing images. 6) Please note all the tools available to you. For example, if you wanted to use the paint brush tool, simply left click on the paint brush icon.

Doing so will also create a properties box for the specific tool at the bottom of the GIMP window.

These properties will allow you to change the brush size, the opacity, the mode, the pressure sensitivity (if using a graphics tablet), also properties for Fade out, Incremental and Use color from gradient. 7) Now look at other options in the GIMP main window. Below the tools are the a couple important items.

Where the yellow arrow is pointing, you can click on selecting a pattern, or selecting a brush (black dot with white square) or you can choose to select a gradient. These all currently show the active selections. 7) Ok, let's pick a color to paint with.

In this example, the foreground color is black and the background color is white. The foreground color is the color you would paint with if you started painting on the canvas. If you click the two white arrows, you'll automatically switch the foreground and background color. If you want to paint with a different color simply click anywhere inside the big black box (foreground color).

You can then pick and choose any color you'd like. Play around with where to click your mouse and you get lot of different colors to choose from. Once you've found a good color, then click OK. 8) Now take your mouse over to the canvas and start having some fun drawing on the canvas with your new color. This tutorial is continued in Running the GIMP - Part 2

How to start using the GIMP - Part 2 (Opening and Saving Images)
There are a couple other important things to know when using the GIMP. Namely opening a file and saving a file. 1) To open a new canvas, just click File > New. 2) To open an existing images, click on File > Open then select the file you would like to open in GIMP 3) Saving an image is a little more complicated. That's because you'll need to know what the different file formats for graphics are.

Each file format has unique properties and are best suited for specific images. The file formats we're going to use with the GIMP are JPEG, GIF and XCF .

JPEG or .jpg - This is a graphics image format. You will see files saved as
filename.jpg. And the logo in Windows XP for a JPEG image is shown below:

JPEG allows you to compress the image without losing a lot of quality in the image. This helps makes the files smaller and faster to load. It is used primarily for computer graphics. And graphics that contain more than 128 colors. It's great for photos, pictures, gradients, etc. Anything that uses lots of different colors. Printing on paper with JPG will often times NOT give you the best results due to the file compression. And because you'll probably already changed the resolution to 72 dpi. In the GIMP saving a .jpg file is done by choosing File > Save As. Then select the File Type by clicking the plus button and scrolling down to find the JPEG image. Clicking on that will allow you to save the file as .jpg. Once you click on it, then click SAVE in the lower right.

After clicking Save, this brings up another set of options. How much you want to compress (or make the file size smaller) the image. For most images, I keep it around 80, but you can get more specific and try lower (lower = smaller size, but less quality). For a quality of 80, we've reduced the orginial image from 806 Kb to only 8.6 Kb. That's serious file compression and you really haven't lost any quality.

Click on Show Preview in image window. This will allow you to see what the image looks like compressed. If you compress it too much you'll lose quality and get something messy like:

When you see this loss of quality, it's known as artifacting. It just means the image has been compressed too much. Once you find a good file compression quality, then just hit OK and you'll have saved your new file as a .jpg image.

.GIF - This is another commonly used file compression format. This has some different
properties than jpeg, however. It's best to use .gif when you have a limited amount of colors, no gradients and no complex shading. You'll also see a different icon for .gif images in Windows XP. It will look like this (the file name below is stick-figure.gif):

Two main differences than jpeg. One is that you can save .gif files as a transparent image, you can't do that in jpeg. Transparent images are images where you can see the background through the image. It's great for logos, simple colors, basic shapes, etc, because you can put it anywhere and it will instantly blend with your background.

For example, if your background was red, and you saved a .gif transparent image, then you'd get whatever your image was with a red background. It would blend easily. If you save a .jpg image, like the stickfigure below, then you'd get your image with a solid white square on a red background.

Transparent .GIF

.JPG

So the image on the left is saved as a transparent .gif. Notice how it blends into the background of this red table. The .jpg is not transparent and will show up as a white square block. (If you really wanted to use a jpeg image, you have to manually blend it to the background by selecting the white color in the background using the GIMP and filling it with the same color as the table). Another feature with .gif file format that you can't do with JPEG is animation. You can put together several frames of an image and animate them by saving them as an animated .gif.

Animated .GIF

.JPG

The GIMP actually has a special animation package you can download and use to create animations.

Also .gif animation is easily done in Fireworks and PhotoShop. And if you are really into animation, then you should simply use FLASH by Macromedia. This will accomplish smoother animation with a much lower file size.

.XCF - This is the last image file format we'll cover. This is the default image that the
GIMP uses. If you're going to be using the graphic image frequently by updating or editing it, then it's always a good to save it as both a compressed file (.jpg or .gif) AND as an .xcf file. Saving your GIMP files in .xcf file format will allow you to go back and change and edit the image. .xcf format saves all the layers, all the special effects and makes it easy to re-do your image. Consider it the original uncompressed image.

You'll see this file format show up as...

in Windows.

Ok, that ought to just about do it for saving your work of art in the GIMP. Just remember...

1) .JPG - Pictures, Photos, Gradients, Lots of colors. 2) .GIF - Low # of colors, transparency, and animation. 3) .XCF - Saves all the layers and the original uncompressed image. Also, please keep in mind, that when saving a file for the web, the file name must NOT contain any spaces or weird symbols. You can use dash - or underscore _ if you'd like. For example stick-figure.gif and stick_figure.gif are acceptable. And please note that capitalization counts. 'Stick-figure.jpg' is a totally different file than 'stick-figure.jpg'. So the names are case sensitive. An easy way around this of course is to just use all lower case. Coming up next, we're going to begin covering the different tools used in the GIMP, starting with the first ones, the selection tools...

GIMP Selection Graphic Tools

In the GIMP Interface, the first 6 items in the first row are all selection tools. You can follow along below or watch the videos to learn more.

The first selection tool is the Rectangle Selection Tool. It is used to create rectangle selections in the GIMP. To use this, first select the rectangle selection tool. Then hold down the left mouse button over the canvas and drag an outline of the size rectangle you want to create. This will create a rectangle selection.

If you wanted to draw a square, make sure to hold down the shift key while your dragging the selection tool outline, this will constrain the ratio and give you a square and not a rectangle. While that rectangle is selected, you'll see moving dashes, which some people refer to as 'ants'. This indicates that something is a selection. While that is selected, the onlything that can be drawn or filled will happen within the selection only. You can paint, draw, fill, apply effects, scale, etc to the selection to create a vartiey of different effects.

Also note, that you under the tools, you'll have a set of different properites you can use when using the selection tools. For example:

The first property is called mode: With this you can add, or subtract or intersect the selection. For example, let's say you wanted to add another rectangle, or even a ellipse to the original selection. To do this hold down the shift key, you'll see a tiny plus + symbol, now draw your new selection. In this example, I am adding an elliptical selection to the rectangular selection:

You can actually create some complex shapes using the selection tools quite easily. We could also fill (using the paint bucket tool) the new selection (which is a combined rectangle and circle) with a new color. This would give us something like this:

See how it fills the whole selection. Notice that the area is still selected, however. To turn off the selection, go to Select, then click on None. Now that red image is no longer selected. And you will no longer see the 'ants' moving around the red object. To take away an area of the selection, just use the Ctrl key while drawing the new selection. This is the subtract mode. You'll see a tiny - minus sign. Other properties include the Feather Effect. Feathering means to make the edges softer. So before making a selection choose the feathered and set the radius to 10. And then draw your new selection. In this example, we filled it with a pattern. Notice the soft edges.

2) The Elliptical tool is the second choice on the toolbar and is essentially the same as the rectangle tool.

If you want to draw a circle and not an ellipse, remember to hold down the shift key while making your selection.

3) The next tool is the Hand Drawn tool.

This tools allows you to draw a selection manually. To use this tool, hold down the mouse key and draw out your selection. When you are done making your selection, simply let go of the left mouse key and the image will close automatically. 4) The next tool is the Select contiguous regions (also known as the magic wand).

This tool allows you to select all the similar colors that are connecting, or contiguous.

For example, with our stickman above, if we selected the blue body area with the magic wand it would select the blue area of the body. But since the head is not connected, it does not get selected. To add that selection, simply hold down the shift key and click on the blue of the head. You can change the degree of contiguous area selected by changing the threshold setting in the propeties box below the tool. 5) The next tool is the Select by Color tool.

This tool makes it easy to select just a color or all the similiar colors on a page. That way you can easily change the color, by filling or painting. This comes in handy. Simply select this tool and then select by left clicking your mouse on the canvas for the colors you want to select. 6) The last selection tool is the Select Shape from Image Tool.

This tool allows you to 'magnetically' select shapes from an image. You can follow the outline for specific shapes pretty easily with this tool. To use it, select the tool, then on the canvas start with the shape you want to select and left click the mouse then move down some more along the shape and left click the mouse again. The new selection is being made and following you as you click. To close the selection, close off the selection and click in the middle. This will create a selection. So those are the selection tools. They will come in handy and you'll probably use them often once you get the hang of it. Key points to remember: 1. 2. 3. 4. Change the properties first BEFORE using the selection tools Feathering creates soft edges Use the shift and ctrl keys to add or subtract or to constrain the ratio. To turn off a selection, choose Select > None.

Ok, on to the next tool, which happens to be the last tool in the first row. It's known as the Bezier Tool and is definitely worth knowing how to use...

GIMP Bezier Graphic Tool

The last tool in the first row is called the Bezier tool. It allows you to create complex object quickly and simply. You can watch the tutorial above OR follow along below:

1) Select the Bezier Tool . Also known as the Select and edit Paths or B on the keyboard shortcut. 2) Start by left clicking the mouse anywhere on the canvas. 3) This creates an 'anchor' point. Then go anywhere else on the canvas and left click the mouse again. This will create a line from the 'anchor point' to the new point.

The black solid dot is the starting point. The empty dot is now the new 'anchor'. Meaning any new lines drawn will be drawn from the empty dot to wherever you click next. 4) You can keep adding lines as much as you'd like. To connect all the lines together, go to the original starting point and hold down the shift key until you see an upside down U, then left click the mouse. 5) You can then turn this into a selection or a stroke path...

6) You can also curve the lines with the bezier tool. To do this simply hold down the left mouse button over any line (make sure you're between two points) and then drag it to curve it.

7) You can also use the handles on each point to further define your new path. Click and hold on either of the boxes to move them around.

8) You can create a wide variety of shapes, including the heart shape as shown below. Simply click out 4 lines in the shape of a diamond (connect them by holding the ctrl key and clicking on the last point).

9) Then click and drag out the straight lines to curve them in the shape of a heart. You can also use the handles to fine tune it as well.

10) You can then turn this into a selection from the properties box, or create a stroke path (meaning draw a border that matches the outline of your beizer selection). Once you do either, you can fill or paint it whatever color.

11) Remeber to turn of the selection (Select > None) when you are done with your selection. 12) You can also select edit and move to change your bezier path. However, once you turn it into a selection, you lose the path. Even ctrl-z or undo won't bring it back. Up next, we'll cover some more tools including Zoom, Crop and Move...

GIMP Crop, Move & Zoom

The next set of graphic design tools in the GIMP are used to help you work with the images and selections. This tutorial we're going to cover the first five tools in the second row. below: . You can watch the tutorial above or follow the outline

1. The Color Picker Tool - The color picker tool simply allows you to choose colors from your canvas. You can add these to your palette, or change the color to the foreground or background colors in the propeties box below the tools. 2. The Zoom tool - This allows you to zoom in or out of your image. Very handy when making free-hand changes to your image. You can zoom in real close and change one pixel at a time if desired. 3. The Measure tool - This tool measures angles and distances.

4. The Move tool - This will be a commonly used tool. With it, you can move selections or whole layers. Just click and drag, once you have this tool selected.

5. The Crop tool - You can reduce the size of your image by using the crop tool. If you want to crop out just a section of the image, simply click and drag the crop box around the area you want to crop, then hit enter. Everything not in the crop box is deleted. Very useful for cropping images and pictures. Allows you to make smaller file sizes and helps with alignment issues with your images. Up next, the Transformation tools, with these tools you can scale, rotate, skew and give your selection a different persepctive.

Using the Transform Graphic Tools

With the next set of tools, you'll be able to scale, rotate, skew and provide a different perspective of your selection or image. As always, you can watch the video above or follow along below... 1. The first tool is the Roate image tool.

This tool allows you to rotate your selection. Simply click inside an area you already have selected (with the ants) and then you'll get a box with 4 handles. Grab any of these handles and drag either clockwise or counterclockwise. This will rotate your selection. When you are done rotating, just hit the rotate button:

The little black dot inside the rotate box is the center point. You can move this point and it will rotate around wherever the new point is. This is helpful for creating lots of unique images, like petals on a flower for example. 2. The next transform tool is the Scale Tool.

This tool allows you to make the selection bigger or smaller. It works the same as the rotate tool with the handles. If you want to keep the selection in perspective as you scale, remember to hold down the ctrl key while you are dragging out the new scaled selection. 3. The next transform tool is the first tool in the 3rd row. It's called the shear tool. With this tool you can 'shear' the selection. Move the handles horizontally to see the effect.

4. The next transform tool is the perspective tool. You can change the perspective of the selection with this tool. Grab any corner and drag it out to and watch how it affects the selection. When you are done, hit the 'perspective' button to change your selection. This is great for making images more 3-D.

5. The last transform tool is the horizontal or vertical flip tool. To flip your selection, make sure you have the appropriate one selected from the properties box. Then click on the image to flip it. Great for mirroring images and also comes in handy when doing animations.

Ok, that's it for the transformation tools. Coming up next is the Text Tool....

Using the Text Tool with the GIMP

Most of the time, it's best to use HTML text as real text if possible. But occasionally, like with banners you'll need to add text to your image. This text, once it's saved as an image is not read as text by the search engines, but merely as just a graphic image. Adding text to the GIMP image is very easy and it involves using the Text tool.

1. Click on the Text tool

2. Click on where you want to add the text and the text box opens.

3. Type out your text and it will appear inside the canvas. Now you also change your text style with the properties box. You can choose a new font, change the

color, justify, indent, and so on.

4. Once your done, just close the text editor. You can also transform your text, with the scale, rotate, etc. tools from last lesson. 5. Anytime you want to re-edit your text, click on the text tool, and select the text on the canvas. Next up are the Paint Bucket Fill and Gradient Fill tools. These are fun to use...

PaintBucket Fill & Gradients in the GIMP

The next two tools are the Paint Bucket Fill tool and the Gradient Tool. Both these tools allow you to fill in selections. One with a solid color or pattern and the other with a gradient. Watch the tutorial above or follow along below:

1. The Paint bucket fill tool is used to create either a solid fill or a pattern fill within a selection or you can fill an entire layer. 2. To use the Paint bucket tool, click on it and then choose your color or pattern from the properties box and then click inside the selection. It's that easy.

You can change the opacity of the fill, choose to fill with the foreground color, the background color or a pattern fill. Click the Pattern and you'll get a lot of different patterns to choose from. You can also change the fill mode. 3. For the gradient tool , you can create tons of different types of gradients. These come in handy to creating depth to an image. To use the gradient tool, click and hold the mouse down and drag out a line in any direction and then let go of the mouse button. And a gradient in the direction you created will appear. If you don't like it, undo or just create another gradient until you find something you like. 4. The gradient tool also has a properties box, you can choose many different gradients and different effects...

You can select a different gradient by clicking inside the box (the red to white fade). You can reverse the gradient, offset it, change the shape of the gradient, repeat and so on. Next up, the drawing tools...

Drawing in the GIMP

These tools are fairly easy to use. You simply select them and start drawing on the canvas. Watch the drawing tutorial or follow along below...

1. The first drawing tool is the pencil . Simply click on the pencil and start drawing on the cavas. To change the size and other features, then look at the properties box below the tool.

You can change the opacity, the mode, the brush size and style, you can use color from gradient, etc. The pressure sensitivity is for when you are using a drawing tablet (Wacom is a good one). 2. The next one (first in the 4th row) is the paint brush . It works essentially like the pencil, just more smooth. Make sure you play around with the properties and use different brushes for different effects. 3. The next one is the erase tool . It will erase to whatever color the background color is. Good for touching up things. 4. After the erase tool is the Air Brush tool airbrush. . This tool emulates the effects of an

5. Next up is the ink tool . This tool has some different properties so try those out. It acts very similar to a real ink pen. 6. The next tool is the clone tool . To clone, select this tool, then if you have an area you want to duplicate, then hold the 'ctrl' key and left click the mouse where the area you want to duplicate is. Then move to another area and hold down the left mouse key and start drawing. It will replicate whatever area you 'ctrl'd clicked. You can also clone patterns as well. Just choose pattern source from the properties.

7. To blur or sharpen an image use the blue/sharpen tool . This tool comes in handy when you want to pop something out and create more of a foreground / background and to add some depth. Make sure you have the correct setting chosen from the properties box. 8. The smudge tool is next. This tool does just that, adds smudges. Click and drag to add a smudge. Good for blending. 9. The last tool in the GIMP menu is the burn / dodge tool . If you set it to burn it will darken an area, it you set it dodge it will lighten an area. Ok, that's it for the basics. Next up we'll cover how to design your image using layers to make editing and applying effects a lot easier...

Using Layers in the GIMP

Layers are a way to easily modify or change your graphic design. They make adding special effects to specific parts of the design very easy to achieve. Also you can delete a layer and not affect the rest of your design. Ok, let's get on with it, per ususal you can watch the video or follow along below: 1. Go to File > Dialogs > Choose Layers or just hit CTRL-L. This opens up the Layers Dialog (or window). 2. Now take a look at your layers dialog in it. Let's go over the features...

The first choice on the bottom row is Create a new layer. This will add a new layer right above the background layer. The next two are the ability to move that layer up or down. Since their is only one layer, you can't move it. And you can't move the background. So you really need at least three layers to start moving layers. The 4 th option is duplicate layer. This will essentially copy the current selected layer and create a duplicate right above it. The 5th option is anchor. This is good for floating selections. Clicking this anchors the floating selection into the layer below it. The last option is the trash can. You can delete a layer using this. Notice you also have a mode with layers. I suspect that most often this is when you'll be using the mode blending options, when working with layers. Opacity becomes an important aspect as well when using layers. If you notice the little eye, right next to the stickman on the above example, clicking on that turns on and off that layer. It makes it visible or invisible. 3. Just for example, create a new layer. You'll get this box to pop up...

It remembers the last settings, so for the most all you'll usually need to change is the name. Naming your layers is a good idea as it keeps things organized. Hit OK when ready. 4. As you can, there is now a new layer. And the beige bar means that's the current selected layer. Anything you draw or create will be added to that layer and will leave the background layer alone. Also anything you move will just happen on the selected layer.

Now that layer is transparent. Meaning the layers below will show you and so will the layers above. Continue playing with layers, add opacity, play with the blend modes, draw a selection and move things around on the layer. But remember ALWAYS make sure you have the right layer selected. To select a layer, just click on it, the whole layer in the Layer Dialog will turn blue, then beige. The beige layer is the current active layer. 5. If I were to draw that stickman normally, I would have created each thing on a seperate layer. The stickman on one layer, the heart on a new layer and the background blank. This way I could add a gradient to the background easily without affecting the other two layers. I could easily move the heart around. I could bring the stickman in front of the heart and so on. 6. We'll be doing more tutorials over time that will further make use of layers and following those tutorials will help you learn how to make better use of them. Alright, that's it for the basics. Layers are an extremely important part in graphic design. If you get a chance watch the video tutorial for more info. In the meantime, the next step is to kick up that sample website a notch or two now that we know how to use the GIMP...