FN SECURE: How to Make a ‘Professional’ Web Logo For Free

Call Us For Workshops Or Seminars.. In Your University, Colleges, or Schools.
Email Us At : vicky@globallyunique.in

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.
Blogging With Success Logo
Blogging With Success Banner
See the same logo, without any changes on a Black Background:
Blogging With Success Logo on Black Background
Blogging With Success Banner on 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).
The images must be in png format.
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.
Rectangle Drawn
Rectangle Drawn
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:
Color Editor
Color and Gradient Editor
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.
Why we needed this Rectangle?
By default, Inkscape will try to export only that part of image where elements are present. So, if you leave corners empty, Inkscape will not add them to final output. The transparent box makes sure that full sized logo is exported.
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)
Logo With Imported Image (Click to Enlarge)
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.
If you want the images to overlap, as we have made in our logo, this can be done from Object -> Raise(Shortcut : Page Up) and Object -> Lower Menu(Shortcut: Page Down).
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:
Add Text Object Button
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:

Logo With Text (Click To Enlarge)
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!
Final Output
If you liked the post, consider bookmarking it. Social Bookmarking Icons are nearby! ;-)

Blogging With Success Logo

Leave a Reply

Save this Page

Download as PDF