Site hosted by Angelfire.com: Build your free website today!

Using Gimp (Part Three)

Using Layers to blur or highlight parts of an image

Next up is a fairly simple way of adding some blur to an image,
which can be useful in portraiture to blur the background around
the subject, or to add some blur to parts of a person’s face, while
accentuating his/her eyes. Professional photographers use this
technique as a quick fix to mask minor facial blemishes, or to
achieve a soft focus effect.

Have a look at these two photos (click on each one, to see a
larger image) to see how I've added blur to the area around
the cat's head.

Before	After

To add the blur effect, open up your photo into Gimp
(Ctrl + letter O, and then browse for your photo).

If necessary, scale the image down in size (to fit your webpage)

(Image on top toolbar > Scale image, etc..)

Click on Layer on top toolbar > “New from visible”
Click on the Layers button at the top of the Rt hand panel, if
you can't see the Layers dialog showing the two layers.

You should now see two layers … a visible layer is sitting
on top of the background layer. You can hide the visible
layer if you so wish by clicking on the tiny eye icon
alongside.

Now, to blur the top layer …

Select Filters on top toolbar > Blur > Gaussian blur
> OK

You can experiment with the amount of the blur radius
if you like.

(use Undo History to go back in time, so you can try out
different amounts of blur)

Select the Eraser tool (the red India rubber icon) in the
Lt hand panel.

From the control panel below this, select a brush with a
fuzzy circle (a soft edge to it). You could experiment with
a lower opacity of about 50%.

Position your eraser over the image, and adjust its size
in the box in the left hand panel.

The Eraser tool will erase the top layer of your image,
to reveal the background layer just below it, so apply the
eraser to those parts of your portrait you wish to
accentuate, with a series of brush strokes.

As you’ll see from the second photo above, I've used the
eraser tool over the cat’s head, and have left the
surrounding areas as blurred.

Time now to save your work. First of all, flatten the two
layers down to one layer ... Rt mouse click in the large
white empty space in the Layers dialog > select "Flatten
image". Then select File > Export to save it as a jpeg
image.

For a jpeg image, you will then be asked to select a
quality (which reflects the amount of jpeg compression
you wish to apply). For website use, you might wish to
reduce the quality to about 80% to reduce the overall
size of the image in terms of kilobytes. You should not
notice much difference in the appearance of the image
at 80% quality.

Select the quality you’d like > Save

You can check out the size of your photo in kilobytes,
by going to the photo folder, and hovering your mouse
pointer over your image.
You can also check out the size when it's in Gimp ...
open up your new image > Image > Image properties.

To create the following sloping line of text …

Create a new white blank canvas to write on….

Ctrl + N.
Change the dimensions to 200 x 100px.
Standard resolution: 72 px/ins

Use the Zoom tool to enlarge the canvas

Click on the Text tool (the icon with the letter A on it)
Select Lucida Handwriting, size 28, royal blue colour.
Write whatever text you like on it e.g. “giftaid it”.
To centre the text on the canvas, click on the Move
tool, then click on one letter in the text, & then drag
the entire line of text to a centre position.

This text is on a separate layer, and can be rotated ….

Click on Tools (on the top toolbar) > Transform
> Rotate.

Rotate it as you wish, and then click on the Rotate
button on the menu.

Now to flatten the 2 layers …. Right mouse click in the
large white space in the layers panel > Flatten image.

Before you save your work, you could crop the image
slightly, to reduce the amount of white space around
the text.

File > Export. Save as a jpeg image at 100% quality,
to a folder of your choice.

To create a lens flare effect on your text ...

After creating the text on a graduated blue background using
Lucida Bright Italic Semi-bold font, plus a little drop shadow,
I flattened the two layers (text and background layers) by a Rt
mouse click inside the white area in the Layers Dialog box.

Then I selected Filters > Light and Shadow > Lens Flare
I re-positioned the flare by adjusting the x and y values, and then
saved my work.

Filling text with an image

Here is an outline of how to do this …my thanks to Tom’s brilliant article at the following website address …

http://boitblog.blogspot.com/2008/12/filled-text-tutorial.html

Create a new image (Ctrl + N & then alter size to 600 x 180px)
Create a text layer (eg Impact Condensed font, size 77)
Select using the "Select by Colour tool ... you'll now see the
"marching ants" around the text.
Now delete the text layer use your Delete key, to leave
selection!
Copy your flower photo (cropped to same size ..
... Ctrl + A and then Ctrl + C
Go back to your text image & select Edit > “Paste Into”
Add a drop shadow to a selection
(via Filters > Light & Shadow)
Anchor the layer (Layer > Anchor Layer)
Flatten the image
.............. Rt mouse click on white space in Layers dialog
Remove the "marching ants" ... Shift + Ctrl + A
& then save the image ... File > Export

Here is one of my flower photos, which I've cropped ...

Here is the banner I created using the font shown above. (I've had
to scale down both these images to fit this website space).

Here's another one I've created ... you'll see the face of a teddy
bear peeping through the text. :)

If you’d like to create interesting designs with text, to go onto
your website, have a look at Wordle dot net.

If you have a look at the Gallery section of this site, you’ll see
examples of designs created out of text. The FAQ section
gives you some ideas on how to use the site, and how to save
your work.

To tie 2 words together, Jonathan advises linking the words
with a ~ , so that the order of the words doesn’t randomise.

Here’s a bit of text I created …

Touching up old photos

Often such photos will be showing signs of old age …
scratches / scuff marks, old age spots on the white borders
or frayed edges or water stains.

To start with you will need to digitise them … I use my
camera mounted on a tripod (for extra sharpness). Some
people use scanners, but these would have to be of high
quality to get a good image. Taking shots with a camera
can sometimes lead to slight distortion of the image, with
slight bulging of the image at the sides. All you need to do
here, is to crop the image & at the same time, trim off any
defaced white borders (with view to adding some brand
new borders yourself later). If your image has a fair amount
of white in it, you will need to increase the exposure
compensation on your camera to preserve the whiteness
(otherwise your whites will look grey).

If your image is discoloured due to past water damage,
you can change this colour to B&W using Gimp …
Colors > Desaturate … experiment with the shades of
grey on offer, & choose the best grey colour. Later on,
you can enhance the image using Curves … change the
straight line to a slight S curve (to enhance both the dark
and the light tones in the image), to make the image look
more vivid. This will help enhance faded colours in old
colour photos too.

It might look good to re-colourise a desaturated B&W
photo with sepia colour (Colors > Color balance … add
red +++, green ++ and some yellow ++, to your liking).

Beforehand you will need to spend some time using the
Clone tool (use a soft brush with medium opacity) to repair
all the defects in the image. Then you might have to use
Unsharp Mask, to sharpen the image slightly. The whole
process can be very time-consuming.

Here are two photos of my late father (taken in Army uniform
in abt 1940) ... a copy of the original alongside one that I've
touched up. You will see that I haven't quite got rid of the
water stain just below his tie, and there are also numerous
tiny defects which would take a lot more work to remove.

Click on each photo to see a larger image.

Before

After

Putting names onto old family photos.

First of all, create a new layer on top of your image (Layer >
New Layer). Choose white as the colour of the top layer.

Select the Layers Dialog box, and reduce the opacity of this
top white layer to about 50%, to allow the underlying layer
to show through slightly. Now you can type text on top of the
top layer, to name the individuals in the photo.

(The photo is of my mother Amy & her sister Irene, taken in abt 1919.)

Flatten the layers to one layer ... Rt mouse click in the white area in
the Layers Dialog box > flatten the image. Add a border if you wish,
& save your photo (with a slightly different title to the original photo).

You will see in the example above, that I've added a thin dark brown
border to the new image, to make it look better on a white background.
The original image was about 500 pixels in width, and I've added 4 pixels
to each dimension to create this thin border. You would have to experiment
with how many pixels to add, to get the result you'd like.

Another idea is to create a white border below your photo,
& to type the names into this white space.

Creating image maps with Gimp.

I've had a go at doing this, with one of several tutorials
I've found on the internet. Click HERE to see one of them.

Here is an image you've already seen, to which I've added a link to
Google. To create the pale blue area, I selected this rectangular shape
with the Rectangle Shape tool, and filled it with pale blue colour using
the Bucket Fill tool. I then added the text, flattened the layers and then
saved the image. To get started on creating the image map, go to Filters
> Web > image map. Select the pale blue patch using the "Define
rectangular area" tool that you'll see in the left hand margin. Once you've
selected the area, a menu will pop up, where you can paste in the Google URL. Then View > Source, and copy the code (using Ctrl + C).

I've inserted / pasted the HTML code I've created for this, into the
source code of this webpage, & then uploaded this Gimp page &
the image to see if it worked ...

Yes, it did ... I left the exclamation marks as they are, above the
image, as they don't show up when online.

(I've had a go at adding a javascript mouse-rollover effect
(colour change), but this didn't work for me).

Working in Layers to create an e-card

Basically, I've mounted a reduced-sized photo onto a plain
background / canvas, by a copy & paste technique, onto
which I've then added some text. You can use the same copy
& paste method to add one or more layers onto a background.

Click HERE if you'd like to read more about this ~ this link
will take you to a PDF file, which I created in Open Office.
You will see two light blue zoom tools at the top of the PDF file,
which you can use to change the size of the text. If you're
using Google Chrome, you will see the zoom tools lower down
the PDF page on the right hand side, which will appear when
you hover your mouse over the area.

Applying a canvas / painterly effect to a photo

Open up a photo into Gimp. Select Filters from the top toolbar
> Artistic > Apply canvas. I reduced the default setting to 2, to
get the following result ... it's a view of Weymouth Harbour, by
the way. There are other artistic options you can have a play
with.

(click on above image to see a larger version)

................ Page about handling RAW images