How To Make Header Images in The Gimp That Don't Look Terrible

**ThePaintGuru** · 03-19-2008 03:55 PM

Are you a complete newbie, who uses sites like bannerbreak.com to generate titles?

Want to make something a little more appealing and unique?

Here are a few quick tricks for you:

For this tutorial, you need the free image editor called The Gimp (GNU Image Manipulator Program), which you can get at gimp.org. Photoshop will also work fine, but the commands will be different.

When I make a header image, I always use a gradient. Why? Gradients have become popular because they look nice and don't require much effort or skill to create, which is great for me

. Let's say you want to create a header based on this background image, which is the easiest way to do this.

First, go to a free stock photo site like openphoto.net or piotrpix.com. You want the image to be generic and look nice. Get it into The Gimp by right clicking on the image, copying it, and then pasting it as a new image under FILE> ACQUIRE.

Next, create an image the size that you want your header. Here we'll do 640x200, which is a little on the small side but will be faster for you to view if you have dial-up. On a real site it will usually be 720 or 800 pixels wide.

You have 2 options now:

1. If you can crop a nice horizontal section of the photo, do it this way ON THE ORIGINAL PHOTO YOU PASTED AS NEW. You will want to select an area that is within the aspect ratio of your image, so after you have clicked the select tool check the Fixed box, go to aspect ratio, and type the size of your image (IE 640:200). Then go to crop to selection, and scale it to the size of your header by selecting it and using IMAGE> Crop to selection.

2. If your image is square and can't be cropped well, as the one in my example is, you will have to crop it as small as you can and scale it so the height fits your header's height. To make it blend in nicer, keep the image you inserted selected and apply a filter to it that will affect the edges. Here i've done a Xach effect, which means that I will be putting the gradient underneath.

***FOR THOSE WHO DID OPTION ONE***
Now that you have the image in nicely, create a new layer that is the same size as your image. Open the layer dialog under the dialogs menu, and make sure your new blank layer is on top, then set the opacity to something less than 100. You will adjust this value later. Now, select a good color for your gradient (might want to use the eyedropper tool), and apply a linear or bilinear blend from top to bottom. The blend, or gradient, is that tool that looks like a white to black fade. Keep trying blends until one works.

***FOR THOSE WHO DID OPTION 2***
If you applied the xach effect or some similar effect, go into the layers dialog and select your first layer with the photo. Go to layers>transparency>add alpha channel. Then grab the magic wand, select any white background area, and delete it. Move this layer to the top of the heap. Then do what I outlined above, except without the transparency because the gradient is below. It will also need to be a softer color transition to look good.

Text should be added on top of the gradient in most cases, and looks good with a drop shadow. To do this, create the text in yet another new layer on top of all the others, and use the select by color tool to select the text without any background. Then go to filters>light and shadow>drop shadow, and apply.

Here's what I came up with for an imaginary site about boats:

As I promised, it doesn't quite look terrible

.

And finally, sorry if this was unreadable... I've never been much of a writer but I thought I'd give it a shot.