How to draw a raster image in Photoshop. How to convert a raster image to a vector image in Photoshop
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 come 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. There is a whole group of tools in Photoshop 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? When actively working 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 that 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. During the drawing, I converted it into a vector, and now I will 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. So 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 into a vector path 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 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, it means 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 can 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 into arbitrary shapes 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 to convert raster graphics into 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 I know. 
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 a big white square with the 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, the larger the photo you arrange 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!
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 vector graphics before or have very vague ideas about it, then probably the first thing that will come 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 give the 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 a vector image is essentially a 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, a raster image opened in a vector editor is traced along the contours 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 a separate option for these purposes. To convert a picture into a vector, open it in the editor, select it with the mouse, and then select in the top menu “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". You can also set the maximum value for the parameter instead "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.
Vector drawings are very popular, but their creation requires a lot of patience and perseverance for a beginner. Photoshop is used to prepare such illustrations; it can be used to convert a photograph into a vector image. In this article we will tell you how such a drawing differs from a raster one and how to make a vector image in Photoshop.
Vector
When you create a new document in Photoshop, write any word on a white sheet of paper, choosing a convenient size (using the “Text” functions - the “T” icon on the toolbar).
Zoom in with the Loupe tool - you will see that the letters are made of pixels. In fact, the appearance is specified by formulas, only the display in the program is done in pixels.
Return it to normal size by double-clicking on the hand icon. We reduce the size as follows: “Editing” - “Transform” - “Scaling”. When the sizes are reduced, the quality of the letters is maintained. In the same way, we enlarge the text as much as possible, the quality also remains good, since the formulas work well at any scale.
Raster
To convert a vector image in Photoshop to a raster image, let’s reduce the finished image. Then go to the “Layers” tab, there select “Rasterize” - “Text”. We got letters that really consist of pixels.
When enlarging a raster image/text using the “Editing” - “Transforming” - “Scaling” functions, the quality deteriorates greatly. As the procedure is repeated, the quality gets worse each time - the letters become blurry.
In such illustrations, when enlarged according to the program algorithm, new pixels are filled with color. This happens less accurately than when working with formulas.
Creating vector graphics
You can make a drawing using any photograph. If you didn’t know how to convert a photo into a vector in Photoshop or convert it, follow the following procedure:
- Open a photo/illustration. Create a new layer.
- Using the Pen tool, draw the outline of one of the elements (for example, a face). To avoid disturbing the background, set the transparency to 20–30%. Select a fill and outline color.
- Next, draw the contours of other parts in the same way and fill them with the desired color.
- For complex color application on the model's face, you can use "Filters". Go to the “Filter Gallery”, make “Posterization” there at several levels, conveniently at 3 levels. Photoshop will tell you how the shadows are applied; all you have to do is outline their contours. You can further desaturate, make the photo black and white, and adjust the sharpness to see the levels more clearly. When filling, choose progressively lighter/darker colors for the layers. You get color transitions.
The basic vector tools in Adobe Photoshop are identical to Illustrator. But, I note, they are not created for drawing in their pure form. Why? Firstly, there are excellent programs for drawing in vector: Illustrator or Corel Draw. All the functionality necessary for drawing is there. Secondly, the stinginess of settings in Photoshop for the vector. Photoshop only has drawing tools and some primitives. Which on the one hand is correct. Here's a great program for raster graphics, and here's a great program for vector graphics. Yes, in vector it is sometimes necessary to work with a raster, and in raster it is sometimes necessary to work with a vector. So it’s better to bundle them and sell them in a package.
From the picture you can see that all the contours that make up the figure remain inside the layer. This way the figure can be changed quickly and easily. Although vector Adobe Photoshop is capable of much more. For example, I created these sketches for one old website in vector. Image I used with a hard edged brush. Then I selected the layer and converted the selection to outlines. From the contours I made filled layers with a vector mask. This way I achieved contour smoothing, which is missing in Photoshop.
Pen Tool
First we have a tool Pen Tool and its varieties. The same set can be found in Illustrator. This is convenient when moving from one program to another; there is no need to relearn. Moreover, all vector tools migrated to Photoshop directly from Illustrator.
Pen Tool- Bezier pen, modulating a vector path with it is as easy as shelling pears, but for beginners it can be a very difficult task. Detailed descriptions of all control techniques with guides would take a separate article or chapter. In fact, this is the most basic and leading tool for modulating shapes and contours in a vector. And, conveniently, it is the same in all vector programs.
Now click anywhere. When you click, you have a key point (anchor, key, thing, the name doesn't matter). Drag the mouse in any direction while continuing to hold down the button. If everything is correct, you will see guides.
Click anywhere else. You will see a line stretching from the first point to the second. Start moving the mouse away without releasing the key. Your outline is formed depending on how you set the guides to the second key point.
To understand how lines are constructed depending on what guides is perhaps the most basic understanding of vector graphics. On the vector tools settings panel, Pen Too l there is one interesting setting - Auto Add/Delete. These are actually automated Add And DeleteAncho r Point Tools which will be discussed further. Click on this checkbox and your brush will be able to add points to already drawn contours and delete unnecessary points while drawing. You can do this right while drawing the outline, and not after. And for this you won’t have to switch to useless Add And DeleteAncho r Point Tools
Freeform Pen Tool
If to work with Pen Tool it is necessary to understand the principles of constructing vector curves, then Freeform Pen Tool- a tool free from any rules and principles. Just click on it and draw the outline as you would with a regular brush. Of course, they cannot depict a perfect circle or a celebration of geometric shapes, but they can depict a blot. This tool is suitable for creating collections of figures in an industrial style. Drawing blots is perfect for them. Well, if the skill of drawing has been brought to perfection, then... I think it’s better to use the Illustrator program, unless of course you are one of those who sculpt masterpieces in MS Paint for fun (:
At the instrument Freeform Pen Tool Perhaps there is another interesting setting. In the settings panel Freeform Pen Tool There is a Magnetic checkbox. This is a hidden version of the Magnetic Lasso Tool. It works exactly the same. Just enable this checkbox. Move the cursor to some clearly defined object with a high-contrast edge and start tracing. Of course, you don’t need to expect perfect geometry from this tool.
Add Anchor Point Tool and Delete Anchor Point Tool
Add Anchor Point Too l - this tool adds additional points to an already drawn contour to change or correct the shape of the contour. Just draw an outline, then switch to this tool and place the missing knots in the places you need. What is it for? Well, maybe you need to put more points so that the outline is more similar to what you need.
Delete Anchor Point Tool— accordingly, this tool removes unnecessary points of the vector curve. The scope of application of this tool is the same as that of Add Anchor Point Tool, only if the points are reduced, the contour line becomes, for obvious reasons, smoother and softer.
Convert Point Tool
This tool helps in editing curve point guides. When you click on a point, the tool resets the guides. Hold down the mouse button and move the mouse to the side. This is how we change the shapes and direction of the guides, against their original meaning. And if you hook one of the guides with the Convert Point Tool, you can give it an independent direction.
Once again. You get caught by the tool Convert Point Tool, per point. From such proximity to the point, the guides are reset. Without releasing the mouse button, move the mouse to the side, creating new guides. And if you wish, you can grab one of the guides and adjust it individually. Now let's discuss the details.
Vector Tools Dropdown Menu
The drop-down menu of vector tools reveals various interesting features, many of which are tied to other topics, so I won’t go into too much detail about them. It’s logical that we won’t understand what a mask is in an article about drawing tools. Select any of the tools, draw something like a circle, like mine, and right-click. It is important to draw a solid circle, otherwise not all menu options will be available. Please note that now you need to click on the outline.
Delete Anchor Point
Everything is very simple. Click on the point you don’t like and delete it. It’s even easier for me than with a tool Delete Anchor Point Tool. Especially if there is only one such point. This menu option is changeable. Now there is a Delete Anchor Point because I moved the mouse exactly to the point. If you click anywhere on the contour Delete will change to Add Anchor Point, that is, we are talking about adding a new point to the contour.
Create Vector Mask
Is a shortcut to the option Layer > Vector Mask > Current Path What does this option do? Creates a vector mask of course. Now I will show you how this is done. Place some photo on the palette. For example, I chose a photo of my parrot Chuchi. The outline should be visible. You can't reset it. Place the photo directly below the outline or the outline below the photo. Or draw a new outline exactly the way you want. Now click on Create Vector Mask and we get results! The vector path turned into a vector mask. And Chucha the parrot is in a circle!
Delete Vector Mask
The name speaks for itself. Chucha the parrot turns into a rectangular photograph. The mask fades into oblivion. The outline becomes a normal outline.
Define Custom Shape
The outline turns into a blank vector shape. That is, this option saves the outline, places it in a special library, from where you can always get it later and easily use it. Just enter the name of your circuit.
And find it at the tool address Custom Shape Tool in the tool settings menu among other animals and arrows.
Make Selection - This option creates a selection from a vector. Let's take a closer look at what the menu offers us.
Feather Radius— blur radius. If you fill your selection further, the edges will be blurry. The higher the value, the greater the blur. Attention to the screen:
Anti-aliased- softens the edges. No function Anti-aliased the fill will be filled pixel by pixel. Function Anti-aliased creates halftones at the edges of the fill.
Fill Path
A distant relative of the option Edit > Fill. But unlike the latter, it has a couple of upgrades. It has an identical graph Content What does it mean in general, what will we fill it with? There is a graph Blending, responsible for blending modes. And also an important tick Preserve transparency. When this checkbox is checked, the fill takes into account transparent areas and does not fill them.
Stroke Path
Emphasizes the highlight. And he emphasizes it with anything. On the menu Stroke Path You can choose any tool, even a rubber band, a blender, or a brush. Most often, of course, you need a brush. Stroke Path uses the instrument settings that are currently set. For example, if the last time you painted with a 10 px hard brush, then the outline will be emphasized with it. Option Simulate Pressure simulates pressure.
Clipping Path
A type of masking in Photoshop and more. Most often Clipping Path used to separate the background from the object. Believe it or not, in the West there are entire studios dedicated to this work, and the workers are called camouflage specialists - camouflage specialists. These are specialists! In fact, Clipping Path attaches a path to a raster image. For example, draw an outline on a family photo, or highlight an object with an outline. Save as PDF and open in Illustrator. Your image is placed inside the path, just like with a vector mask. In truth this Clipping Path is a black spot for me. Mysteriousness Clipping Path made me study this option in detail, which I wrote about in my article
Free Transform Path
Changes the shape of a path or a separate group of points. Changing the shape of an object does not need any representation. It’s already intuitively clear how this is done. The square rotates in all directions, pinching the corners changes the size. And when you press the key Ctrl the perspective of the figure changes.
Tools for working with vectors in Photoshop appeared quite a long time ago, but they began to be used in work relatively recently. This is due to the fact that they were “raw” for a very long time, etc. a vector in Photoshop is not a specialized tool for work, and it has not been modified. But everything changed with the release of Photoshop CC.
Why do you need a vector in Photoshop?
First I want to tell you why I use a vector in Photoshop. There are many proven vector editors. The most common are Illustrator, CorelDraw, Xara. Most often I do web design, which means my work is not the end result. Those. Before becoming a website, interface, or application, the layout will be sent to the layout designer. Most layout designers are fluent in Photoshop, but are very superficially familiar with Illustrator. Therefore, the desire to “stuff” everything into one file is quite logical. It’s great when the layout designer receives one PSD that contains a complete layout and even with the ability to edit elements. Change the color of a button, change the radius of a menu shape, increase or decrease a block without losing quality - in 2 clicks and 1 minute! Vector in Photoshop allows you to do this without any special skills.
Features of working with vectors in Photoshop
If you have worked in any vector editor before, much will seem familiar. But you'll have to get used to a lot. All work in Photoshop is built with layers, this also applies to all vector tools.
1. To easily edit a vector in Photoshop, you need to place each shape on a separate layer.
2. Operations of “merging”, “subtracting”, “overlaying” are best applied to no more than two objects.
3. After the operation of “merging”, “subtracting”, “overlaying”, the contours of the original objects remain available for editing.
4. Raster styles can be easily applied to all vector objects. It is very comfortable.
5. You can apply transparency to vector objects and apply filters to them.
6. Individual layers and groups of layers with vector objects can be easily cloned within a document or copied to another PSD document.
7. Label each layer and group layers - this will save a lot of time.
Basic primitives
As in any vector editor, a vector in Photoshop has ready-made primitives. Basic primitives:
“Rectangle”, “Rectangle with rounded corners”, “Ellipse”, “Polygon”, “Line”, “Freeform”. For each shape (at any time), you can set the thickness/type/color of the stroke and fill. Additional properties are available for specific primitives. For example, for a polygon you can set the number of corners, and for a rectangle with rounded corners you can set the radius of the rounding.
Basic Tools
To draw an arbitrary vector or edit an existing one (including the outline of primitives), you need to use the “Pen” tools (draw an arbitrary outline), “Pen+” (add new anchor points to the finished outline), “Pen-“ (delete anchor points from the finished outline), “Free Pen” (draw an arbitrary outline by hand), “Angle” (change the bends of the contour curves, set the types of connections between anchor points). 
To illustrate the process, a short video from which you will learn:
1. How to create a primitive
2. How to draw a free vector shape
3. How to edit the outline of a primitive
4. How to edit the contour of an arbitrary vector shape
Basic operations with vectors in Photoshop
There are 4 operations available in total: “Merge Shapes”, “Subtract Front Shape”, “Merge Shapes in Overlay”, “Subtract Shapes in Overlay”. All these operations are available through the main top menu Layers > Merge Shapes, or through the “Properties” toolbar (top menu Window > Properties).
Attention! Before you begin any operations to combine vector shapes, make sure that the layers of these shapes are selected in the “Layers” toolbar (turn it on F7 or Window > Layers).
A short video illustrating the basic operations of “merging shapes” in Photoshop.
Change color, size and apply styles
Now we come to the most interesting part. A vector in Photoshop allows you to change the size both up and down without losing quality. To do this, select the desired layers in the “layers” toolbar, press Ctrl+T (or Command+T if you have a MAC) and drag the markers of the selected outline with the mouse to adjust the size. To change the size proportionally, you need to hold down the Shift key. 
Brief video:
1. Resizing the vector shape
2. Change the fill color of the vector shape
3. Add Style to the Vector Shape
Download example PSD (free)
To make it easier for you to figure out how to use a vector in Photoshop and see how these tools can be used in practice, I am posting an Infographic file made by me entirely using vector tools.
Ask a Question
If something doesn’t work out for you or you have any questions, write in the comments and I will help you figure it out. You can also watch the video using vector tools.
