Tutorial #1: Create a Classy Header for Your XSitePro Web Site

Many tutorials for creating Web graphics will show you all the cool effects you can use, but fail to give you the basic design concepts that will give your Web site a classy, professional look.

Truthfully, not one single special effect is required to create a stunning header for your site. In fact, the cleaner the lines, the simpler the font, the less blurring, shadows and gradients you use, the more your site will resemble a high-class magazine ad...which is our goal here.

So, let's get going and build our classy header. For this lesson, we're going to create a header for an XSitePro Web site selling green tea. Their audience is primarily women, so we're going to appeal to women's taste in all aspects of our header.

Some things you need to know before we start

You will need to know how to use the graphics application you are going to work in. I have assumed you will be using either Photoshop or RealDraw in this lesson. Older versions of Photoshop can be bought very reasonably on eBay. RealDraw is only about $60.00.

You will also need to know XSitePro well enough to be able to add a header to a blank Web site so you can view your finished handiwork.

Creating your canvas

Open Photoshop or RealDraw and create a canvas 750 pixels wide by 150 pixels high with a white background. You'll choose a new colour for your header after you pick your photographs.

IMPORTANT: As we go along, each new layer should be positioned above (on top of) the previous layer.

Finding stock photographs online

You can find royalty free stock photos by doing a search in Google for "stock photos," "royalty free photos," etc. Here are some sites that have free or very cheap stock photos: www.fotolia.com, www.dreamstime.com , www.istock.com .

Choosing the right photo

You're looking for a photo of an attractive woman sipping from, or holding, a dainty teacup. When you get to the stock photo Web site, do a search for "woman tea" and "woman drink" and see what you get. Make sure the woman's face in the photo you choose is not blurred or out of focus. Try to locate a photo with a plain or soft, out-of-focus background. I found a perfect photo, but there was a big clock beside the woman's face. However, a quick glance told me that I could crop out the clock and still have a great photo.

Cropping and sizing your photo

Most of the photos you find on stock photography sites should be cropped to get rid of unnecessary background clutter and to tighten the focus on the subject. So crop your photo first and then reduce the size of the resulting image to fit the height of your header.

Make sure you size the image proportionally. You do this by holding down the <Shift> key in Photoshop as you resize the image. In RealDraw, drag a corner of the image and it will automatically resize it proportionally.

Placing your photo on your XSitePro header

Place your photo at the right or left end of your header. The orientation of the woman in the photo will determine which side of your header you place the image on. People and animals should be looking straight ahead or into the centre of the header. Cars, planes, boats and any object that has a "front end," like a teapot's spout, should also be pointing straight ahead or into the centre of the header. Note: there are exceptions to every rule, but you must learn and apply the rules before you can understand how to break them safely!

Another photo...

Now we're going to try to find a second photo to complement the first one. Look for a teapot and cup together. It can be a Chinese or Japanese teapot or an English-style teapot. Try to make sure the photo of the woman and the photo of the teapot and cup use the same colour palette. You don't want one photo that's predominantly red and one that's predominantly purple, for instance. Note: For our sample header, pale, subtle shades are better than vibrant colours, as they won't clash even if they're not in the same colour palette and they are more feminine than strong, primary colours.

Make sure the spout of the teapot points into the centre of the header and is pointing in the opposite direction to which the woman is looking.

Crop and then resize your teapot and cup photo so that it's the same height as your header.

Now place this photo at the opposite side of your header so you have a picture at each end.

Creating the background

Now make a new layer for your background colour. In RealDraw, a new layer is automatically created every time you choose the drawing or text tools, but in Photoshop you should add the layer first. Choose a light shade from the colour palette of your photos. I chose this colour: #ccc9b0. It's a soft, sage green. Just remember that this site is for women so choose your colours accordingly (e.g., soft pink, blue, green, cream, peach or lilac). Use the Rectangle Tool to make a rectangle the same size as your header. Move the layer below (behind) the photos.

Now make another new layer above the one you just made. Choose a darker shade of the colour you chose for the first rectangle. I used this colour: #a8a167. It's a dark, sage green. Make a new rectangle the full width, but half the height of your header. Position it at the bottom of your header.

Your header should now be divided into two bands of adjacent colour (approximately the same height) that run behind the two photos. The top band should be light and the bottom band dark.

Adding text to your XSitePro header

Create a new layer and select the Text Tool. Choose a font like Edwardian Script or another fancy script. Set the font fairly large, about 48 points. The text is going in the top part of your header. Choose a dark grey colour like #545353. Make sure there's plenty of contrast between the font colour and the background colour. In Photoshop, set the anti-aliasing method for the font to Crisp. We want the font to be rendered as sharp and clean as possible. Type, "Would You Like Tea, Madam?" Include the quotation marks in your text. Position the sentence in the middle of the top band of colour.

Now start a new layer and again select the Text Tool. Choose Arial as your font and select the colour white. Again, we're looking for a lot of contrast between the font and the background colour. Set the font size to about 24 points or a bit smaller. In Photoshop, set the anti-aliasing method to Crisp. Type, "Try Vital-Moments Green Tea. It's Today's Choice!" without the quotation marks this time. Centre this text in the middle of the bottom band of colour.

Changing a font colour

In Photoshop, select the last sentence you typed and highlight the word "Vital-Moments." Change the colour of this text to a marigold colour like #fcc14c.

In RealDraw you'll actually have to create three separate layers of text. Layer #1 White Text: "Try," Layer #2 White Text: "Green Tea. It's Today's Choice!," Layer #3 Marigold Text: "Vital-Moments." Align these three layers side by side so they form one sentence.

Putting a border around your header

While this can be accomplished in XSitePro using CSS, we're going to add a border to our header right in our graphics application. Make a new layer and choose the Pencil Tool. Draw a thin black line (one pixel wide) around the edge of your graphic on all sides. Hold down the <Shift> key in Photoshop to draw a straight line. Make sure this is the top layer of your header.

You're finished!

Save your header as a JPEG file. In Photoshop, choose Save for Web. In RealDraw, choose Export and select jpeg from the drop down menu.

Now open a blank Web site in XSitePro. Add your header to the Header Panel background and click Preview. See how classy it looks! And you didn't use one single special effect, just good design principles. Here is my version of this XSitePro header...

Really Nice Headers - Graphically challenged? Here are some really nice header graphics that you can edit in Photoshop.

More Tutorials...

Create a Professional Header Using One Photoshop Filter...

XSite Pro Tips...

Order a custom template or header here...