Tutorial: create Vector logo from bitmap

[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

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.

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.

[UDb23]

@FlyingTomahawk Sounds really interesting, thanks ! As long time user of Lightroom and PSE I have already an Adobe account. Will try asap.
I'm happy with Inkscape for the functions I need but Illustrator could become useful to open some nasty .AI files that Inkscape can't.

[FlyingTomahawk]

@UDb23

This is the Psikyo logo that I will be using in my Retropie menu.
(screenshot only)

What is the difference between "inkscape svg"(16.2kb) and "plain svg"(14.9kb)?
And do you know a way to share these svg files? A upload/download site?

[lilbud]

@FlyingTomahawk inkscape svgs don't work on retropie, believe me. I did that for the first version of the material theme. Had to redo over 60 svg files and save them the proper way.

[UDb23]

@FlyingTomahawk Nice logo !
Quoting Inkscapes's website:
"Inkscape prides itself on being a fully standard-compliant SVG editor. As of March 2015, it even supports rendering of SVG properties which are not yet officially part of the standard, but have reached a stable state in the SVG Working Group's draft for SVG 2.0. Those include hatched patterns, the fill/stroke painting order and CSS blending modes."
I suppose that's the difference in SVG formats you're referring to.

For sharing I use Mega: it's free and you can upload single files or folders. You could also use github.

[ShotGlass]

@lilbud what software did you use to save SVG for Retropie compliance?

[lilbud]

@ShotGlass inkscape, I tried to use illustrator but my computer ran is slow as all hell