On the open spaces of the Russian Internet, I found a logo image. Is it possible to convert it from a raster to a vector in Photoshop, and automatically? No you can not. Alas, while the trends of the vector in Photoshop are such, everything that was done in this direction remained unchanged 5 more versions ago. Since then, it has not been touched, has not changed, and nothing new has been added to the vector. Did you need vector tools in Photoshop? Here they are, want more? What you've forgotten about Photoshop, master Illustrator. It was approximately this line of thought that drove the developers to implement the simplest vector operations in Photoshop. Now let's get down to business.
Raster-to-vector conversion is carried out through the selection areas. First, we create a selection, then we translate the selection lines into vector paths, then fill the vector paths with fill layers, thus creating a vector mask. In order to understand all this not at the level of army teams - click here, click there, you should learn how to work with vector drawing tools, understand how vector paths 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 until the weekend, you will already understand how to convert a raster to a vector in Photoshop if you finish reading the article to the end.
Highlighting the logo
I would like to emphasize that in order for the translation into a vector to be of high quality, the picture itself must be large. This is true for tracing in Illustrator, and even more important for Photoshop. My image is 1500 pixels wide, when we are done translating into vector, I will show how Photoshop translates small images and we will compare the results.
- Choose the Magic Wand Tool
- Adjust in Tolerance options 20 or 30.
- In the same place, 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 it was about vector tools, but in selection these options work the same way.
To be honest, I don't care how you select the logo, either by hand lasso or through the Color Range. It's just that in this situation, specifically on this image, it is easiest to do this with the Magic Wand Tool.
Convert selection to vector path
Don't switch from the Magic Wand Tool.
- Right-click on the selection area.
- From the menu that appears, choose Make Work Path.
- In the window that appears, adjust the tolerance to 1.0. The higher the tolerance value, the smoother, more stylized and inaccurate our outlines will be.
In the illustration below I have selected the Path Selection Tool and selected the path so that you can see it.
Saving the path to the Path palette
This operation is optional, but desirable.
- In the window that appears, enter a name and click OK.
Switch to the Path palette. If you can't find it click Window\u003e Path
Double click on the path in the palette.
Create a vector mask
The process of creating a vector mask is perfectly described in my article Vector mask in Photoshop. Let's carry out this process quickly and without details.
Make sure your kennel is selected in the Path palette
Choose from the menu Layer\u003e New Fill Layer\u003e Solid Color
In the window that appears, select a color and click OK
That's all. Everything would be more accurate if it were not for hronofag.ru Remember I told you that the smaller the image, the worse it will be translated. Are you ready to bet on your hands some dirty scan stuffed into the Word, which the customer requires to be translated into a vector? I guessed? At the same time, the image is compressed by JPG compression, reduced, then enlarged, then again reduced to the size of an avatar, and ketchup was also spilled on it. Is it possible to qualitatively translate such a picture into a vector in Photoshop?
First, take a look at our logo. Despite the excellent resolution, crisp edges Photoshop failed to create nice and even outlines. The illustrator does it 100 times better, but the article is not about the illustrator. As you can see, the contours are not even 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 2 times more and show you the result of the translation into a vector.
Here is a good example of how the size of the bitmap affects the quality of the trace. And this despite the fact that the image is very high quality despite the size. Well, I'll reduce the quality. Save the picture as JPG at the worst quality.
Let's translate into a vector. Excellent result, only ketchup is missing. Just right for a satisfied customer, grunge or vintage processing!
And yet I am slightly manipulating the truth. The point is that all of this makes sense for Illustrator, who creates a vector from a picture. Photoshop does not create a vector from a picture, it creates paths from a selection. It is logical that the better and smoother the selection, the smoother the curves will be. And the Magic Wand tool with which we selected these areas is no longer suitable for selecting such eerie images. Yes, you will be able to make high-quality selections, used all the selection tools, you can even increase them and create a more or less even outline based on them, which will still not be ideal. Going this way is just a waste of time. The only working option is to render the logo from scratch in Photoshop.
1. Picture. Below is a picture of a mini-car that will need to be worked on to give it a vectorial look. The image quality in this case is not so important, as long as there are details for tracing.
2. Process. First, right-click and do one of two things: a) Copy. Then in Photoshop "e Edit - Paste. In this method Photoshop leaves the background layer locked and pastes the image on a new layer Layer 1 above the background. Double click on the word Layer 1 to select the text and name the layer more appropriately. For example, "theimage".
b) Save Picture As on the screw. Then in Photoshop File - Open [File - Open] and find where you saved the picture. Maybe on the desktop? .. Notice, in the layers palette, the image icon shows that the image is "indexed" [in short, it is a gif]. Notice also, it is blocked. To fix this, simply go to Image - Mode - RGB color and thereby transfer the locked layer to the background layer. Double clicking on the background layer will convert it to the editable layer. [Rename Layer 0 friendlier ... For example, "theimage".]
Now let's create a duplicate of the theimage layer. If you're using Photoshop 7 or CS, create a new set of layers to keep all individual objects. Just click on the folder icon at the bottom of the layers palette, double click on Set 1 and name it like mine.
3. A powerful pen tool. Let's start by creating a stroke around the entire car. Set the foreground color with the eyedropper, taking the color from the darkest place in the image. In this case, very close to black. Now select the pen tool from the toolbox. Make sure the Shape Layers option is on [top of the options bar], I've outlined it in orange.
Now just add anchor points where you want to edit the path.
Hint: Ctrl + [Plus on the numeric pad on the right of the keyboard] to zoom in. Accordingly, Ctrl is the reverse action. I recommend using these functions to enhance your image.
4. Connecting anchor points. After creating a path around the car, connect to the first anchor point to create a solid shape. Now hide the theimage copy layer to see what happens. [As I did in the image below.] Now let's start manipulating the anchor points to give our auto a slender shape.
This is how the Layers palette now looks with a new Vector Shape layer highlighted in blue. Also if you click on the Paths tab of the layers palette, you will see a "path" version of this layer.
5. Converting anchor points. Select the anchor point conversion tool and manipulate the areas that need transformations to give a clear border to the car.
Make sure the Shape 2 layer is selected.
I started converting points with the wheel. Click on the anchor point and move in the direction of the black arrow [see. fig.] until the path begins to follow the contours of the wheel.
Tip: The Conversion Tool creates 2 Bezier points to adjust the curvature.
Manipulate with Bézier curves to achieve as precise a repetition of the paths as possible.
Tip: After converting multiple anchor points [or anchor points], you will realize that some of the original points are not needed at all. In fact, the fewer anchor points, the smoother the selection will be. So use the Anchor Point Removal Tool.
Here's what I got. We will use this form as a base.
Next, I made a copy of the Shape 2 layer and manipulated the points to draw the dominant color [blue, in this case] of the car. Click on this layer's thumbnail, grab the eyedropper and change the black color to blue # 3672BD.
This is what the car looks like now.
Now let's work on the windows.
Turn on the theimage copy [black] layer again and hide the Shape 2 copy [blue] layer.
Take the Pen Tool and in the Options Bar turn on the Subtract from area shape option [I've outlined it in orange].
Hide the Shape 2 copy layer. Select the Shape 2 layer. Start by tracing the windows on the opposite side of the car.
Turn off the visibility of the theimage copy layer, see the result.
Subtracting from the black shape created the illusion of transparency.
To apply this effect to the other two windows without adding a new layer, just hold Ctrl + Alt, click and drag this subtraction path to copy. [Do this twice.] Now place the duplicates in their places. Use the Anchor Point Conversion Tool again to smooth corners and shape precisely.
Apply the same technique on the Shape 2 copy layer to get the same image as mine.
Now that we have the base of the vector car shape, all that remains is to add new shapes, lines and a few textures. We'll fill the windows later!
Now using the ellipse tool in the Toolbox draw the center of the rear wheel, then hold Shift and do the same for the front wheel.
For precise positioning, Ctrl plus click on the new ellipse, then right click on the simple ellipse and select Free Transform Path. Right click again and choose Distort. I also started working on the headlights [on a new layer] using the same technique: Ellipse - Free Transform - Distort - Set to Position.
Since the new layers were added, they could accumulate, it is reasonable to name them correctly. [I thought it was possible to use as few layers as possible, but ...]
Next, I added a bumper. Again, using the tracing pen tool, an anchor point conversion tool to smooth corners and shape accurately relative to the original. [All of this is a long-established and accepted practice of tracing, honestly!]
Then I applied a layer style to the bumper to give it a chrome effect. Right click on the bumper layer and apply the following settings.
Create a new layer and name it Lines. This layer should be above all. So, on the toolbar, the pen tool is selected, on the options panel, the settings correspond to the specified ones, we begin to add anchor points in the direction of the white arrow.
Now set the active color to black [or just press D], press the B key to select the brush tool, now in the options bar, set the Brush Preset Picker and choose a small, soft-edged brush about 3 size. But change the diameter by 2 pixels [try even 1], since even 3 can be a lot.
To reselect the pen, press P, activate the Lines layer, right-click and select the Stroke Path option.
You will be prompted to select the tool with which you want to create a new stroke. Choose Brush from the dropdown menu and click OK.
I changed the opacity of the Lines layer to 54% to soften it.
Then I continued in the same spirit, using the same technique to add other lines.
Added a mirror, wipers and a badge on the hood.
Tip: For areas that are too small to handle with the pen tool, use the polygonal lasso. Just click and add anchor points like with a pen, and when you're done, right-click on the selection and choose either the "Create Work Path" or "Fill" option.
For structures like highlights, use the polygonal lasso [L] to trace around these areas, right click and Fill with soft blue [I used # 86A9D7].
All that's left to do now is add details. The detail is up to you. Below is the result of my work after adding details to the headlights, wheels and te teh.
Hope you enjoyed the tutorial.
Microstocker and illustrator Olga Zakharova told several ways that she uses when creating another illustration for sale or for a commercial order. The methods are simple and, for sure, most of the practicing illustrators know about them, however, they are all fraught with nuances that are worth paying attention to.
When I was just starting this blog, I didn’t understand anything about stocks at all and knew very little about creating vector illustrations. Therefore, I wanted to share with the world every important discovery - I understood that just as I recently suffered, not knowing how to make a seamless texture, now someone else is suffering :)
Now it's harder. Because the stage of "newbie" has already passed, and many things seem so obvious to me that until one of the newbies begins to ask questions about them, it does not occur to me to write about them. Therefore, guys, do not hesitate to write comments, ask all questions, even those that seem stupid (there are no stupid questions).
Three pictures - three different ways to create. Guess which one? :)
This is all to the fact that I was recently asked here - how is it more convenient to outline a picture in Illustrator?
After all, there are many ways to turn an idea or sketch into a vector picture using our favorite program :) And I decided to describe the most famous methods - with their pros and cons. I myself use different methods - depending on the result I want to get.
Image Trace
The most automated way to make a vector image out of a sketch, and, as it seemed to me before, the fastest (disclaimer - now I don't think so).
Image tracing is carried out using the image trace panel (the upper Window panel - Image Tace) - just place your sketch on the workspace, open the panel, select one of the presets in the drop-down menu (everyone has different settings, you can choose the best one by typing) - for example, sketch - and in a minute or two your file is turned into a vector. Then you just need to remember to remove the "garbage" - different empty paths that are formed in the process. To do this, without removing the selection from the traced object, go to the top menu Object - Path - Clean Up.
Trace is ready! As they said at one of my past jobs, "I pressed the button and go to the cashier." But, alas, things are not so simple.
The result of the trace looks cool only when the original sketch picture was of high quality (clear lines with a minimum of hand shake, no fuzzy lines, etc.), then it was scanned with a decent DPI and at least a little processed in Photoshop (whitening the background, adding contrast) ... In all other cases, the trace requires improvement.
I do this: turn on the visibility of the paths (cmd + H), select a contrasting color for them in relation to the stroke (double click on the layer name) - and, increasing the picture to 200-300%, check the accuracy of the lines. A regular pencil helps me a lot in this - I like it more than an anti-aliasing one - and a plug-in from Astute Graphics Smart Remove Brush Tool, which can remove unnecessary points, minimally changing the line.
Here it is important not to overdo it in “licking” the picture - if you need perfect straight lines, use one of the tools that will be discussed below faster. It is reasonable to use a trace when you want to keep the effect of "hand-painted".
I currently only use trace for quotes like this:
Pros and cons of the trace:
You can relatively quickly turn a good sketch into a vector image while maintaining the hand drawn effect
- It takes time to process
- The whole object is already vector, that is, it is more difficult to change the thickness of the lines
- The lines will not be perfectly straight (this is also a plus)
My verdict is that you need to use the trace wisely, applying it not to everything in a row to save processing time, but to selected pictures in order to preserve the “manual” effect and a certain carelessness of the lines.
Blob Brush
Of all the illustrator's tools, the blob brush is the most similar to a real, live brush. For this he is very fond of artists who switch from live drawing or drawing in Photoshop to vector. All the beauty of this tool can be appreciated only by those who have a graphics tablet - with it you can control the thickness of the lines by pressing.
This instrument has so many fans that it’s even embarrassing for me to admit that I don’t like it and almost never use it. This evokes in people about the same emotions as when I say that I do not like The Master and Margarita. But that is - that is :) Examples of blob brush use in my portfolio can be found only on very, very old pictures, which, most likely, will be deleted during the next cleaning.
One of my first pictures drawn by a blob brush
With a blob brush, you can draw lines in the same way as you do with a felt-tip pen on paper (it seems to me not entirely correct to compare with a brush, since the transparency of a blob brush is not regulated by pressure), provided, again, you have a tablet.
Pros and cons of blob brush:
Makes it easier for artists to transition from raster to vector
+ Simulates live drawing
- You need a tablet to appreciate all the beauty (and the ability to draw will not hurt either)
- The thickness of the lines can be set only before drawing, as soon as the line is drawn - it is essentially a vector object with a fill, - as in the case of a trace, it is difficult to adjust the thickness after the fact
Pentul / Pentool
Probably the most incomprehensible tool for beginners, which turns out to be an extremely convenient and functional thing when you get to know it better. Very soon I will add a lesson to the store about how to make Bezier curves my best friends, because I myself spent a lot of nerves on them.
The pen is the tool most distant from artists and closest to graphic designers, because to draw a line, you do not need to draw a line with a brush / pencil, etc., but put a point, then another, and so on, adjusting the bend and length with the curve handles.
For some reason, it seems to me that girls draw the blob with a brush more, and boys draw more with a pentule, because it is so strict and serious. And yes, this is my favorite instrument. True, not a standard pentule, but an upgrade from Astuta Graphics called Vector Scribe.
Pros and cons of pentula:
Clean and neat lines
+ You can adjust the thickness of the drawn lines / picture at any time in a couple of seconds until the expansion is made (which must be done before sending to the stock, but it is better to save an unexpanded copy in the working file)
+ Pentule is a great way to create stock images for those who cannot draw in the classical sense of the word
- All drawing comes down to placing dots and turning the handles - many creative people are annoyed by this
- It is also useful to master the Shape Builder Tool and the Pathfinder panel, because a regular eraser will not help to remove unnecessary
- To learn how to confidently handle the pentule, you need to master a certain amount of theory and practice a lot, a lot, while at first the lines will turn out to be crooked and it will take a lot of time to draw
Brush (regular) / Brush
A trade-off between a pentule and a blob brush for those who want to draw lines rather than dots and still have more control over how the line looks.
That on the line drawn with a brush, that on the "pentule" one can "put" a huge number of different brushes - from the standard library (though officially they cannot be used on stocks), or !! their own, each time getting a new result. Then you need to remember to expand this whole thing (that is, turn it into a vector using the Object - Expand command).
Pros and cons of the brush:
The ability to edit lines is preserved and you can draw with your hands (not with dots)
- Need a tablet
- The lines are almost always not the way I want them - maybe my hands are crooked, but according to my feelings, the same blob brush allows you to control the line more accurately
The blob brush and brush have their own individual settings, which can be reached by double-clicking on a specific tool in the left panel.
For a brush, you can adjust the sensitivity and smoothness of the line, for a blob brush, you can also enable or disable automatic sticking of objects of the same color to each other. I have nothing to tell about the settings in detail, because I have standard ones.
Simple geometric shapes
We are talking about a square, a circle, lines, polygons - most often, of course, they are used not by themselves, but in combination with a pentule. Drawing with geometric shapes is suitable for those who love geometricity in pictures, enjoy clear shapes and a minimum of points on the paths :) Previously, I used shapes only for some obvious actions - for example, I made the eyes of a character using a circle, or a frame of a house with using a square.
After watching the course Illustration for Designers: Create Your Own Geometric Animal on Skillshare, I reimagined the role of shapes in pictures and became interested in learning how to see shapes in objects. This is how the animal series was born, which I plan to continue shortly:
Pros and cons of drawing with shapes:
The lines are perfect, no need to think about where to put a point and how to pull the handle
- It is very difficult for most people to readjust to "thinking in forms"
- You still have to use additional tools - pentule, passfinder panel or shape builder tool
About 80% of my current pictures are drawn by the InkScribe plugin - the same analogue of the Astute Graphics pentule, which I already mentioned (by the way, I plan to write a separate post about Astute plugins as soon as the potential size of this post stops scaring me).
The remaining 20% \u200b\u200bis traces, simple shapes and sometimes the Dynamic Sketch Tool. This is something like a pencil, only more accurate and with a lot of settings (again, Astutovsky).
Which tool will be more convenient / faster for you to draw personally, except for you, no one can decide. Therefore, my main advice is to try them all, apply for different pictures, different styles, in different situations, and don't let other people's opinions influence you. Because for some, the blob brush is the most beautiful and cutest of all, and for someone, to draw cool pictures, they don't need a tablet - they cope with a mouse and a pentula.
Instructions
Draw a picture or select a photo. Scan picture, take a photo of it, that is, in one way or another, convert it to digital format. Import the picture into the graphics editor of your choice. As you zoom in gradually, notice that picture gradually breaks down into separate ones, each of which is painted over with its own color. These squares are called rasters, and they are the basis of your image.
Analyze the file size. Choose the color model you clicked (RGB, CMYK) that will help you display correctly. With the help of the editor, remove or add details, correct the frame, sharpness, color gamut. Select (optimal display value on the screen). Resolution (rasters), that is, it is counted by the number of pixels that your picture contains horizontally and vertically. Small resolution is considered a size - up to 500 pixels along one edge, medium - up to 1024 pixels along the edge, everything else is considered a high resolution. Large ones "eat up" a lot of memory and can take a long time to load on the network.
Select the compression algorithm you need and save the picture. * .Gif is suitable for small images and animations of two or three frames published on the network, the optimal ratio of quality and file compression is provided by the * .jpeg format, for working with transparencies and backgrounds, especially in small pixel images, * .png is used. These formats are mainly used in web design. The * .bmp format provides very good color reproduction, but the files are large in size, and the * .tiff and * .raw formats, despite the size of the resulting file, allow you to save directly from digital apparatus, transmit the smallest shades of color and are widely used in professional photography and printing.
note
The disadvantage of raster images is the impossibility of scaling them without losing the quality of the original file
Helpful advice
For optimal performance with a bitmap, be sure to know the final format you want (resolution, dpi, picture size).
Sources:
- Raster and vector images. General provisions and comparison.
Vector graphics are a way of representing objects using geometric primitives - points, lines, polygons. Raster graphics, on the other hand, use fixed-size matrices of dots (pixels). Software converters are used to convert the image to vector format.
You will need
- Adobe illustrator
Instructions
note
many vector graphics editors have a function to convert a raster to a vector. just run some coreldraw or inkscape, import the bitmap there and start converting.
Helpful advice
How to make a vector from a bitmap, Adobe Illustrator, tracing. Usually, tracing is used in relation to images with only solid colors and with extremely clear contours, since the presence of gradient or simply complex colors leads to the formation of a very large number of vector contours.
Sources:
- how to make a raster image into a vector
Raster graphics Is a way of expressing an image in the form of rectangular matrices. Each cell of such a matrix is \u200b\u200ba colored dot. The element of such a grid is called a pixel.
In this tutorial, we'll talk about how to convert a bitmap to a vector shape in Photoshop. Of course, the Photoshop program is primarily intended for working with raster images, and the vector in it is a kind of addition in the form of paths with a vector layer mask, which is superimposed on the object and creates a vector shape. In such a vector shape (Shape), the path will be vector, and the fill will be raster.
In this lesson, consider the following steps:
Create a document and draw an object
First let's create a new document of any size and layer.
Now let's draw any image. Take the Brush tool with soft edges and full opacity. Let's draw some simple geometric shape, for example, as shown in the image.
Selecting a bitmap object
To translate a raster image, you must first select it with any Select tool. Now select the drawn object either with the Wand Tool, or click on the layer with the left mouse button while holding down the Ctrl key.
Convert selected object to vector path (Path)
Call the context menu using any Select tool. To do this, move the tool over the selected object and press the right mouse button. In the menu that appears, select "Make Work Path ...".
A window will appear where you will need to enter the tolarence parameter, which determines how many control points the vector form will contain, the more there are, the smoother the vector object will be, but the quality of the control points will be low.
Create a vector mask for a layer from a vector path
Go to the Paths tab, where the vector path we just created should appear.
Double click on it to give a name.
Then in the main menu select "Layer -\u003e New Fill Layer -\u003e Solid Color ...". You can name the new layer something, then click ok. Select a color for the future shape in the color selection dialog.
Now a new layer with a vector mask should appear in the Layers tab.
How to save a vector object to the vector shape library in Photoshop
Then you will be prompted to name the new vector object. Click ok and then test the new object in the library using the Custom Shapes Tool.
If the lesson on converting a raster to a vector turned out to be useful for you, then share it on the social network (icons below).
