Show last authors
1 People that make their website or company usually need a logo. Unfortunately, not everyone has been gifted with design skills.
3 === Why is a logo needed? ===
5 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:
7 [[image:1572992253908-139.png||height="78" width="84"]][[image:1572992619541-127.png||height="80" width="80"]][[image:1572992963883-393.png||height="76" width="72"]][[image:1572992501450-929.png||height="73" width="73"]][[image:1572992803061-143.png||height="52" width="51"]]
9 It also takes part in making the first impression of your visitors/clients.
11 === Meaning behind the logo ===
13 Logos usually are connected to one or more of the following:
15 * Name of the company
16 [[image:1574627938516-653.png||height="59" width="85"]]
17 * End product
18 [[image:||alt="Свързано изображение" height="63" width="63"]]
19 ("b" represents headphones)
20 * Main symbol of the company
21 [[image:1574626992002-319.png||height="63" width="63"]]
22 (the Colonel)
23 * Main activity of the company:
24 [[image:||alt="Свързано изображение" height="69" width="64"]]
25 (Deliveries)
26 * Company values
27 [[image:1574627285762-703.png||height="55" width="65"]]
28 ("H" represents two people handshaking, i.e. "trust")
29 * Origins of the company
30 [[image:1574627173728-189.png||height="62" width="63"]]
31 (Blue and white are the national colors of Bavaria)
32 * The domain of the company
33 [[image:1574630388484-638.png||height="32" width="97"]]
34 (The first part of the logo represents analog signal; the second part of the logo represents "digital" signal)
36 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 {{footnote}}{{/footnote}}{{footnote}}{{/footnote}}.
38 === Tools that help to design a logo ===
40 There are plenty of websites that offer free logo generation (based on templates). Just google "[[logo generation>>]]" or something similar and take your pick!
42 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.
44 === What you need to consider when making a logo ===
46 ===== Using vector graphics (instead of raster graphics) =====
48 Ideally, when making a logo you'd use vector graphics (.svg, .eps, etc.. file format) instead of raster graphics (.png, .jpeg, etc... file formats)
50 The reason is that vector graphics make scaled/resized images/text look smooth (right) instead of pixelized (left):
51 [[image:||alt="Резултат с изображение за vector vs raster graphics how they work"]]{{footnote}}{{/footnote}}
53 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).
55 For reasons why you may need to resize your logo see below.
57 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.
59 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.
61 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.
63 Converting vector images to raster ones, on the other hand, is quite easy to do and fully supported.
65 ===== Optical balance =====
67 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:
69 [[image:1574623959867-745.png||height="129" width="131"]]
71 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.
73 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.
75 ===== Licenses and royalties =====
77 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.
79 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.
81 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.
83 ===== Potential usages of the logo =====
85 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.
87 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").
89 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).
91 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 [[>>]]. 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.
93 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.
95 Other usages of the logo (included for completeness) may include:
97 * Web ads
98 * E-mails
99 * Prints
100 ** Labels
101 ** Business cards
102 ** Pamphlets, brochures, leaflets
103 ** Billboards
104 ** 3D prints
105 ** Signs
106 * Others
108 === Sources: ===
110 {{putFootnotes/}}