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 Banner
See the same logo, without any changes on a 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).
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
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 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.
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)
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!



About Author
Related posts
{ 28 comments… read them below or add one }
Hi there MR. I,
Nice Tutorial
I ought to try that out tonight.
Cheers,
Eddie Gear
This is a very thorough well written tutorial. Although I’m not into making a logo at this time, I will be bookmarking this post for future reference. Thank you for publishing it.
Ive been attempting to design a logo for the last couple of months with no success. This inspired me to think simple. Great post and tutorial.
Hope it helps you. Do tell us about results!
Is n’t there a small file. The 35 mb file too long a file to download for Gprs or Dial up connection users. Nevertheless, you have touch a very good topic as many bloggers want their personal logo as their header image. Well written that justifies your logo and theme. Lol. Kudos to you for this useful post.
I know 35 MB is quite a big file. But the size is worth the features. You can try Download Accelarator Plus(another download!), a free software. It can extract 5 times the normal download speed. (Works on my wireless connection)
Mr. I Thanks for the link. However, i have downloader installed in my firefox and i have downloaded the massive file though. And the logo created by the software is on the way and very soon it will be up in my blog.
Glad that the tutorial helped you.
Hello Mr. I,
I’ve been scouring google to find a solution, and you’ve created exactly what I need.
Thanks for making this tutorial. It’s really helpful for me and I think it is the most easiest way to create logo…….
What happened? Did you have trouble using the software?
Good stuff. Good guidance about loge creation and upload it and make a profession logo free. Thanks.
nice tutorial ya. i’ll try this to get rich look of my blog.
Let us know so we can take a look at your new logo. Also continue branding by creating a favicon ( http://bloggingwithsuccess.net/brand-your-blog-with-favicon ) and a gravatar image at gravatar.com before the blue monster grabs your identity!
I’ve really enjoyed looking over your site. I am eager to add what I’ve learn, not only to my blog, but to my web site as well.
Thanks for leaving a comment when you do apply any tutorials and tips, as you’ve done on other posts.
Great stuff. Good guidance. Was looking for a logo for my blog; now I know how to create one. Thanks.
Glad you’re finding it helpful. See my reply to Manikandan — re: favicon and gravatar.
great tips…
i want to give it a try..
Let me know when it is ready.
Also, feel free to ask if you need any advice!
Nice tutorial. I use AAA Logo Manager & that is awesome.
You can see logo on my blog.
Can You Tell Us How To Add A FAVICON TO UR BLOG
Thanks For The Post
Gladly. See the tutorial
Brand Your Blog With A Favicon
Nice tutorial! I’ve never made a logo for myself as I thought it was way too much effort and assumed I did not have enough skillsets to create one. This tutorial has led me to believe that I can create one for myself. Thanks!
Thanks but all your photos are not working. I want a good wizard textured logo for my blog.
Photos not working? I did not get that? Are you having problems with images in this post?
yes i am having problem with the images, i am using Google chrome browser… can you check..
Rakesh Narang´s recent blog ..‘Breaking Away from Soul’ – Self Composed Poem 02
They are working fine for me in Chrome. Can you please send a screenshot if possible? My email address is contact (at) ishansharma (dot) com
Thanks Ishan, the website is working fine now. Actually the whole website template was previously little distorted. Now it is working awesome. Nice information/.
Rakesh Narang´s recent blog ..‘Breaking Away from Soul’ – Self Composed Poem 02
{ 1 trackback }