How to Make a ‘Professional’ Web Logo For Free

The logo is an important part of branding your blog.

With hundreds of similar blogs around, you need something that distinguishes your blog. Content is one thing you definitely need, but branding should also be good. But getting a professional logo can cost a lot. So why not create one yourself?

In this tutorial, we will use free tools to create a simple logo/banner.  Our logo was created using this method and it can fit almost any template design.

See the same logo, without any changes on a Black Background:

Tools Needed:

Inkscape: Inkscape is an Open Source Vector Graphic Editor that is very easy to use. If you can use MS Paint, you can use Inkscape. Although, it is very powerful too. Download Windows version here. For other Operating Systems, go to go here. We will use Windows version in this tutorial.

Images Needed: First you need the basic images that will be mixed up to get the logo (like we did with Blogger, WordPress and Dollar in our logo).

Free Icons: You can also use free png icons available. Here are some good websites for free icon downloads:

Download the icons, install Inkscape and start creating the log0.

1. In InkScape, Click File menu button. The top most option is New. Hover/Click mouse over it. A menu having different sizes will appear. Select appropriate size ( Web Banner 468x60 and Web Banner 728x90 are good for logos.)

2. The problem with Inkscape it that it only exports the parts of image which have some text/element. We will have to do a small workaround for this. First, select Rectangles and Square option from Sidebar or press F4. Draw a rectangle aproximately equal to the image size.

3. Resize it by dragging to make it equal to border. If you are having problems in resizing due to small size of image, magnify using + key.

4. After resizing, we need to make it transparent so that it merges with the background. To do this, first you need to open color and gradient editor. Look for a paint brush in a toolbar below menu bar. Click the following image for reference:

5. In the window that opens, at the bottom is slider that will adjust opacity. Set it to 0. The image will become fully transparent now.

6. Click File -> Import. A pop up box will appear. Browse to icons you have downloaded and select one you want to add to logo. Click Open in lower right corner of Window. We are importing a fancy smiley. Here is the imported smiley to logo: (Please note that the image may look blurred due to magnification but final outcome will not be affected by it)

7. Import more images if you want. If you want to resize the image, just click the top button in left toolbox or press F1. Click image and eight handles will apear. Drag to resize. If you want to rotate image, click image when it is selected and the handles will change. Rotate them to rotate image.

8. Now its time to add text. First, from color bar, select the colour you want for text. If you do not do this, text will have same color as background and will become invisible! To add text, either press F8 or click the Add text object button in left toolbox. The button looks like this:

9. Click anywhere and start typing. Default text size is small, so you can enlarge the text in similar way to images. Have a look at logo now:

10. Add a tag line if you want.

11. Now, to change the text color, select the text object you created and click the color you want in the color bar(present near bottom of window). You can also change the font/text after creatig object. Just select the text object and click the Text buttin in tolbar (looks like a T)

12. Do any adjustments to logo.

13. Click File -> Export BitMap. Click Browse to find appropriate folder and export the logo. You will get a png logo. Simply add it to your theme and see how it fits!

If you liked the post, consider bookmarking it. Social Bookmarking Icons are nearby!


Source: