On the open spaces of the Russian Internet, I found an image of the logo. Is it possible to convert it from a raster to a vector in Photoshop, and automatically? No. Alas, while the tendencies 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 have you forgotten in Photoshop, master Illustrator. Approximately this line of thought drove the developers who implemented the simplest vector operations in Photoshop. Now let's get down to business.

The 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 in the case of tracing in Illustrator, and for Photoshop it is even more important. My image is 1500 pixels wide, when we are done translating into a vector, I will show how Photoshop translates small images and we will compare the results.

• Choose the Magic Wand Tool

• Set in the options Tolerance 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, the easiest way to do this is with the Magic Wand Tool.

Convert the selection to a vector path

Do not 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.

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.

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> New Fill Layer> 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. 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's 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 in spite of the size. Well, I'll reduce the quality. Save the image as JPG at the worst quality.

Let's translate into a vector. Excellent result, only ketchup is missing. Just right for a satisfied customer, processing in grunge or vintage style!

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 creepy images. Yes, you will be able to make high-quality selections, used all the selection tools, you will even be able to enlarge 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.

While my note about masks in Photoshop has not cooled down, I urgently want to highlight the issue of converting a raster into a vector. Two days ago, I went into my chronophage Google analytic and what did I see. It turns out that some people get to my site on the request "raster to vector", and meanwhile, on my site there is not a single sensible note on this topic. People torture 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 needed?

Photoshop is a bitmap program. The vector is present in it in the form of vector outlines. As such, vector objects not in Photoshop. But there are vector paths that can be converted to a vector mask. A mask is applied to an effect or object and a vector is obtained in Photoshop. The content of such an object is 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. For more details read my article Vector primitives in Photoshop or. So the contour will be vector. Fill inside raster.

Photoshop does not work with vectors at full capacity. Only uses its advantages there and here. But even in Photoshop, raster objects can be turned into vector objects. Why do you need this if you have Illustrator? Well, how can I tell you. When actively working with graphics, different situations... Sometimes it's easier to translate a selection into a path on the spot than to go headlong into Illustrator and do tracing there. To weed a bed of strawberries in the country, you do not need to call a combine. In the end, not everyone wants, or knows how to use Illustrator, not everyone needs it, not everyone can install it for themselves, and you need to translate 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.

Raster to vector conversion in Photoshop

What exactly is Photoshop able to translate into a vector? Anything if you select this object in advance with the group tools Select... Photoshop converts any selection to an outline. You can read about selection tools in the article Selection primitives in Photoshop. Let me give you a working example. Many years ago I was approached by a very difficult customer who requested a difficult site. For the site, it was necessary to perform various art, and I decided to draw it in Photoshop. In the course of drawing, I converted it into a vector, and now I will tell you how. Here's one of those images that I painted with a hard-edged brush on my tablet. I have drawn around the original Vitruvian Man, modified it and painted my own, different from the original, face. The idea to vectorize art came up by accident. But having implemented it, I got the opportunity to scale a person as I like. Moreover, the previously torn edges and irregularities after vectorization were smoothed out.

Finding the image to be traced

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

Selecting the object

Choose from the menu Tool the most common magic wand Magic wand tool and click on the white area. This is how we created a selection area, but we need to select the butterfly.

Go to Select> Inverse or click on the workspace and from the menu that appears, select Select inverse... The point is that the created selection must be inverted to select the butterfly. Honestly, I don't care how you create your selection. Trace the lasso by hand, it doesn't really matter.

How to create a vector path

We have a selection, now convert it to a vector path path... Choose any selection tool like Lasso Tool, Rectangular Marquee Tool or Magic wand tool... Click on the selection area with the right mouse button and select Make work path... In the menu that appears, set the degree of smoothing Tolerance taste. The addiction is simple. The higher the number, the higher the smoothing. The lower the number, the lower the anti-aliasing. High anti-aliasing means a lower number of vector knots and a more imprecise raster path following. In the case of my Vitruvian Man, this is exactly what I wanted.

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

Photoshop tools for working with paths - Path Selection Tool and Direct Selection Tool... We have a path, but no object. If you've read my series of notes on 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 as a smart layer referencing the imported Illustrator file, but we'll leave that for another note. Select the path with the tool Path Selection Tool or in the path palette Path... Click on Layer> New Fill Layer> Solid Color We have created a fill layer, which is immediately assigned a vector mask in the form of our path.

Refinement of the vector outline

Using the materials that I described in the articles Vector drawing tools in Photoshop and Add, Subtract, Intersect and Exlude in Photoshop, let's complicate the drawing. I took the tool Pen Tool, selected the fill layer mask. In settings Pen Tool put up Subtract and added some elements to our butterfly. I cut out the 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 the Custom Shape Tool article in Photoshop. Select the butterfly layer and press Edit> Define Custom Shape Our butterfly appeared in the shapes of the instrument Custom Shapes Tool.

And here is what we got in the end:

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

Raster-to-vector translation of photos in Photoshop

Photoshop is not designed to translate raster graphics into vectors. In it, however, there are several special effects that visually create a semblance of a vector image. And with the help of the technique I described, you can make of them vector image in Photoshop. 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 on your conscience. The image should be as realistic as possible, but highly smoothed. We could stop at this, 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 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, create a filled vector mask from the path, and so on.

In total, the entire photo is converted to vector areas. We will not convert the last white area to 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 again, this kind of work is not intended for Photoshop and is rather a perversion. But, this can be done, and in various situations, such techniques can come in handy. It took me 10 minutes to process the photo, so this kind of work does not take a lot of time. And remember what bigger size you will lay the photo in such a way into layers, the better and more elastic the contour will be able to go around the selection area. The less angular and rough our vector will turn out in Photoshop. Various settings Toleranse when creating a contour, they will also give different results. Happy experiments!

Despite the fact that Photoshop is a bitmap graphics editor, its set of tools includes some vector tools. Vector tools are intended primarily for creating editable curves - paths. In order to refresh your memory, recall that the difference between raster and vector graphics is in the way of storing and describing graphic information. Vector images are stored in the form of mathematically described curves, which do not lose quality when scaling, at any time they are subject to easy and flexible editing. First, let's look at the principle of constructing vector curves.

Vector contours are drawn on line segments that have key nodes and control points. Key nodes limit the line on both sides, and key points allow you to control the bending of curves.

Use the group tools to create curves. Pen... Tool Pen Tool designed to create curves for key nodes. The principle of operation of this tool is to indicate key points of a path segment. If, when specifying a control point, without releasing the mouse button, move it, then a segment containing control point ... Further movements with the mouse already directly affect the control point, and, in turn, on the bend of the segment. The next left click will set the next control point, etc.

The Pen tool can work in two modes - creating curves and creating so-called shapes - closed vector areas. Switching between these modes is carried out using the buttons - contour creation mode, - shape creation mode. If you work in the mode of creating forms, then the contour you create will be considered always closed and, as a result, filled with the color you choose. Physically, a layer mask is created in the Layers palette based on a vector image. The layer itself is filled with the color of your choice (you choose the color on the Properties palette).

The principle of working with a vector mask is slightly different from the principle of working with a raster mask, only the tools differ. If, in the case of working with a bitmap mask, you changed it using the drawing tools, then in this case the shape of the mask is changed using vector tools.

In order to convert a vector mask to a bitmap, you need to call context menu vector mask and select item Rasterize Mask... As a result, you will get a regular layer mask. Otherwise, working with a layer mask in the vector version does not differ from working in the raster version.

Vector drawings are convenient because at any time you can very conveniently change the shape of the curves of this drawing. There are a number of tools for this. For example, the tool (adding key points - nodes) - adds key points on the curve at the place where you click. The tool can remove unnecessary points on the path by clicking on the point to be deleted. In fact, you don't have to switch to these tools. Pay attention to the switch Auto Add / Delete on the Properties palette. If this mode is enabled (checked), the Pen Tool will automatically switch to the Add Point Tool (when you place it over the path) and the Point Removal Tool (when you place it over an existing point). If the mode is disabled, then deleting and adding points will be possible only when using the appropriate tools.

Curve bending is controlled through control points. To select a control point, use the tool Direct Selection Tool... Selecting a node for editing (clicking with this tool on the node being edited). Then, by moving the control points, you influence the bend of the curve in the area of ​​the selected node. Also with this tool you can move the selected nodes. Tool Path Selectional Tool designed to work with a curve as a whole, as with an object - for moving and transforming. For vector objects the Free Transform mode is applied, exactly the same as for raster areas.

An important tool for working with key nodes is a tool called Convert Point Tool... The meaning of this tool is to transform node type... V vector graphics Photoshop distinguishes between two types of key nodes - smooth and corner (corner)... The meaning of antialiased key nodes is that the control points of two curves converging at one node Always on the same virtual line.

Another type of knot, as we said, is called angular. The meaning of this type is that virtual lines passing through the control point of one of the segments and the common key node of both segments can converge at any angle.

The type conversion tool works as follows - if the node is smoothed (and by default the nodes are smoothed), then clicking the conversion tool will mark the type of the node to corner. If, after pressing the mouse button, do not release it, but simply pull it, you will be able to control the bend of the segment at a specific node.

We started by selecting two modes of the Pen Tool. The first is the mode of creating shapes, and the second is the mode of creating paths. Let us dwell in more detail on the mode of working with contours.

In this case, your path will not automatically fill and form a vector layer mask and layer. In this case, your path will be purely virtual and not related to layers. To work with such paths, there is a palette called Path. All operations with paths are concentrated in this palette.

In the Path palette, paths (paths) are placed as layers in the Layers palette, and on one vector layer there can be several unconnected vector paths. The bottom line of the Path palette contains path control icons. Painfully familiar pictograms with a trash can and a blank leaf, have not changed their purpose in this palette, i.e. accordingly, this is the removal of the vector layer and the creation of an empty vector layer.

Until now, we wondered why such an absolutely raster editor like Photoshop needs these vector tools. A simple example of using vectors in Photoshop is working with selections again. As you can see from the picture, a number of icons of the Path palette are used to transform a path (path) into a selection path and vice versa. In fact, after getting some skills in working with paths, you will understand that it is much easier to adjust a vector path to the shape of the selected area than even using a fairly flexible quick mask. Therefore, if you want to edit the selection, you can always convert it to a path (path), then edit it and convert it to a selection again. If you want to use the traditional Stroke and Fill operations for selection contours, then they are also at your disposal.

Logical operations work somewhat unexpectedly. You can create paths in any of the logical modes, be it addition or subtraction. At this stage, you will not notice any action. But don't be fooled by the fact that you've found a bug in a nearly flawless program. In fact, Photoshop remembers in which mode you created the path (the office writes ...) and as soon as you tell the program to create a selection outline from your jumble of paths, Photoshop will remember everything and perform all the operations that you assigned to it when creating paths. The dialog box for creating a selection outline from a path allows you to specify the most important settings concerning the selection contours (but this is only if you use the Make Selection command of the Path palette menu).

Please note that you can set the Feather radius, enable or disable Anti-Aliased. In the Operation section, you can set the logical mode for the newly created selection. Options of this section become available only if one selection outline already exists. Accordingly, if you choose the New Selection operation, the selection being created will replace the existing selection; the Add to Selection option will add a selection created from a path to an existing selection; Substruct from Selection - will subtract the created path from the existing selection.

Tool Free Form Tool allows you to create a vector path in a simple paint mode, like a brush. Hold down the left mouse button and just move the mouse, drawing the outline you need. This tool has one main feature which likens this vector tool to the Magnetic Lasso tool is the option Magnetic... The principle of operation is the same, the tool looks for contrasting borders and traces the contour only there. Otherwise, the path created by this tool does not differ from a regular path.

• Views: 58428

In this tutorial, we'll learn the basics of drawing vector shapes in Photoshop CS6 using the simple Shapes tools! We'll start by learning how the tools work. "Rectangle"(Rectangle Tool ), "Rounded Rectangle"(Rounded Rectangle Tool), "Ellipse"(Ellipse Tool), "Polygon"(Polygon Tool) and "Line"(Line Tool). Next, we will learn how to choose fill and stroke colors for shapes, change appearance strokes, edit shapes with useful properties of shape layers, and much more! We have a lot to learn, so in this tutorial we will focus on the operation and properties of the five basic tools of the Geometric Shapes group. In the next lesson, we will learn how to add more complex shapes to our document using the Freeform Shape tool!

This tutorial is for Photoshop CS6 users. If you work in more old version of the program, then study the original lesson "Shape and Shape Layer in Photoshop."

Most people think that Photoshop is only used for processing pixelated images, and if you asked them for a good image editor, most of the time the answer would be “ Adobe illustrator". Indeed, the capabilities of the Adobe Illustrator editor are much wider than the Photoshop programs, but, nevertheless, as we will see from this and the following lessons, the various tools of the Shapes group make it easy to add simple vector images to pictures and drawings.

If you don't know what a vector shape is and how it differs from a pixel shape, check out this tutorial.

Shapes Tools

Photoshop program offers us a choice of six tools of the "Shapes" group: "Rectangle"(Rectangle Tool), Rounded Rectangle(Rounded Rectangle Tool), "Ellipse"(Ellipse Tool), "Polygon"(Polygon Tool), "Line"(Line Tool) and "Free figure"(Custom Shape Tool). All of these tools are located in one place on the toolbar. By default, we see the Rectangle tool, but if we click on the tool icon and hold down the mouse button, a drop-down menu will appear on the screen with a list of other tools from which we can select the one we need:

Clicking on the Rectangle tool icon will allow us to view other tools in the Shape group.

I'll select the first tool in the list, the Rectangle tool:

Vector Shapes, Paths, and Pixel Shapes

Before we start drawing the shapes, we need to tell Photoshop what type of shape we want to draw, because in reality, Photoshop allows us to draw shapes from three different types- vector shapes, paths and pixel shapes. We'll look at the difference between these types of shapes in more detail in other lessons, but as we already learned from the lesson "Draw Vector Shapes and Pixel Shapes in Photoshop CS6", in most cases you will be drawing vector shapes. Unlike pixel shapes, vector shapes are highly resizable, completely scalable, and resolution independent. This means that we can edit, resize as we wish, without losing image quality. The edges of vector shapes remain sharp and sharp both on screen and when printed.

To draw vector shapes rather than paths or pixelated shapes, select "Figure"(Shape) in the tool settings bar at the top of the screen:

Select the "Shape" tool mode on the settings panel

Filling a shape with color

Click on the fill color swatch icon

As a result, a dialog box will open where you will be asked to choose one of four ways to fill the shape, indicated by a separate icon. From left to right, you can see a No Color icon (with a red diagonal stripe), a Color fill icon, a Gradient icon, and a Pattern icon:

4 shape fill options (No Color, Solid Color, Gradient, and Pattern)

Fill method "No color"

As the name suggests, the fill method "No color"(No Color) does not fill the shape with any color. Why do we need an empty shape, you may ask? Well, in some cases, you may want the shape to only have a thin outline. Next, we'll look at how to add a stroke to a shape, but if you want the shape to have only a path with no fill color, select the No Color option:

No color fills the shape with any color

Below is a sample shape after applying the No Color option. All that we see is the thin outline of the figure, the so-called "contour". The outline can only be seen in Photoshop, so if you start to print the document or save it to JPEG formats or PNG, the outline will disappear. To make it visible, we need to add a stroke to it, which we will explore further after we have covered all the options. fill(Fill):

When "No Color" is selected as the fill method, only the outline of the shape is visible (and even then, only in Photoshop)

Solid Color Fill Method

To fill the shape with color, select the option "Pure color"(Solid Color) (second icon from the left):

Click on the "Solid Color" parameter icon

After selecting the "Solid color" parameter, select a color for the shape by clicking on one of the color swatches. The colors you recently used will appear in the row "Recently Used Colors"(Recently Used Colors) over main swatches:

Choose a color by clicking on its swatch

If the desired color is not among the swatches, click on the Color Picker icon in the right upper corner dialog box:

Click on the Color Picker icon

Then select the desired color in the Color Picker. Click OK to close the Palette when you decide on a color:

In the Color Picker, select a color for filling the shape

Below is the same shape, only this time filled with color:

Our shape is now filled with color

Fill method "Gradient"

To fill the shape with a gradient fill, select the option "Gradient"(Gradient). Then click on one of the thumbnails to select the desired gradient swatch, or create your own using the options below the gradient thumbnails. V a separate lesson we'll look at how to create and edit gradients:

First, select the "Gradient" parameter, and then - the desired gradient swatch

Below is the same shape, only this time filled with a gradient fill:

Our shape is now filled with one of the predefined gradient swatches.

Pattern fill method

Finally, choosing the option "Pattern"(Pattern), we can fill the shape with a pattern. Click on one of the thumbnails to determine the finished pattern. Initially, there are not many patterns in the program, but you can also download additional patterns, downloaded from the Internet or created by yourself, by clicking on the small gear icon (under the Color Picker icon) and selecting "Download Patterns"(Load Patterns) from the pop-up menu:

First, select the "Pattern" parameter, and then - the desired pattern sample

And this is how the shape will look like, filled with one of the patterns in Photoshop. To close the dialog box "Fill"(Fill), press the Enter (Win) / Return (Mac) key or click on an empty space in the preferences panel. If you are in doubt about choosing the right color, gradient or pattern for a shape, don't worry, we will explore later how you can change them:

A shape filled with a selected pattern

Add a Stroke to a shape

By default, Photoshop does not add strokes to the edges of a shape, but adding one is as easy as filling it with color. In fact, parameter options "Stroke" ("Stroke")(Stroke) and "Fill"(Fill) are the same in Photoshop CS6, so you already know how to use them!

To add a stroke, click on the stroke color swatch in the options bar:

Click on the stroke color swatch

As a result, a dialog box will open with the same options as for the fill, except that now we are choosing a color for the stroke. There are again four icons at the top of the window "No color"(No Color), "Pure color"(Solid Color), "Gradient"(Gradient) and "Pattern"(Pattern). By default, the No Color option is selected. I, in turn, will select the Solid Color option and then set the stroke color to black by choosing it from the swatches. As in the case with the fill, if the color you need is not among the swatches, click on the Color Picker icon in the upper corner to select the desired color manually:

Select the "Solid Color" option for the stroke, and then select the desired color from the color swatches.

Change the width of a Stroke

To change the width (thickness) of the stroke, use the parameter "Width"(Width) located to the right of the stroke color swatch in the Options Bar. By default, its value is 3 pt. To change the width, you can either enter a specific value directly into the data entry window (by pressing Enter (Win) / Return (Mac) after entering to confirm the data), or click on the small arrow to the right of the value and move the slider:

Change the width of the stroke

Align Edges Option

If you look further to the right side of the settings panel, you will see the option Align Edges(Align Edges). When this option is enabled (checked), Photoshop will align the edges of the shape to the pixel grid, as a result of which they will remain sharp and crisp:

Make sure Align Edges is on

However, for the Align Edges option to work, it is not enough to simply select it. You also want the stroke width to be in pixels (px), not in points (pt). Since in currently the width of my stroke is measured in points (the default unit), I'll go back and enter a new width value of 10 pixels (px):

For the Align Edges option to work, set the width of the stroke in pixels (px)

Below I have applied a 10 px black stroke to the shape:

A simple shape with a black outline around it

After adding a stroke to the shape, if I go back and click on the fill color swatch in the options bar, choosing a fill method "No color"(No Color), I will only have the outline of the shape with a stroke. The shape will become empty inside. The shape may appear to be filled with white, but this is only because the color background document is white, which we see in reality.

The same shape, with the fill option "No Color"

Additional stroke options

By default, the program draws the stroke as a continuous line, but we can change this by clicking on the button Set Shape Stroke Type(Stroke Options) in the settings panel:

Click on the button "Set the stroke type of the shape"

This will open a dialog box Stroke options(Stroke Options), where we can change the appearance of the stroke from a continuous line to a dashed or dotted line. Parameter Align(Align) allows us to choose the type of alignment for the stroke: inside the path, outside or in the middle. We can make the ends of the lines for the stroke (parameter "Ends"(Caps)) rounded, square, or thickened, and the junction of lines in the stroke (parameter "Corners"(Corners): sharp, rounded or beveled. When the button is pressed "Other parameters"(More Options) located at the bottom of the dialog will open another window where we can set specific values ​​for strokes and spaces dotted line and even save the settings as a preset:

Stroke options

Below is a shape with the same stroke, but this time, instead of a continuous line, the dotted line is selected:

The appearance of the stroke has changed from a continuous line to a dashed line

Rectangle tool

So, we've already learned how to select the various Shapes group tools on the toolbar, how to select the fill and stroke color, and how to change the appearance of a stroke. Now let's learn how to draw the vector shapes themselves! We will start by examining the first shape group tool in the list - "Rectangle"(Rectangle Tool). I'll select it from the toolbar, as I did earlier:

Selecting the Rectangle Tool

The Rectangle Tool lets us draw simple quadrilateral shapes. To draw a shape, click in the document window to define the starting point of the shape. Then, while holding the mouse button down, drag your mouse cursor diagonally to finish drawing the shape. As you move the cursor, you will see the thin outlines (outline) of the future shape:

Drag the cursor to draw a rectangular shape. As you move the cursor, a thin outline of the shape appears.

When you release the mouse button, the program fills the shape with the color you selected in the preferences panel:

The program will fill the shape with color as soon as you release the mouse button

Resizing a shape after it is drawn

Once you've drawn the initial shape, its current dimensions will appear in the options bar: width(Width (W)) and height(Height (H)). In my case, I drew a shape 533 pixels wide by 292 pixels high:

The initial dimensions of the shape (width and height) are visible in the settings panel

If you need to resize a shape after you've drawn it (this method works for all Shapes tools), just enter the new values ​​in the appropriate Width and Height boxes. For example, let's say I need my shape to be 500px wide. It only requires changing the width value by 500 pixels. If necessary, I could also enter a specific height value. If, when changing the height or width of the shape, the proportions should remain unchanged, first click on the small chain icon between the values ​​of the height and width:

Next, after activating the chain icon, enter a new value for the height or width. In this case, Photoshop will automatically replace the corresponding value of the second parameter. In my case, I manually entered a new value for the width of 500 pixels, and since the chain icon was activated, Photoshop also changed the height value to 273 pixels:

Resizing the shape

Resizing a shape before it is drawn

If you happen to know the exact height and width of the shape before you draw it, there is one handy trick. With the Shapes tool selected, just click anywhere inside the document. As a result, a dialog box will instantly open where you can enter desired values height and width. Click OK to close the dialog and the program will automatically draw the shape:

Click anywhere inside the document to enter values ​​for the width and height, and the program will automatically draw the shape

Drawing a shape from the center

Let's explore some simple but useful keyboard shortcuts. If you press and hold the key Alt (Win) / Option (Mac) as you move the cursor, then you will draw the shape from the center, not from the corner. This technique works with all of the Shape tools, not just the Rectangle tool. Please note that you first need to start drawing the shape and only then press the Alt (Win) / Option (Mac) key. You also need to release the first mouse button and only then press the Alt (Win) / Option (Mac) key, otherwise the technique will not work:

Press and hold Alt (Win) / Option (Mac) to draw a shape from the center

Drawing squares

To draw a square, place the cursor in the document window and start dragging it out, drawing a rectangular shape. Once you start doing this, press the key Shift and keep holding it down as you move the cursor. Pressing the Shift key will convert the shape to a square. Again, remember to press the Shift key after you start moving the cursor and release it last, otherwise the square will not be drawn. You can combine two keyboard shortcuts together by pressing and holding the keys Shift + Alt(Win) /Shift + Option(Mac) when using the tool "Rectangle"(Rectangle Tool), as a result of which you draw a perfect square from the center:

Press and hold the Shift key as you move the cursor to draw a square

Again, as you paint, you will only see a thin outline of the square, but when you release the mouse button, Photoshop fills it with the selected color:

The program always waits for you to release the mouse button before filling the shape with color

Shapes tool options

If you look at the settings panel, then to the left of the parameter Align Edges(Align Edges) you will see a gear icon. By clicking on it, you will open a dialog box with additional settings for the tool of the "Shapes" group, which in this moment selected:

Click on the gear icon

Since I have the tool selected "Rectangle"(Rectangle Tool), clicking on the gear icon will display additional options for the Rectangle tool. Except for working with the Polygon and Line tools, which we'll explore later, you won't use this menu too often because we've already covered how to access these options from the keyboard. For example, the parameter "Arbitrarily"(Unconstrained) allows us to draw shapes of any size and aspect ratio, but since by default all shape group tools work this way, there is no need to specifically select this option. Parameter "Square"(Square) allows us to draw squares with the Rectangle tool, but we can do that simply by pressing and holding the Shift key as we move the cursor. Parameter "From the center"(From Center) is responsible for drawing the shape from the center, but again, we can do this by holding down Alt (Win) / Option (Mac).

If you choose options "Target size"(Fixed Size) or "Set proportions"(Proportional) and enter the values ​​for the width and height, then these values ​​will also affect the next shape to be drawn, not just the one you have already drawn. Therefore, you need to remember to return after drawing the figure and re-select the parameter "Arbitrarily"(Unconstrained), otherwise each new figure drawn will be the same size or proportions:

The options you see depend on which tool in the Shapes group is selected.

Editing shape layers

Earlier we learned that in order to draw vector shapes in Photoshop, we need to set the drawing mode - "Figure"(Shapes) (as opposed to paths and pixel shapes). When we draw a vector shape, the program automatically places it on a separate special layer called Shape Layer(Shape layer). If we look at the layers panel, we can see that the shape that I drew with the tool "Rectangle"(Rectangle Tool), located on a separate shape layer "Rectangle 1". The name of the layer will depend on which tool was used, so if I draw an oval with the Ellipse Tool, the shape layer will be called Ellipse 1:

Each new vector shape is placed on a separate shape layer

The visual difference between a regular layer and a shape layer is that shape layers have a small shape icon in the lower right corner of the layer thumbnail:

The icon on the layer thumbnail tells us that this is a shape layer.

The main difference between a shape layer and a regular pixel layer is that shape layers remain fully editable. When we previously learned how to choose the fill and stroke colors for a shape, I mentioned that we can always go back and change the color even after the shape is drawn. All we need to do is make sure that the shape layer is selected in the Layers panel and the Shapes group tool is activated. Then just click either on the color swatch Fillings(Fill), or by color sample Strokes(Stroke) in the settings panel to select a different color. You can also change the stroke width as needed and work with other parameters. I'll click on the Fill color swatch:

With the shape layer selected, click on the Fill color swatch.

Click on the blue sample

As soon as I click on the swatch, the program immediately fills the shape with a new color:

The shape's color has been changed without having to re-draw the shape

And, if we look at the layers panel again, we will see that the thumbnail of the shape layer has also changed its color:

When we made changes, the shape layer thumbnail also changed its appearance.

Rounded Rectangle Tool

Let's take a look at the second of the Shapes group tools - Rounded Rectangle(Rounded Rectangle Tool). I'll select it from the toolbar:

Select the Rounded Rectangle Tool

The Rounded Rectangle tool is very similar to the Rectangle tool except that it allows us to draw rounded rectangles. We adjust the rounding of the corners using the parameter "Radius"(Radius) in the settings panel. The larger the radius value we enter, the rounder the corners become. The radius value must be set before starting drawing the shape, in my case, I will enter the value of the "Radius" parameter equal to 50 pixels:

Use the Radius option to define the degree of rounding of the corners

After setting the radius value, drawing a rounded rectangle is similar to drawing a regular rectangle. First, click in the document window to define the starting point of the shape, and then hold down the mouse button and drag the mouse cursor diagonally to finish drawing the shape. As with the Rectangle shape, as you move the cursor, the program will draw a thin outline of the shape:

Drag out to draw a rounded rectangle after you enter a radius value in the Options Bar

When you release the mouse button, Photoshop finishes drawing the shape and fills it with color:

When you release the mouse button, the shape will fill with color

Below is another rectangle with a radius set to 150 pixels. This value is so great (for this figure, in any case) that the left and right side rectangles are shaped like a curve:

The larger the radius value, the more round the corners will be.

And here is a rectangle with a small radius value of 10 pixels, which only slightly rounds the corners of the shape:

Small radius value less rounds corners

Unfortunately, preview there is no degree of corner rounding in Photoshop CS6. We can see how round the corners are only after we draw a rectangle. Also, we cannot change the radius value while drawing the shape, and yet Photoshop does not allow us to go back and change the radius value after we have drawn the shape. All of the above means that drawing rounded rectangles is essentially a trial and error process.

If you do not like the rounding of the corners of the rectangle, after you have drawn it, go to the menu section "Editing"(Edit) at the top of the screen and select Undo: Rounded Rectangle Tool(Undo Rounded Rectangle Tool) (or press the keyboard shortcut Ctrl + Z (Win) / Command + Z (Mac)), as a result of which the shape will be removed from the document. Then enter a new value for the radius in the Options bar and start over drawing the rectangle.

Choose Edit> Undo: Rounded Rectangle Tool

The same keyboard shortcuts that we looked at when we learned about the Rectangle tool work with the Rounded Rectangle tool. To draw a square with rounded corners, start drawing a shape, and then press and hold Shift. Release the Shift key after you release your mouse button.

To draw a shape from the center instead of a corner, start drawing the shape, and then press and hold Alt (Win) / Option (Mac). And finally, shared keystrokes Shift+ Alt (Win) / Shift+ Option (Mac) will cause a square to be drawn from the center. The keys must be released only after you release the mouse button.

Ellipse tool

Tool "Ellipse"(Ellipse Tool) allows us to draw ellipses and circles. I'll select it from the toolbar:

Selecting the Ellipse Tool

Just as with the other tools we've looked at, click in the document window to define the starting point of the shape and then hold down the mouse button and drag the mouse cursor diagonally to finish drawing the shape:

Draw an ellipse with the Ellipse Tool

Release the mouse button to finish drawing the shape and fill it with color:

The shape is filled with color.

To draw a perfectly straight circle using the Ellipse tool, start dragging and then press and hold Shift... To draw an ellipse from the center, press and hold Alt (Win) / Option (Mac) after starting drawing. Holding down the keys at the same time Shift+ Alt (Win) / Shift+ Option(Mac) will let you draw a circle from the center. And as always, release the keys only after you release the mouse button:

Circle drawn with the Ellipse tool

Polygon tool

Tool "Polygon" The (Polygon Tool) is more interesting for us in terms of the possibilities of drawing shapes. I'll select it from the toolbar:

Selecting the Polygon Tool

Whereas with the Rectangle tool we can only draw quadrilateral rectangles, the Polygon tool allows us to draw polygons with as many sides as we want. Next, we'll look at how you can even draw stars with this tool! To draw a shape using the Polygon tool, first enter the number of sides you want in the parameter box "Parties"(Sides) in the settings panel. You can enter any number between 3 and 100. By default, the number of sides is 5, and I'll leave it like this:

Enter the number of sides in the "Sides" parameter box

Once you specify the number of sides, position the cursor in the document window and start dragging it out to draw a polygonal shape. Photoshop always draws polygonal shapes from the center, so you don't need to hold down Alt (Win) / Option (Mac). Pressing and holding a key Shift after you start drawing the polygon, it will allow you to limit the number of corners for your shape and place it on the screen exactly as you want:

5-sided shape drawn with the Polygon tool

By specifying the number of sides to be 3, we can easily draw a triangle:

Simple triangle drawn with the Polygon tool

Below is a polygon with 12 sides. Just as with the Radius option for the Rounded Rectangle tool, we cannot change the number of sides after drawing the shape, so if you make a mistake, you you need to go to the menu section "Editing"(Edit) at the top of the screen and select Undo: Polygon Tool(Undo Polygon Tool) (or press Ctrl + Z (Win) / Command + Z (Mac)), then enter a different value in the "Sides" box and redraw the shape:

Polygon with twelve sides

Drawing stars with the Polygon tool

To draw a star with the Polygon tool, click on the gear icon in the settings panel, then select the option "Star"(Star):

Click on the gear icon and select the "Star" parameter

Then click in the document window and drag the cursor to draw a star. Parameter "Parties"(Sides) in the settings panel determines the number of vertices of the star, so if the default value of the parameter is five, we get a five-pointed star:

Five-pointed star drawn with the Polygon tool

By changing the Sides parameter to 8, we get an eight-pointed star:

Define the number of vertices of the star using the Sides parameter

We can draw a shape that looks like an exploding star by increasing the sharpness of the star's rays using the parameter "The depth of the rays"(Indent Sides By). By default, the value of this parameter is 50%, I will increase the value to 90%. I will also increase the number of vertices of the star to 16:

Draw a shape that looks like an exploding star by increasing the Rays Depth value

And here's the figure I got:

Exploding star drawn with the Polygon tool

By default, the vertices of the stars have sharp corners, but we can round them off by selecting the option Smooth Outside Corners(Smooth Corners):

Selecting the Smooth Outside Corners option

Below is a five-pointed star with the Smooth Outer Corners option selected:

Smooth Outer Corners softens the angularity of the stars

We can also round off the corners at the base of the star's rays by selecting the option Smooth Inner Corners(Smooth Indents):

Selecting the Smooth Inner Corners option

Again, our star looks completely different:

A drawn star with Smooth Inner Corners selected

Line tool

The last of the main tools in the Shapes group is the tool "Line"(Line Tool). I'll select it from the toolbar:

Selecting the Line tool

This tool allows us to draw simple straight lines, but we can also draw arrows with it. To draw a straight line, first, set the line width by entering a value (in pixels) in the parameter box "Thickness"(Weight) in the settings panel. By default, the thickness is 1 pixel, I will increase it to 16 pixels:

The parameter "Thickness" is responsible for the thickness (or width) of the line

Secondly, just like with the other Shapes group tools, click in the document window and drag the cursor to draw a line. To make it easier to draw a horizontal or vertical line, press and hold the Shift, after you start drawing the line, then release the mouse button and last the Shift key:

Hold down the Shift key to draw horizontal or vertical lines

Draw direction arrows

To draw arrows, click on the gear icon in the settings panel to open the options "Arrows"(Arrowheads). Choose where you want to add arrows: at the beginning of the line, at the end, or at both ends simultaneously (if you want the arrow to point in the same direction in which you draw the line, select the option "In the end"(End)):

Click on the gear icon to access the Arrows options.

Below is a line similar to the previous one, except that there is an arrow icon at the end:

Easy to draw guide arrows with the Line tool

If the default arrow size does not suit you, you can change it using the options "Width"(Width) and "Length"(Length). We can also add a curve to the arrow using the parameter "Curvature"(Concavity). By default, the value of this parameter is 0%, but I will increase it to 50%:

Change the shape of the arrow by increasing the value of the "Curvature" parameter

And this is what the arrow looks like now. Be sure to select the value for the Line tool options before you start drawing the line, as you cannot change them while you are drawing. If you want to make changes, you will have to delete the shape and redraw it:

Arrow with 50% Curvature

Hide an outline around a shape

Whenever we drew a shape in this tutorial, the program displayed its thin outline. When we released the mouse button, the program finished drawing the shape and filled it with color. The problem is that if you look closely at the shape you have drawn, you will most likely see a thin outline around it that has not gone anywhere. V&

Final result

As you know, vector illustrations are currently very popular in web graphics. Professional designers can create such illustrations in a matter of hours. Whether you are a beginner or a hobbyist, web graphics lessons will certainly be extremely useful for you. The purpose of this lesson is to shed some light on the process of creating the selected image. I will demonstrate the whole process step by step and explain all the steps using my comments.

To create a really cool image, you must choose the desired program and follow certain rules. If you want to draw a vector illustration, you should keep in mind that for this you use editors such as Adobe illustrator or CorelDraw... However, Photoshop has sufficient funds to develop vector illustrations. I will clearly show this in my lesson on how to translate a drawing into a vector. I have chosen a sketch of a cat as the basis for the illustration. I decided to portray a blue cat with pink flowers in its paws.

Step 1

Let's start by creating the background. Draw the shape using the Selection Tool () (in the Shape layers(Layer Shape)). Settings - (Fill Opacity) = 0% ... Now use a gradient overlay: ((Layer Style - Gradient Overlay)) to fill the created shape. All settings are default, you only need to change the angle (I will specify the degree) and the gradient. Add Stroke(Stroke) ((Layer Style - Stroke)). We use all the default settings, except for the width in 1 px and colors.