Convert the drawing to vector format. How to Convert JPEG to Vector Image

05.04.2014 59959

It may happen that you suddenly need to translate the usual raster image V vector format. If you have never dealt with before vector graphics or you have very vague ideas about it, then probably the first thing that comes to your mind is to find a converter program on the Internet, load a raster image into it and, as usual, get the finished result. But it's not that simple.

You shouldn’t rely on so-called raster-to-vector converters, since not all of them provide desired result. Most of these programs simply convert one format to another, for example, JPG to EPS, but this does not change the essence. And all because a raster and a vector are fundamentally different things and there is no way to convert them directly. If a raster image is a set of dots - pixels, then vector image is essentially mathematical formula, therefore the approach to it should be completely different.

By the way, the same EPS can store both vector and raster objects. And yet, there is a way to convert an ordinary picture into a vector, only it is not called conversion, but tracing or vectorization. There are two main types of tracing - manual and automatic. When manually tracing, open in vector editor The raster image is outlined on a new layer and then colored. With automatic vectorization, all these actions are performed by the program.

For example, in a vector editor Adobe Illustrator A separate option is provided for these purposes. To convert an image into a vector, open it in the editor, select it with the mouse, and then top menu choose “Window” -> “Image Trace”.

This will open a small toolbar where you can select the most suitable template. By default, Illustrator converts the image to black and white vector "silhouette".

To create the most realistic image, you should choose a preset "High precision photography". Instead, you can also set maximum value for parameter "Color Accuracy" using the slider, while the remaining parameters will be selected automatically. Before starting the vectorization process, make sure that the mode is still set "Color", and the palette "Full tone". Click the button "Trace" and wait for the conversion process to complete.

Often there is a need to convert a raster image into a vector one. This can be done using CorelDraw and others special programs. However, it will be much easier and more convenient to use online service, for example, such as the hero of our today's review.

How raster to vector conversion works

Vector graphics are a set of curves, points, lines that are represented by mathematical expressions. Raster graphics are a collection of pixels with color and brightness values. Online converter finds areas with the same brightness and color parameters and represents them as lines, curves and circles.

As a result of this, a raster image of SVG format can be infinitely enlarged without loss of quality.

Converting raster to vector

The online service starts working immediately after loading the original image.

On the left of the screen you see the source file with a set of colors found in it, on the right - the result:

Using the available tools you can:

• Disable the presence of certain colors
• Set the total number of colors in an SVG file
• Set Tolerance and Blur

By changing the parameters and pressing the “Update” button, you immediately see the final result. In order not to struggle with the settings for a long time, you can also use a ready-made set of presets:

• Photography (many/few colors)
• Drawing (many/few colors)
• Clipart (black and white, many/few colors)

By clicking on the + and – buttons on the right side of the window, you can increase or decrease the values ​​of Color, Detail, Border Width. There you can merge all layers with flowers into a single layer.

After you are satisfied with the result, click the “Download” button and download the vector image in SVG format to your disk. Everything is free.

While my article about masks in Photoshop is still active, I urgently want to cover the issue of converting a raster into a vector. Two days ago, I logged into my chronophagy Google Analytics and what did I see? It turns out that some people get to my site by requesting “raster to vector”, but meanwhile, on my site there is not a single sensible note on this topic. People are torturing Google to convert raster to vector in Corel Draw, Illustrator and even Adobe Photoshop . Let's start with Photoshop.

From raster to vector. Why is this necessary?

Photoshop is a raster program. The vector is present in it in the form of vector contours. There are no vector objects as such in Photoshop. But there are vector paths that can be converted into a vector mask. The mask is applied to an effect or object and a vector is obtained in Photoshop. The contents of such an object are still raster, but can be converted to a vector when saved in some formats.

For example, we can create a fill and drag a vector mask over it. Photoshop has a whole group of tools that do this for free and automatically, this is a group of vector primitives. Read my article or for more details. So the contour will be vector. Filling inside the raster.

Photoshop does not work with vector at full power. Only uses its advantages here and there. But even in Photoshop, raster objects can be turned into vector ones. Why is this necessary if you have Illustrator? Well, how can I tell you? At active work With graphics, different situations arise. Sometimes it’s easier to convert a selection into a path on the spot than to go headlong into Illustrator and do tracing there. To weed a strawberry bed at your dacha, you don’t need to call a combine harvester. In the end, not everyone wants or knows how to use Illustrator, not everyone needs it, not everyone can install it, but you need to convert the squiggle into a vector here and now. It is not at all necessary to sit down with three volumes on Illustrator for a couple of weeks.

Converting raster to vector in Photoshop

What exactly can Photoshop convert into a vector? Anything as long as you select this object with the group tools in advance Select. Photoshop converts any selection into an outline. You can read about selection tools in the article. Let me give you a working example. Many years ago, I was approached by a very difficult customer who requested a complex website. It was necessary to do various art for the site, and I decided to draw it in Photoshop. While drawing, I converted it to vector, and now I'll tell you how. Here is one such image that I painted with a hard edge brush on a tablet. I traced the original Vitruvian Man, modified it and drew my own face, different from the original. The idea to vectorize art came by accident. But having implemented it, I got the opportunity to scale a person in any way I wanted. Moreover, previously jagged edges and irregularities were smoothed out after vectorization.

Finding an image to trace

I looked up a butterfly on Google Images. We will convert it into a vector. Please note that the larger the image, the smoother our vector object will turn out. This is true for both Photoshop and Illustrator. By large image I mean a picture that is 1000 pixels wide or more. My butterfly, for example, is from 2000 pixels.

Selecting an object

Select from menu Tool the most ordinary magic wand Magic Wand Tool and click on the white area. This way we have created a selection area, but we need to select the butterfly.

Go to Select > Inverse or click on the work area and select from the menu that appears Select Inverse. The point is that the created selection must be inverted to select the butterfly. To be honest, I don't really care how you create your selection. Even though you manually trace the lasso, it doesn't make any difference.

Create a vector outline

We have a selected area, now let's convert it to vector outline path. Select any selection tool like Lasso Tool, Rectangular Marquee Tool or Magic Wand Tool. Right-click on the selection area and select from the menu that appears Make Work Path. In the menu that appears, set the degree of smoothing Tolerance to taste. The dependence is simple. The higher the number, the higher the smoothing. The lower the number, the lower the smoothing. High anti-aliasing means a lower number of vector nodes and more inaccurate raster contour following. In the case of my Vitruvian Man, this is exactly the effect I wanted.

So, in the palette Path We now have a working circuit. If you don't have a palette Path open it Windows > Path Palette working area Path looks like a desktop or temporary home. Different outlines may appear on it, but if you take care of consistent conservation, they will disappear over time. Double click on the outline Work Path and save the outline separately. Contours in the area Path work the same as layers in a palette Layers. If the outline is selected, then it is active and you can work with it.

Tools for working with paths in Photoshop - Path Selection Tool And Direct Selection Tool. We have an outline, but no object. If you've read my series of posts about vectors in Photoshop, you already know that a vector in Photoshop is represented as a vector mask for some kind of effect or graphics. The vector may also be present in the form of a smart layer that links to the imported Illustrator file, but we’ll leave that for another note. Select the outline with the tool Path Selection Tool or in the outline palette Path. Click Layer > New Fill Layer > Solid Color We have created a fill layer, which is immediately assigned a vector mask in the form of our outline.

Finalization of the vector outline

Using the materials that I described in the articles, we will complicate the drawing. I took the tool Pen Tool , selected the fill layer mask. In settings Pen Tool exhibited Subtract and added some elements to our butterfly. I cut out patterns on the wings, and made the legs and antennae thicker.

Creating a custom shape Custom Shapes

You can always save the resulting object in arbitrary figures Custom Shapes. Some time ago I mentioned how this can be done in an article. Select the butterfly layer and click Edit > Define Custom Shape Our butterfly appeared in the tool shapes Custom Shapes Tool.

And here's what we ended up with:

Converting a raster photo into a vector in Photoshop is a completely pointless exercise. But sometimes such techniques can be useful for side work with graphics and more.

Converting from raster to vector photography in Photoshop

Photoshop is not designed for translation. raster graphics to vector. It, however, contains several special effects that visually create the resemblance of a vector image. And using the technique I described, you can make a vector image from them in Photoshop. Let's take for example an ordinary photograph, taken by a photographer friend of mine.

One of the effects I mentioned is Filter > Artistic > Cutout I leave the settings up to you. The image should be as realistic as possible, but highly smoothed. We could stop here, the image already looks “vector”, but it is still raster.

Now you need to create vector areas equal to the number of colors in the photo. Choose a stick Magic Wand Tool and make sure that the checkbox is not checked in the settings Contiguous. Select the first area and follow the entire path I described above. Create a path from the selection, a filled vector mask from the path, and so on.

In total, the entire photo is converted into vector areas. We will not convert the last white area into a vector. Just draw big white square tool Rectangle Tool and place it under all layers. After some light cleaning and contouring, the photo looks like the image below. And once again, such work is not intended for Photoshop and is rather a perversion. But, it can be done, and in various situations such techniques can be useful. Processing the photo took me 10 minutes, so this kind of work doesn’t take up a lot of time. And remember what larger size If you arrange the photo into layers in this way, the better and more elastic the outline will be able to go around the selection areas. The less angular and rough our vector will turn out in Photoshop. Various settings Tolerance when creating a contour they will also give different results. Happy experimenting!

Let's say we have some kind of raster image and we want to get it in vector form (or in curves). What do we need to do for this? First of all you need Adobe program Illustrator.

The version doesn't matter.

Procedure

Open our raster image in Adobe Illustrator. To do this, you can right-click on the drawing and select Open with... > Adobe Illustrator from the drop-down menu or launch Illustrator and drag the drawing onto the work area.

Original image

On the toolbar, select the tool “ Selection"(black arrow) and click on our image with this arrow. In this case, the drawing should stand out. To check this, you can try moving it a little by holding down left button mouse when the cursor is over the picture (using the drag-and-drop principle).

Above the work area we find the button “ Fast Trace» and click on the arrow next to it. It shows all the options available for this action. We need the item " Trace options...". When we click on it, a window with parameters opens.

On the right side of the options window, select “ View". This will help you get more good result and figure out what each of the parameters is responsible for.

1) do it scientifically, that is, you will need to read in the tooltips which of the parameters affects what and set the required values;

2) experiment with the parameters yourself, using the so-called “scientific poking method”.

I prefer the second method: firstly, the Russian translation of a word does not always fully convey the meaning inherent in the original, and secondly, it is often faster and easier to remember. Change the parameter. See what it affects (visually). Combine several parameters. And so on until a more or less acceptable result is achieved.

The resulting vector image.

When the picture already looks like the truth, in the tracing parameters window, click “ Tracing" and in the menu above the work area the button " Disassemble". This way we get the original image, but in curves.

If you are not satisfied with the result obtained, you can modify it. To do this, use the " Selection» you need to select all the created curves (press the left mouse button and, holding it, circle the entire drawing). Go to the menu item " Object» > « Transformation» > « Scaling” and resize the image so that it is large enough for easy editing. Then select the tool " Direct selection"(white arrow). Using this white arrow, we click on each node one by one and align the splines as necessary: ​​when you select a vertex, whiskers appear nearby, by pulling which you can change the curvature of the spline.

Result in grid mode

You can also get a better result if you initially take a large image good quality. Therefore, if you don’t want to waste time fiddling with spline nodes in the future, use high-quality images as raw materials for tracing!