How to Make a WebSite Header Logo the Easy Way

Your website Header is the first thing a visitor sees upon arrival, so you want it to make a positive impression instantly. You can spend a lot of money for a professional to create your graphic, or you could get creative and do it yourself. I’m after a fun and slightly irreverent Look & Feel here, so I had an idea for something I’m sure will stand out in people’s minds. The last thing I want is to look too “Stuffy-Business” with a site that blends into everything else you see.

This Tutorial is part of a series detailing how I am building this website, step-by-step.

Microsoft Publisher Does Graphics

A really quick & easy way to make a Header Logo is to use Microsoft Publisher, which comes with many versions of Office.

• Click on a Shape, usually Rectangle, and drag/enlarge to a little larger than the size you need. You can always resize as necessary.
• Right Mouse Click to Format Shape.
• Choose a Color for your Header Background.
• Click on a separate Text Box for each element of your Header.
• Insert Picture from File to introduce your graphic.

Of course you also need some creativity, which doesn’t come in a box. Here is what I came up with:

Microsoft Publisher Logo in Pieces

First I paste in my artwork, which I have labeled above, “Adorable Graphic.” Then I used a Text Box to type “Rick LaPoint’s” and then highlighting the text to change it to the Comic Sans MS font in 18pt. This Font looks like it was done by hand with a magic marker. I chose green for the color, but that may change later. Next I used another Text Box to type, “INTERNET MARKETING.” I didn’t choose all CAPS but that was my only option with this Font. I liked the Font so I used as is, which is BBalloonist SF in 48pt.

In order to arrange the bits of art you must send one or more of them “back” in the Grouping order. Another very important thing to remember is that you must place a background behind your various pieces that is the same color as your web page, or whatever color your header will be. Otherwise the default will be Black when you Save as a Picture. So simply draw a Box around your stuff and give it a Fill Color, then send it to the Back in the Grouping Order.

Experiment with Your Layout

Grab each element by the edge and drag it into position. Experiment with different designs until you come up with something you like. You may need to send one piece backwards one level, but don’t send all the way back or it will disappear behind your colored background.

Microsoft Publisher Logo Together

Save Your Header at the Highest Quality

After I Group the various elements into one, I need to save the Group as a Picture. I save in .png format as big as I can get it. In this case I switch the Save setting to High Quality 300 dpi. Click on the graphic and Right Mouse Click to Save as Picture.

SaveLogo

Now I will open my new graphic file with free graphic software application called, IrfanView.

Shrink, Convert, Save

Woow! Opening my newly saved Header stretches all the way across my 21″ 1900 x 1200 screen! Why did I make it so big??? So I could make it small again, of course! A large .png file reduced to a much smaller .jpg or .gif produces a nice sharp, clean image. I prefer to use .gif for things that are not photographs because they are smaller in some cases, but not always. So you might want to save your Header in both GIF and JPG to see the difference is file size and quality.

In IrfanView we choose Image/Resize/Width and change from 2397 pixels to 900 pixels wide. Width will vary depending on how wide you need. We may make this smaller later if we decide to place on Opt-In eMail form in the Header area, for example.  The ‘Preserve Aspect Ratio’ is the default so that will take care of the height as well. We can always fine-tune the width later, if necessary. Now, save it as a .gif file.

Make a Header from a Picture

If you want to use an existing picture as your background, go to the menu and Insert Picture from File. Here is an image I cropped to 900 pixels wide by 200 high. Click on the graphic and then Right Mouse Click to choose Send to Back. You want it all the way back.

Now create as many Text Boxes as required (in this case 3 so I could make each a different size and color), write your text, highlight and change colors and font, then arrange together. Now Group the Text Boxes, and drag them to the top of your graphic.

Now simply Group the whole thing and Save as Picture as detailed above, and resize in IrfanView to the dimensions required by your webpage.

Upload Your Header

The last step is to upload to your website Theme. Every Theme is a a little different, but here is how I’m doing it in my Thesis Theme. Remember the free Thesis OpenHook plugin from my post, Setting Up a Website? In the section for “Header,” I insert my simple HTML code:

<a href=”http://www.internetmarketing.ricklapoint.com”><img src=”http://www.internetmarketing.ricklapoint.com/images/HeaderLogo.jpg” alt=”Rick LaPoint’s Internet Marketing” align=”right” border=”0″ />

Notice it includes an “alt” tag and a Link, so clicking the Header graphic brings you back to the Home Page.

Now it’s time to upload to the directory on my server that I reference on my code. When uploading from within WordPress, the default is buried deep in sub-folders, but when I upload via FTP (using FileZilla like pretty much everyone else) I keep it simple.

Depending how the site looks as you read this, here is a screenshot after my first post this morning:

Original Home Page Default

Well, we’re getting there. Here it is now…

HomePage with New Logo Header

Simple and inexpensive tools can give you a professional look if you use them with a little creativity. Experiment with different designs, and most of all, have some fun. You can always change it later!

Be sure to leave a comment and a link to your site so we can all come and see how you have used these tips