Lesson 13 

How to Create a Header Image.

You can create a unique header image to use on your website.

The easiest way is to find a header image without text on it. One that you could add text to make it your own header.

Use an image as a background

You can use an image as a background for a table cell or for a div section of your webpage. If you do this, you can just place text over that image.

Here is an example doing it that way

Here is the blank .jpg image.

You could copy right off this page and save it onto your computer to use later.

 

Here is the same image in a table cell with text added on top of it. I am using Microsoft FrontPage. I inserted a one cell table, set the image as the background of the cell and then just clicked on the image to place my cursor and typed the text. I set the size and color of the text using FrontPage's text formatting features.

You just type what you want                              My Domain.com

But since the text and the image are really 2 distinct objects, it is hard to position the text precisely. It is also possible that the text may move slightly on the image under certain conditions when the window is resized. Positioning the text can be done with cell properties of alignment both horizontal and vertical. It can be positioned also by using text and line spacing. But precise positioning is difficult to obtain easily. With an image editing program you could select the text and drag it to the exact position.

I just chose a simple text, you could make it look better with more  if you spend more effort into selections and colors.

You can save yourself considerable time and aggravation if you find .jpg images in the Blank form - that is, with no text on them already.

Photoshop .psd Images

Photoshop .psd images may be composed of many layers. Each layer may contain an image or text or just a background color or gradient. The layers are then stacked on one another. The upper most image will usually block the lower images from being seen. But the images can also be made transparent and the transparency can be made in degrees so that you can see what is behind another image.

Photoshop software may cost you $600. But a free, open-source software called GIMP can be downloaded from:  http://gimp-win.sourceforge.net/stable.html

The image use above was a .psd file with text on it (see below) but I eliminated the text by deleting the layers and then saving the result as a .jpg file. Here is what it looked like before I removed text.

NOTE: the file above is actually a .jpg format because the browsers which display webpages do NOT know how to show a .psd file. The Main heading was in one layer and the sub heading in another.  Notice the transparency of the Main text which allows you to see the lightning through the text. Notice the limited transparency of the subheading layer's area.