The Niche Website Kit

Your website header sucks for two reasons:

1) your color choice is shit

2) you should be using a logo instead of a cheesy picture header

A clarification on number 2: you can use a cheesy picture if you’re building a spammy Adsense site that’ll never make more than $30 a month, or you have a sales letter for a product (note my cheesy picture header above; I’m selling a product).

So in this tutorial I’m going to show you how to make your website look much more professional. First, consider replacing that header with a logo on a white background.

Seriously. Reflect on it.

Do you want to become an authority site in your niche or not? If you do, go to Google and search on your niche’s main keyword. Look at all top ten sites. Note how many have 700 x 150 picture headers. Note how many have JUST a logo. I’m willing to bet that they all have just a logo.

You STILL want a picture header? Fine. I give up. At least we’ll make it look better than this crap:

Oh, what’s that? You actually took my advice in switching to logo only? Wonderful. You won’t regret it. If so, click here for the logo-only tutorial.

OK, let’s transform that header into a work of art. This tutorial assumes a few things: 1) you have either Photoshop or The Gimp, b) you at least have some ability to find tools and such in either program, and c) if you have The Gimp that you can find The Gimp equivalent of Photoshop tools because I don’t know The Gimp and I’m not going to teach you how to use it.

Here we go:

1) If you don’t already have a picture, go to sxc.hu and/or morguefile.com and look for one that matches your niche. These photos are free for the taking as long as you only use them for yourself and don’t resell them. In theory, you should contact the photographer and let him know what you’re doing with his photo, but you don’t have to. When you have the photo you want, right click it and Copy it.

2) Open Photoshop and select a File > New document and make the dimensions 700 x 150 pixels and 72 pixels per inch:

3) Now, Edit > Paste and your picture will appear in the middle. Using the move tool:

center the important element of your photo all the way to the right. You may need to shrink the photo. If so, press Control-T and grab the handles:

and drag them inwards to make the photo smaller. Using the move tool again, get it so the main part of your image is centered on the LEFT end:

4) Using the Rectangular Marquee tool:

Click-n-drag a very narrow rectangle just to the left of your main image element:

5) Press Control-T to transform the image. Handles will appear. Grab the handle in the middle left:

and drag it all the way to end of your header border and press Enter:

6) Go to top menu Select > Feather… and enter give-or-take 20 pixels:

Remember that you can always undo something you just did by pressing Control-Z.

7) Select the Paintbucket tool:

and make the foreground color white by clicking the two little black and white boxes and then the curvey arrow thing:

At the top of the screen, you’ll see the options for the Paintbucket tool. Change the Opacity to 35% or so:

9) Press F7 to bring up the Layers window, and at the bottom of this window click Create a new layer:

10) Within the rectangular selection on your image, click the Paintbucket tool to fill it with white. With the opacity set at 35%, it will leave some of your original image showing through:

Press Control-D to deselect the rectangular selection.

11) Select the Horizontal Type tool:

and change the font at the top to Impact and 36 point:

12) Click on the far left of your image and type the name of your website in all caps WITHOUT the “www” and with a lower-case “.com” or “.org” or whatever your domain is:

13) Click ANY tool on the Photoshop tool bar, just to deselect the Type tool. Then press Control-T to transform the lettering. Grab a corner handle to stretch or shrink. Grab anywhere in the middle to move it. Get the text nicely centered in the upper middle of the blurry part of your image, without overlapping the picture element on the right:

14) If you desire, add a tagline underneath your website name in similar fashion but with 30 point font instead of 36, and as above use Control-T to resize and position it:

15) On the Layers window (if it’s not there, press F7), Right Click your domain name text layer:

and select Blending Options from the pop up menu. On the box that pops up, click Drop Shadow, the NAME, NOT the check box next to the name! Make sure the settings are similar to those pictured:

16) Now click the NAME Bevel and Emboss. NOT the check box. Make the settings 41, 5, and 0, as pictured:

Hit OK

17) Repeat exactly the same for the tag line EXCEPT skip the Bevel and Emboss. Just do Drop Shadow for the tag line.

18) You’re done! Your end result:

compared to your old crappy header:

Will it win any graphics awards? Nope. But I bet it’s a bit more professional looking than your old one. Does it still look kinda crappy? Yep. Which is why I always try to heavily push people into going with a logo-only header. You did decide to do that, didn’t you?

Great! Let’s do a logo. This is easy, and I’m a firm believer in minimalism. I also realize that not everybody out there is an artist, so I’m going to throw in a random element and see what happens.

1) Open Photoshop, and select File > New… and choose 750 x 100 pixels and 72 pixels per inch:

2) Next, I’m assuming your website already has some predominant color scheme. Go to your website, and press the key on your keyboard just above and to the right of Backspace labeled Prt Scrn | Sys Rq:

3) Go back to Photoshop and click New > File… and hit OK for whatever default size it brings up.

4) Click menu Edit > Paste and entire snapshot of your computer screen will appear within this picture, including your website.

5) Select the Eyedropper Tool:

and, on the snapshot of your website, find the predominant color of text or text headers on your website. We need whatever color will stand out against the background of your website. When you find that, click the Eyedropper Tool within it:

Even if it’s a tiny letter, just click within that tiny letter until the Foreground Color indicator changes to the proper color:

6) Now, set the background color. See the little curved arrow just to the right of that color indicator? Click it.

and use the Eyedropper Tool on the predominant background color of your site, just like you did for the header color:

You should now have both your background and foreground colors matching your site:

7) Close the document with the snapshot of your desktop. We got the colors we need, and we’re done with it. When it asks you if you want to save it, click No.

Back on the 700 x 150 document, select the Paintbucket tool:

and click within your blank document to fill it with your background color:

9) Now swap the background and foreground colors by clicking the little curved arrow again:

10) Select the Type tool:

and click somewhere within the left-middle of your document.

11) See if you can fit your website into one of the following groups, and choose the proper font, all of which are included in the Windows default font set:

• Silly, lighthearted - Use Comic Sans Serif font
• News - Use Courier New font
• Sales, corporate - Use Impact font
• Artsy, trendy, edgy - Use Lucida Console font

12) Type the name of your website. I highly recommend you leave off the .com, but this is entirely up to you. You can even leave spaces between words if you want:

13) Now, unfortunately, comes the artistic part. The good news is that logos can generally be very minimalistic and still look good.

So the next few steps are going to be a buffet. Just try a few, keep it simple and not garish, and see what happens.

14) Add a period before or after the logo, or both:

15) Add a shape. Click and hold down the Shape tool until a submenu pops up, and choose a circle, square, rectangle, or anything you like from the list:

and click and drag anywhere near your logo:

16) Press F7 to bring up the Layers window, and find and Right Click the layer labeled Shape:

and select Rasterize Layer from the pop-up menu.

17) Now use the Move tool:

to move your new shape around. Try putting it to the left or right of your logo.

18) Press Control-T and handles will appear on the corners of your shape. Try stretching or shrinking it to different sizes:

19) Try messing around with the Opacity of the shape layer:

Perhaps something like this?

20) Using the Type tool again:

highlight a letter or two or three and change the font size of them:

Perhaps the first letter of one or two of your words?

On this one I made the “D” and the “T” two different sizes.

21) Save the picture with File > Save as… and select type as JPG and save it to the desktop.

Now, is this spectacular? No. Will a company pay you a hundred big ones to design their logo for them since you know how to change the size of a few letters? Probably not. Although you’d be surprised what companies will pay for stuff that ain’t terribly far off what we did here today.

Regardless, if you replace your shitty header with a minimalist logo, you’re going to look a lot more professional, and you can begin to “brand” your site as THE authority in your niche.

Here’s your old amateur website:

And here’s your new one, professional-looking and ready for branding so you can play with the big boys in your niche!

The End.

Tags: adsense, affiliate marketing, tutorial, header, website