Free Logo Design
A quick and easy way to create a free logo design for your website.
How to Design a Free Logo
This is how I design my website logos. It seems a bit long-winded but it's really quick and easy once mastered. Using my logo creation method, you can get this bit out of the way quickly and focus on adding the valuable content to your website. After you get the visitors you can work on the logo.
Let's Begin
The graphics package we'll use to design the logo is Paint Shop Pro.
p.s. You can get this software off many CD ROMS that are given away with computer magazines as a free trial.
First go to the file menu and select new.
Set the image size to 150 x 150 pixels and the colour depth to 16 million colors.
Now we need to set the foreground color to the background color of where the logo will be on your website. We will then pour (flood fill) this color into our image area.
One way to do this is to use the screen capture facility to grab a piece of your site into the paint package. Then use the eye-dropper to select the color. Then pour it into the image area.
The other way is to click on the foreground color selector and set up a custom color. Enter the Red, Green and Blue values and click on "add to custom colors". Now pour the color into the image area.
Now choose black as the foreground color.
Click on the text icon, click in the image area and select your favourite font, for example Comic Sans or Impact. Set the options to size 24, anti-alias on and floating.
Let's say the company name for the logo is YummyPies.com We'll split this name into 3 parts for the logo: Yummy, Pies and .com
Starting with Yummy, we type this into the text box and click OK. Place the text in the upper area of the image and right-click the mouse to de-select it.
Now do the same for "Pies" and place this in the lower part of the image. We have now created the shadow of the logo text:
In the edit menu create a copy of the image with copy then "paste as new image".
Set zoom to 4:1 to magnify the image.
Select a color for the foreground text that contrasts well with the background color.
Click the text icon and OK to start positioning the foreground text over it's shadow. Offset it 2 pixels up and to the left of the shadow. Right-click to deselect the text. Do the same for the other
word "Yummy".
Zoom back to 1:1 magnification to check your work. We've got a copy of the shadow text so it's easy to try again if we're not satisfied.
Now we need to move "Pies" into position below "Yummy". Zoom in and use the rectangular selection tool to select "Pies". Surround the text as closely as possible. Move "Pies" into position below
"Yummy".
Now we'll place the last piece of text ".com". We'll use small black text since it's only a reminder to our visitor that our site name is a dot com. The main words we want noticed and remembered are
"Yummy Pies".
Select black, set the text size to 12 and enter the text ".COM".
Now position the text in the logo image. We're nearly finished!
We started with a 16 million color palette. Next we need to reduce the color depth (number of colors) to 256 for saving to a GIF file type. Do this from the Colors menu. Select "optimize" and
"nearest color".
The color-reduced image should be very similar to the original.
Now we flood-fill the background with the default background color e.g. white. Click the flood-fill icon and right-click the mouse in the background area.
Next, trim the size of the icon. Select the area to be saved close to the edges of the text. Zoom in for accuracy. From the Image menu select "crop".
Now, from the file menu select "SaveAs" and select "GIF" and click options and choose "set transparency value to background color".
Now save the logo. We're done!
We made a transparent GIF so there wouldn't be a noticeable mismatch between the background color of the logo and that of the web page. The anti-alias feature creates smooth edges around the text,
blending in with the background color. That's why we needed the correct background color to start with.
