The Team Behind 4.6's Auto Trace Sketch Mode

The Team Behind 4.6's Auto Trace Sketch Mode

5 min read
An apple pencil, an iPad, showcasing Vectornator's Auto Trace feature with a black and white ink drawing of a flower.

For those that haven’t heard the news, our 4.6 update is out!

One of the main changes in this update round is the improvement to our Auto Trace tool. It’s pretty incredible what this image trace feature can do, and we hope you share our excitement!

The Auto Trace tool is now more powerful than ever, and is available in two different modes: Sketch and Photography.

Sketch mode turns your black and white drawings on paper into limitless vector paths. Just import any image into Vectornator or use the integrated Camera Scanner to capture your sketch. Then, use the sliders to adjust the Complexity and Contrast of your image and press the Auto Trace button to see your crisp vector paths come to life. Sketch mode works particularly well for line art, hand-lettering, and character outlines. You can then use Vectornator’s other tools to endlessly tweak your artwork to fit your needs.

Photography mode transforms any pixel-based image into an editable digital painting. This mode is particularly helpful if you need to remove a white background from an image, but it also provides tons of creative potential when creating a detailed artwork.

Auto Trace is clearly a powerful tool for turning images into vectors, but there's another reason to love it. If you can’t choose which mode you need, our clever software will analyze your original image and decide for you.

Auto Trace is ideal for illustrators and designers who are tired of manually tracing over raster images using the Pen Tool. All it takes is a few clicks—or taps if you’re using a stylus—and your beautiful vector image is ready within seconds.

We interviewed Vectornator’s very own Melchior, a data scientist who worked with the team to bring Auto Trace 2.0 to life.

Melchior

Hi Melchior! Tell us a little bit about yourself and how you came to join the Vectornator team!

Hello! I'm Melchior. I joined Vectornator a year ago as part of the data team. We work on understanding our users with data, as well as designing new algorithms based on Machine Learning tools inside the app!

I joined the team with the aim of exploring how we could apply the “pixel” computer vision algorithms to the vector world.

Vectornator Auto Trace example

What were your main goals when you were creating the new image trace algorithm?

The existing Auto Trace algorithm was great, but too generic. We established the need to bring more specialized algorithms that would only be applicable to a certain type of use case, but would do the job much better.

One of those use cases is turning sketches into vector paths. We wanted users to be able to bring their designs on paper into the app with very little effort!

Using Auto Trace on a Flower Illustration in Vectornator
Left: Original Drawing | Center: Photography Mode | Right: Sketch Mode

How did you go about improving the feature?

I consider myself a developer, but have no specific mastery in iOS programming. I couldn't create everything inside the app from scratch. Our first prototype looked promising, and we realized that this could be the first milestone in our journey of improving Auto Trace.

What are the main differences between the new Auto Trace Sketch mode and the existing Photography mode?

Technically, the difference is that Photography Mode will merge regions together to make elements, whereas Sketch Mode will follow the contour of shapes to make elements.

Photography mode will handle the colors, and create vector shapes based on areas where the color is the same. Sketch Mode will only output black and white, but the shapes will be more precise.

We have a lot more plans for the feature. Stay tuned!

What was it like collaborating with the team for this project?

Bringing the feature from prototype to the app was quite challenging, but not for the reason I expected.

The thing is that our team schedule is packed with plans for new features! We are all working hard to make the app greater every day. We had to squeeze this project between two others to make sure it could happen.

But then, our ballet of Design, Development, and QA was beautifully orchestrated by the Product team, and the development went by without any major hurdles.

Using Auto Trace on a photo in Vectornator
Left: Original Photograph | Right: Sketch Mode

What were the more challenging parts of the process?

Two points come to mind:

  • Finding colleagues to discuss possible image trace improvements for the computation. I had to disturb them from their own tasks to explain how the algorithm works before they could suggest improvements!
  • We wanted to Sketch Mode results to be in that sweet spot between detailed and simple. It’s not easy to balance both. We decided to go with a simple approach first, and maybe improve it in the next iterations!

Can you tell us a bit about how you made Auto Trace so user friendly?

We are quite proud of the feature, because we added not one, but two cherries on top of the Auto Trace cake. First, we figured out which algorithm is best suited for the image you want to image trace. Second, if it is a sketch, we automatically detect the level of gray that would provide the best results for the tracing.

Both of those things happen when you select the image, so the experience is very smooth! My colleague Marko is behind those two improvements—his work really made a difference!

Do you have any tips for how Vectornator users can get the best Auto Trace results?

If possible, make sure your sketch shapes are fully connected. If the contour of a shape is disconnected, Sketch Mode will create independent elements for both parts of the interrupted shape.

I would like to add, that if you don't get the result you expected from one of your images, feel free to let us know about it!

Use our feedback channels to send us your image and your results, explaining why the results are not expected. This is the best way to help us bring the Auto Trace feature to the next level!

Find out more about what Auto Trace can do by checking out our previous blog post about the 4.6 update.

And experience Auto Trace yourself by updating to Vectornator 4.6! Import your image files and simply sit back while your new vector graphics appear before your very eyes, just like magic!

What to read next

Press ESC to close.