| 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
- 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.
- Now will will create the basic
layout for the header image. The best way to do this is to click
the
button. Then
make sure the button is pressed
down. Look at the Controls window. From there set the Selection
type to Circle and check the Antialias box.
- 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:
- 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
button.
- 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:
. Simply open this
or your background image in the program with File->Open.
Select the 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.
- Click the cursor over the selection
to fill your selection with the background image you selected:
- Select the
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.
- Now, wouldn't the image look much
better without that ridge on the top? To get rid of it, click
, maximize the
image by clicking on it, and then using the , select the very
top 2 rows of pixels and delete it by hitting Del.
- 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
, 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.
- The end result is this:
That's the basics required to create
a header image! |