How to convert a raster image to a vector image in Photoshop. How to convert a raster image into curves

In what format should the logo be? Exists great amount formats in which it can be saved.

Each of them has its own purpose, as well as advantages and disadvantages. Therefore, it is very important to know the features of the most popular graphic formats to know the possibilities of using each of them.
But before we start talking about graphic formats, we need to clarify what in the world graphic files There are two main types of formats: raster and vector graphics. This is a very important point. People who have been working with graphic editors for several days know perfectly well what the difference is, and beginners need to learn this in order to know how to do it correctly.

Vector graphics

Vector images are formed from different lines And geometric shapes, the size of which is determined by mathematical equations.

Advantages vector images:
— such images always retain excellent quality when scaled and edited;
— the image size has almost no effect on the file size, so it is always small.

Flaws vector images:
- the images are not realistic;
— not many effects are available.

Vector graphics images in most cases have the extension AI, CDR, CGM, DXF. CorelDraw is the most popular graphics editor.

Examples showing the effect of vector graphics when zoomed in:

Raster graphics

The essence of raster images is that they resemble a table with many small cells. Table cells are called pixels. Pixel is a particle of a raster image. All pixels are the same in size and shape. Each pixel has its own color and coordinates. Because pixels are very small size, this mosaic appears to be a single whole if the image quality is good. With high resolution, our eyes do not see the “pixelation” of the image.

Advantages raster images:
- realism, they are able to convey graphics consisting of thousands small parts;
- You can apply many different effects to images;
— using raster graphics you can create almost any drawing, of any complexity, which is why it is more widespread.

Flaws raster images:
- large file size;
— loss of quality when scaling.

Raster graphics images in most cases have JPG extension, BMP, GIF, PNG, PSD.
Let's look at what happens to a raster image when enlarged:
The most popular program for editing raster images - Photoshop.

Logo formats

Now that we have clarified for ourselves what vector and raster graphics and why it is needed, let's move on to a review of graphic files in which you can save the logo.

Vector formats

.Ai – Adobe Illustrator

Vector file format .Ai from Adobe allows you to save the file in original form— all logo elements, such as icons and text, are editable and can be edited at any time in the future. To open the logo in Ai format, you will need special programs, such as Adobe Illustrator,CorelDRAW.

In most cases, you can change the text in this format. Opens using programs: Adobe Illustrator, CorelDRAW

Functions: needed to make changes to the original logo.

.EPS – Encapsulated PostScript

This file type is needed for more High Quality logo printing: it allows you to scale the logo without losing quality. The advantage of a logo in EPS format is the ability to simultaneously use both raster and vector image elements. However, editing a logo in EPS format is much more difficult than, for example, in Ai format.

Open with: Adobe Illustrator, CorelDRAW, Inkscape.

Functions: for use on printed media, scaling for printing.

.PDF – Portable Document Format

The vector format.PDF is preferred by many designers for a number of reasons. PDF is a convenient format because it displays all fonts, page layouts, vector and raster images without modification.

Opened by programs Adobe Reader, Foxit Reader,Preview.
Editable with programs such as Adobe Illustrator, CorelDRAW, Inkscape.
Functions: image viewing and printing.

Raster formats

.PNG – Portable Network Graphics

PNG is a great format for logos. It is capable of “compressing” files without distortion. PNG was created to replace GIF files, which include only 256 colors.

Open with: Photoshop (convenient for editing), or any other image viewing program.

Functions: For web graphics and print (300 dpi)

.JPG / .JPEG – Joint Photographic Experts Group

JPEG is the most common image format on the web. The JPEG logo is compressed so files load faster. also in JPEG format can be saved in higher quality, not very distinguishable from vector graphics images.

Open in Photoshop to edit, for viewing - in any other program.

Functions: Web graphics and printing (300 dpi).

.TIFF – Tagged Image File Format

TIFF - big brothers JPEG files. TIFF files higher quality and take up more hard drive space.

Open in Photoshop - for editing, for viewing opens in any program.
What is it used for: generally for printing (300dpi).

“Minimum set” of logo formats

To use a logo for all occasions, you need to have a logo file in the following formats:
— .Ai – for the ability to edit the logo. Change color, background, scale.
— .EPS or .PDF – for printing.
— .PNG — for printing and working on the Internet (for a website, social pages). You definitely need a PNG version of the logo transparent background, to place it in the website header, on a business card, like a watermark on a photograph.

Popular questions about logo formats

We have collected the most popular questions and answers regarding graphic formats. We hope that they will finally fill in all the gaps in the matter of saving the logo:

Which format is most suitable for a logo: png, jpg, jpeg, or maybe something else?

It is recommended to make the logo in .png. With this format there is a minimum of problems and maximum efficiency of the result. The .png file weighs less, and it is easier to implement various effects (transparency, translucency, etc.)

What formats should I use to print my logo?

Digital printing formats:

- raster with PSD extension, TIFF, JPEG.
— vector EPS, CDR, PDF.

Optimal image quality 300 dpi; It makes no sense to enlarge images with a lower resolution to 300 dpi, since this will not improve the quality.

Silk screen printing format:

— vector Ai (Adobe Illustrator), EPS and CDR (Corel Draw)

Notes to vector files:
— EPS format contains raster and vector images, as well as their combinations. Important point: preparing and saving the file in EPS format, so that later you can use the file in other programs!
— the text needs to be converted to curves, or send a file of the font used in the layout.

In what format should the logo be saved in Photoshop?

Experts do not recommend developing and saving a logo in Photoshop, otherwise you will have to do vectorization (translation from raster to vector format). If you do work on creating a logo in Photoshop, it is better to save in PSD, PNG and TIFF.

If you do it in Corel, what is the best format to save it in?

It all depends on the final purpose of using the logo. If you plan to print a logo, the Korelov one will do CDR format. If you need it in the future larger size logo, it is better to save it in EPS - then it can be rasterized using Photoshop in the right size.

— How to vectorize a raster logo?

You may need to vectorize not only your logo, but also other drawings, photographs and other raster images. Sometimes you need to enlarge the logo or draw it with vector lines in Photoshop to improve the original (small image). If you need to vectorize a photographed or scanned image, an online vectorizer will help you VectorMagic. The quality of its work surpasses such popular offline standalone applications as Adobe Streamline or Corel.

Haven't created a logo yet? Here's how to do it.

05.04.2014 59959

It may happen that you suddenly need to convert a regular raster image into a 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, the vector editor Adobe Illustrator provides for these purposes separate option. 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 maximum realistic image you should select 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.

The simplest way to trace graphic object- open or place the file in Adobe Illustrator and execute automatic tracing Using the Image Trace command: Illustrator Help. Using the Image Trace Tool - CS6

*Even simpler):
Using software, the image/picture/drawing/photograph you provide is converted into a vector for 1(!) euro -> Image to vector

=== Online services ===

  • The first one is paid, although two images to start with can be created for free.

In English, although it’s not difficult to understand. There are two options for using it – online or buying a computer program. The price for online use (unlimited) is $7.95, the desktop program costs $295.00. It is possible to order manual tracing.
Of course, you can find cheaper ones on freelance portals, but the choice is up to everyone.

Accuracy

Above are some comparison images of Vector Magic, Adobe Live Trace (CS6) and Corel
Corel PowerTRACE (X6). Pay attention to the careful processing of shapes by Vector.

Ease of use

You do not need to install and know a great many options and settings to achieve an acceptable result.

You just need to answer a couple simple questions and that's all. If the result is not satisfactory, there is a “troubleshooting” manual where you can easily find the answer and solve the problem.

You can try again and again until you get a satisfactory result.

In general, you can transfer this work to Vector and do more creative tasks.

The translation is loose, but the meaning is something like this.

Source images in JPG format, GIF, PNG, BMP and TIFF. The result is in three quality options and in three formats: EPS, SVG and PNG. Upon completion, it is possible to repeat with a different desired quality and some editing.

  • Next, completely FREE .

Completely in English, but everything is clear in use. A little more settings and self made, but it's worth it.


Supported source formats:
  • PNG Portable network graphics
  • TGA Truevision Targa image
  • PBM Portable bitmap format
  • PNM Portable anymap format
  • PGM Portable graymap format
  • PPM Portable pixmap format
  • BMP Microsoft Windows bitmap image

Output formats:
  • svg Scalable Vector Graphics
  • eps Encapsulated PostScript
  • ai Adobe Illustrator
  • dxf DXF format (without splines)
  • p2e pstoedit frontend format
  • sk Sketch
  • fig XFIG 3.2
  • emf Enhanced Metafile format
  • mif Frame Maker MIF format
  • er Elastic Reality Shape file
  • epd epd format
  • pdf PDF format
  • cgm Computer Graphics Metafile
  • dr2d IFF DR2D? format
  • allows you to convert images to . You can either upload a file or provide a link to the image. It is also possible to apply digital effects.

In case of converting raster images (PNG or JPG) to SVG format, shapes and objects will be converted to black and white vector graphics, which scales without any loss of quality. Such images can be colored using free programs on working with vector images (etc.). Photographers in most cases will not achieve the desired result when converting a raster image to SVG format.

If you are converting any vector image (for example, eps or ai format) to SVG format, the converter will try to preserve all vector and color data, and will also ensure that the two files are as similar as possible.

The Scalable Vector Graphics (SVG) format converter allows you to convert files of more than 130 formats. Conversion directions:

3FR to SVG, AFF to SVG, AI to SVG, ANI to SVG, ART to SVG, ARW to SVG, AVI to SVG, AVS to SVG, BMP to SVG, CDR to SVG, CGM to SVG, CIN to SVG, CMYK to SVG, CMYKA to SVG, CR2 to SVG, CRW to SVG, CUR to SVG, CUT to SVG, DCM to SVG, DCR to SVG, DCX to SVG, DDS to SVG, DFONT to SVG, DIA to SVG, DNG to SVG, DPX to SVG, DXF to SVG, EPDF to SVG, EPI to SVG, EPS to SVG, EPSF to SVG, EPSI to SVG, EPT to SVG, EPT2 to SVG, EPT3 to SVG, ERF to SVG, EXR to SVG, FAX to SVG, FIG to SVG, FITS to SVG, FPX to SVG, FRACTAL to SVG, FTS to SVG, G3 to SVG, GIF to SVG, GIF87 to SVG, GRAY to SVG, GRB to SVG, HDR to SVG, HRZ to SVG, ICB to SVG, ICO to SVG, ICON to SVG, IPL to SVG, JBG to SVG, JBIG to SVG, JNG to SVG, JP2 to SVG, JPC to SVG, JPE to SVG, JPEG to SVG, JPG to SVG, JPX to SVG, K25 to SVG, KDC to SVG, M2V to SVG, M4V to SVG, MAT to SVG, MIFF to SVG, MNG to SVG, MONO to SVG, MOV to SVG, MP4 to SVG, MPC to SVG, MPEG to SVG, MPG to SVG, MRW to SVG, MSL to SVG, MSVG to SVG, MTV to SVG, MVG to SVG, NEF to SVG, NRW to SVG, ORF to SVG, OTB to SVG, OTF to SVG, PAL to SVG, PALM to SVG, PAM to SVG, PBM to SVG, PCD to SVG, PCDS to SVG, PCL to SVG, PCT to SVG, PCX to SVG, PDB to SVG, PDF to SVG, PDFA to SVG, PEF to SVG, PES to SVG, PFA to SVG, PFB to SVG, PFM to SVG, PGM to SVG, PICON to SVG, PICT to SVG, PIX to SVG, PJPEG to SVG, PLASMA to SVG, PNG to SVG, PNG24 to SVG, PNG32 to SVG, PNG8 to SVG, PNM to SVG, PPM to SVG, PS to SVG, PSD to SVG, PTIF to SVG, PWP to SVG, RAF to SVG, RAS to SVG, RGB to SVG, RGBA to SVG, RLA to SVG, RLE to SVG, SCT to SVG, SFW to SVG, SGI to SVG, SK to SVG, SK1 to SVG, SR2 to SVG, SRF to SVG, SUN to SVG, SVG to SVG, SVGZ to SVG, TGA to SVG, TIF to SVG, TIFF to SVG, TIM to SVG, TTC to SVG, TTF to SVG, TXT to SVG, VDA to SVG, VICAR to SVG, VID to SVG, VIFF to SVG, VST to SVG, WBMP to SVG, WEBP to SVG, WMF to SVG, WMZ to SVG, WPG to SVG, X to SVG, X3F to SVG, XAML to SVG, XBM to SVG, XC to SVG, XCF to SVG, XFIG to SVG, XPM to SVG, XV to SVG, XWD to SVG, YCBCR to SVG, YCBCRA to SVG, YUV to SVG

Built on open solutions such as Autotrace, ImageMagick, and various linux graphic components.

Formats to convert:

SVG - Scalable Vector Graphics files
AI - Adobe Illustrator files (postscript based)
CGM - Computer Graphics Metafile files
WMF - Windows Metafile files
SK - Sketch/Skencil files
PDF - Portable Document Format
EPS - PostScript
PLT - HPGL for cutting plotter files

and also: P2E, FIG, EMF, MIF, ER, DXF, EPD, CGM, oDR2D

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 click on the picture right click mouse 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 work area 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 “ An 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 knots in the future, use high quality images as raw material for tracing!

On the Internet, I found an image of the logo. Is it possible to convert it from raster to vector in Photoshop, and automatically? No you can not. Alas, while vector trends in Photoshop are as follows, everything that was done in this direction remained unchanged 5 versions ago. Since then, it has not been touched, not changed, and nothing new has been added to the vector. you needed vector tools in Photoshop? Here they are, want more? Whatever else you forgot about Photoshop, master Illustrator. Approximately this line of thought motivated the developers who introduced the simplest vector operations into Photoshop. Now let's get down to business.

The raster is converted into a vector through selection areas. First we create a selection, then we transfer the selection lines to vector outlines, then fill the vector contours with fill layers, thus creating a vector mask. In order to understand all this not at the level of army commands - click here, click there, it is worth learning how to work with vector drawing tools, understand how vector contours can interact with each other, and learn how to create a vector mask. But don’t worry, you don’t have to sit down to read it until the weekend; you’ll already understand how to convert a raster into a vector in Photoshop if you read the article to the end.

Logo highlighting

I would especially like to note that in order for the translation into vector to be of high quality, the picture itself must be big size. This is true in the case of tracing in Illustrator, but for Photoshop it is even more important. My image is 1500 pixels wide, when we finish converting it to vector, I will show how Photoshop translates a small image and we will compare the results.

  • Choose the Magic Wand Tool
  • Set the Tolerance options to 20 or 30.
  • There, click on the Add to Selection icon. I wrote in detail about their work in the article Add, Subtract, Intersect and Exlude in Photoshop where we talked about vector tools, but in selection these options work the same way.

To be honest, I don’t care how you select the logo, whether using a manual lasso or using the Color Range. It’s just that in this situation, specifically in this image, the easiest way to do this is with the Magic Wand Tool.

Converting the selection to a vector path

Don't switch from the Magic Wand Tool.

  • Right-click on the selection area.
  • From the menu that appears, select Make Work Path.

  • In the window that appears, set the tolerance to 1.0. The higher the tolerance value, the smoother, stylized and imprecise our contours will be.

In the illustration below, I selected the Path Selection Tool and selected the path so that you can see it.

Saving a path in the Path palette

This operation is not required, but recommended.

    Switch to the Path palette. If you can't find it, click Window > Path

    Double-click on the path in the palette.

  • In the window that appears, enter a name and click OK.

Creating a vector mask

The process of creating a vector mask is perfectly described in my article Vector Mask in Photoshop. We will carry out this process quickly and without details.

    Make sure your kennel is selected in the Path palette

    Select Layer > New Fill Layer > Solid Color from the menu

    In the window that appears, select a color and click OK

That's all. Everything would be more accurate if it weren’t hronofag.ru Remember I told you that what smaller image, the worse it will translate. I bet you have some kind of dirty scan on your hands, shoved into Word, which the customer demands to be converted into a vector? I guessed? In this case, the image is compressed with JPG compression, reduced, then enlarged, then again reduced to the size of the avatar, and ketchup was also spilled on it. Is it possible to efficiently convert such a picture into a vector in Photoshop?

First, take a look at our logo. Despite the excellent resolution and clear edges, Photoshop was unable to create good and even contours. The illustrator does it 100 times better, but the article is not about the illustrator. As you can see, the contours are not smooth everywhere, even in the rectangular parts of the logo. And the circles are completely oblique.

Now I will reduce the image by 2 times, then by another 2 times and show you the result of converting it into a vector.

Here you go clear example, how the size of the bitmap affects the quality of the trace. And this despite the fact that the image is of very high quality despite the size. Well, I'll reduce the quality. Let's save the image in JPG at the worst quality.

Let's convert it to a vector. Excellent result, the only thing missing is ketchup. Just right for a satisfied customer, grunge or vintage treatment!

And yet I slightly manipulate the truth. The fact is that all this is reasonable for Illustrator, who creates a vector based on a picture. Photoshop doesn't create a vector based on an image, it creates outlines based on a selection. Logically, the better and smoother the selection, the smoother the curves will be. And a tool Magic wand, which we used to highlight these areas, will no longer be suitable for highlighting such creepy images. Yes, you will be able to make high-quality selections, use all the selection tools, you will even be able to enlarge them and create more or less smooth contour, which will still not be ideal. Going this way is simply a waste of time. The only working option is to draw the logo from scratch in Photoshop.