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 find 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 passes 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.
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.
If you run a business but don't have a logo, you really should hire a professional design 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
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 expensive but well-regarded Photoshop CS3.
(Actually, I use the extended version,
hoping that its additional features will compensate for my artistic deficiencies.)
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
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:
a picture or symbol of some sort;
the name of the site or company and an optional short and snappy slogan.
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.
Steps to Designing Your Website's Logo
You will need your painting software for the following steps.
Create the picture
You can get a graphic for your logo in one of two ways:
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.
Drawing Your Own Picture
The adventurous among you can draw a picture instead of use 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.
- 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).
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.
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 Photoshopand other such 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.
Creating the Final Product: Adding Your Site's Name and Optional Slogan
Create a new canvas or picture.
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.
Create a new layer for this empty canvas, and call it "picture" or any name you wish.
Paste the picture from your clipboard onto this layer.
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.
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.
Move all the elements around in the picture till you are satisfied.
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.
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.
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.
Copyright © 2008 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/.
http://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml
http://www.thepcmanwebsite.com/logo_creator.shtml
Posts
No comments:
Post a Comment