INTAC - Internet Access Digital Photography, Graphic, and Image Articles Index. MozillaQuest MQ Logo
MozillaQuest the on-line computer magazine
February 25, 2004
EPIX Internet Services
MozillaQuest Magazine Front Page button

Internet & Web browsers button

custom Netscape & Mozilla themes & skins button

IRC - Internet Relay Chat - Chat button

Linux buttonLinux for Windows Users

Mozilla button

Netscape button
network articles

tutorial - help - how to button

Windows button

Mike Angelo's Digital Darkroom

How to Use GIMP for Photo and Image Editing #3:

Framing Photos and Images

Use GIMP rather than Photoshop and save money

Mike Angelo -- 25 February 2004 (C) -- Page 2


Article Index
Figures Note:

Due to page layout constraints, the figures will not always be adjacent to the text referring to them. If you have a tab-capable browser such as Konqueror, Mozilla, or Netcaptor, then you can open separate tabs for each figure in addition to the tab in which you are reading this tutorial. That way, you can simply flip tabs to view a figure to which the tutorial text refers. Another way to do this is to have two browser windows open and tiled vertically. In one browser window have the tutorial text. In the other browser window have the figure to which the text refers. If your monitor has a large enough resolution setting, you will be able to view the text and the figure to which it refers at the same time.

  • Into the Digital Darkroom

Let's enter the digital darkroom and start this lesson by opening the GIMP. That should bring up the GIMP Toolbox and the default combination dialog box.

(In pre-1.3 GIMP versions there are no combo dialog boxes they each are individual, rather than combo, boxes. If you are a Photoshop user, please note that palettes in Photoshop are called dialogs (as in dialog boxes) in GIMP.)

Figure 1, on page 1, shows the barn photo that will be framed in this tutorial. A brightness adjustment of +107 and a contrast adjustment of +75 already have been made to the photo. The original digital-photograph was shot with a Microtek S1 digital camera at 2048 x 1536 pixels (interpolated). It then was cropped down to 1300 x 856 pixels and scaled down to 570 x 375 pixels for use in this tutorial. A text layer with the photograph name and copyright information has been added to the photo.

For more information about cropping, scaling, brightness adjustment, and contrast adjustment please see Part 1 of this tutorial series. To learn how to add a text layer and a pattern layer, please see Part 2 of the Gimp tutorial series.

The Toolbox is the upper left box in Figure 1 and the combination dialog box is the lower left box in Figure 1. The Layer List is displayed in the Figure 1 combination dialog box. Click on the fifth from the left icon in the combination dialog box to display the Layer List.

The barn photo to be edited is in the Canvass panel in the upper right of Figure 1. Under that canvass panel are the Navigation Dialog and the Pattern Dialog. The Navigation Dialog is on top of, and partially blocking, view of the Pattern Dialog.

Now it's your turn to open an image that you want to use for this hands-on tutorial. To do that, go to the Menu Bar of the GIMP Tool Box, click on File > Open to bring up the Open Image dialog box. Then navigate to the image file that you wish to open and open it.

If you have gone through our previous tutorials and have an image opened for today's tutorial, you might want to skip right on down to the Add a pattern layer section.

If you do not have an image to use for this tutorial, simply use the GIMP to take a screen shot and use that screen shot for working through this tutorial. To take a screen shot simply go to the Menu Bar of the GIMP Tool Box and click on File > Acquire > Screen Shot to bring up the Screen Shot dialog box.

In the Screen Shot dialog box, click on the Whole Screen radio button to set it active. Next, please click on OK.

That should bring up a GIMP canvass or workspace window with an image of the entire monitor screen at the time you made the screen shot. Then, crop that screen shot so that it is the same size as the barn photo in Figure 1 (570 x 375 pixels). If you do not know how to use the GIMP's crop tool, please see The first cropping in Part 1 of this tutorial series.

Whether you have opened an image from your files or have made a screen shot to use for this tutorial, it should resemble the canvass window in the upper right of Figure 1 except your image or screen shot will be in the canvass window rather than our barn photo.

If you like you can take that screen shot so that Figure 1 is included in the shot. Then crop out everything but the barn photo. That way you can more easily follow right along with what we are doing here.

In Figure 1, all the boxes and the canvass window were packed together in order to make a compact screen shot for the figure. However, as you have been opening the dialog panels and image canvass, you might have noticed they are not packed together (docked). Rather they are floating separately.

The floating dialog panels and canvass are nice as they let you arrange your entire screen to let you work the way you like to work. You also can dock them together if you like. However, arranging your workspace and docking are not part of today's tutorial.

Before you start any actual editing of a photo or other image, it is a good practice to make a backup copy of it. That way if you mess up while making your edits, you still have a copy of the original.

  • Add a pattern layer

As you now will see, putting a fame or border around a digital photo or digital image is a very easy thing to do once you have learned how to use the Gimp's layer and pattern tools. All you have to do is place a pattern layer under the photo or image layer -- and make the pattern layer just a little larger than the photo or image layer.

Conceptually, the Layer List in the Layer Dialog essentially is a side view of your canvas and the layers that make up the canvas. Conceptually, the canvas view is a top-view of the layers that make up the canvas. Therefore, when you look at the canvass, you are looking down at and through the stack of layers.

Thus when you place a pattern layer under the photo or image layer, the photo or image will cover everything in the pattern layer that is underneath the photo or image. By making the pattern layer just a little larger than the photo or image layer, the part of the pattern layer that hangs out from under the photo/image layer will appear as a frame or boundary around the photo/image.

  • A bigger canvass

In order to have the Frame-layer (the pattern layer) hang out from under the photo-layer we first must increase the canvass size so that it is larger than the photo size. For our example today, let's make a 10-pixel wide frame around the photo. That's perhaps a little narrow for a frame. However, we want to emphasize the barn photo in this project. So, the frame is purposely narrow.

In Figure 2, below, the new canvass size has been set to 590 x 395 pixels. That makes the canvass 10-pixels bigger than the photo on each of all four sides of the barn photograph.

You have to add 20 pixels to the width to get an extra 10 pixesl on the left and then on the right. Likewise you have to add 20 pixels to get an extra 10 pixels on the top and also on the bottom.

Figure 2. The GIMP Set Image Canvass Size pane. (Screen shot of GIMP version 1.3 running on SUSE Linux 9.0 and the KDE desktop for Linux. Please see text for an explanation.)


To do that, open the Set Image Canvass Size panel -- Image > Canvass Size. Next, make sure the Constraint Aspect Ratio lock is unlocked. It's the little linked-boxes icon to the right of the Ratio input boxes in Figure 2.

The reason for unlocking the Constraint Aspect Ratio lock is that you want to put a border of the same size on each of the four sides of the photo. So, you do not want the Gimp to set the New Height once you set the New Width. You want to control each of those values yourself.

Next, type 590 for the New Width and 395 for the New Height. Then center the photo on the expanded Canvass by clicking on the Center button. That will put 10-pixel X and Y edge offsets for the photo into effect. To finish this step, now click OK.

Figure 3, below, shows the 570 x 375-pixel barn photo centered on the expanded 590 x 395-pixel canvass. Now, we are all set to put the frame around the barn photo.

Figure 3. Screen shot of the 570 x 375-pixel barn photo on the expanded 590 x 395-pixel canvass Please see text for an explanation. (Country Barn photo by Mike Angelo)

  • Create a new layer

To create a new layer, please click on the New Layer icon in the Layers Dialog. The New Layer icon is the left-most icon at the bottom of the Layers Dialog in Figure 1. That pops-up the Create a New Layer Dialog. (Figure 4, below.)

Figure 4. The GIMP Create a New Layer Dialog pane. (Please see text for an explanation.)

You can name the new layer whatever you like. In this example it gets named Frame. The new Layer Width and Height should be larger than the photo dimensions. In this example, that's the same as the expanded canvass size, 590 x 395 pixels.

Pick Foreground for the Layer Fill Type. Click OK.

Now, the Layers Dialog should show three layer entries, the original Background layer on the bottom, the text layer on top, and the new Frame layer in the middle. Please see Figure 5 on page 3.

The photo/image canvass now appears all black. Don't get nervous about that. It is exactly what is supposed to happen at this step.

The new, Frame-layer is black because we set it to have the Foreground color, which currently is black. Moreover, because the Frame-layer is above the photo (Background) layer, it blocks view of the barn photo on the Background-layer.

In order to be able to view the barn photo, the Frame-layer has to be moved below the Background-layer.


  • See Moving the Frame layer on Page 3 ----->
  • See Add the wood frame pattern on Page 3 ----->
  • <---- Back to Page 1

    Related Articles


    Article Index
    Overview of The GIMP - a free photograph and digital-image editing program

    How to Use GIMP for Photo and Image Editing:


    OpenOffice 1.1 -- A Complete Office/Productivity Software Suite for GNU-Linux, FreeBSD, MAC, MS-Windows, Unix, and more

    Creating a Simple Newsletter with OpenOffice/StarOffice Writer - a free word processor

    Creating a Simple Contact or Personal Information Manager with OpenOffice/StarOffice Calc - a free spreadsheet

    Creating a Personal or Company Budget with OpenOffice/StarOffice Calc - Part 1: Basics


    SUSE Linux Has New Educational Discount Program - 9.0 Professional Only $50 for Students, Teachers, Schools

    Crossover Office 2.1 Runs MS Windows Software on GNU-Linux Systems -- Jeremy White, and Mike Angelo Discuss Crossover Office, Wine, and MS Windows APIs for Linux

    MandrakeSoft's 8 Golden Rules


    Young People Are The Future of Linux -- Gaël Duval, Joe Eckert, Randy Plessor, Jeremy White, and Mike Angelo Discuss Linux and Open-Source Software in Schools and Colleges

    SuSE Linux Desktop Available

    A KDE Tool to Manage and Read E-Mail: KShowmail Shows Potential -- But It Can Delete the Wrong Messages


    Using LinNeighborhood to Create a Network Neighborhood for Linux

    Linux Networking for Windows and Desktop People -- Mandrake 9.1 and LinNeighborhood


    Mozilla 1.3b Browser-Suite Released


    Copyright 2000-2004 -- MozillaQuest -- Brodheadsville, Pa..USA -- All Rights Reserved
    Recent Articles

    How to Use GIMP for Photo and Image Editing:

    Deja Novell All Over Again

    Novell Linux Dominates LinuxWorld 2004: Overview

    LinuxWorld in New York City -- 20-23 January 2004

    Does Dell Support Linux?

    How to Use GIMP for Photo and Image Editing

    Overview of The GIMP - a free photograph and digital-image editing program

    Creating a Personal or Company Budget with OpenOffice / StarOffice Calc -- Part 1: Basics

    MandrakeSoft's 8 Golden Rules

    A KDE Tool to Manage and Read Email: KShowmail Shows Potential - But Can Delete the Wrong Messages

    OpenOffice 1.1 -- A Complete Office/Productivity Software Suite for GNU-Linux, FreeBSD, MAC, MS-Windows, Unix, and more

    SUSE Linux Has New Educational Discount Program - 9.0 Professional Only $50 for Students, Teachers, Schools

    Crossover Office 2.1 Runs MS Windows Software on GNU-Linux Systems -- Jeremy White, and Mike Angelo Discuss Crossover Office, Wine, and MS Windows APIs for Linux

    Mandrake Linux 9.2 Available

    Young People Are The Future of Linux - Linux and Open-Source Software in Schools and Colleges

    CNN SUCKS!

    Gaël Duval Tells Why Mandrake Linux Is Better Than MS Windows

    Gaël Duval and Mike Angelo Discuss The HP-Mandrake Computer

    HP to Ship Desktops with Mandrake 9.1 Linux Pre-Installed - Good News for Mandrake Linux and Fans

    Mozilla 1.4 Browser-Suite -- AKA Netscape 7.1

    Gaël Duval and Mike Angelo Discuss Mandrake Business Products and Finances

    SuSE Linux Desktop Available

    About the Hey SCO, sue me Petition

    Linux for Windows Users -- Linux Networking for Windows and Desktop People -- Mandrake 9.1 and LinNeighborhood

    Gaël Duval and Mike Angelo Discuss the New AMD64 OS --

    Mandrake Linux Corporate Server 2.1 for AMD Opteron

    SuSE Linux Enterprise Server 8 for AMD64 Released

    Major Morphing in Mozilla Project Organization and Objectives Proposed

    Red Hat Linux 9 Distribution Released

    SCO-Caldera v IBM:

    • Are SCO's Rebuilt IBM Lawsuit and Unix License Revocation Winners -- Or More SCO FUD?

    Mandrake Linux Corporate Server 2.1 Released

    SCO-Caldera & the GNU/Linux Community: The SCOsource IP Matter

    Mozilla 1.0 updated!

    Don't Forget the Books

    Linux Makes a Great Gift

    Christmas Season Holidays & Computer Suggestions 2002

    Mozilla 1.2.1 Browser-Suite Released

    Buggy Mozilla 1.2 Recalled

    Mandrake Linux 9.0, Desktop Magic You Can Use: A First Look

    Using LinNeighborhood to Create a Network Neighborhood for Linux

    Zero Tolerance for Privacy and Security Bugs

    Mozilla and Netscape JavaScript Bugs Compromise Privacy and Security

    SCO's Darl McBride and MozillaQuest Magazine's Mike Angelo Discuss Caldera Linux and LSB

    UnitedLinux: A Standard or a Distribution?

    UnitedLinux, a Divisive Weapon for Caldera's Darl McBride -- Part II

    Holger Dyroff, Gaël Duval, Mark de Visser and Mike Angelo Discuss LSB, UnitedLinux, and the Linux Market

    UnitedLinux, a Divisive Weapon for Caldera's Darl McBride -- Part I

    Netscape Communicator 4.8

    Scott McNeil Discusses LSB

    New Mozilla Roadmap Kills Mozilla 1.0.x

    Mozilla 1.0 Browser-Suite's E-Mail & News Quick Look

    Mozilla 1.0 Browser Quick Look

    Mozilla 1.0 Browser-Suite Performance -- Speed, Stability, and Memory Hogging

    Mozilla 1.0 is Officially Out!

    Some Mozilla 1.0 Browser-Suite Annoyances, Bugs, And Issues

    Mozilla 1.0 Not Ready for Prime Time -- Close but No Cigar and No Brass Ring!

    Turmoil in MozillaLand:

    Mozilla 1.0 Browser Sneak Release

    AbiWord 1.0.1 Quick Look - MS Word Clone for Linux, MS Windows, & More

    MozillaQuest Magazine 2001 Editor's Choice Hardware Picks

    Getting Started with Wireless Network Technology

    Part III: Adding Wireless to a Linux-Based Laptop or Notebook

    Is Mozilla Actually AOL-Netscape's Mozilla?

    Bugzilla 2.16 - 2.14.1

    Year 2001 in Review -- Mozilla and Netscape Browsers

    Free Software for Your New Computer -- Or Any Computer

    Linux Gifts for Christmas, Holiday, and All Occasions