A while ago my soon-to-be mother-in-law dropped by with an family photograph she had found in a box of old pictures. She was putting together her family tree and this was the only existing picture of some long-dead relations - but it was torn in half and pretty battered. To make matters worse, since I had taken this copy the original had been lost. Could anything be done to restore it? Here’s my attempt.

The image was scanned as below at 400dpi. I realise I could have pieced the picture together before scanning but I thought scanning them as two pieces would allow for greater flexibility.

You’ll notice that there is a certain amount of overlap; an area of paper is visible where the two pieces sheered away from each other when it was ripped. This will need to be remedied later.
To start piecing it back together I had to get rid of the black area created by the scanner. Thankfully the Scissors Select Tool was made for this kind of thing!

Look out for an in-depth tutorial on this tool in the next few days.

I cut out each half and pasted it into its own layer. I could then move the bottom half up the canvas and begin piecing it together.

The torn areas from the top layer continue to show through while underneath it the missing part of the picture is hidden. You can also see that although the Scissors Tool did an excellent job of detecting the edge of the photo, there’s still a feathering of black.

The next stage is to move the layers around until the picture is as well aligned as possible. Luckily with this picture the vertical and horizontal bars of the sash window made it painless to line up. Without something like that you could carefully align it by eye or use the edges as a guide. When moving the pieces around the arrow keys will let you to move each layer by a pixel or two at a time.

A few large areas of paper were showing where the tear occured. To get rid of this it simply needs to be removed from the top layer as the missing fragment should still be present in the layer below. For this I’m going to use my favourite - Scissor Select.

The light brown area along the margin is where some of the coating has lifted away from the paper. This will have to be rectified later by reproducing that part of the image.

Once the torn edge has been minimised the photograph looks more crumpled than torn and you can start to see the man’s face.

The final stage for now is to zoom in and work along the tear, removing any feathering that may have occurred.

Stick around over the next few days when I’ll be showing you how to reduce the blemishes in the photograph and begin to sympathetically enhance it. If you want to work along with me you can download the original file. As always, don’t forget to read the license.

I haven’t forgotten that last week I promised you a couple of photo restoration tutorials. Well, the one I had planned for today turned out to be pretty complex. In order to cover everything really thoroughly I’ll be using this one photograph for a few tutorials including some instruction on using GIMP.

I’m going to an art show tonight so if it’s ready before I’ll publish Part One and if not, expect it tomorrow. Here’s what you’ve got to look forward to:

• Restoring a Torn Photo in GIMP
• Improving Damage, Water Stains and Discolouration
• Detailed Study of the Scissor Tool
• …plus some bonus material that I haven’t finalised yet.

Since this will be quite advanced, I look forward to your input; particularly if you have alternative methods or an opinion on the final piece.

Back when I first started using Inkscape some of the things I found difficult to make work were the boolean operations in the path menu; things like Union, Difference, Intersect etc. To me the results were difficult to predict and some of the operations seemed pretty similar.

In this article I aim to explain these tools and show you how to get predictable controlled results.

Union
The first thing you need to do is select the two (or more) objects you want to combine. Let’s begin with the Union option. Select your objects and go to Path>Union (Ctrl++). This will combine the shapes, with the top object taking on the colour and opacity of the lower.

Before & After

You can see the paths have been combined. This can be really useful when making complex shapes. You can save yourself a lot of node editing if you can construct your shape in this way.

Difference
Difference works in much the same way except the top object is removed from the bottom shape.

Intersection
This excludes everything except the areas where the two shapes overlap.

Exclusion
Exclusion is probably my favourite of the boolean operations. Everything but the overlapped area remains and as before the top shape takes on the properties of the bottom shape.

Division
Division only works if you have outlines, otherwise the result won’t be visible. It colours the top object but each retains its own path; so the edge of the star shape can be selected separately from the square.

Cut Path
This operation breaks the path where the two objects intersect allowing you to remove the section.

So there you have it. I hope this clears things up if you have been confused by these path options. I’ll be covering the rest of the path menu in the next few weeks.

Last December I took a series of photos at a beach near my home town. I wanted to frame some to hang in my hallway but to space the frames nicely I needed 6 photos… I only had 5 good shots. Time for some GIMP trickery!

After picking my favourites I was left with a few other shots that weren’t up to scratch. I liked the foreground in this first photo but the detail in the sky did not print well and it just wouldn’t have looked right with the others. On the second photo the sky was nicely exposed but this left the foreground dark. If only I could have the foreground from the first photo and the sky from the second.

With a nice defined horizon this should be really easy - except for the sea spray. It would ruin the picture to try to remove it so I’ll have to work around it.

I was standing on slippery rocks on a very windy day when I took these which explains the wonky horizons. To remedy this go to Tools>Transform Tools>Rotate (or Shift+R) and rotate until the horizons are level. For this example I had to rotate around -1°. You may find showing grids and guidelines, View>Show Grid, helps you get it level when performing this kind of task.

Rotating creates blank areas on your canvas where you’ve straightened up. The blank area plus some of the photograph will have to be cropped to square the image.

Use the Crop Tool to draw a rectangle inside your photograph avoiding any blank areas. Press Enter to complete the crop when you’re happy with the selection.

Now the images are straight we’ll begin combining them. On one of your cropped photos go to Image>Image Properties to get the size of your image. Make a new file in GIMP with those dimensions.

Using the Rectangle Select select the foreground in your first picture from the horizon down. Press Ctrl+C to copy it. In your new document create a new layer. Go to Layer>New Layer… and then Ctrl+V to paste in the bottom portion of your new image. Repeat by selecting the sky from your second image and paste it as a new layer below.
Each layer should look something like this:

You’ll notice there’s a little something missing from the foreground above the horizon.
So why not use one of the other selection tools and cut out the sea spray as well? At first I tried this and I realised pretty quickly why it looked so wrong - the sky showing through the spray belongs to a much lighter sky giving it an ugly superimposed look. Here’s how wrong it looks:

To do that I used Select by Colour to pick out the sky and remove it, leaving the spray colour behind. It’s obviously really fake. The water has been lit by a much brighter sky and it’s given it a very obvious line on the horizon.

Instead I’m going to use the Clone Tool to copy some of the spray above the horizon.

Select the Clone Tool and choose a suitable brush. I’m using a speckled brush to imitate the pattern of the spray.
First move your mouse over the area you want to clone from. I’ve placed it on the white area of the wave. Hold Control and click on the area. Now move your cursor again to the area where you want to colour and paint as normal. You’ll notice two cursors which are in tandem. The first shows the area you’re cloning from, so be sure not to go outside of that area or you’ll end up painting rocks in the sky.
If you need to readjust where you’re cloning from just Ctrl+click on a new area and begin painting again.

You can remove some of your cloning with the Eraser Tool to thin the spray so that more of the sky shows through.
To finish use the Crop Tool again to remove any areas of blank canvas.

License Agreement

It’s Friday, I’m feeling a bit lazy so today I’m just going to point you in the direction of some interesting Inkscape tutorials that you might want to take a look at over the weekend.

I have some major bug fixing to do on one of my other sites but will prepare some shiny new tutorials for next week!

Illustrating Tomato is a nice tutorial from kalaalog.com. It’s not so much the tomatoes I find interesting, but the technique of first hand drawing them and then making shapes around the drawing. Gives a nice hand-drawn finish.

Inkscape Docs Interpolate Tutorial - if you haven’t got this far through the Inkscape documentation take a look at this well-written tutorial on interpolate. It’s a very cool tool in inkscape for morphing from one shape or colour to another.

Gradients to Path is such a simple yet brilliant idea. A really easy way to make a gradient or abstract shape using markers on a line.

3D Text by Nicu is an easy to follow tutorial on getting an embossed look on text using the blur filter. Could work well with non-text objects too.

That should keep you going until next week when I’ll be concentrating on some fairly heavy going GIMP tutorials on photo restoration. Have a great weekend!

Do you write web comics? To take some of the effort out of it and save time, here’s an easy way to make speech bubbles that you can use each time you write a new comic.

The Rounded Speech Bubble
Start with an ellipse. In this example I’ve given it a grey outline and blurred it slightly. Click on the shape and go to Path>Object to Path.

Here we’ll add the point to the speech bubble to the bottom-left of the ellipse, so shift-click using the Edit Paths Tool on the bottom and left nodes to select them and Add a Node between them. Now select just the new node and change it to be a Corner Node

Pull the new node in the direction you want for your speech bubble. It’s now taking on a speech-bubble-like shape but it doesn’t look right yet. For that you’ll need to edit your new nodes Bezier handles to form a sharper point. Still using the Edit Paths Tool move the node’s handles so that they are at about a 45° angle and pointing back towards your original ellipse shape.

You can also lengthen the handles on your corner node to make the point thinner. All that remains is to create a text area inside your bubble and fill it with some sample text of your choice. You can flip your bubble horizontally and/or vertically to change the direction and to move the point, simply select the corner node with the Edit Paths Tool and drag it in the direction of your character.

It’s really easy to repeat the process using a square. You’ll probably want to round the corners. You can do this by changing the Rx and Ry values for your square or rectangle:

Check out this post on Playing with Polygons for details on how to make star bursts and other shapes.

Tip: To make a thought bubble start with a softened star burst shape:

Now resize it so that it’s wider than it is long. Add a few circle shapes et voila!

You can download the files for these images and play with them yourself. Check out the License Agreement first.

A while back I wanted to make a decal for my MacBook. The idea was to make an octopus that would sit on top of my laptop with some tentacles curving around the screen area.

I began with a pencil drawing. I roughly marked out the edge of the screen on paper as well as a void area where the corner was and figured out roughly how the octopus’ tentacles would work. Then I sketched out the octopus using my markers as a guide and scanned it.

My pen scrawls are not pretty, so the first thing to do was remove them. Opening the image in GIMP I used the Eraser Tool to remove the lines and the page creases to clean up the image so I could work on it more easily. I left some of the paper texture so I could give the octopus a distressed texture but you might want to get rid of all of it.
You can see there that the pen lines intersect some of the pencilled area so after erasing the pen some of the pencil lines will have to be put back in.

Here’s how the image looks after some minor cleaning.

I wanted to keep this image so I could go back and make changes if needed so I made a copy and placed it on a new layer above and called it “Outline”. It’s not a true outline yet because the white background of the paper is still present. To get rid of this, use Select by Colour to select the pencil colour and then Select>Invert to to invert the selection and press Delete to get rid of the white area. On this occasion doing it this way rather than just selecting the background colour worked best but depending on how your image scans in you may find you can just select the background colour.
Here’s how the “Outline” layer looks:

To start adding colour I made a new layer below “Outline” and began colouring using the paintbrush tool. You’ll find having the above Outline layer visible helps at this stage! To blur the lines between the two colours I used Smudge . I’ll show you how it looks with and without the outline below:

When you scan a pencil drawing it tends to look really washed out or else the line is dark but the paper is also dark. I find it easy to start with a light image and darken the lines later if needed. To darken the Outline layer go to Colour>Hue/Saturation… and reduce the lightness.
You’ll find that darkening the pencil lines really enhances it. Here you can see the difference. I’ve also added some texture to the colour with a speckled brush and a slightly darker shade. You could Bucket Fill with a texture or pattern if you had something less hand-drawn in mind.
Parts of the octopus, like around the curve of the head, are too sketchy for my liking so to add more definition I made a new layer above “Outline” and using the Eye Dropper Tool I selected the pencil colour and drew in additional lines and shading. It can be difficult to match the pencil size and strength so you may find you need to experiment a bit before it blends with your original pencil lines. A little bit more definition makes all the difference:

That looks almost ready to me. Now to finish cleaning up the image use a Mask Layer to white-out everything but the octopus.

Make a new layer at the top and colour the entire layer white (or the colour of your choice) - this will be your background colour. If you skip this step and have a transparent layer you won’t be able to see your mask. Choose Layer>Mask>Add Layer Mask and choose White (Full Opacity). The mask colours everything the colour of the layer, except the areas where you paint. Think of it like this; it’s like placing a piece of paper on top of your drawing. To see the drawing below you need to cut out an area to let it show through. That’s what we’ll be doing next.

For clean lines we’ll blank out everything but the shape of the octopus below.
First select your drawing. I found the Scissors Select Tool does a really nice job of this. Making sure you’re still on your new Layer Mask layer, choose a starting point on the outline of your image and then click along the outline to make the selection. The tool automatically fills in the edges between each node:

Once you’ve selected the image, press Enter to confirm the selection. Now use the Bucket Fill Tool to fill in the selection. Any colour is ok since this is just a mask and won’t show in the final image. You can be fancy and change the opacity or just go for full opacity if you simply want to cut it out. Now when you’re happy with the mask go to Layer>Mask>Apply Layer Mask to complete it.

You should now have your completed image!

Now for the decal. You’ll need to acquire some printable vinyl available from specialist photo paper suppliers. The vinyl will either have an adhesive or will cling statically - probably the better option for a MacBook decal. Check which side is printable and if needed flip your image so it prints out as intended. All that remains to be done is to print and cut out your image. Done!

View License

I took yesterday off work and away from my computer for May Day, hence yesterday’s lack of posting. As a result I’m behind with my work so today’s tutorial will be along later today. In the mean time I found this funny, not sure why, but it was funny.

The Polygon Tool is great for drawing basic shapes like squares, hexagons and even stars but did you know you can use it to make more complex shapes?

The key to this technique is to use star type polygons. They have an extra handle that you can use to distort the shape.
Try it by making a 4-sided star polygon.
It will look something like this:

And if you change the Rounded value to 0.5 you’ll see you get smoothed corners.

Now select the Node Editing Tool and move the inner handle inwards to create a thin “plus” shape.

Now move the other node around so that the shape rotates through itself to distort it into a fan shape.

If you select the Polygon Tool again (click on the shape) you can go back and play with how rounded the shape is, how many corners it has, the spoke ratio etc. which will vastly change the shape. Here’s what happens when you round the corners to 2.0.

Increasing the corners to 8 sides creates a completely new shape.

Now if you go back and edit the node positions again you’ll get something different.

As with any object you can resize and rotate in the normal way and edit colours and stroke styles. Here are a few more examples:

Left to right: Corners: 9, Spoke Ratio: 0.295, Rounded: 2 | Corners: 7, Spoke Ratio: 0.016, Rounded: 0.5 | Corners: 16, Spoke Ratio: 0.033, Rounded: 0.5 (with additional bucket fill on outer teardrops).

If you’d like to have a go with the shapes above or use them in your work, download the svg file here and don’t forget to view the license agreement

Ever wonder how some people go from idea to finished graphic? Me too. Usually I like to work to a design for a reason - maybe it’s a graphic for a new website, an icon or a new business card. It’s so much easier when you have a brief.
So what do you do when you haven’t got a brief but you’re in the mood to draw? Usually what I do is take a look around, go for a walk, see if anything inspires me.

For this piece I drew what was sitting right in front of me - a pot plant.

Here’s a picture of the orchid I worked from:

Orchid flowers are pretty complex so to make things easier I worked on small pieces. I found it much easier once the flower was broken down into petals.

Here’s an overview of the individual pieces that make up the orchid graphic:

The two scallop shaped petals started out as circles. They were converted to paths and after adding a few nodes I was able to create this shape. The picture on the left shows how the nodes are arranged. The right-most node is symmetrical to make an even curve. The two nodes either side are angled inwards to help pinch the shape into a point where the pink colour begins. You might need to do some tweaking to get the right shape but if you begin with a circle it shouldn’t be difficult.

The three oval-shaped petals were also created by starting with a circle and adding nodes. Some of the nodes were moved around and the curves edited to create a slightly irregular shape to make the flower look more natural. Copy and paste to create two more petals and edit them slightly to make each unique. Rotate each petal until you’re happy with the configuration.
You’ll notice the real petals have a vein down the middle of each. I used the Bezier tool to draw a curved line, set the stroke to be a semi-opaque grey and blurred the line slightly to soften it. Each petal needed its own line redrawn to maintain the organic look.

For the inner petals I copied the two scallop shapes and scaled them down. The tube (middle) part was the hardest part to do. It was difficult to get the perspective right so I just had to make roughly the same shape as the photo showed. That was made from a rounded rectangle shape with some nodes moved around and the path reshaped.

The last few shapes are made up of a flatted oval shape for the yellow part and an enlongated oval with a few additional corner nodes to make the points. It looks like a pretty complex shape until you see how simply the nodes are configured.

Most petals were coloured using a gradient of magenta→off white. It’s important to apply the gradient to each element individually since on the real orchid each petal has its own colouring.

As there’s so much white-on-white the upper shapes were given shadows.
To make a shadow:

• Select the shape to be given a shadow.
• Copy the shape and use Edit>Paste in Place to paste a copy on top of the original.
• Change the colour of the new shape to pale translucent grey and add a blur (less blur for harder shadows).
• Increase the size of the new shape slightly. Be sure to maintain the size ratio.
• Move the grey shape down and to one side by a few pixels in the opposite direction to where the light source would be.
• Ensuring the grey shape is selected use the Lower Selection button to put it behind your original image.

All that remains to be done is to put all the shapes together and the orchid is complete.

If you would like to use the SVG file you can download it here but read the license agreement first.