I need to create a logo for my company and/or website

Last modified by Krasimir Milchev on 2019/11/24 21:24

People that make their website or company usually need a logo. Unfortunately, not everyone has been gifted with design skills.

Why is a logo needed?

The logo's main purpose is an identity - ideally, when people see it, they would immediately recognize your brand. For example, do you recognize the following brands:

1572992253908-139.png1572992619541-127.png1572992963883-393.png1572992501450-929.png1572992803061-143.png

It also takes part in making the first impression of your visitors/clients.

Logos usually are connected to one or more of the following:

  • Name of the company
    1574627938516-653.png
  • End product
    Свързано изображение
    ("b" represents headphones)
  • Main symbol of the company
    1574626992002-319.png
    (the Colonel)
  • Main activity of the company:
    Свързано изображение
    (Deliveries)
  • Company values
    1574627285762-703.png
    ("H" represents two people handshaking, i.e. "trust")
  • Origins of the company
    1574627173728-189.png
    (Blue and white are the national colors of Bavaria)
  • The domain of the company
    1574630388484-638.png
    (The first part of the logo represents analog signal; the second part of the logo represents "digital" signal)

As you can see, the meaning of the logo is usually subtle. For inspiration for your own logo, search the web for "meaning behind logos" or see 12.

There are plenty of websites that offer free logo generation (based on templates). Just google "logo generation" or something similar and take your pick!

If your logo contains text and you wonder which font to use, there are tools for that. Just google "choose fonts online" or something similar and, again, take your pick! Do note that you may choose a non-standard font that you'll need to later import into your graphics software.

Using vector graphics (instead of raster graphics)

Ideally, when making a logo you'd use vector graphics (.svg, .eps, etc.. file format) instead of raster graphics (.png, .jpeg, etc... file formats)

The reason is that vector graphics make scaled/resized images/text look smooth (right) instead of pixelized (left):
Резултат с изображение за vector vs raster graphics how they work3

The reason for that, of course, is because when software (e.g. a web browser) renders (i.e. visualizes) vector graphics image, it recalculates and repaints the image for the given target size yielding an image as if it was painted for your/the client's screen. The reason this is possible is that when making an image with vector graphics, what is saved is the constituent vectors that make up the image. With raster images, only the individual pixels are saved and information about lines, curves and other structure is lost. You can still resize such images, but the resized image would be an approximation of the original one (as the big "S" is an approximation of the small "s" on the left example image above).

For reasons why you may need to resize your logo see below.

Note that to make your vector graphics image you need to use specialized software. Just search for "vector image software" on the web. Inkscape, for example, is one good option and it's free.

Note also that if you include third party images in your logo, they also need to be vector images. They can be raster ones as well, but you'll hit the scaling issue described above.

Converting raster images to vector ones is partially possible (the so-called image tracing processing), but usually, a lot of information is lost. There are however a couple of online services and offline tools you can try for that (just search the web). Consider, however, finding a similar image already made with vector graphics.

Converting vector images to raster ones, on the other hand, is quite easy to do and fully supported.

Optical balance

You may not know that (unless you're a graphics designer), but perfect symmetricity, alignment and balance in your logo may not be as appealing to the eye as imbalance and asymmetricity. This is a well-known fact that is often corrected for in design works and in typography. One famous example is the Google logo which, although seemingly is perfectly symmetrical, there are a couple of imperfections which have been deliberately introduced to make it more appealing to the eye:

1574623959867-745.png

Curiously enough there's a rounder circle (for the eye) than the perfect circle and there's a squarer square than the mathematically perfect square.

A great article that can help you on optical balance with practical examples showing different aspects of the phenomenon is Optical Effects in User Interfaces: An Illustrated Guide. There are many more as well - just search the web.

Licenses and royalties

Whenever you use third party images you need to make sure the license of the image allows it, i.e. the author allows usage of the image without royalties.

You may need to pay the author a fee to be able to use their image. Note that some licenses allow you to use an image free up to some number of times and disallow royalty-free usage above that amount of times. Usage on a website usually falls in the latter category.

You may also consider paying the author to have the exclusive rights over the image so that no one else can use it for their logo. Unofficially, prices for that usually start at $15,000.

Consider where you'd use/put/print your logo. The reason is that you may need to make different versions of it, have different formats and be able to scale it to different sizes.

For example, if you put your logo on your website, except for the big version of your logo that will greet your users, you'll probably also want to have a small version of it that will appear on the tabs of the browser (called "Favicon").

Consider also that your website will be viewed by a different types of devices (e.g. mobile) thus your logo needs to be placed and scaled properly for these. You don't need to test your logo through your phone - to see your site emulated (size-wise) for different devices there are online services that can help with that. Search the web (e.g. "view website mobile emulator" or similar).

In addition to the above, your vector logo may display differently under different operating systems (e.g. Windows, Mac OS, Linux, etc...) so do test that. In particular, iOS sometimes displays vector graphics with different alignment than the rest if the OSes. Easy way to test your logo under iOS is using Appetize.io. Unlike other emulators for mobile phones on the web, this one seems to use real phones and the issues can be properly reproduced. It's a paid service, but, at the time of writing, there's a free demo (with 1-minute sessions) that's enough to test how your logo is visualized.

Another option to test under different devices is using virtual machines with the given operating system you'd like to test (e.g. Windows, Mac OS X, Linux) which can usually be found freely available. For the phone operating systems, there are Android developer tools (available for Windows, Linux, Mac OS X) and iOS developer tools (available only for Mac OS X) with which you can do the appropriate tests.

Other usages of the logo (included for completeness) may include:

  • Web ads
  • E-mails
  • Prints
    • Labels
    • Business cards
    • Pamphlets, brochures, leaflets
    • Billboards
    • 3D prints
    • Signs
  • Others

Sources:

  1. ^ https://digitalsynopsis.com/design/famous-brand-logos-hidden-meanings/
  2. ^ https://digitalsynopsis.com/design/50-clever-hidden-meaning-logo-designs/
  3. ^ https://en.wikipedia.org/wiki/Image_tracing

Tags:
Created by Krasimir Milchev on 2019/11/05 21:37