Tutorial #2: Use a Simple Filter to Create a Professional Header

In this tutorial we are going to use one of Photoshop's standard filters to create a special effect. Of course, we will also use good design concepts to give your Web site a professional look.

So, let's get going and build our professional header. For this lesson, we're going to create a header for an XSitePro Web site selling Web design services to bands. Their audience is primarily rock, hip hop, indie and new age folk musicians in their 20's and 30's. The audience is 75% male.

Some things you need to know before we start

You will need to know how to use Photoshop for this lesson or be able to translate my instructions into the graphics application of your choice. Older versions of Photoshop can be bought very reasonably on eBay.

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 and create a canvas 750 pixels wide by 150 pixels high with a white background.

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

Finding a stock photograph 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 an electric guitar photo. We are going to use a special effect in Photoshop to turn the guitar into an abstract-like image. We found our image (see below) in the Photo Objects section of Clipart.com. It has a plain white background which makes it ideal for our purposes. Click here to download the image we used. Once you have created the header using this image, you can experiment with other images that you find.

Click here to download a large version of this image.

Creating the effect

Make sure the background colour on your toolbar is set to red (#ff0000). Click on Filter > Artistic > Coloured Pencil. (If the Artistic window opens, make sure Coloured Pencil is selected. Leave the settings at the default. Click OK.) Your photo should now look like this.

We used this effect to put the guitar in the background rather than making it the dominant element, therefore suggesting music in general, rather than guitar-players specifically. It also adds an artistic, funky quality that should appeal to the audience. We chose a strong colour for the effect that would appeal to a predominantly masculine market.

Placing your photo on your XSitePro header

Drag the photo onto your header. This will automatically create a new layer. Move the photo down so the top of the guitar is about 10 pixels from the top of the header. Align the left edge of the guitar image with the left edge of the header. Don't worry about any other alignments.

Adding text to your XSitePro header

Create a new layer and select the Text Tool. Choose a strong, angular script font like JoeHand2 or another similar script. Do NOT choose a flowing, fancy, feminine script! Set the font fairly large, about 48 points. Chose white as the font colour. Set the anti-aliasing method for the font to Crisp. We want the font to be rendered as sharp and clean as possible. Type "Red Rock Cafe Designs" without the quotation marks. Position the bottom of this phrase 75 pixels from the top of the header and move it so the beginning of the phrase is 20 pixels from the left edge of the header.

Now start another new layer and again select the Text Tool. Choose Verdana as your font and select the colour white again. Set the font size to about 20 points. Set the anti-aliasing method to Crisp. Type "Web design for Bands and Musicians" without the quotation marks. Place this text about 20 pixels to the right of the first text, making sure that the bottom of both phrases are even (both are sitting on the 75 pixel line).

Typography Lesson: When you mix two different fonts as part of the same title or logo design, make sure they are very different. For instance, make one a sans-serif font like Arial, Verdana, Impact, etc. and the other a serif font like Times, Georgia, Garamond, etc. You can couple different versions of the same typeface (bold uppercase with italic lowercase, for example), but never couple two similar fonts together, like Frutiger and Helvetica, for instance. These are similar sans-serif fonts and your visitor will find the effect disturbing instead of pleasing. In our case, we chose a script font (JoeHand2) and a sans-serif font (Verdana). These two fonts are very different, so they work well together.

Framing your header

Make a new layer and set the foreground colour on your toolbar to black (#000000). Select the Rectangle Tool and draw a rectangle about 10 pixels high and 750 pixels wide. Place this at the top of your header.

Copy this layer and place the copy at the bottom of your header. Your guitar should now be sandwiched between two narrow black bands, letterbox style.

Adding your URL to the header

Creat a new layer and select the Text Tool. Choose Verdana as your font and select the colour white. Set the font size to about 18 pixels. Set the anti-aliasing method to Crisp. Type "www.RedRockCafeDesigns.com" without the quotation marks. Position the URL so that it sits just on the top of the bottom black band with the tail of the letter "g" hanging down into the black area. Align the right hand edge of the URL with the right hand edge of the text above it.

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) down the left and right edges of your graphic. Hold down the <Shift> key to draw a straight line.

You're finished!

Choose Save for Web and save your header as a JPEG file.

Now open a blank Web site in XSitePro. Add your header to the Header Panel background and click Preview. See how nice it looks! To accomplish this, you used one special effect and coupled it with 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 Classy Header for Your XSite Pro Web Site...

XSite Pro Tips...

Order a custom template or header here...