Tutorial: create Vector logo from bitmap

UDb23

As requested by @FlyingTomahawk and @Nismo (you guys gave me a tough job!)
here's a tutorial to create Vector logos from bitmaps.

In the tutorial the logo is made with Photoshop Elements 15 (photo editor) and Inkscape (freeware vector editing sw), but commands and functions used are quite standard features of any Image or vector editor.

If you're going to use SVGs with Emulation Station, please transform any "stroke" or text to "path" and group all the elements of your image into a single group before saving the ES specific version.
Also some SVG functions are not supported in ES (e.g. blurring).

FlyingTomahawk

@UDb23

Awesome!
Thank you very much for this tutorial. And sorry about the trouble.
This is by far the best tutorial on PNG to SVG conversion I have seen. What I particularly like is that you chose a PNG with Gradient effect on it and the repair with the nodes on the R was great too.

There is only one question I have, in this topic here you created the Technos logo and my question is did you trace that Technos text or did you look for the correct font and added it with the Text Tool in Inkscape?

Again, thank you very much!

Nismo

Amazing tutorial, very clear and well explained. I really appreciate the time you took to create this tutorial.

Thank you very much.

UDb23

@FlyingTomahawk It was not a trouble, don't worry. :-)
It's just the fist time I do a video tutorial so initially I had to find out software to use and the right subject to explain.

Concerning the Technos logo text and text parts in general, usually I try to find out if it is a known/available font by searching the web or using specific sites (like this) that starting from a bitmap of the text try to tell the font name (or most similar font).

In the Technos case I just traced the text and edited the nodes to get the letter looking correct (compared to original). Tracing text it's not ideal unless you have very good quality (high res) original image and text clearly separated from the backgorund.
Still you need to edit the resulting vector image; in particular you have to "straighten" horizontal and vertical lines (the aligment tool in inkscape works for nodes too) as tracing tends to create curves.

FlyingTomahawk

@UDb23

You did a fantastic job with your video. You speak slow and clear and all your steps are easy to follow.
I learned a great deal from your video. I tried to create a Street Fighter logo and I'm making good progress. It is not simple as the Out Run logo but I think I got it figured out.
I was trying to trace a Japanese text and I always got those rounded vector shapes and I thought I'm doing something wrong but you getting the same confirms that text should if possible
be written and not traced.

Cool link btw. the font search thing might come in handy.

UDb23

@FlyingTomahawk You can also try to vectorize it using this site; it offers multiple options.
If you post your image here maybe I can check it.

FlyingTomahawk

Thanks, but I don't have the image here at home. It's at the office.
It is not an important image, it's more of a test image to work on my skills.

This is the one I am currently working on

alt text

This I cut into 2 pieces, top text and bottom text because of the gradation.
The shadow I removed and will add it back later.
Tricky logo but a lot fun to do and refine my skills now that I know how it works.

UDb23

@FlyingTomahawk a good training for sure. Don't forget to share the final svg ;-)

FlyingTomahawk

@UDb23

So I gave it a first try and this is what I got. The following image is just a screenshot of the svg file in Inkscape. Don't know how to upload it and share it.

alt text

I didn't pay much attention to the details. I could have adjusted the path of the letters to get nice sharp corners and also fix one or two bumpy lines. But I am very happy with my first finished attempt.
Still I have a looooong way to go if I want to create such great work as you do. Your Data East icon or Sega with Sonic icon are very impressive. If I can get something like that done one day I would have reached my goal.

How would you have started with this logo? What would have been your approach or first steps?

Mine were as follows;

1.) In Photoshop I cut the text apart, top and bottom.
2.) In Inkscape, I traced each one of them using the colors feature and removed all the color objects until I got to the most bottom one.
3.) Then I copied that object to use it as shadow later and then another copy for the stroke to path thing.
4.) Then I applied the gradient (4 points) to it and simply moved the objects together until I had a similar result to the original.

That all I did for both text and at the end I grouped them together and that's pretty much it.

Was that more or less the correct way?

UDb23

@FlyingTomahawk Really well done! Also steps you made seem right to me too.
Btw there's never a perfect standard approach and, depending on the actual original image, there may be multiple options on how to process it.
In this specific case you could also 'fill' the internal part of the text with a single colour in Photoshop (replacing the gradient). Then, without splitting the image, you can trace it in inkscape and get poligons for each colour. Then you reapply the gradient. Important is that colour stand out from each other so tracing can easily recognise them.

Note: I did not yet create the data east and sonic icons in vector.

obsidianspider

This was excellent! Thanks!

lilbud

@UDb23 Maybe this is just my computer, but does Inkscape take forever to start up on your computer too?

FlyingTomahawk

@lilbud

Mine does take some time to start up.

lilbud

Mine will take upwards of a few minutes to start.

AND WHY CAN'T INKSCAPE HAVE TABS LIKE ILLUSTRATOR?

FlyingTomahawk

Funny just started Inkscape at the office and it started instantly. confused
At home I work on a 15 inch notebook at the office on a desktop. Could it be a spec issue?

Regarding the tabs, I guess there must be some cons in comparison to Illustrator. Illustrator isn't free unless you download the CS2 version which is free but very old.

FlyingTomahawk

Found this

https://sourceforge.net/projects/inkscape-pages/

not sure it's what you meant.

UDb23

@lilbud No particular start up time with inkscape both on win 10 and ( old) MacBook air. First time you launch it, it takes slightly longer as it has to create font cache. Do you have many fonts installed ?
What do you mean with tab support ? When I work with multiple files I open multiple inkscape sessions.

UDb23

@FlyingTomahawk Surely Illustrator is way more powerful ( being the reference and leading commercial software). Btw it sounds strange to me when you say cs2 is free. Where did you find this?

FlyingTomahawk

@UDb23 said in Tutorial: create Vector logo from bitmap:

Btw it sounds strange to me when you say cs2 is free. Where did you find this?

Yeah, I felt the same at first but it is an official Adobe page. You can get all the CS2 stuff for free, they just don't offer any updates and support for it anymore.

Go to this page and click on CS2
Now you should be presented with a username and psw login page
Create an Adobe account or if you have one already just login
At the next page (Read before you download a CS2 product ) tick the checkbox where it says "I accept"
Now scroll down and click on the language of your choice to open the links to all the CS2 products with their serial numbers.
Download the Software you need.

Done!
I could just post the direct links with serial numbers for English windows version if this forum allows it then you wouldn't need to do all the above steps.

lilbud

@UDb23 like the tabs in Photoshop, working with multiple svg files in the same window.