Help:Vector logos tutorial
Here you can find (and share) instructions and tips on getting vector(ized) logo images (onto Commons). We put the more difficult methods after the easier options, which also often yield better results.
Prerequisites
[edit]Probably you'll need a vector graphics editor, preferably one that can output into the Scalable Vector Graphics format (SVG), the standard for vector graphics files on the web and the format you should use on Commons. Inkscape is a great choice here. It's free, and it's free!..
Basic instructions on how to create and edit SVG files are beyond the scope of this tutorial here. See for example the generic vector graphics tutorial if you need that.
Advanced usage of internet search engines can also be crucial. They usually have some text documentation on special keywords etc. available, maybe on some "advanced search" search mask page.
Search
[edit]Avoid duplicating work. Someone may have already done a beautiful job vectorizing (or finding) the logo you want. Or maybe you can at least find something you can adapt more easily than starting from scratch.
The most common vector graphics filetypes to look for are
- Scalable Vector Graphics (
.svg), the open web standard, also used on Commons - Adobe Illustrator Artwork (
.ai), the native format of the dominant commercial vector graphics editor (usually containing PDF or EPS) - Portable Document Format (
.pdf), a more generic, print-oriented document format that can contain vector graphics objects, - Encapsulated PostScript (
.eps), similar to PDF - PostScript (
.ps), similar to PDF
You may want to start with a thorough search on Commons. Maybe the exact thing you want is already there but e.g. just hidden due to bad categorization. Or maybe you can find something on some Wikipedia that as a whole or some part of which is in fact suitable for Commons. There's lots of logo images that got uploaded as fair use, but actually don't exceed the threshold of originality. See the section on licensing below.
There's collections of vector logos on the web. In that case, even a simple brandname svg web search can be successful.
Lots of free software projects have their code (often including logo images, often just bitmap versions, though) in a public repository on GitHub. These can easily be searched for files with e.g. the extension:svg.
For some brands the owner kindly supplies vector, mostly on the official website, sometimes as part of e.g. a "press kit" bundle archive (often zipped) or similar.
Especially bigger companies tend to have professionally designed documents online as PDF files which often contain corporate identity stuff like logos, and often in vector format. You can extract that with e.g. Inkscape and so maybe all you need to do is a little cleanup. Use the Google keyword filetype:pdf to find such files, e.g. in combination with the brand name or site:brandwebdomain.com.
Textlogos
[edit]For textlogos or text-based parts of some logos you can try and identify the font that's been used.
You can use a reverse font search, for instance on myfonts.com/WhatTheFont. You feed it a bitmap rendering of some glyphs of the font in question and luckily it gives you the name of it or at least one that's close enough to be worth to use as a starting point.
These search engines can be a little tricky to use successfully. It is often successful to not give up immediately when you face bad or no results. Carefully select what you feed it, not too little and not too much material, maybe try without some disturbing elements in your example rendering, contrast, ... Give it an example with more resolution, if possible. A reverse image search like images.google.com, TinEye or similar may be useful here. Maybe you don't find a bigger version but a "similar image" (e.g. something else using the same font) that works better. Even (skillful) upscaling in an image editor can help sometimes. A handful of glyphs is mostly enough.
In somewhat rarer cases, the company's/product's/brand's/... web homepage is using the logo's font and you can extract the name or even a web font file from there. Get yourself acquainted with your browser's webpage analysis features to do such things.
Found something? Get the font file and install it. (Maybe restart your graphics editor to make it aware of it.) In the unlikely case of a freely licensed typeface you can find and download lots of those via fonts.google.com. Otherwise – maybe you can kinda borrow the font from somewhere? – You just have to use it once, and the license of your tool doesn't matter for the license of the created file...
Inkscape can scale even parts of a path if you select just the nodes in question, which is very useful if you have to use a font that's not an exact match.
Manual tracing
[edit]If push comes to shove, you may have to trace shapes by hand and even use lots of imagination to separate the different elements that were layered on top of each other to render the image you're trying to recreate.
You want to search for the best template file available, the one with the highest resolution. Use a reverse image search engine with a known file (e.g. from the brand website's header) as a starting point to search if there's bigger version available somewhere on the web. The tips from the section on search mostly apply here, too. Beware of versions that have lots of pixels but contain only upscaled, low resolution content! As may be obvious, PNG files have usually more precise content per pixel than JPEG versions.
Sometimes automatic tracing can yield at least something to start from and save you a some work there. That works best with greater resolutions and lots of contrast. You can prepare the template appropriately in a bitmap editor first. Maybe use black on white here, extract color later.
To trace a shape manually, draw a path on top of the template. Temporarily color it in a saturated, shiny color with lots of color contrast against the background template and set it to 50% transparency. With good use of the zoom functionality you can now see exactly how your borders align to the original ones beneath. Try to make your outlines run through the center of half-bright border pixels.
Oh, and get familiar with how those bézier curves work!.. Use construction grids, rulers, measuring tools, ledger lines, snapping, ..! Don't optimize too early. First do the shapes, then extract color, then recreate gradients, alpha transparency, ... last kill your auxiliary helper structures, crop and do the cosmetics and filesize optimisations and stuff.
If your subject is too hard, maybe you can reduce complexity somewhat. Maybe going with just flat shapes and leaving out sophisticated gradients and transparency can be sufficient in your case?.. Or maybe even just the textlogo part is useful for a start.
Licensing
[edit]Licensing terms of logo images can be tricky to pin down.
Note that not all logos are suitable for upload on Commons. Only those published under a free license, e.g. as part of the source code distribution of some free software, or ones that are ineligible for copyright because they don't exceed the threshold of originality or consist only of text glyphs (possibly with minor modifications) and simple geometric shapes. Other logos may only be acceptable to be uploaded on Wikipedia under fair use terms.
Note that trademarking is not important for whether or not an image is allowed to reside on Commons. You should tag trademarked content using {{trademarked}}, though.
Sometimes you can obtain something that is suitable for Commons by simply excluding copyrightable parts, e.g. if the logo has a textlogo part that is also used on its own to identify the brand in question.
Search for freely licensed template files and reference them as sources on the description page. Sometimes logos are published on the official website and the website has a note (e.g. in the page footers or on a copyright page, often linked in the footers) that its contents are placed under some free license.