Vector graphics - help & feedback

[SirKazum]

So I'm trying my hand at graphic design, creating a logo to put in my games that I make with RPGMaker. It's a stylized lynx, from LynxCat (the name I publish under). Here's what I've got so far:



As you can see, the space between lines isn't filled, which is my biggest problem right now. I made it using the vectr.com website, but I can't get to fill it in there - when I set a "background" color for the curved shapes, it connects the two ends of each curve with a line and ends up with a "bowl" shape. I tried joining paths (e.g. the two curved shapes at the top as well as the straight lines that close them off at each end) into a group, but that doesn't make the editor understand that it's a single shape.

I tried downloading Inkscape, but when I open the svg file that I saved from vectr.com in it, it refuses to fill in those spaces because "they're not bounded", and when I try editing the paths to join them together, it doesn't seem to recognize path nodes at all.

Any help? I can provide the svg file for you to have a look if you'd like. I could always start over from scratch in Inkscape, but I'd like to avoid that if possible I've been using vectr.com because I've got the most time to work in it at work, but I can't install any programs there, anything I do has to be browser-based.

Also, what do you think of the logo itself? (Pretend the spaces between lines are filled to make it look like thick strokes.) Does it look nice, any suggestions to improve it?

Thanks in advance

[Artman77]

Can't help you specifically with your website/program issues; I only use Adobe Illustrator, but I could make a guess.
I think your problem may be that you don't have a vector "shape", you have a series(12?) of long curved shapes that resemble lines. Hitting "fill" or "color" will fill the lines, but not the center of the image(his fur). You have to draw the four curved lines as one continuous line, and then fill that. Then draw each eye, nose, and mouth, and subtract those from the larger face shape using a pathway tool.

As far as composition goes, if it's a logo you want it to scale well. Look at this: and this:

Would your logo translate well if it was shrunk down to that size? Usually these things get put on letterhead, business cards, and now they serve as icons on your desktop, phone menu, and browser bookmark list. It has to look good small. I think the eyes, nose and mouth would get too blurry to tell what they were. Consider making them larger... and/or thicken the lines of the mouth, and exaggerate the corners of the eyes a bit more?

[SirKazum]

Can't help you specifically with your website/program issues; I only use Adobe Illustrator, but I could make a guess.
I think your problem may be that you don't have a vector "shape", you have a series(12?) of long curved shapes that resemble lines. Hitting "fill" or "color" will fill the lines, but not the center of the image(his fur). You have to draw the four curved lines as one continuous line, and then fill that. Then draw each eye, nose, and mouth, and subtract those from the larger face shape using a pathway tool.

As far as composition goes, if it's a logo you want it to scale well. Look at this: and this:

Would your logo translate well if it was shrunk down to that size? Usually these things get put on letterhead, business cards, and now they serve as icons on your desktop, phone menu, and browser bookmark list. It has to look good small. I think the eyes, nose and mouth would get too blurry to tell what they were. Consider making them larger... and/or thicken the lines of the mouth, and exaggerate the corners of the eyes a bit more?

About scaling, I tried zooming out a fair bit, and yeah, I guess the facial features may be too small. Maybe I'd make them bigger and with bolder lines... and extending the lines at the corner of the eyes might be good too. Thanks for the suggestions.

As for filling in, just to clarify, I don't intend to fill in the "fur". That part (as well as the inside of the eyes, nose and mouth) should stay transparent. You've probably noticed that most lines are sets of parallels, with a little segment at the end to close them off - that's what I want to fill in, the spaces between the parallels, to make each set of parallel curves look like a single, broader stroke.

And yes, each curve is a separate vector shape. The "sets" of parallels and closing segments at the ends are 4 paths each, not a single path, which is probably why I can't fill them in. My problem with Inkscape though is that it doesn't recognize the nodes at the ends of those paths, and therefore I can't join them into a single path. Maybe that's due to how Vectr exports the file. Eh, I think I'll end up just having to redo the whole thing from scratch.

[smuchmuch]

And yes, each curve is a separate vector shape. The "sets" of parallels and closing segments at the ends are 4 paths each, not a single path, which is probably why I can't fill them in. My problem with Inkscape though is that it doesn't recognize the nodes at the ends of those paths, and therefore I can't join them into a single path.

Honnestly your best bet seems to be retracing over the lines in inkscape, yes.
Although have you tried 'convert objecct to path' on your selection first tho ? See if it recognize nods at hte tip after that ?

[SirKazum]

Honnestly your best bet seems to be retracing over the lines in inkscape, yes.
Although have you tried 'convert objecct to path' on your selection first tho ? See if it recognize nods at hte tip after that ?

Tried that, didn't help much. But I decided to start over from scratch on Inkscape (not even tracing it over, just starting from zero with the original in another window for reference), and it's a lot better. Inkscape is a lot easier to work with too, so work progresses much faster. And I found out the "fill" tool is the completely wrong tool for the job, I'm much better off using "fill and stroke" from the "object" menu

[SirKazum]

OK, redid the whole thing in Inkscape from scratch, with stronger facial features to help with scalability:



And here's a version at 20% size:



I'll still add text to the bottom, but I think the image itself looks fine... what do you think?

[Artman77]

The equal distance between the top of the head and the eyes, and the bottom of the mouth and the chin are good for symmetry... but cats have a larger forehead. I would move the eyes down a little bit and maybe the mouth too to give it a larger forehead. It's a personal thing. Stylistically you can leave it as it is if you want. It works.

The only other thing I might change would be too movie lower right corner of his cheek out(to the right more) and up a little bit, for perspective. Other than that, it looks pretty good. Good work.

[SirKazum]

The equal distance between the top of the head and the eyes, and the bottom of the mouth and the chin are good for symmetry... but cats have a larger forehead. I would move the eyes down a little bit and maybe the mouth too to give it a larger forehead. It's a personal thing. Stylistically you can leave it as it is if you want. It works.

The only other thing I might change would be too movie lower right corner of his cheek out(to the right more) and up a little bit, for perspective. Other than that, it looks pretty good. Good work.

I tried messing around a bit with the corner of the side-tuft, as well as with colors, but nothing looks that good (especially in small icons). So I'm settling on good ol' black-on-white. I just realized, though, that I hadn't posted the latest version here, with thicker lines for better visibility in small icons:



Anyway, thanks a lot for the help and feedback! Now it's on to the text below it (finding a nice font and all), but I think the logo itself is settled.

[Cuthalion]

I'd personally make the lines thicker and bolder. It doesn't read very well unless you're close enough, and i think exaggerating your current lines a bunch would have a great look that reads much better. Just my two cents. I like the idea and design a lot, though.

[SirKazum]

I'd personally make the lines thicker and bolder. It doesn't read very well unless you're close enough, and i think exaggerating your current lines a bunch would have a great look that reads much better. Just my two cents. I like the idea and design a lot, though.

You know what, I felt that too. The smaller icons and such were hardly distinctive, they were a bit hard to make out. So here goes:





I think this should be good enough for now... of course, if this gets serious enough I'd better hire an actual graphic designer, but I guess it'll do for the moment

[KillianHawkeye]

IMO, that looks MUCH better with the thicker lines.