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.
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.
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.
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.
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.)
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.
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
Is Netscape Losing the Browser Wars?