Need suggestions on how to begin conversion of gradient heavy raster to vector

[dcbstudios]

Salutations!
I have a client that I usually do limited color, raster to vector image conversions for. However, this time around they have given me (apart from very low resolution), a gradient heavy image. I am talking gradients within gradients sort of image. Most of the time I can index the colors in a program like Krita then just Trace Bitmap with Inkscape, however I am not handed many gradient heavy images with the clientele I work with. I've attached the logo below, hoping  that I might get some pointers on where to begin. If I have posted this in the wrong part of the forum, I apologize, as I am trying to resolve this for my client as quickly as possible and am not sure who to turn to. I appricate any and all help.

Daniel B.
FB_IMG_1561837005272.jpg
(31 kB . 600x600)
(viewed 130 times)

[brynn]

Welcome to the forum!

Gosh, I didn't answer this the other day, because I'm not sure if I know the answer.  It looks like no one else knows either. 

When you say that you've solved it before by indexing the colors, what does that mean exactly?

The only thing I could suggest would be to remove the gradients before you use Trace Bitmap, and replace them afterwards.  Or else if you can't remove them first, then just do the trace, and delete the unwanted parts after.  And then replace the gradients.

[dcbstudios]

When I use Krita and I index the colors.... It singles out specific colors... So instead of like when you look at a blue and red square right next to one another. As a raster image, If you zoom in close enough you can see where the pixels will bleed into one another. Indexing takes all colors put EXCEPT those you need... But for gradients... It's not possible to do before bringing it over to vecotize it.

[brynn]

I'm not familiar with Krita, or indexing colors.  But maybe someone else is?

[dcbstudios]

No no... That's the problem.... I am unable to index the above image due to the gradients. Say, someone sends me a really low resolution image. I instead of having to redraw the whole thing, I perform an indexing of the colors then bring that into inkscape and perform a trace bitmap function. In Inkscape, if you perform the trace bitmap function, it gives you the option to how many colors you want to be in the vector version of the converted image. Sometimes, if the image has too many shade of one color... You might say I want 4 colors to show... But it picks up on another color you don't initially see and causes the image to come out funky. This is where you would use the index color feature in photoshop or krita. This guarantees only the colors you want will show. However as you can see... I can't do something like this with the current image and from my understanding I would have to draw the objects in using either preset stars or the bezier tool... Then add the gradients to each object one by one... However I've never had to do this much work for one logo... And was trying to see if you guys would have any recommendations for how I should start this.

[Lazur]

Hi.

Manual tracing all the way.
How to do? Draw with the pen tool, layout gradients and use the dropper tool on them to match their colours.

What else can be said? Shouldn't take more than 3-4 hours of work, maybe less if you are not keen on the details.
That design is not special in any bit. That'd be the very basic of a graphic designer's job to know how to use their tools effectively. If you were a beginner and that wasn't for a paying job on a tight deadline we could spoonfeed how to use the program -as the manual does- but as is it's ridiculous.

Trying to solve it as quickly as possible? Learn how to use the program and invest in the necessary time to draw. Autotracing a logo would be a disgrace.

[dcbstudios]

I appricate the response... And trust me... If I had the time to spend on learning the program properly.. . I would have... However.... When the guy sending me the work is only paying 10-30 bucks for the logos, I don't have the pay cushion to sit around... I'm working 2 other full time jobs.... All labor. So... Please.... If you have some recommended quick reads to get this up and going.... I'd appricate the help.

[brynn]

I still don't completely understand your process.  But it does sound like you're in a bit over your head on this one.

If you had asked simply how to convert that image to vector, I would say exactly what Lazur said - manual trace. 

Maybe you should just be honest with them, and tell them why this one won't work, or will cost more?  Otherwise, they'll expect more and more, and be willing to pay less and less?

[Moini]

Martin and I already cleared this up in the chat.

[dcbstudios]

This was posted before the chat. My apologies for the repeat, it took some time for the post to get approved. Thanks everyone for the responses.

[dcbstudios]

Thanks everyone for the pointers... Between using the mesh, linear, and radial gradients... It's coming along. Any recommendations for when I get down to the lettering.... Pretty much the same thing? Or would it be easier to do a font match?

[brynn]

Wow, great work!  I guess it depends on how close of a font match is needed.  If "close enough" is ok, it should be fairly easy to find a font that works.

The really hard part (for you as a beginner) will be creating that somehwat 3D-ish effect on the text.  But it looks like you have a good eye for details.  I'll bet you can work it out!

[Lazur]

Maybe you should just be honest with them, and tell them why this one won't work, or will cost more?  Otherwise, they'll expect more and more, and be willing to pay less and less?

In addition probably the client is a cheapskate as that logo looks an originally vector drawing. Probably the original designer would've charged more for delivering it in a vector format.
Graphic designing is a hell of a job.

I'm working 2 other full time jobs.... All labor.

Hope you are not working graphic design for spec. Either way, good luck!

[dcbstudios]

No all work is based on a price list I created based on averages from other graphic designers. Sad to say people aren't wanting to pay shit for logos unless you have the name to back it. I will be making an addendum to the price list after this to account for things such as gradient replication or the like . Yes I do like being able to draft and finish the logo all in one place. However the tool set I have in Krita and the interface is easier for my illustration pieces... But as you all have read... Yea I do use the auto trace... But only when he wants these cookie cutter type works.... As he ain't gonna pay much for it... The only reason I had kept to doing the auto trace was because the first tutorial I had found to give me the result I needed came in the form a single video. Seeing how quick the turn around was... An hour versus multiple hours of replication... And in the quality he was happy to use, I was okay with if he would pay.

I do this kind of work because I enjoy it.... Sadly I don't see this being as lucrative as it used to. With these ads I constantly see on Facebook for things like Fiverr and these websites with AI Qthat will just auto produce some Microsoft Office clip art shit that people are okay to use... It's destroying a future for those that look to this medium for real profit.

[dcbstudios]

I forgot to post this up here now that I finished, t I want to see how you guys think I did. Top image is my redraw, bottom is the original he sent me to work with. The one I originally posted was actually from the Facebook page of the barbershop... Which I guess he hadn't seen or known was avaliable. But once again, thank you all for the pointers.

Only thing I had a problem with however... When I did a round mesh gradient.... Where the circle of the wire frame would meet back up with itself... The gradient is slightly off and I couldn't get it to have the same shade of gradient even if I did the dropperr from the exact same spot. Any idea what might have caused that.... I got as close as I could.... Hopefully the client doesn't mind it.

[Lazur]

Hard to say what's a fair deliverable for a totally unfair job -cutting the payment of the original graphic designer with some fraudulent work.
Beyond the ethics, there are a couple of parts looking off graphically.

Most probably the top sphere wasn't drawn with a mesh gradient but with a radial one.
The black outline width around the shield is off. Things should appear parallel. Like all 4 other parallel lines drawn by dynamic offsetting the outermost shape.
Issue most apparent at the top of the shield with that crazy golden thing left which seems to be some leftover now.

Stroke width problem also appears at the top around the pole. It's not even symmetric to start with.
Beyond the sphere drawn with the two linear gradients are supposed to be distinct shapes of cilinders. The sudden diagonal change in the outline suggests otherwise.

The pole itself should depcit those spiral stripes with a sin curve at the edges. Top left red stripe look way off.
White outline on the pole's edges are not symmetric on the trace.

The lettering is butchered a bit.
The bottom line should have the same fill & stroke on every letter, only the background make it seems different on the original.
The lighter outline should also be less wide -not sure if it was there on the original.

The el patio part looks off most of them all.
Originally it was drawn with a font and in no way has an "E" that messed up downstroke on the left.

The non-parallel lines showing the "3D" appearance are putting off.
If it was based upon a font, with distinct shaped characters, the effect could be constructed in a much precise way than eyeballing each layer of colours atop eachother.

All in all for someone's very first encounter with actually drawing with inkscape it looks fairly decent.
But from the business perspective it is very sloppy and saddening not by the sloppyness itself but as someone sabotaging a full time graphic designer's chances getting paid by just a starting off experience, on a side carreer.

[brynn]

I think it's really great for a first try.  I notice the drop shadow is missing, and the....I'm not sure if that's a signature, or exactly what.  It's too small to read....something "multimedia".  Anyway, that and some tiny text across the top.  Maybe you don't want to use those anyway, Idk.