Metuchen High School: GIMP

 

Making a Background
                       

Example 1

This is an example intended to show you how making a background image can be done.  You are not expected to do this exercise; the exercise that you are asked to do is discussed below.

Consider this image of the U.S. Capitol building:

If you use this photo as a background image for a web page, here is how it looks: test.html

Now let's revise the photo to make it more attractive as a background image.  Apply the Make Seamless filter to the photo: Filter > Map > Make Seamless.  This is the resulting image:

If you use the revised photo as a background for a web page, here is how it looks: test2.html

 

Example 2

Let's make an image suitable for use as a background, based on a gradient.  Start by creating a new image.  Here I used the dimensions 1500 pixels wide and 10 high.  I used 1500 pixels in order to be sure that the image doesn't "wrap around" horizontally.  And I used just 10 pixels high because it is sufficient here, and it helps keep the file size small.

You can zoom in to 400%.  Make a rectangular selection.  At this zoom level, the rectangle should fill most of the width of the screen.  Choose a foreground color.  Click on the Bucket Fill tool.  Click inside the rectangle and it should fill with color.

To create the gradient part of the image: choose a background color (possibly white) that goes well with your foreground color.  Make a rectangular selection to the right of the current rectangle.  At 400% zoom, the rectangle should fill most of the screen width.  Choose the Blend tool.  In Blend tool options, set up the gradient as you want it to appear.  Click at the left of the new rectangle, drag to the right and release.  The rectangle should fill with a color gradient.

Here's a screen shot (at 100% zoom) of the background after it is complete:

 


Here's how the image looks as a background: test3.html

 

Exercise
Find an image that you'd like to work with and use as a background image.  Apply the Make Seamless filter to it.  Generate a simple web page that shows how well the revised image functions as a background.

Make a background with a solid-color section to the left, and then a gradient blending into a pastel color.  Generate a simple web page that shows how the image functions as a background.

 

GIMP Links
www.awardsites.com/tutorials/gimp/smlsbkg01.htm
docs.gimp.org/en/plug-in-make-seamless.html
docs.gimp.org/en/gimp-concepts-gradients.html


 

Videos