Tech bytes for tea?

Composite two photos seamlessly together using GIMP.

Now that you have learnt about Layers and Layer Masks, there are many tasks and effects that you can do using them. I had some questions from readers about how to apply certain effects to their photos so that they can use them in their websites.

Morning dew on flowers outside our hotel in Provence, France

Fading to white allows captions to be added.

Fading a photo to white (or any other colour)

This is easy. After opening the photo in GIMP, activate the BlendTool in the Toolbox.

The Blend, Move and Paintbrush tools are in the Toolbox.

In the Tool Options below the Toolbox, click on the rectangle beside the “Gradient” label and from the dropdown list of options, select “FG to Transparent” gradient.

Click on the Foreground Swatch in the Toolbox and select white from the “Change Foreground Color” dialog box that pops up. If you want the photo to fade to black, red or any other colour instead of white, simply select that colour and set that as the Foreground colour.

Now move the cursor to the image window and drag it from the left side of the photo to the right. A gradient going from pure white to nothing is overlaid onto the photo so that it appears as if the photo is fading into white. If you are not satisfied with the fading, press Ctrl-Z to undo and try dragging again. Trial and error is the best way to get your ideal fading effect.

To fade in more gradually, drag further. You can of course drag from right to left or drag vertically or diagonally – depending on how you want the fading effect to appear.

The disadvantage of this quick-and-dirty method is that the gradient is added directly onto the photo. Once you’ve saved and closed the file, you can’t adjust the fading effect to reveal more of the original photo anymore.

Applying the gradient on a separate layer

Here’s a non-destructive approach that allows the fading effect to be tweaked six months down the line.

Instead of applying the gradient directly to the photo in the Background layer, apply it to a new empty layer above the Background layer. This way, none of the pixels in the original photo in the Background layer is changed or “destroyed”. The fading effect can be changed anytime in the future by replacing or modifying the colour and gradient in the upper layer.

Here are the steps.

Apply the gradient to an empty layer above the photo.

Add a new layer by clicking the icon at the bottom left corner of the Layers dialog. In the “New Layer” dialog box that pops up, select the radio button for “Transparency” option under Layer Fill Type and press the OK button.

A new empty layer is added above the original photo in the Background layer.

Use the Blend Tool to add the gradient to the new empty layer.

The result is that the photo appears to fade into white. You can further finetune the overall effect by using the Move Tool from the Toolbox to move either the photo in the Background layer or the gradient in the upper layer.

Simply activate the Move Tool from the Toolbox, click to select the layer you want to move in the Layers dialog, and drag in the image layer to make the move. You may find it easier to first change the default option of the Move Tool to “Move the active layer” to better control which layer you want to move.

Merging two photos into each other (non-destructively)

Little house on the prairie? More like ruins in a field of lavender.

This intelligent Spaniel named Bugis lives on the lavender fields of the Valensole plateau.

Pleasant memories from our drive through Valensole in Provence

To merge two photos into each other, simply place one photo as a layer above the other photo. Add a layer mask to the upper layer and use the Blend Tool to apply a gradient to the layer mask. The two photos will appear to blend into each other.

Here are the steps.

Open the first photo in GIMP. The photo resides in the Background layer which is the only layer in the Layers dialog for the moment. Bring in the second photo as a new and separate layer by using the “File > Open as Layers” command from the main menu. The new layer sits above the first photo in the Background layer.

Right-click the image thumbnail for the upper layer in the Layers dialog. In the pop-up menu, select “Add Layer Mask”. In the Add Layer Mask dialog box that pops up, press the Add button – any of the options in the dialog box for initialising the layer mask is fine since we will be modifying the layer mask immediately after creating it.

Press “D” on the keyboard to reset the foreground and background colours to black and white respectively.

Activate the Blend Tool from the Toolbox using any of the three “FG to BG” gradients in the Tool Options. Because the layer mask is active, dragging the Blend Tool in the image window will add the gradient to the layer mask instead of the white layer itself. The layer mask hides part of the photo in the upper layer based on the gradient in the layer mask. The result is that the two photos appear to fade into each other.

Again, none of the pixels in the two photos are altered or “destroyed”. The fading effect can be changed anytime in the future by modifying the gradient in the layer mask of the top layer.

I've modified the layer mask by painting with the Paintbrush Tool.

You can further modify the blending by using the Paintbrush Tool from the Toolbox to paint either black or white into the layer mask. Remember – white reveals the pixels in the upper layer while black hides. Shades of gray makes the pixels in the upper layer translucent.

As before, you can also use the Move Tool to move either of the photos around.

In the photo of the landscape waterfall, the rocks around the artificial waterfall are too dark because they are lying in the shadows of the surrounding trees. I want to lighten the rock features. Download the before photo and follow along.

This tranquil landscaped lake was shot in the Nijojo Castle in Kyoto, Japan.

I want to lighten only the rocks around the waterfall without affecting the trees.

Lightening the rocks has lightened everything else as well, making the photo too harsh.

Brighten the duplicated copy by using Colors > Brightness-Contrast command from the main menu. You can see that in addition to the rocks, the other parts of the photo are lightened as well. That is the problem with global adjustments – when you lighten the shadows, the highlights get blown out.

A Layer Mask is added to the duplicated layer in the Layers dialog.

Black areas in the mask make the corresponding areas in the layer transparent/invisible while white areas make the layer opaque/visible. Grey areas make the corresponding areas in the layer translucent or partially visible.

The many selection tools in GIMP provide different ways to make and modify selections of people or objects in photos. The selected people or object can then be tweaked and adjusted without affecting pixels outside the selection. For example, the pixels within the selection could be darkened or lightened or the colour could be made more vivid.

Sometimes, none of the selection tools we’ve covered can quite select an object properly – parts that should be selected are not selected, while pixels that should NOT be selected are selected instead.

For example, in the photo of the youth working on his laptop, we want to isolate him from the mundane background and replace the background with something refreshing. But his outline is highly irregular and complicated so the Rectangle and Ellipse Select Tools are out – unless he is a rectangular or oval android.

Make a rough selection first using the Free Select Tool.

The Fuzzy Select, Select by Color, and Foreground Select Tools are also out of their depths here because there is not enough contrast between the youth and the colours making up the background.

In this case, we start by using one of the usual selection tools to make a rough first-cut selection first, and then modify and perfect the selection by entering the Quick Mask mode.

Here, I used the Free Select Tool to encircle the youth, his laptop and the table – including a small area just outside of the outline. You will see the “marching ants” indicating where the selection boundary is.

Entering the Quick Mask mode

Quick Mask mode overlays unselected areas with a translucent pink.

To enter Quick Mask mode, click on the Quick Mask icon (the small dashed rectangle icon at the bottom left corner of the image window), or press Shift-Q on the keyboard.

A translucent red tint is overlaid onto the photo showing the areas that are NOT selected.

This translucent pink overlay is called the selection mask. It works like masking tape in a physical paint job. You stick masking tape over areas where you don’t want the paint to get into, so that only the unmasked areas will be painted.

The selected areas – the youth, his laptop and the table – will be free from the red tint. Everything else that is not selected, like the grass, the chair and the wooden walls in the background are tinted temporarily with the translucent red.

Modifying and perfecting the Quick Mask

Do two things before going any further:

1. Press “D” on the keyboard to reset the colour swatches to black and white.
2. Activate the Paintbrush Tool in the Toolbox.

Zoom into the boundary area between the youth and the background to work on the details (“+” key to zoom in and Spacebar to pan). The default Foreground colour is black.

Reducing the selection

Paint on those areas on the photo that are NOT supposed to be selected but are selected – they are supposed to be overlaid by the translucent pink but are not.

As you paint, those areas will be overlaid with the translucent pink (although the Foreground colour is set to black) to indicate they have been unselected. Press the square bracket (“]” and “[“) keys to increase or decrease the size of the brush.

Adding to the selection

If you accidentally paint into the areas which is supposed to be selected, don’t worry. Click “X” on the keyboard to swap the colour swatches so that white is now the Foreground colour.

Paint on the quick mask until only the youth, his laptop and the table is not pink.

Paint over those areas that are supposed to be selected but are not – these areas are overlaid in translucent pink even though they are not supposed to be.

Instead of adding white, you will see the translucent pink erased from those areas painted, indicating that those areas are now selected.

In this way, finetune the mask, especially in the border region around the outlines, until only the youth is free from the translucent pink. Zoom in to inspect and work on the details.

You can switch between black and white for the Foreground colour by pressing X on the keyboard.

Confirming the selection

Check the marching ants selection boundary.

Press Shift-Q or the click on the Quick Mask icon to get out of Quick Mask mode. You will see the marching ants again indicating the selection boundaries.

The youth, his laptop and the table is now precisely selected while the background is not.

If you find the selection boundaries are still not perfect, enter Quick Mask mode again to modify the mask and get back out to check the selection boundaries. You can keep shuttling in and out of Quick Mask mode until the mask/selection is perfect.

Now any command you make within GIMP will apply only to the pixels within the selection.

Switching the background

Once you are happy with the selection, press Ctrl-C or Edit > Copy to put the selected pixels into the Clipboard.

Green fields and blue skies. Photo from morguefile.com

Open the new photo that will serve as the new background. Press Ctrl-V or Edit > Paste to paste the youth onto the new photo.

The pasted pixels will be added as a new temporary layer called “floating selection” that floats above all other layers in the image. In the Layers dialog, double-click the label of the floating layer type in a meaningful name and press Enter. The floating layer will be converted into a separate and permanent regular layer.

After: The refreshing green fields and blue sky matches the drink he is sipping.

Activating the Move Tool from the Toolbox, you can drag the pasted layer to re-position it to the right place. You may need to resize either the new background photo or the pasted layer in order to match the sizes.

The edge of the youth may look too sharp and artificial at the moment, but we’ll address that in tomorrow’s tutorial.

Pict 9: GIMP Text Editor

To edit the text in the title, click on it in the image window with the Text Tool. The Text Editor pops up again for you to edit the text.

Pict 1: Scrapbook cover/page

They share their photos online even while they’re still overseas on holiday, but nothing beats a physical coffee-table scrapbook for family and close friends to thumb through and pore over.

In the first half of this tutorial today, we’ll use a photo as a background for a scrapbook cover/page and bring in additional photos. We’ll resize them as thumbnails and position them on the page.

In the second half tomorrow, we’ll add text titles and captions, and add outlines to them, as well as the thumbnails.

Including additional photos as layers

Pict 2: Single Background layer when photo is first opened. This lonesome koyo was languishing on the grounds of the Ginkakuji in Kyoto.

When a photo file is first opened in GIMP, it resides on the single Background layer.

In our example, the photo file comprises the macro shot of the lone koyo (red maple leaf in Japanese) in the Background layer. We want to bring in two additional photos of koyo scenes as thumbnails.

Pict 3: Additional photos

Pict 4: Additional photos as layers

The two photos will be brought in as additional layers – one photo on each layer. For a quick introduction into layers and various ways of manipulating them, read Part 5 of the Basic GIMP series on “Correcting exposure using layers”.

You can see the different layers in the file inside the Layers dialog.

To reduce the size of the moat photo to a thumbnail, click on its name in the Layers dialog to select it and then use the Layer > Scale Layer command from the main menu. As a shortcut, simply right-click on the moat layer in the Layers dialog and select the Scale Layer command from the pop-up menu.

Pict 5: Scale layer down to thumbnail size

In the Scale Layer dialog box that pops up, I typed in 300 in the Width field. The Height field was automatically updated to 225 to keep the aspect ratio of the layer unchanged to avoid distortions. Both the default Interpolation setting of Cubic or Sinc (Lanczos3) will do the resizing with good quality.

Press the Scale button to complete the resizing.

Repeat the same process to resize the other photo into thumbnail size.

Pict 6: Move, Alignment and Text tools in the Toolbox

Positioning the thumbnails

To move and position the thumbnails, activate the Move Tool from the Toolbox. Now you can just click and drag any layer you see in the image window.

Pict 7: Options for the Alignment Tool

To align the two thumbnails, activate the Alignment Tool in the Toolbox. Click the first thumbnail and shift-click the second thumbnail to select both. You can also drag a rectangle that encloses both thumbnails to select both at the same time.

In the Tool Options, click one of the icons to align either the left or right edges of the thumbnails.

Tomorrow, we’ll add text captions and outlines to the elements in the scrapbook cover/page.