Image Headers
Graphical headers are the most popular way to outline a certain topic on your website. They usually contain text and introduce a certain section to the viewer in the webpage. In this tutorial, I will try to explain the easiest way to make a header for a website by offering you an example.

Note: In order to follow this tutorial, you will need to have a copy of Jasc's excellent image editor PaintShop Pro, which can be freely downloaded as shareware on the Jasc website.

procedure

  1. We will begin by first creating a new image in the dimensions appropriate for a standard header image. From the File menu select New... and choose a width of 300 and a height of 50. Set the background color to White.

  2. Now will will create the basic layout for the header image. The best way to do this is to click the Selection button. Then make sure the Toggle Control Palette button is pressed down. Look at the Controls window. From there set the Selection type to Circle and check the Antialias box.

  3. Go ahead and point the cursor onto your newly created image, moving it to the very bottom and the left side of the image so the coordinates on the bottom status bar show up as 49, 49. Then, drag the cursor up near the top until you get a semicircle:

    Example 1

  4. Now change the Controls window Selection type to rectangle and uncheck the Antialias box. While holding down the "Shift" key, move the pointer over the image to the highest point of the selected circle. Make sure that it precisely falls on top of the current circle selection. You may need to magnify the image for this operation using the Zoom button.

    Example 2

  5. Now that we have a very basic header layout, it is time to shade it in with a background image. Either use an existing background image or use the one in my example: Right-Click to save. Simply open this or your background image in the program with File->Open. Select the Flood Fill and in the Controls window, set the Fill Style to Pattern. Click Options and in New Pattern Source, select the filename of the image you picked as your background and click Ok.

  6. Click the cursor over the selection to fill your selection with the background image you selected:

    Example 3

  7. Select the Selection button, move the cursor over the selection and right-click to cancel the selection. Now we will finish off the other edge by mirroring a piece of the left side. Select the corner part of the left side, making sure to catch its full height (width is unimportant) and press Ctrl-C to copy it to the clipboard. Next, hit Ctrl-E to paste the piece to the current image. In the file menu, go to Image->Mirror to mirror your newly pasted piece. Now, simply drag the piece to the right end and align it on top of that end as necessary.

    Example 4

  8. Now, wouldn't the image look much better without that ridge on the top? To get rid of it, click Zoom, maximize the image by clicking on it, and then using the Selection, select the very top 2 rows of pixels and delete it by hitting Del.

    Example 5

  9. We are now complete with our header. You can add text to it by first picking the text color on the color picker on the right side, selecting Text, clicking on the image, and typing your header text using your favorite font and size. When done typing, click Ok and align the text on the image.

  10. The end result is this:

    Example 6
That's the basics required to create a header image!