Despite the fact that Photoshop editor raster graphics, its toolbox also includes some vector tools. Vector tools are intended primarily for creating editable curves - contours. In order to refresh your memory, let us remind you that the difference between raster and vector graphics lies in the method of storage and description graphic information. Vector drawings are stored in the form of mathematically described curves, which do not lose quality when scaled, and can be easily and flexibly edited at any time. First, let's look at the principle of constructing vector curves.
Vector contours are built on segments that have key nodes and control points. Key nodes limit the segment on both sides, and control points allow you to control the bending of curves.
Group tools are used to create curves Pen. Tool Pen Tool designed to create curves at key nodes. The principle of operation of this tool is to indicate the key points of a contour segment. If, when specifying a control point, without releasing the mouse button, you move it, then a segment containing control point. Further mouse movements directly affect the control point, and, in turn, the bend of the segment. The next left click will set the next control point, and so on.
The Pen tool can work in two modes - creating curves and creating so-called shapes - closed vector areas. Switching between these modes is done with the buttons - contour creation mode, - shape creation mode. If you work in the shape creation mode, then the contour you create will always be considered closed and, as a result, filled with the color you selected. Physically, a layer mask is created in the Layers palette based on a vector drawing. The layer itself is filled with the color of your choice (you select the color in the properties palette).
The principle of working with a vector mask differs slightly from the principle of working with a raster mask; only the means differ. If, in the case of working with a raster mask, you changed it using drawing tools, then in this case, changing the shape of the mask occurs using vector tools.
In order to convert a vector mask into a raster mask, you need to call context menu vector mask and select the item Rasterize Mask. The result is a regular layer mask. Otherwise, working with a layer mask in the vector version is no different from working in the raster version.
Vector drawings are convenient because you can very conveniently change the shape of the curves of this drawing at any time. 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 delete extra points on a path by clicking on the point to be deleted. In fact, switching to these tools is not at all necessary. 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 delete point tool (when you place it over an existing point). If the mode is disabled, then deleting and adding points will only be possible when using the appropriate tools.
The bending of curves is controlled through control points. To select a control point, use the tool Direct Selection Tool. Selecting the node to edit (clicking with this tool on the edited node). Then by moving the control points you influence the bend of the curve in the area of the selected node. You can also move selected nodes using this tool. Tool Path Selection Tool designed to work with the curve as a whole, as with an object - for movement and transformation. For vector objects, the Free Transform mode is used, exactly the same as for raster areas.
An important tool for working with key nodes is a tool called Convert Point Tool. The purpose of this tool is to transform node type. In Photoshop vector graphics, there are two types of key nodes - smoothed And corner. The meaning of smoothed 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 a corner knot. 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 smooth (and by default nodes are created smooth), then clicking the conversion tool will change the node type to corner. If, after pressing the mouse button, you do not release it, but simply drag it, you will be able to control the bending of the segment at a specific node.
We started by highlighting two modes of operation of the Pen Tool. The first is the mode for creating shapes, and the second is the mode for creating contours. Let's take a closer look at 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 outline will be purely virtual and unrelated to layers. To work with such contours, there is a palette called Path. All operations with contours are concentrated in this palette.
In the Path palette, contours (paths) are placed as layers in the Layers palette, and one vector layer can contain several unrelated vector contours. The bottom line of the Path palette contains icons for controlling paths. The painfully familiar pictograms with a trash bin and a blank leaf have not changed their purpose in this palette either, i.e. respectively, this is deleting the vector layer and creating an empty vector layer.
Until now we have wondered why such an absolutely raster editor how Photoshop needs these vector tools. A simple example of using vectors in Photoshop is again working with selections. As you can see from the figure, a number of icons in the Path palette are designed to transform an outline (path) into a selection outline and vice versa. In fact, after gaining some skills in working with contours, you will understand that it is much easier to adjust the vector contour to the shape of the selected area than even using a fairly flexible quick mask. So if you want to edit a selection, you can always convert it to a path (outline), then edit it and convert it back to a selection. If you want to use traditional operations like Stroke and Fill for selection paths, 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 found a bug in an almost flawless program. In fact, Photoshop remembers in which mode you created the outline (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 prescribed to it when creating the paths. The Create Selection Outline from Path dialog box allows you to set the most important settings regarding the selection paths (but this is only if you use the Make Selection command from the Path palette menu).
Please note that you can set the feathering radius (Feather), enable or disable Anti-Aliased smoothing. In the Operation section, you can set the logical mode for the newly created selection. Options this section become available only if one selection path already exists. Accordingly, if you select the New Selection operation, the created selection will replace the existing selection; the Add to Selection option will add to an existing selection a selection created from a path; Substruct from Selection - will subtract the created path from the existing selection.
Tool Free Form Tool allows you to create a vector path in simple drawing mode, like a brush. Hold down the left mouse button and simply move the mouse to draw the contour you need. This tool has one main feature, which likens this vector tool to the Magnetic Lasso tool - this is an option Magnetic. The principle of operation is the same, the tool looks for contrasting boundaries and draws a contour only there. Otherwise, the contour created by this tool does not differ from a regular contour.
- Views: 57900
Vector drawings are increasingly used in various printing tools to create beautiful designs from wood, plastic, metal, paper and other materials. Today, we will figure out how you can make a vector drawing with your own hands using Photoshop. Having spent very little time, we will get a high-quality vector drawing, and we will be able to use it in the future without any problems.
How to convert a drawing to vector?
First of all, it should be noted that converting the drawing into vector format Only drawings that are depicted on a white background are allowed. If the background is not white, then first you need to remove everything unnecessary and clear the background.
1. Using the selection tools, we select only the element that we want to convert into a vector drawing and copy it to a new layer called “shape”. Then create another layer and fill it completely with white; this layer can be called “background”. Now, move the “background” layer under the “shape” layer and merge them. We call the resulting image “Base”. Copy the “Base” layer twice and name them “Base_1” and “Base_2”. We turn off their visibility.
2. Let's begin our operations to convert the drawing into vector format. First of all, apply the “Isohelium” correction to the “Base” layer in order to get the drawing in black and white format. The first correction does not always produce the desired drawing, so we can make several copies of the layers and make corrections with different meanings until we get what we need.
So we got the most normal effect.
3. Next, we apply the Diffusion filter to the resulting image to remove jagged edges. The path to enable the filter: “Filter - Stylize - Diffusion” (Filter-Stylize-Difuse). In the window that opens, select “Anisotropic”.
4. Next step the edges will be smoothed so that they become clearer, to do this, click “Image - Correction - Levels” (Image-Adjustment-Levels). IN open window move the left and right sliders closer to the center. In order to see the result of the correction, it is best to enlarge the drawing to 300% before opening the levels.
5. We repeat points 3 and 4 in the same order.
6. Turn off the visibility of our main layer and turn on the “Base_1” layer. Perform the action “Image - Correction - Isohelium” (Image-Adjustment-Threshold). Set the parameter at level 138.
7. We perform the operations specified in paragraphs 3,4 and 5 with this layer.
8. Create a new layer and fill it with black. Let's call it "Background". Set it below the “Base” layer. In the “Base_1” layer, change the mode to “Difference”.
Here's what we get:
9. The picture turned out to be a little scary, but we'll fix that now. Make the “Base” layer active and add a layer mask. Then, using an eraser, we can remove excess areas on the girl’s face and body.
10. Now we have a drawing, now we need to convert it to vector. We use " Magic wand", select the entire black area of the drawing, and on the image, press the right mouse button, in the menu that opens, select “Create work path”. Set the value to 1.0.
In this Photoshop tutorial we will turn an ordinary photo of a girl into a vector drawing.
This is a fairly complex lesson that will take you a lot of time, but it's worth it! With this tutorial you will understand how to draw vector images of people.
Here we are not using any filter, only the Pen tool. If you don't know how to use the Pen tool, then see.
Find photos you want to turn into vector art.
Duplicate it and go to the menu Image>Adjustments>Posterize (Image - Correction - Posterize) and select the desired number of levels there. The more levels, the more detailed your vector image.
Select the girl's face and neck (exposed areas of skin) using the Eyedropper to select the skin color from the photo. Fill the selection with this color.
Outline the hair again, fill it with black and place this layer under the face layer.
Since we have lost some areas of hair on the temples and forehead, we need to finish drawing them. Do this on a new layer above the face layer.
Trace the edges of the garment. Remember that every detail must be monochromatic. We will draw the shadows later...
Now, based on your posterized base and the original image, decide on the new level that you will draw and its color.
DO NOT TAKE COLOR FROM THE POSTERIZED LAYER IN ANY EVENT! THE COLORS ON IT ARE WRONG, YOU ONLY NEED IT TO DRAW THE LEVEL.
Continue drawing shades on the skin. Layers with shadows should overlap each other according to the following principle: light layers at the bottom, dark layers at the top.
When you are done with the skin, combine all these layers.
Since we have two layers of hair, make a new layer at the very top and draw light strands on it.
If the hair in your photo is dark, then this will be easy to do, but if it is light, then you will have to more accurately draw the shades obtained during posterization.
Do the same with clothes.
If you look at the original photo, you will notice that the necklace is missing from the picture. It's okay, so be it.
If the person in the photo is a little fat or there is some detail on him that you don’t like, then just remove it!
Edit all remaining details...
Now work on your eyes. First, on a new layer draw the shape of the eye. Then create another layer and draw eyelashes. Then merge both layers together.
On top of the black eye shape, draw a slightly smaller white one. And inside the white one there are several circles, which will make a pupil.
We draw out the lips. First draw a shape and fill it with the main color.
Draw shadows and highlights on the lips, as well as in the mouth (if necessary).
Here, as you can see, a backing for the teeth is drawn - this is the base of the gums and the shadow of the teeth.
And at the end draw the teeth themselves and the highlights on them.
Remember that all shadows and highlights need to be grouped with the main color.
And after several hours of working on this photo, now look at the result! We sincerely hope that you yourself like what you drew.
In this tutorial, we'll learn the basics of drawing vector shapes in Photoshop CS6 using the simple Shapes group tools! We'll start by learning how the tools work. "Rectangle"(Rectangle Tool ), "Rectangle with rounded edges"(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 using the useful properties of shape layers, and much more! We have a lot to learn, so in this tutorial we'll focus on the workings and properties of the five basic tools in the geometry group. In the next tutorial, we'll learn how to add more complex shapes to our document using the Free Shape Tool!
This tutorial is designed for Photoshop CS6 users. If you work in more old version 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 to recommend you a good graphics editor, then in most cases the answer would be " Adobe Illustrator" Indeed, the capabilities of the Adobe Illustrator editor are much wider than those of Photoshop, but, nevertheless, as we will see from this and the following lessons, various tools in the “Shapes” group make it easy to add simple vector images to drawings 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 group tools
Photoshop program offers us a choice of six tools from the “Shapes” group: "Rectangle"(Rectangle Tool) "Rectangle with rounded edges"(Rounded Rectangle Tool), "Ellipse"(Ellipse Tool) "Polygon"(Polygon Tool) "Line"(Line Tool) and "Free figure"(Custom Shape Tool). All 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 the 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 shapes, we need to tell Photoshop what type of shape we want to draw, because in reality, Photoshop allows us to draw three shapes different types- vector shapes, outlines and pixel shapes. We will look at the difference between these types of shapes in more detail in other lessons, but as we already learned from the lesson “Drawing vector shapes and pixel shapes in Photoshop CS6”, in most cases you will draw vector shapes. Unlike pixel shapes, vector shapes are easily resizable, completely scalable, and resolution independent. This means that we can edit and resize them as we wish without losing image quality. Both on the screen and during further printing, the edges of vector shapes remain clear and sharp.
To draw vector shapes rather than paths or pixel shapes, select the "Figure"(Shape) in the tool settings panel at the top of the screen:
Select the “Shape” tool mode in 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 the No Color icon (with a red diagonal stripe), the Fill Color icon, the Gradient icon, and the Pattern icon:
4 shape fill options (No Color, Solid Color, Gradient and Pattern)
Fill method "No color"
As the name suggests, the pouring method "No color"(No Color) does not fill the shape with any color. You may ask, why do we need an empty figure? Well, in some cases, you may only want the shape to have a thin outline. Next we'll look at how to add a stroke to a shape, but if you want the shape to just have an outline without a color fill, choose the No Color option:
If you select the No Color option, the shape will not be filled with any color.
Below is a sample shape after applying the No Color option. All we see are the subtle outlines of the figure, the so-called “contour”. The outline can only be seen in Photoshop, so if you start printing the document or saving it in JPEG formats or PNG, the outline will disappear. To make it visible, we need to add a stroke to it, which we'll explore next after we've looked at all the options. fills(Fill):
When the fill method is set to No Color, only the outline of the shape is visible (and then only in Photoshop)
Filling method "Pure color"
To fill the shape with color, select the option "Pure Color"(Solid Color) (second icon from left):
Click on the “Pure Color” option icon
After selecting the “Pure Color” option, select a color for the shape by clicking on one of the color swatches. Colors you've recently used will appear in the row "Recently Used Colors"(Recently Used Colors) above the main swatches:
Select a color by clicking on its swatch
If the required color is not among the samples, click on the Color Picker icon in the upper right corner of the dialog box:
Click on the Color Picker icon
Then select the color you want from the Color Picker. Click OK to close the Palette when you have decided on a color:
In the Color Picker, select a color to fill 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 a shape with a gradient fill, select the option "Gradient"(Gradient). Then click on one of the thumbnails to select the gradient swatch you want, or create your own using the options below the gradient thumbnails. In a separate tutorial we'll look at how to create and edit gradients:
First, select the “Gradient” option, and then select the desired gradient pattern
Below is the same shape, only this time filled with a gradient fill:
Our shape is now filled with one of the ready-made gradient samples
Pattern filling method
And finally, selecting the option "Pattern"(Pattern), we can fill the shape with a pattern. Click on one of the thumbnails to choose the finished pattern. The program doesn't come with many patterns initially, but you can also download additional patterns, downloaded from the Internet or created yourself, by clicking on the small gear icon (under the Color Picker icon) and selecting "Load patterns"(Load Patterns) from the menu that appears:
First, select the “Pattern” parameter, and then select the desired pattern sample
And this is what a figure will look like filled with one of Photoshop's patterns. To close the dialog box "Fill"(Fill), press Enter (Win) / Return (Mac) or click an empty space in the Settings panel. If you're hesitant about choosing the right color, gradient, or pattern for your shape, don't worry, we'll explore how you can change them later:
A shape filled with the selected pattern
Adding Stroke to a Shape
By default, Photoshop doesn't add a stroke to the edges of a shape, but adding one is as easy as adding a color fill. In fact, the 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 settings panel:
Click on the stroke color swatch
This will open a dialog box with the same options as for the fill, except that we now choose a color for the stroke. At the top of the window there are again four icons "No color"(No Color) "Pure Color"(Solid Color) "Gradient"(Gradient) and "Pattern"(Pattern). By default, the No Color option is selected. I'll, in turn, select the Solid Color option and then set my stroke color to black, selecting it from the swatches. Just as 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 color you want manually:
Select the “Pure Color” option for the stroke, and then select the desired one from the color swatches
Changing the Stroke Width
To change the width (thickness) of the stroke, use the parameter "Width"(Width), located to the right of the stroke color swatch in the settings panel. By default, its value is 3 pt. To change the width you can either enter 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:
Changing the stroke width
Align Edges Option
If you look further into right side 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, resulting in them remaining sharp and crisp:
Make sure the Align Edges option is enabled
However, for the Align Edges option to work, simply selecting it is not enough. You also want the stroke width to be in pixels (px), not points (pt). Since in currently Since my stroke width is measured in points (the default unit of measurement), I'll go back and enter a new width value of 10 pixels (px):
For the Align Edges option to work, set the stroke width in pixels (px)
Below, a 10 px black stroke has been applied 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 panel, selecting the Fill Method "No color"(No Color), I will only have the outline of the figure with a stroke. The inside of the figure will become empty. The shape may appear to be filled with white, but that's only because the background color of the document is white, which is what we actually see.
The same shape, with the fill option set to "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 shape stroke type”
As a result, a dialog box will open "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 outline, outside or in the middle. We can make the ends of the lines for stroke (parameter "Ends"(Caps)) round, square or thick, and the junctions of the lines in the stroke (parameter "Angles"(Corners): sharp, rounded or beveled. When the button is pressed "Other options"(More Options) located at the bottom of the dialog box, another window will open 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 it's a dotted line instead of a continuous line:
The stroke appearance has changed from a continuous line to a dotted line
Rectangle Tool
So, we've already learned how to select the various Shapes group tools in the Tools panel, how to choose fill and stroke colors, and how to change the appearance of the stroke. Now let's learn how to draw the vector shapes themselves! We'll start by exploring the first Shape Group tool in the list - "Rectangle"(Rectangle Tool). I'll select it from the toolbar like I did earlier:
Selecting the Rectangle Tool
The Rectangle Tool allows us to draw simple quadrilateral shapes. To draw a shape, click in the document window to determine the starting point of the shape. Then, while holding down the mouse button, drag the mouse cursor diagonally to finish drawing the shape. As you move the cursor, you will see thin outlines (contour) of the future figure:
Drag your cursor to draw a rectangular shape. As you move the cursor, a thin outline of the shape will appear
When you release the mouse button, the program will fill the shape with the color you selected in the settings panel:
The program will fill the shape with color as soon as you release the mouse button
Resizing a shape after it's drawn
Once you have drawn the initial shape, its current dimensions will appear in the settings panel: width(Width (W)) and height(Height (H)). In my case, I drew a shape 533 pixels wide and 292 pixels high:
The settings panel shows the original dimensions of the figure (width and height)
If you need to resize a shape after you've drawn it (this works for all Shapes tools), simply enter new values in the appropriate Width and Height fields. For example, let's say I need my shape to be 500px wide. To do this, you only need to change the width value to 500 pixels. If necessary, I could also enter a specific height value. If you want the proportions to remain the same when you change the height or width of the shape, first click on the small chain icon between the height and width values:
Next, with the chain icon activated, enter a new height or width value. Photoshop will automatically replace corresponding value 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:
Changing the size of the figure
Resizing a shape before it is drawn
If it happens that you know the exact height and width of a shape before you draw it, there is one handy trick. With the Shapes group tool selected, simply click anywhere inside the document. As a result, a dialog box will instantly open where you can enter the desired height and width values. Click OK to close the dialog box and the program will automatically draw the shape:
Click anywhere inside the document to enter the width and height values, and the program will automatically draw the shape
Drawing a shape from the center
Let's learn some simple but useful keyboard shortcuts. If you press and hold the key Alt (Win) / Option (Mac) As you move the cursor, you will draw a shape from the center, not from the corner. This technique works with all the Shape tools, not just the Rectangle tool. Note that you must first start drawing the shape and only then press Alt (Win) / Option (Mac). You also need to release the mouse button first and only then the Alt (Win) / Option (Mac) key, otherwise the technique will not work:
Press and hold Alt (Win) / Option (Mac) to draw the shape from the center
Drawing squares
To draw a square, place the cursor in the document window and start dragging it, drawing a rectangular shape. Once you have started doing this, press the key Shift and continue to hold it down as you move the cursor. Pressing the Shift key converts the shape to a square. Again, don't forget to click Shift key after you have started to move the cursor, and release it last, otherwise the square will not be drawn. You can chain two key combinations 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 will draw a perfect square from the center:
Press and hold the Shift key as you move the cursor to draw a square
Once again, you'll only see a thin outline of the square as you draw, but when you release your mouse button, Photoshop will fill it with the selected color:
The program always waits for you to release the mouse button before filling the shape with color
Shapes Group Tool Options
If you look at the settings panel, to the left of the option "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 Shapes group tool that is 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. With the exception of the Polygon and Line tools, which we'll explore later, you won't be using this menu very 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 with any aspect ratio, but since all the shape group tools work this way by default, there is no need to specifically select this option. Parameter "Square"(Square) allows us to draw squares using the Rectangle Tool, but we can do this by simply 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 pressing and holding the Alt (Win) / Option (Mac) key.
If you select options « Specified size» (Fixed Size) or "Set proportions"(Proportional) and enter values for width and height, these values will also affect the next shape that is drawn, not just the one you have already drawn. Therefore, you need to remember that after drawing the shape, go back and select the option again "Arbitrarily"(Unconstrained), otherwise each new shape drawn will be the same size or with the same proportions:
The options you see depend on which Shapes tool is selected
Editing Shape Layers
Previously, we learned that in order to draw vector shapes in Photoshop, we need to set the drawing mode - "Figure"(Shapes) (as opposed to outlines 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 in the Layers panel, we can see that the shape I drew with the tool "Rectangle"(Rectangle Tool), located on a separate layer-shape “Rectangle 1”. The name of the layer will depend on which tool was used, so if I, say, 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
Visually, the difference between a regular layer and a shape layer is that shape layers have a small shape icon in the bottom 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 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 simply click either on the color swatch Fills(Fill), or according to the color sample Stroke(Stroke) in the settings panel to select a different color. You can also change the stroke width and work with other options if necessary. I'll click on the Fill color swatch:
With the shape layer selected, click on the Fill color swatch
Click on the blue color swatch
As soon as I click on the swatch, the program immediately fills the shape with the new color:
The color of the figure was changed without having to re-draw the figure
And, if we look at the Layers panel again, we will see that the shape layer thumbnail has also changed its color:
When we made changes, the shape layer's thumbnail also changed its appearance.
Rounded Rectangle Tool
Let's look at the second of the Shapes group tools - "Rectangle with rounded corners"(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 degree of 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 needs to be set before you start drawing the shape, in my case, I'll enter a Radius value of 50 pixels:
Use the Radius option to determine the degree to which corners are rounded
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, while holding down the mouse button, drag the mouse cursor diagonally to finish drawing the shape. Just like with the Rectangle shape, the program will display a thin outline of the shape as you move the cursor:
Drag your cursor to draw a rounded rectangle after you've entered a radius value in the Options bar
When you release your mouse button, Photoshop will finish drawing the shape and fill it with color:
When you release the mouse button, the shape will fill with color
Below is another rectangle with the radius set to 150 pixels. This value so large (for this figure, at any rate) that the left and right side rectangles have the shape of a curve:
The larger the radius value, the rounder the corners.
And here is a rectangle with a small radius value of 10 pixels, which only slightly rounds the corners of the shape:
A small radius value rounds corners less
Unfortunately, there is no preview of the degree of corner rounding in Photoshop CS6. We can see how round the corners are only after we draw a rectangle. Also, we can't change the radius value while we're drawing the shape, and Photoshop doesn't allow us to go back and change the radius value after we've drawn the shape. All of the above means that drawing rounded rectangles is essentially a matter of trial and error.
If you don't like the rounded corners of the rectangle after you've 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 Ctrl+Z (Win) / Command+Z (Mac)), which will remove the shape from the document. Then enter a new radius value in the settings bar and start drawing the rectangle again.
Select Edit > Undo: Rounded Rectangle Tool
The same keyboard shortcuts we covered when learning about the Rectangle Tool also 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 the mouse key.
To draw a shape from the center rather than a corner, start drawing the shape and then press and hold the Alt (Win) / Option (Mac). And finally, keystroke Shift+ Alt (Win) / Shift+ Option (Mac) will result in a square being drawn from the center. The keys need to 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 like with the other tools we've covered, click in the document window to define the starting point of the shape and then, while holding down the mouse button, drag the mouse cursor diagonally to finish drawing the shape:
Drawing an ellipse using the Ellipse tool
Release the mouse button to finish drawing the shape and filling it with color:
The figure is filled with color.
To draw a perfectly straight circle using the Ellipse tool, start moving the cursor and then press and hold Shift. To draw an ellipse from the center, press and hold Alt (Win) / Option (Mac) after you start drawing. Hold down keys simultaneously Shift+ Alt (Win) / Shift+ Option(Mac) will allow you to 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"(Polygon Tool) is more interesting for us from the point of view of the possibilities for drawing shapes. I'll select it from the toolbar:
Selecting the Polygon tool
While with the Rectangle tool we can only draw four-sided rectangles, the Polygon tool allows us to draw polygons with as many sides as we wish. Next, we'll look at how you can even draw stars using this tool! To draw a shape using the Polygon Tool, first enter the number of sides you want in the option box "Parties"(Sides) in the settings panel. You can enter any number from 3 to 100. By default, the number of sides is 5, so I'll leave it like this:
Enter the number of sides in the Sides option box
Once you specify the number of sides, position your cursor in the document window and begin dragging to draw a polygonal shape. Photoshop always draws polygonal shapes from the center, so you don't have to hold down the Alt (Win) / Option (Mac) key. Press and hold a key Shift once you've started drawing a polygon, will allow you to limit the number of angles for your shape and place it on the screen exactly as required:
A 5-sided shape drawn with the Polygon tool
By specifying the number of sides equal to 3, we can easily draw a triangle:
A simple triangle drawn with the Polygon tool
Below is a polygon with the number of sides set to 12. Just like with the Radius option for the Rounded Rectangle Tool, we can't change the number of sides once we've drawn 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 parameter box and re-draw the shape:
Polygon with twelve sides
Drawing stars with the Polygon tool
To draw a star using the Polygon Tool, click on the gear icon in the Options Bar, then select an option "Star"(Star):
Click on the gear icon and select the “Star” option
Then click the mouse 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 will 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:
Determine 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 "Beam Depth"(Indent Sides By). By default, the value of this parameter is 50%, I will increase the value to 90%. I'll also increase the number of star vertices to 16:
Draw a figure that looks like an exploded star by increasing the value of the “Ray Depth” parameter
And this is the figure I got:
Exploding star drawn with the Polygon tool
By default, the tops of the stars have sharp corners, but we can round them off by selecting the "Smooth outer corners"(Smooth Corners):
Select the option “Smooth outer corners”
Below is a five-pointed star with the Smooth Outer Corners option selected:
The Smooth Outer Corners option softens the angularity of the stars
We can also round the corners at the bases of the star's rays by selecting the option "Smooth inside corners"(Smooth Indents):
Select the option “Smooth inner corners”
And again, our star looks completely different:
A drawn star with the Smooth Inner Corners option selected
Line Tool
The last of the main tools in the Shapes group is the "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 use it to draw arrows. To draw a straight line, first, set the line thickness by entering a value (in pixels) in the option box "Thickness"(Weight) in the settings panel. By default, the thickness value is 1 pixel, I'll increase it to 16 pixels:
The “Thickness” parameter is responsible for the thickness (or width) of the line
Second, just as with the other Shapes tools, click in the document window and drag to draw a line. To make it easier to draw a horizontal or vertical line, press and hold the key Shift, after you have started drawing a line, then release the mouse button and, last but not least, the Shift key:
Hold down the Shift key to draw horizontal or vertical lines
Drawing directional arrows
To draw arrows, click on the gear icon in the settings panel to open options "Arrows"(Arrowheads). Choose where you want to add arrows: at the beginning of the line, at the end, or at both ends (if you want the arrow to point in the same direction as 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:
The Line Tool makes it easy to draw directional arrows
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 bend 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. Make sure you select the Line Tool options before you start drawing the line, as they cannot be changed while you are drawing. If you want to make changes, you'll have to delete the shape and draw it again:
Arrow with Curvature set to 50%
Hiding the outline around a shape
Every time we drew a shape in this lesson, 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've drawn, you'll likely see a thin outline around it that won't go away. IN&
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 new document in Photoshop, write any word on a white sheet, choosing a convenient size (use the “Text” functions - the icon with the letter “T” 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’s 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, 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, 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.
Patience, accuracy, slowness - and your work will be ready. With good skill, you will make simple drawings quite quickly, and converting any picture into a vector will not be a problem.
The result of painstaking work will be a picture “in curves”
How to make a vector image of a person based on a photograph in Photoshop? For this you will need many layers of color, which means the work will take quite a lot of time. But the process itself is not as complicated as it seems, and with enough patience you can completely cope with the task and get a decent vector.
Loading...
