Create a header to match your image

Look through the templates on your website builder to see if they have any headers that match the style for your company. A lot of newbies without much design experience can use Photoshop, Gimp, or similar programs to create their own header. If you don’t have Photoshop already, I think using Gimp would be a good (free) choice for editing your images.

Start by downloading the PC version and the help section. There  is also a good FAQ section available.   I really like Gimp because it is free and has a lot of tools Photoshop offers (at least for beginning and intermediate users). Go to www.gimp.org for more information and tutorials.

To create a header using Gimp:

1. Find the size you’ll need for your header by logging into your website builder and checking the default size. Generally, headers heights are anywhere from about 100 to 400 pixels, but 100-200 is a normal range. It all depends on the feel of your site and what you like.

2. Once you know what size you want, open Gimp, then go to File > New, and type the values you want for the size of your header.

3. Add any backgrounds you desire, any images, and text. You can play around with different tools like the gradient tool (most appropriately used subtly, or to fade the edges of images into the rest of your header, so you don’t have a tacky 90s feel). Use any of the following suggestions:

a. To add a picture, open the file of the picture you want in Gimp. Now you should have two Gimp windows open. One is your header and the other is the image you opened. In the window of the image you want to add, go to Edit > Copy. Then select the box where your header is, and select Edit > Paste. (Try stock photo sites like http://www.sxc.hu/, istockphotos.com, dreamstime.com, and any other stock photo sites you find using Google.)

b. To add text, like the name of your company, a slogan, or quote, select the text button (T) from the Gimp toolbox. Type your text in the Gimp text editor that will pop up. To change the font of the text, go to the Gimp toolbar, > File > Dialogs > Font. If you want to change the color, click on the color boxes to adjust the outline or filler color.

c. I suggest adding a new layer for each element you want to add to the canvas (at the top of the box where your template canvas is, go to Layer > New Layer and title the new layer with the element your adding, i.e. “person smiling,” or “sky background,” etc.) If you need to edit, hide, show, or delete layers, or change the order of which layer is on top, go to Dialog > Layers to see all your layers. Gimp.org has some basic tutorials teaching you how to do basic things in gimp.

d. To create a gradient background in Gimp, select the gradient tool from the toolbar (green gradient in a box).

i. Select the Foreground Color Box (black rectangle with arrows pointing back and forth to a white rectangle on the left). Double click to select the color you want. Once you’ve messed around with it for awhile and have a shade you like, make sure to write down the RGB values for in case you want to match your color in the future. (RGB tells the computer the amount of red, green, and blue in a given color. Sometimes, you may also see CMYK, which is a way to keep track of colors in print rather than on a computer screen.)

ii. A tool options box should show up at the bottom of your toolbar (shows opacity, mode, gradient, etc.) If not, go to File > Dialogs > Tool Options and the box should appear.

1. From here, change the gradient box to be whichever style you desire. If you want a simple gradient, or multiple gradient on the same layer, select “FG to Transparent.” Any time you see grey checkers using Gimp or Photoshop, it means the background is transparent so you can see behind that layer to the next layer.

2. You can also change the opacity of the color you want on the dark end of your gradient, if desired.

iii. Then pull your cursor over to the canvas and click on the spot you want to be dark, and drag over to the place you want to be transparent (don’t worry, this will turn into white in the final product. If you want the canvas to have a gradient in another spot, repeat the process by clicking where you want the second edge to start (dark color), and drag over to where you want the gradient to end.

4. Then save your image as an XCP (Gimp) file. I suggest saving often, and creating a copy of the original whenever you want to add a new element to your picture! When you’re ready to use a final image on your site, make sure to save it as an XCP file, but save a copy as a JPG file that can be used in your website builder.

5. You are starting to learn some of the basics of Gimp already!!! I promise it can be a lot of fun to work with once you know what you’re doing. When you can manipulate any image, you’ll never feel confined with your options again. I’d start trying to learn more by going through some of the beginner tutorials at www.gimp.org/tutorials/.