How to Create a Header Image for Your Website Using the Free GIMP Program

Document Menu - click a link below to find your subject within this document.
Install Gradient Files Creating Web 2.0 Text Effects Creating Reflection or Mirror Effect Other Resources

What You Will Learn

Using this e-book you Will Learn To: Create an attention grabbing Header image for your website all for free. Get free Photoshop Headers, then Put Your Own Text on them There are many free header images available for download on the internet just search for free psd headers You can then modify the text or add text to the header and make it your own. Or you can create your own header from scratch with a background, a gradient background or an image for a background. You can then add smaller images on top of the background. You see many headers composed of several images laid over a background. GIMP stands for GNU Image Manipulation Program GIMP is a FREE, open-source program which allows you to do many of the things that Photoshop does. Photoshop costs around $600. If you just want to do some occasional editing as in Creating a Website Header, GIMP seems to be a much better choice.

Gimp Tutorial

Page 1

Download Gimp
This document uses Gimp Version 2.4.5 as an executeable (ends in .exe) meaning that if you double click the file name, it will execute or run a program (in this case, an Installation Program). You can download Gimp for FREE here: http://gimp-win.sourceforge.net/stable.html Save the file on your desktop or to your main drive in the folder named gimp c:\gimp\ Once you have it on your computer, double-click on the filename and it will begin the Installation. You will see a Welcome to the Gimp Setup Wizard as shown below.

Gimp Tutorial

Page 2

The next screen shows as below

Choose Next to continue

Gimp Tutorial

Page 3

Click Install Now button to continue The program installs and you see the screen below

Gimp Tutorial

Page 4

Check the Launch The GIMP checkbox Click Finish to Launch Gimp You can also Start Gimp from the Start button on the Task Bar, then choose Gimp from the list of programs.

Installing the Gradient Files

We want to have the Gradients available to GIMP so we need to install them. Heres how to do that.

Unzip the File with the 30 Gradients into the same place where you installed Gimp. I think it will be this folder C:\Program Files\GIMP-2.0\share\gimp\2.0\gradients By loading them into the correct folder, those gradients will become available to Gimp.

Gimp Tutorial

Page 5

Check to see if Gimp can locate the Web 2.0 Gradients

Gimp Tutorial

Page 6

Gimp Tutorial

Page 7

Now we have, so far, Installed Gimp

click to get applause

Installed the Web 2.0 Gradient files so Gimp can find them.
In this next section you will learn to create eye-catching Text Effects In the last section you will learn to Create or Modify Photoshop Website Headers images.

Create Web 2.0 Text Effects

Gradients are used in backgrounds and within Text in creating Web 2.0 Graphics. We will use the gradient files that we installed for Gimp. By the way the Gimp Installation already has some gradients as soon as it is installed. First we create a canvas on which to work. Its just a file, an area on which we will create the graphic. From the Menu Bar select File, New, then set the size of the graphic. Headers are generally created in a width of 700 to 750 pixels and the height of 125 to 150 pixels.

Gimp Tutorial

Page 8

Click the OK button. We get the screen below.

Gimp Tutorial

Page 9

To Insert Text, Click the A icon on the Gimp Toolbar, then click anywhere in the canvas. A window appears into which you type the text that you want inserted.

Lock the text layer and choose Alpha to Selection so we can continue to edit the text.

Gimp Tutorial

Page 10

Gimp Tutorial

Page 11

To put a black stroke or outline around the text we first Grow the Selection which will make a layer that is 3 pixels bigger than all the text characters all around them. Then we make that layer black and place the layer behind the original text so that it extends beyond all the original text by 3 pixels. This makes the text bigger and makes it standout more. Create a new layer and name it border.

Fill the new larger area with black to get the screen below.

Gimp Tutorial

Page 12

Drag the border layer below the Xis1.com Sales Tools layer and it will look like this:

Gimp Tutorial

Page 13

That might be enough to make the text suitable for your use. But reflection is part of the Web 2.0 effects so heres How to do the Reflection

How to Add a Reflection or Mirror Effect to The Text.

First we want to make duplicates of the text layer and border layer.

Gimp Tutorial

Page 14

Arrange the layers like the image below.

Gimp Tutorial

Page 15

Tie the originals together and merge down. Then tie the copies together and merge down into one layer. Do that by clicking beside the eye icon of the original border and the original Xis1 Text. A chain link icon appears. Right-click one of the linked layers and select Merge Down from the drop-down menu.

Gimp Tutorial

Page 16

Repeat the linking and Merge Down for the duplicate layers. Select the Move Tool (the 4-pointed arrow) from the Gimp Toolbar. Move one of them below the other one.

Gimp Tutorial

Page 17

Continue to move the image and align it to the bottom of the other one. Flip the lower layer vertically so that it will appear as a mirror reflection.

Gimp Tutorial

Page 18

Gimp Tutorial

Page 19

After that you must click the image to make the layer flip. We have to add a layer mask to make the lower image invisible. Then we want part of the layer to appear so we use a gradient to go from invisible to visible so that only a portion of the image appears as a reflection below the first one. Right-click the lower image text and select Add Layer Mask

Choose Black (full transparency) then click the Add button.

Gimp Tutorial

Page 20

After that the lower text becomes invisible. Select the Blend tool and Click the FG to BG (RGB) This is what will Blend the invisible text back to visible which will make a partial reflection.

Gimp Tutorial

Page 21

To make the effect you MUST drag the cursor over the image. Start at the bottom of the visible text and drag to the top of the visible text and release the mouse button. The reflection should appear Gimp Tutorial Page 22

Keep the drag straight or the reflection will be more on one side than the other. If you dont like the effect of the drag, press Ctrl button plus Z and it will undo the effect and you can try again.

Now we will have our Reflection effect. Save the file and you are done. You should save the file as as Gimp xcf image or a Photoshop .psd image if you want to edit it later on. Save it as a .jpg or .gif or .png if you want to use it on a website.

Creating or Modifying an existing Photoshop Header file.

Open Gimp and Then open a blank header file in Photoshop .psd format as in the below graphic.

Gimp Tutorial

Page 23

If you have a header that does NOT contain text, great. But if it does already have text that was in place from Photoshop, you can not edit the text. Not a real problem. Just delete the text layer and the text will be deleted. Now we can insert text using Gimp and the Gimp text we CAN edit from now on.

Gimp Tutorial

Page 24

Gimp Tutorial

Page 25

Add new text as in the next graphic:

Next you can edit the Text:

Gimp Tutorial

Page 26

When finished, we Save the file We save as .jpg or .png because the Browser can NOT display .psd files

Gimp Tutorial

Page 27

We got a dialog so we choose to Export

Gimp Tutorial

Page 28

Thats it. Now put the header graphic into your webpage on your computer if you are working there or upload it to your Website if you want it on your webserver.

Other Resources
Hosting Get CPanel hosting for as low as $4.95/month Domain Names - Get Domain Names for $8.50/year. Marketing Tools Get everything you need to start Marketing on the Internet
Gimp Tutorial Page 29

One Stop for Internet Marketing Tools Web 2.0 Text Online Creation Tool Create Text Online Build Your List Ultimate AutoResponder Pro will capture visitors name and email address and save in a database so you can send follow up email. Website Tips How to do things with your website.

Click for applause.

Return to Top of Document

Gimp Tutorial

Page 30