Convert a scanned signature to vector STROKE instead of FILLS

Community Beginner ,
Sep 14, 2022 Sep 14, 2022

Copy link to clipboard

Copied

Ive been helping a client convert signatures to digital art, and using the Image Trace function is working well to do so. However we'd also like to animate them (simulated signing motion) and to do so the art needs to be strokes / paths instead of fills and saved as SVG's.

 

So far I have redrawn a few using the pen tool but its a bit tedious. 

 

When I try to do so in the the Image Trace > Advance settings the signature looks incredibly disjointed and jagged as if its only capturing some of the path of different edges of each letter. 

 

Is is possible?

TOPICS
Draw and design , How to , Tools

Views

49

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 14, 2022 Sep 14, 2022

Copy link to clipboard

Copied

Hi only redraw with the pen tool is a better option if you want to animate it...regards

Ali Sajjad / Graphic Design Trainer / Freelancer / Adobe Certified Professional

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 15, 2022 Sep 15, 2022

Copy link to clipboard

Copied

There's no good way to do this in an automated fashion. This has been plagueing motion graphics artists for decades. You just have to patiently chew through it and manually re-trace the paths so they could be used at least as a mask. Unfortunately if it needs to be for web you don't have too many options and if you want them to be native SVG paths you have to be super precise. Otherwise you could consider doing it in After Effects and output an animated GIF. That might simplify a few things when you just can slap on a rough track matte.

 

Mylenium

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 15, 2022 Sep 15, 2022

Copy link to clipboard

Copied

OK - thanks to you both.And yes, using svg animation so gif is not a viable solution in this case.

 

Thats what I suspected since my research was not revealing any good options. Thanks for confirming Im not missing an easy path. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 15, 2022 Sep 15, 2022

Copy link to clipboard

Copied

LATEST

Have you tried Object > Path > Offset path?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines