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 visual 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.
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.
Another possibility is to hire a professional logo design company to create it for you.
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 may be best to get a professional to do it. On the other hand, you may surprise yourself. We sometimes cripple ourselves by our own lack of confidence.
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.
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.
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.
Put together, these components make logos that may look like (but are not restricted to looking like) these:
(Believe it or not - the background is a photo of a piece of varnished wood. Okay, so I'm a lousy photographer too.)
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.
You will need your painting software for the following steps.
You can get a picture for your logo in one of two ways:
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.
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.
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).
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, 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 most painting software (including the default Paint app in Windows 11 24H2), 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.
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.
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" (or whatever it's called in your software; it's sometimes depicted as an arrow or multiple arrows pointing in different directions) 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. For example, 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 (or export) 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 created so far, so that you can optimally work on your picture without loss of colour, resolution and information. In fact, even when you have completed the logo, it's a good idea to keep a copy of that native format somewhere in case you ever want to make changes in the future.
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 https://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml
Copyright © 2008-2024 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create a Logo for Your Site the Quick and Easy Way
