Cedar Wood

List of GIMP Tutorials

2009-03-09T12:28:00.000-05:00

GIMP - Make a button

GIMP - Convert b/w brush to colour

GIMP - Cut out pictures, make background transparent

GIMP - Make figure glow

GIMP - Removing white backgrounds (or any other colour)

GIMP - Use quickmask to cut out

GIMP - What are masks?

Inkscape - Text in a circle (or other shape)

Inkscape - Text to path

GIMP - Making a button

2009-02-17T21:14:00.004-05:00

Okay, here's a quickie. Unlike all my other tutes, for this one I'm going to assume you know the basics of how to use the GIMP. If you don't know how to open a new layer, or save, etc, etc, I suggest you hit the 'Help' button on your GIMP.

Right. I've made a button for my GIMP tutes which you can see on this blog to the right. I wanted it to match the design of the rest of this site, so I took inspiration from the 'Free Rice' button (wicked site - go visit) also on the right. Here's how to make your own.

Step 1: Work out what you want. In this case, I wanted a similar button, but a bit larger. I opened the image file of the Free Rice button to compare. Then I opened File-->New and created a new template of 130 x 31px. Obviously, yours may need to be a different size. :)

Step 2: To make it easier to align my text and layers, I opened up a grid. (Note that I didn't 'Snap to Grid' because I wanted freedom to move things anywhere I want.)

Step 3: Create the second layer. I want a less wide, second layer to go on top of my first. I use my grid to cut my second layer to the size I want. (Expand picture for further instructions if needed.)

Step 4: Now I have a second layer (here coloured pink for clarity) I want to add a gradient of colour to each layer.

Step 5: I'm hoping you know how to do a gradient!... :) Just follow the steps in the picture if you don't.

Step 6: Add your text. I have two layers of text. The word 'GIMP' was Copperplate Gothic Bold, 14px, white. The word 'Tutorials' was Aharoni Bold, 17px, white.

Step 7: Add the details. Use the pencil tool for crisper lines. I drew two dark lines, 1px wide, as vertical borders on the second layer. Then I added two pale dots, 3px wide, as 'nails' on the background layer. Here's a closeup:

Job done. Check out the finished product at the side. Turn it into a working button by using HTML to turn the image into a link.

Free Software Stickers

2008-10-12T16:24:00.003-05:00

I found this the other day, and thought it was brilliant.

Free .pdf packs of software and hardware stickers you can download, print off, and stick over the awful manufacturer's ones that come with your laptops, pcs, monitors, blah blah.

They're about 10Mb each. Must haves for Linux, GIMP, Inkscape, Firefox types... :)

GIMP tutorial - how to make a brush paint in colour!

2008-07-28T19:08:00.006-05:00

Okay, so you've downloaded a brush that some lovely person has made. You've put it in your brushes folder. You've opened up the GIMP all excited and tried your new brush, but alas! Your new GIMP brush only paints in black and white. And you really need it to paint in colour.

This is how you fix it.

(Many thanks to Disdainful-Soul.net for giving me the clue to work it out. Also - thanks to the person who made this brush. I don't want to credit them in case they're embarrassed by the fact that I'm "fixing" their work, but please accept my grateful thanks for making this great brush set in the first place!!)

Step 1: Open the brush file itself. You will find it in your brushes folder. It will almost certainly have a .gbr extension. (Note that .gbr stands for "gimp brush" and is similar to the .abr file extensions of Photoshop brushes). Look at the title. Does it say RGB? This is (apparently) the problem - that your brush has been inadvertantly saved in RGB (RedGreenBlue) mode and they will only paint in colour if they're in Greyscale mode.

When you try and paint with it (as below) it will only paint in shades of grey.

Step 2: So the first thing to do is to change the mode to Greyscale. This is done by Image | Mode | Greyscale. (This is not the only step, however...)

Step 3: Give the brush a white background. Merge the two layers. Then "Flatten the image" as below. (Note: I can't explain why "flattening" is so essential, but through trial and error I found that a simple merge was not sufficient. Unless I flattened the image as a separate step, GIMP wouldn't save my .gbr file.)

Step 4: Finally, save your new brush as a .gbr file. Put it in your GIMP brushes folder. Start using it. Et voila! It paints in colour.

GIMP versus Inkscape

2008-03-09T13:19:00.003-05:00

I was in Washington for the weekend, and a big storm hit the city on Saturday. The area I was staying in had a power cut all evening and I lost computer access. (Talk about withdrawal! Twitching like a meth addict...)

Happily, we're back online today. I've done some more pottering with the CSS behind the scenes and I'm starting to like the new look of the site. Alas, my graphics software is all at home so I can't add some of the new things I want to until I get back, but for interest's sake, I thought I would show the difference between the two banners I designed in GIMP and in Inkscape:

GIMP (left) versus Inkscape (right)

They both took about the same amount of time to create. The GIMP one was done using the bezier tool and shading with the gradient button. The Inkscape was just a hand-drawn vector. What I prefer about the Inkscape was that in the scaling down of both the image and the banner text, the edges stayed sharper and clearer. I know it's not so obvious because the above image has been converted to a raster file, but I think you can still make out the difference.

And as you can see from the favicon in the address bar, I again used the vector (.svg) file because it pixellated oh-so-much less than the GIMP one did. :) I love the GIMP and use it daily, but I thought this was a good example of when Inkscape wins hands down. Get Inkscape here.

Gimp Tutorial - Removing White Backgrounds (or any other color)

2008-01-03T22:09:00.004-05:00

Okay. I've done tutes on removing backgrounds. But sometimes you find an image where someone's already done it for you even if you don't realise it....

There's the image you want (be it an object or a person) on a plain white/black/other background. These are ridiculously easy to get rid of and here's a tutorial showing you how.

Step 1: Find a base image with a one-colour background - in this case, the charming, blue-eyed Mr Craig. Here, we have a publicity photo on a white background. The essential thing is that it is a single colour (in this case, white has the html value of #ffffff - look it up if you don't understand. It's very important to understand this principle.)

Step 2: Make a copy of the background layer by pressing the "Copy" button (blue arrow). (In case you don't know, this is because you can't make original backgrounds transparent.)

Step 3: Make a white layer. Just press the "new layer" button (blue arrow) and then select the "white layer" option (pink arrow). If your background is black, pick a black layer instead. If your background is #f9CC22, then make a new layer of colour #f9CC22, etc..

Step 4: Move white layer down (blue arrow) and delete the ORIGINAL background layer (pink arrow). Make sure you've selected the right layer for each of these operations. If you delete/move the wrong one, don't panic, just press Ctrl+Z to undo. When you're done, you want your white layer under your copy of the "Daniel" layer.

Step 5: Make the white vanish. Okay, the exciting bit. Click Layer-->Transparency-->Color to Alpha.

Step 6: The Colour-To-Alpha dialogue box appears. (You can enlarge this image right now by clicking on it. Have a look at my screen capture and the clarifications I wrote on it.)
Basically, you want to delete any part of the image which is the same colour as your background. In this case, I just have to pick white (blue arrow), and then press okay (pink arrow).

Step 7: Selecting the outline. Okay. Make the underlying white image invisible for a moment (blue arrow).
"ARGH!" (I hear you cry.) "Daniel is transparent! I don't want that!"
Yeah. Breathe.
This is the really clever bit.
When you made the white transparent, you made ALL the white in the image transparent, including things like skin or clothes. Here's how you fix it:
Right click on your "Daniel" layer. Now pick the Alpha-to-Selection option (pink arrow). You have just selected everything that is NOT transparent in that layer.

Step 8: Close-up. See the marching ants around Daniel? It means he's the only area selected in his layer.

Step 9: Deleting the inverted selection from the white layer. Without changing your selection:

Make "Daniel" invisible (blue arrow).
Make sure you've highlighted the white layer (pink arrow).
Invert the selection (Ctrl+I, or see previous tutorials).
Delete.

Step 10: Deleted Selection. You should have something that looks like this. Any bits that are still transparent (sometimes happens) can be painted in quickly.

Step 11: Flatten image. You want to merge your white layer, and your top image. There are several ways of doing this. My favourite is to right click on the "Daniel" layer and pick the "Merge Visible Layers" option (blue arrow), but the two pink arrows are alternatives.

Now that you have your cut-out, do anything that your whimsy dictates. :)

Deleting undeletable files

2007-08-18T19:55:00.000-05:00

I had a nasty little file download itself onto my desktop but not properly. As a result, it didn't work. Yet every time I hit delete an error message said, "Cannot delete file: Cannot read from the source file or disk". The file had 0kb of memory, the file name was incomplete, and there was no file extension. It wasn't a virus or malware - I scanned to be sure. I was using Windows XP. Here's a quickie on how I fixed it by deleting the folder that contained the file. (Legal blah: back up your data, read the instructions, read other people's instructions, I take no responsibility for any data, monetary or other loss, this is just a story of my personal success...)

1. First I found the correct folder address by using Start>Search. I needed the correct address in order to locate it during the next step. In my case, the file was located at C:\Documents and Settings\MY NAME\Desktop\divx-501.vo.llnwd.net

2. I opened the command prompt by clicking Start>All Programs>Accessories>Command Prompt

3. I changed the directory from "C:\" to "C:\Documents and Settings\MY NAME\Desktop" by typing the following and hitting Return (note that "cd" means "change directory"):

cd C:\Documents and Settings\MY NAME\Desktop

4. I deleted the folder the file was contained in by typing DEL followed by the stupidly long name of the folder:

DEL divx-501.vo.llnwd.net

5. The Command Prompt asked whether I was sure? I typed Y, and hit Return. This is what it all looked like (click to zoom):

Returning to the desktop, I then tried to delete the folder containing the evil file, and this time, it deleted! Hooray. (If the file had been locked by explorer, which it wasn't because I checked, you also need to switch off explorer.exe while you use the Command Prompt. Look that up if you have no idea what I'm talking about.)

Inkscape Tutorial - Text in a circle (or other shape)

2007-08-18T11:23:00.000-05:00

I find that putting text on a path in Inkscape is not particularly intuitive. The previous tutorial I wrote involved putting text on an unclosed path (a line). This week I had a request to explain how to put it in a circle.

Step 1. Draw your shape. In this case a circle. I've made it a red line so it's easier to see. Make sure: a) The circle is "Made Whole",

b) There is no fill (Shift+Ctrl+F).

Step 2. Turn your chosen object (the circle) into a path. Do this by: 1. Click on the path tool, 2. Select the object, 3. Click on the "Convert the selected object to path" button.

Step 3. Put your text on this new object-shaped path. Write your text, or import it, or whatever. Once you have the text you want, select it, and then by holding down the Shift button, also select the path (our red circle).

This is where Inkscape stops being logical. In my last tutorial, I said that when I put text on a line, I had to use the "Generate from path" function. But this time, only "Text to path" seems to work. (Go figure...)

Step 4. Fiddle. My experiments suggest that the text won't always be in a complete circle. This can be corrected by shrinking in one direction...

...and then in another.

(There are also a couple of other ways of doing this, but I'll let you work them out for yourself by experimenting - which, though frustrating, is how you discover tricks...)

Step 5. Get rid of the red circle. Shift+Ctrl+F brings up the dialogue that allows you to choose "No stroke".

More fiddling allows you to change the perspective, create ovals, put on top of circles/spheres/other shapes, enlarge, etc.

GIMP Tutorial - Using Quickmask to cut people out

2007-08-06T15:06:00.001-05:00

Have a quick look at these two other tutorials first if you're unfamiliar with the GIMP. The first shows how to simply cut out an object using the bezier tool. The second explains briefly what "masks" are.

Okay. I'm listening to "One Wild Night" so we're going to use a Quickmask to cut out Jon Bon Jovi from his background. (Legal blurb: not my image, probably belongs to Versace.)

Step 1: Use the bezier tool for what you can. I still use the bezier tool to cut out the majority of Bon Jovi from his background because it saves me a bit of time. This is just my personal preference. However, as you can see from the picture, I can't use the bezier tool to cut out his wild, rocker's hair. I just can't get enough detail with paths, and it would end up looking stupid. So I cut around it for now.

Step 2: Apply a Quickmask. This is so easy. Just click the Quickmask button in the bottom left corner (blue arrow). Et voila, the image is covered in a red film. The red film is the Quickmask. (I've put the image on a white background so I can see edges more clearly.)

Step 3: Paint the bits you want to become selections. The idea is to paint over the areas that you are going to eventually delete. If you paint them white, it's like poking a hole through the mask. The edges of this hole will be the edges of the selection that you are going to delete. So paint in white over any areas you don't like. In this case, anything that's not Bon Jovi's hair. My GIMP would look like this at this point (click on the picture to get a zoom-in):

For the really fine bits, zoom in and paint with as fine a brush as possible between individual hairs. This sucks and is boring, but gives a much nicer end result.

Step 4: Convert the Quickmask back into a selection. Again, so easy. Just click again on the Quickmask button (blue arrow). The red film disappears, and the areas you painted white turn into selections with little marching ants around them (pink arrow). Don't be afraid to flick back and forth between the Quickmask and the selections, deleting them as you go. I will repeat this step several times until I'm happy.

Step 5: Delete the selection you have made. Now that you have an active selection (the marching ants) just delete it. (This is done differently in different versions of GIMP. Try delete or Ctrl+K).

Step 6: The purpose of this technique was to produce a high detail cut-out for pasting onto different backgrounds. However, Quickmasks can be used for a wide variety of things, and the concepts in this tutorial can be adapted to suit different kinds of images. I'll leave you with one I made earlier... :-)

GIMP - What are masks?

2007-08-02T21:01:00.000-05:00

What is a mask?

A mask is a layer.
A greyscale, raster, layer.
(Greyscale means exactly what it sounds like - you are only able to paint in black, white or grey. Raster means an image constructed from a grid of pixels, like .pngs, .jpegs, and .bmps.)

A mask can be opaque or transparent.
It hides (masks), and/or allows to be visible, portions of the layers underneath.

Black is totally transparent and allows layers to be visible through the mask.
White is opaque and hides underlying layers.
(Both these colours are "virtual" - you paint with "transparency" or "opacity", but for simplicity they are called "black" and "white".)

The original "background" image of a raster file can't have a mask in GIMP. If you want it to, you must copy it (and then delete the "background" layer if you don't need it anymore).

When you add a mask to an individual layer, from that point on every paint-stroke will be in black, white, or shades of grey, on the mask itself. You will not be able to paint on the underlying layer again until you "Apply Layer Mask".

Check out this page at sourceforge for a rather brilliant tutorial and introduction to masks.

Why do you care?

You can use GIMP very happily and never use masks. However, they can be very powerful tools for image manipulation. Try them.

GIMP Tutorial - Making a person glow

2007-07-23T13:35:00.001-05:00

Giving a body an inner glow is a very interesting graphic effect. A green/blue colour can be used for "ghosts", "aliens" and X-Files-esque wallpaper, a red/orange one for a "hot" glow. Here's how you do it with The GIMP.

1. First, cut out the person you want to apply the effect to. (See the previous tutorial.)

Feel free to add a background layer at this point, but DO NOT merge the two layers. (Personally, I like to have a black layer underneath because it makes the glow more obvious to the eye, and this is what my screen shot would look like at this point.)

2. Select the layer you want to work on (ie: not the background layer!) You want just your person to be the active selection, not the whole layer. Do this by right clicking on the layer and clicking once on "Alpha to Selection". Marching ants should immediately start crawling around the person, not the window - showing your selection is active.

3. Now that your person is selected, Go to the Select menu at the top of the window, and click Select-->Shrink. (For this image, I chose 2 pixels. Fiddle and work out what is best for your image.)

4. Now click Select-->Feather. I used 15 pixels.

5. Select-->Invert the image. This means that the person is no longer selected, but the feathered space around them is. This is a very important step!

6. Now choose your "Foreground Colour". This will be the colour of your glow. For this example, I used a shade of blue (HTML 00c4fd). You may prefer a warmer orange or yellow, or a freaky acidic green. Go nuts.

7. Go to the Edit menu, and click Edit-->Fill with FG colour. (Don't use the bucket tool, whatever you do! It gives a completely different result!)

8. Click Edit-->Cut. Then click Select-->None to get rid of your marching ants. You're done.

9. Try different colours and sizes of glow, and different backgrounds.

GIMP Tutorial - How to make backgrounds transparent

2007-07-23T12:09:00.000-05:00

This is a really useful technique. I use it all the time on photos of people to drop them on different backgrounds, often for wallpapers. For this example I've used the simple shape of a cube, but the technique is identical regardless of the complexity of the shape.

1. Select the Bezier tool. It looks like a pen - I've put a big blue arrow pointing to it. Make sure the polygonal box is checked.

2. Carefully draw nodes one by one around the object (which in this case is a pink cube). If you were trying to cut out a person, you would create many more nodes around them. The more you create, the better the cut-out, so take your time over this step.

3. When you reach the final node, you need to complete the path. Do this by pressing the Ctrl button on your keyboard as you click the first node, thus "joining the dots" and closing the path. Don't do anything else yet!!!!
Are you happy with your path? Remember, this is the stage where you can adjust your nodes.
When you're happy, you need to convert the path to a selection - just press Enter.
You should now see marching ants around your object/person. This means they are now a selection.

4. Invert the selection. You want to delete the background, not the object you just so carefully selected. Do this by going to Select-->Invert as shown below.

5. Delete the inverted selection. Your version of GIMP may do this differently. Some - just hit Delete. Others - try Ctrl+K. Or, right-click on the image and click Edit-->Cut, as shown below.

6. You now have an object on a transparent background. You can paste it on to any background you like.

Inkscape tutorial for text: "Pattern along Path"

2007-06-27T16:26:00.000-05:00

Okay, don't ask me why, but for the last however-many-weeks that I have been playing with Inkscape, I have been totally unable to make the "Object/Text to path" function work. It just won't. I follow the tutorials on everybody's websites, but my software just blows raspberries at me.

But today I cracked it - so I'm sharing it, in a step-by-step, "for dummkopfen" style - in case there's anyone out there struggling like me:

Step 1: Draw your line. Use any line you like. For this example, I scrawled a curvy one.

Step 2: Write your text.

Step 3: Select the text. Then press the Shift button, and while holding it down, select the line. See how each object has it's own little dotty box around it?

Step 4: I kept doing what I was told and using the Text-->Put on Path, and it never, ever worked. Ever. So don't do anything inside the red circle!

Step 5: Instead, try the Effects-->Generate from Path-->Pattern along Path.

Step 6: Give it a second to do its funky thing, and then the following window should appear. Tweak it to your own taste, and when you're happy, click OK.

Step 7: Give it a second or two (machines need time to think) and it will place a copy of your text on the line you drew (if you ticked the "Duplicate the pattern before deformation" box like I did above - otherwise it will use the original text).

Step 8: Your deformed text can now be played around with in any way you choose. I made a few duplicates and coloured them. The whole exercise took about 90 seconds.