How to Create a Logo for Your Website the Quick and Easy Way

Logo Making for the Graphically Challenged


How to Create a Logo for Your Site the Quick and Easy Way

by Christopher Heng, thesitewizard.com

One of the common tasks when starting a new website, be it a blog or an ordinary site, is to create a logo for the site. Depending on your artistic talents, creating logos might be something you can do in your sleep or it may be something that gives you insomnia. If you are one of those who finds it difficult to design and draw pictures, this article is for you. It deals with how you can create a logo, or even a banner, for your site the quick and dirty way, almost reducing it to a science so that talentless people like us can't fail (too much). Your logo won't win any awards, but at least you will have something that you can place on your website.

WARNING: This article is hazardous to the mental well-being of graphic artists and anyone with a creative streak. The atrocities that pass for art here may cause anguish, horror, high blood pressure and cramps (too much cringing). Do not proceed any further if you have even a modicum of artistic talent.

Ways to Get a Logo for Your Website

Before beginning, you should know that there are alternative ways to get a logo for your site.

  1. If you run a business and already have a logo for your company, such as that found on your company's letterhead, simply scan the logo to use for your site.

  2. If you run a business but don't have a logo, you really should hire a professional logo design company (one example is The Logo Company) to create it for you. Following this article may ruin your reputation.

Explanation: While the steps to creating a logo for your website mentioned below can be applied by anyone, if you really feel that you are a dummy at making logos, and have a reputation to maintain, it's best to get professional help. On the other hand, you may surprise yourself. We sometimes cripple ourselves by our own lack of confidence.

Tools You Will Need

  1. Painting Program

    You will basically need some sort of drawing program. There are many free ones available from the Free Drawing and Painting Software, Image and Photo Editing Programs page at thefreecountry.com. I personally use a commercial tool: the famous (but expensive) Photoshop.

  2. Fonts

    You will probably also need to have a selection of different fonts (typefaces) on your system to use for your logo. Most people find the default selection that comes with their system somewhat limiting. You can get some free ones from the Free Fonts for Webmasters and Designers page.

The Science of Creating a Logo for Your Site

  1. Overview

    Now that we've established that we are not going to create a work that rivals Van Gogh, let me reduce the logo we are about to create to its component parts:

    1. a picture or symbol of some sort;

    2. the name of the site or company and an optional short and snappy slogan.

    Put together, these components make logos that may look like (but are not restricted to looking like) these:

    Type 1: Photo with words superimposed

    Logo or banner with a photo of a piece of wood in the background

    (Believe it or not - the background is a photo of a piece of varnished wood. Okay, so I'm a lousy photographer too.)

    Type 2: Picture in the centre or on one side, with the site name spanning it or on one side

    Logo with a picture in the centre and site name and slogan on both sides

    Logo with a cartoon caricature of Shakespeare on one side

    Type 3: Picture that forms the background to part or all of the site name

    Logo with site name on a shape and slogan beside it

    Type 4: For the absolutely hopeless: pure text

    thesitewizard.com's logo

    There is no fixed size that your logo needs to be. It depends entirely up to you and your site design. You might want to have a mental picture of your web page as being something that can fit into a 1024x768 resolution monitor. If you want your site to fit into smaller screens, like 800x600 screens, which are now lesser used, then the width of your logo must shrink accordingly.

    My site logos tend to be around 200 pixels (give or take) wide and 50 to 100 odd pixels high. But that is merely a choice I made, because I wanted to put it in the corner of the web page. The other examples pictured above tend to have the width seen on many blogs and company websites. Don't be a slave to what others do though; your logo can be whatever size you want it to be.

  2. Steps to Designing Your Website's Logo

    You will need your painting software for the following steps.

    1. Create the picture

      You can get a graphic for your logo in one of two ways:

      1. Using a Photo

        If you are really feeling too lazy to draw a picture, get a digital camera and take photos of things around you. Take a walk in the park, or the city, or even your living room, and snap photos of objects that you can use. Obviously don't take photos of branded objects or things that might be the logos, trademarks or property of others, but there are many other things that don't fall into that category. Don't be too narrow in what you look out for — remember: your photos do not necessarily have to be directly related to your site name or product. The logo of one programmer's blog has a scenic photo of a well-known bridge in the backdrop of the name of his site.

        Photos can be the basis of not just the "Type 1" logo (entire photo with words superimposed) above. You can shrink or crop your photo and move it to one side of the logo with your site name beside it.

      2. Drawing Your Own Picture

        The adventurous among you can draw a picture instead of using a photo. Here are some tips before you start:

        • Draw your picture separately and save it in its own file. We will integrate it later with your words to make your final logo.

        • A splash of colours, however improperly applied, can still look good in the final product. Especially when it's either sandwiched between your words, or to the side of your words. Your visitors will probably see it as some abstract, symbolic expression of your thoughts and not your clumsy attempt to control the mouse.

          Logo with a picture in the centre and site name and slogan on both sides

        • If you can make it look cartoonish enough, people will attribute your bad drawing to a deliberate attempt to make things look like a cartoon or a symbolic representation. They won't realize that you were really trying to make it look like a real person (or object).

          Logo with a cartoon caricature of Shakespeare on one side

          In other words, if you are not really a good artist, try to make your clumsy drawing look like a cartoon or a symbolic drawing. The more you try to make it realistic looking, the worse it will look. Exaggerate some aspect of what you are drawing, make it look like a caricature and everyone will think you're an artist. (Okay, not everyone.)

        • Use your painting software's built-in shapes tool to create shapes for your picture, and fill them with colours. This is an easy way to create logos of the type labelled "Type 3" above. With some software, like Photoshop, you can also create gradient fills where the colour fades out or darkens from one part of the shape to the other.

          Logo with site name on a shape and slogan beside it

        • If you are drawing a complicated picture, with many elements, use your software's built-in capability to let you draw things in layers. Layers, in most painting software, are basically a way to separate different elements of your drawing into blocks that can be separately moved around, modified or deleted. This way, when you make a very bad mistake, you can simply delete that particular layer (or element of your drawing) and not have to redraw everything from scratch. Support for layers can be found in the Photoshop's "Layer" menu.

        • Don't be too anxious and think that you're clumsy if you can't seem to make the mouse draw in a controlled fashion the way you can on paper. When you draw with a pencil, you are using the muscles designed for fine motor control in your hand. When you draw with a mouse, you are using your wrist, which is not able to produce the same kind of precise movements that your fingers can. If you are determined to draw lines or shapes in a precise way, you may want to get one of those graphic tablets with a stylus that attaches itself to your computer. But you generally don't need to do that if you are just creating the occasional logo (unless, of course, you are so inspired by this article that you decide to go into logo designing as your life's vocation).

        Once you're done, save your picture in a file of its own.

    2. Creating the Final Product: Adding Your Site's Name and Optional Slogan

      1. Create a new canvas or picture.

      2. Load the image you created earlier in another window. Use "Edit" and "Copy" from your menu to copy the picture to the clipboard. Close the image you created earlier, and switch back to the empty canvas you created.

      3. Create a new layer for this empty canvas, and call it "picture" or any name you wish.

      4. Paste the picture from your clipboard onto this layer.

      5. You can use your "Move Tool" (which is what it's called in Photoshop) to shift the picture anywhere within this new canvas. If yours is a picture that should be on one side or the centre of the logo, move it accordingly.

      6. Create another layer for this canvas, and call it by the name of your site. If your site has two words in its name, create a layer for each word. This gives you maximum flexibility in moving the word around in the picture. Into each layer, use the "Horizontal Type Tool" or text tool (whatever it's called in your software) to type in the name you want. Remember that you can change the fonts, the size and the colour to your satisfaction.

      7. Move all the elements around in the picture till you are satisfied.

      8. If your logo has a white background, and you want to give it a border, do so in your software. To create a border in Photoshop, click "Select" followed by "All". Then click the "Modify" menu item from the "Select" menu, followed by "Border...". From there, you can choose the width of the border (it's up to you). Then, from the "Edit" menu, click "Fill". In the "Contents" box, you can choose "Black" for a black border, or click "Color..." to select the colour yourself. Leave the rest alone unless you know what you're doing.

      9. When you are satisfied, save your work under a new name. Do not overwrite your earlier picture file, so that if you change your mind, you don't have to start all over again.

      10. For posting to your website, you will need to save the file in one of three formats: GIF, PNG or JPG (JPEG). If you have included a photo in your logo or banner, the PNG and JPG formats are better suited to preserving your colours. If your picture is a simple image with few colours, saving it as either GIF or PNG will probably produce a file that is smallest in size. Other than considerations like these, it makes no difference to the browser which of these 3 formats you choose, so it's up to you.

        Note: while you are still working on your logo, save the file in your painting software's native format (such as PSD for Photoshop). Only save in one of these three formats as the final step before including the picture on your site. Your software's native format is designed to preserve all the necessary layers and elements that you have create so far, so that you can optimally work on your picture without loss of colour, resolution and information.

Congratulations. You have finished making your logo. Don't worry if the initial few logos give you nightmares. Like all things, you will get better with practice. If you have a personal site or a hobby site, the logos you create should be more than adequate.

This article can be found at http://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Create a Logo for Your Site the Quick and Easy Way





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.