So you may have just launched a new blog. Or a jQuery plugin or a side project like that. You want people to take your project seriously. It needs to look good and be well-presented.
But good design can be extremely expensive. You can’t pay thousands of euros for a decent logo. So why not just do it yourself?
For all of us with side projects and early-stage startups, I wrote this guide to designing a simple logo with free software. It’s super-cheap and practically anyone can do it.
What we’ll do is basically skip all the tedious parts of designing a logo. If you’re familiar with the Pareto principle, we’ll get to 80% of a great logo by investing only 20% of the time and skills.
Here’s a quick sneak peek at the steps:
To follow this process, you will need:
- Vector-editing software (I suggest the free Inkscape)
- Well-designed icon*
- Good logo font*
- Name of your project (try this tool for inspiration)
*I have prepared a pdf with icon sets and fonts that are perfect for startup logos. Some of the icons and fonts available out there are just outrageously ugly, so I this booklet is a huge time- (and life-) saver for inexperienced designers.
Should you do it?
Does it really make business sense to design your own logo? I’m sure you heard about Fiverr, the site where you can get almost anything done for just $5. Unless your hourly rate is below $5, wouldn’t it make more sense to outsource your logo design?
I’d suggest you read this article by Sacha Greif to learn more about what you can and cannot expect from Fiverr. The prices for logos there actually start at around $30. And even then you may not be getting exactly what you’re looking for.
So the goals are:
- We need a passable logo
- It has to be free or dirt cheap
- It has to be done quickly
Disclaimer: As a designer, I need to tell you that this process has nothing to do with the work done by professional logo designers. A lot of research, sketches, iterations, and client feedback happens in the traditional logo design process which in the end justifies a high price mark.
But for the projects that don’t need all that, you just need enough to kick off a presentable brand. Thankfully, there’s a better way.
Part 1: Preparation
Before anything else, you’ll need to learn about the app you’ll be using and do some snooping on your competition or similar products out there.
1. Install & Get To Know Inkscape
I picked Inkscape as it’s very popular, cross-platform, and best of all — 100% free. You can use any other vector editing tool you’re familiar with, like Adobe Illustrator or Sketch App, or even code it all in CSS with a little help from icon fonts. Either way, first make sure that you have your workspace ready.
There are very few functions you’ll use to create a logo using this tutorial. You’ll need to know about paths, pen tool, move tool, changing colours and fonts. Since there’s no point in repeating what others have already explained perfectly, I suggest you watch this short walkthrough if you’re not familiar with Inkscape:
2. Do Your Research
For my product ThemeBro, I screwed up by creating a square-shaped logo. It worked fine with the current website layout, but for the relaunch in April I’ll need to change it so that it’s horizontal. The lesson #1 is to first think about where your logo will be used and pick the right format.
Next, check out your competition. Find the top companies in your niche and copy their style.
Hold on a second! Did I really say copy?
Yup. First of all, you probably have no idea about what good design looks like. Second of all, there’s a big chance that your competition had hired professional designers to design their brand. So the best you can do is to “stand on the shoulders of the giants”.
Now you can’t straight-up rip off other brands, of course. Just create something that’s similar enough for your brand to be automatically recognised as a part of the niche. Here are some examples of different brands in the same niche. Notice how coffee shops tend to use similar shapes, styles, and colours to get their point across.
Part 2: Creating Your Logo
Now that you’ve done your research, you’re ready to create the logo. Basically all we’ll do is pick a font and an icon that represents your project. It may take some time to mix and match and find the right combination, so take your time with this.
1. Find a Nice Icon
The web is full of free and premium icon sets. You’ll surely find a suitable icon for your logo in one of them. I’d suggest you browse through my free cheatsheet if you’re not sure which one to pick. Make sure that you follow the license though!
Two more pointers:
- The more minimalistic the icon, the more suitable it is to be used in a logo. Logos should be readable and clear at very small sizes (even as a favicon – 16x16px) — make sure to check how the icon behaves in such conditions.
- Free icons are being used by everyone. By investing just a few bucks, you may be able to get your hands on more exclusive imagery. Just make sure that you’re getting vector file type (.pdf, .ai, or .svg) with all the rights.
Once you have a few top icon choices, you can import them into Inkscape by clicking File -> Import and navigating to the vector files. Since Inkscape natively only supports importing .ai, .pdf, and .svg files (.eps requires a separate script) , it’s best to look for icons in supported file types.
TIP: If you’re after a more original logo and are willing to invest more time, you can always modify vector icons to your liking with the Path tool. It may take some getting used to, but it’s actually quite easy:
2. Find a Nice Font
We have talked about fonts before. For this process, you’ll need only one — not all fonts are suitable for logos, though! In the downloadable cheatsheet you’ll find a few examples of great logo fonts. If that’s not enough, you may want to check out this list of 50 fonts as well.
You can go with free or premium font. Just like with icons, you’re going to get much more exclusive with the paid options, but if you’re just looking to keep your costs down, free ones like Open Sans or Sofia Pro will be just fine.
3. Combine Icon and Font
Finally, your logo is coming together. In this step, all you need to do is to pay close attention to sizing of text versus the icon and the space between them.
You’ll want to find a balance between the icon and text in the logo. Balance means that both sides of the logo seem to weigh the same — which is hard to find if you’re not very experienced. Basically, if your font is very light, use an icon that is either tiny or light in weight (like this outline set).
Vertical logos are more suitable for icons with a lot of detail, like this example I created by using these $5 icons from GraphicRiver. The icon doesn’t have to be in balance with the text in the same way because the logo features a central alignment.
I don’t want to bore you with theory. Let me just show you an example of how to use spacing properly.
The rule of thumb here is that the space between the icon and text must never be bigger than the space around the logo. This is due the grouping effect I talked about in my guide to app usability. Don’t be afraid to let your logo breathe — believe me, crammed logos look awful.
Your final step to finalize the logo is to pick the right colours. I’d suggest you read the article I have written on the subject and follow the pointers there. The #1 lesson here is to pick very few colours and stick with them. If you used one of those colourful detailed icons, this should be fairly simple by using the eyedropper tool (F7 in Inkscape).
If you’re curious what colours your industry uses to make the right impact, take a look at this infographic.
Once you’re happy with your logo, you’ll need to export it into a usable format for use in print and on the web. First, you’ll want to convert all your fonts into paths. This will remove the option of editing text, but will make sure that text will render on everyone’s computers the same way.
Select all text in your logo and click Path -> Object to Path.
Then, you can export your work into a vector file type to pack it up and send it to your designers or cofounders. You do that by simply selecting File -> Save As and pick the format in the dropdown menu of the dialog box that pops up.
To save it as a .png for use on the web, you’ll need to go to File -> Export PNG Image. If it’s going to be used on your website, select the logo you want from your document, pick the option Selection and click Export.
Where To Go From Here
Your logo is now finished, congrats! Next you will want to make sure that your branding is consistent and recognisable.
Click here to read a post about style tiles and how they can help you build your business. (This is the next step!)
Style Tiles Template
Save time designing your branding with this handy Sketch template!