Logo Design Recipe

Our logo represents a simple visualisation of the vision that our product delivers, so everytime we look at it, it shouts the character of our product, loud and clear: “Invoicebus is intuitive, fast and simple!”

Workflow:

• 1. Sketch a few logo candidates onto paper;
• 2. Choose colors and fonts for the letters;
• 3. Write the tagline;
• 4. Create vector version of the logo in Adobe Illustrator CS5;
• 5. Ta-da!

1. Sketch a few logo candidates onto paper We wanted simple elegant logo, easy memorable and recognizable, just enough to associate with speed, elegance, invoice and bus. We had in mind that should be scalable on different sizes too. Ready, Steady, Go! We picked a blank paper sheet, a few wooden color pencils, a rubber, and started drawing. After we had sketched 3-4 mockups onto paper (right photo), we organized symbolic voting, within our office, for each candidate. The first one showed up as a winner which after a couple of modifications evolved to the one below.

It visual appearance incorporates our desired symbolism and could be translated this way: If you look at it as a whole looks like simple speedy bus, but when you look thoroughly, it said even more. The window of the bus and the two blue lines (that also bring some speedy effect), symbolize invoice sheet with company logo and product rows, respectively.

2. Choose colors and fonts for the letters

Which font to choose? http://dafont.com is a great place to start with. There are plenty of free fonts for download and each one of them can be previewed directly on their site with your custom text.

You can make direct comparison among more font variants and choose which one looks best for your logo. “Cony” seemed fair enough for us. Crisp, elegant and fresh. You can switch on your creativity and transform the letters by your choice in Adobe Illustrator later. We had in mind that our logo should be readable on both, dark and light backgrounds, so we carefully chose the color shades of blue(#00ADEE) and green(#B9E600).

3. Write the tagline

The idea behind the tagline is to create a memorable phrase that will summarize the tone and premise of your brand/product, or to reinforce the audience’s memory of a product.
We unified our ideology in one sentence: “Invoicebus – Delivers invoicing for humans”.

4. Create vector version of the logo in Adobe Illustrator CS5

So far so good, it’s time for vector design. In the tutorial below, we’re going to show you how we designed our logo, step by step using Adobe Illustrator CS5. We believe it might be useful for people who want to learn something about logo design, so we decided to share our experience.

First, create a new Adobe Illustrator document with custom size and document profile: Basic RGB.

The easiest method to transfer your paper mockup into Illustrator vector graphic is to retrace it using the pen tool. If you haven’t used the pen tool yet, you could find it a little difficult at the beginning, but after a few hours of practice you will get used to and see how awesome tool it is. There are plenty of online tutorials of how to use the pen tool; however our favorite was Melissa Evans’ tutorial. She is such a great artist you can learn from. Most of her tutorials are for Photoshop, but you can apply the pen tool knowledge in Illustrator as well.

The underlying image object is our original mockup scan. Before start tracing, make sure your underlying object is large enough so you don’t need to struggle with little details that should be accurately traced. Easiest way to retrace it is to divide the graphic into smaller polygons, and trace it one by one, as shown in figures 4.1 – 4.6.

After retracing, you can delete your underlying image object and use only the vector object. We suggest to group all of your polygons as one object: Select all with Selection Tool (V) , right click on the selection and choose the Group command.
Now, we are going to enter text for the logo and transform it a little bit.

We decided to make the text in two colors and therefore visually separate the words “invoice” and “bus”. We used Eyedropper Tool (I) as a convenient way to pick our already defined colors. However, you can define your own custom color using Fill (X) tool.

Now we are going to scale the text vertically a little bit.

Enter how much would like your selection to be scaled. Vertical 88% was enough for our text.

Now we are going to give different color to the little circles above “i” letters, but first we need to transform the text into path. After that we are going to extract the circles from the path as separate objects. You can find this very useful because you can make very creative transformations of your letters.

You’ve created outlines to your text and therefore you’ve created a group of objects that could be treated like any other vector path. To work with separate objects/paths you need to ungroup them.

Now we are going to extract the little circle from the first “i” letter and change its color.
Double click on the letter “i” to enter the isolation mode.

Replace the steps 4.20-4.23 for the second “i” letter. When you are finished you can double click elsewhere and exit the isolation mode.

Now we are going to write our tagline below the”invoicebus” text.

5. Ta-Da!

Our logo is ready. Crisp, elegant and fresh!

In the next post we are going to expose the idea about our early marketing site which we found very interesting.

• Bio
• Twitter
• Latest Posts

Invoicebus Team

We're a team comprised of a few die-hard code freaks, lovers of beautiful design, stewards of simplicity, and passionately dedicated to the user experience. Invoicebus is a great vehicle to express what we do best. Click here to learn more on our business philosophy and how we actually do it.

@invoicebus

Latest posts by Invoicebus Team (see all)

• Meet the Invoicebus Team - February 5, 2012
• Invoicebus First review - January 20, 2012
• Premium Plans Available for Buying - January 17, 2012