How to add shapes to Photoshop, how to use them and draw with them. How to Install New Shapes in Photoshop

We talked about drawing in Photoshop using a pencil and brush. Freehand lines are great, but it often happens that you need to depict an even geometric figure. Rulers and compasses are a thing of the past, and now you can do this using simple editor tools.

To select one of them, click the Shapes icon on the tool palette.

Regardless of which group tool you select, the following items, common to all shapes, will appear in the Options Bar.

• Select tool mode. Here you can choose one of three.

1. Figure. The value is set to the default, and it creates a vector geometric figure on a separate layer, that is, what you expect from the tool happens.
2. Circuit. The outline of the figure is drawn without filling.
3. Pixels. It creates not a vector, but a raster figure.

• Filling. Allows you to customize the color and type (gradient, shading) of the drawn figure.
• Stroke. Shape outline settings: thickness, type, color.
• Width and height. They allow you to clarify the size of the figure when it is impermissible to do this “by eye”.

As always, create a new document with a white background. The remaining parameters can be left as default or selected at your discretion.

Rectangle

Select the Rectangle shape and, to draw it, click on the canvas and then drag the pointer while holding down the mouse button. The point where you clicked will be the corner of the shape.

On the options bar, click the icon. The geometric settings window will open.

By default, the switch is set to Rectangle. If you set it to Square, then when drawing you will always get a shape with the same length of sides. A similar effect can be achieved without pressing the checkbox: to obtain a square while drawing a rectangle, just hold down the Shift key.

If the parameters of your rectangle are known in advance, set the switch to the Specified size position and specify the required values ​​in the fields. The figure will be completely drawn as soon as you click on the canvas with the mouse button.

After setting the switch to the Set proportions position, in the input fields that become available, you can specify the aspect ratio of the created figure.

The From Center checkbox allows you to draw a rectangle from the center, rather than from the outermost point.

Rectangle with rounded corners

The next item on the list of geometric shapes. It is clear that it differs from the usual one in the rounding of the corners. Accordingly, the settings for this figure and the rectangle are almost identical. The fillet radius can be specified in the corresponding field in the options bar.

Ellipse

The parameters are the same as a rectangle, only instead of a square you can draw a circle. To do this, in the geometry settings window, check the Circle box or hold down the Shift key while drawing.

Polygon

With this tool you can draw a triangle, dodecahedron, icosahedron, star, or any shape that contains from three to one hundred sides. Their number can be set in the Party input field located on the parameters panel.

The geometric settings window is noticeably different from previous figures.

• Radius. This field specifies the radius of the future polygon.
• Smooth outer corners. If the checkbox is checked, then the corners are rounded; if not, the corners are sharp, as in a classic polygon.
• Star. Check the box if you want to receive a star as output.
• Depth of rays. This input field specifies how long the rays will be.
• Smooth the inside corners. Check this box if you want the inside corners to be rounded, as shown in the image below.

Line

Use this tool to create truly straight lines - freehand is simply not practical. To achieve maximum accuracy, configure the geometric parameters in the appropriate window.

• Start. If the checkbox is checked, instead of a line you will get an arrow that will be drawn at the location where you clicked the mouse button.
• End. Select the checkbox to add an arrow to the end of the line.
• Width. Indicated as a percentage relative to the thickness (it can be set in the parameters panel in the field of the same name).
• Length. It is calculated in the same way as width - in relation to thickness, as a percentage.
• Curvature. The value ranges from -50% to 50% and determines how much the widest part of the arrow will be curved. The figure shows arrows with curvature of 0%, 30% and 50% (from top to bottom).

Free figure

In order not to create a separate tool for each of the dozens of remaining shapes, the developers have combined them here. All elements of the parameters panel are already familiar to you, except for the most important one - the Shape button, clicking on which opens the shape selection window.

If you click on the gear located on the right side of the window, a menu of additional options will open, containing categories of shapes.

Thanks to the tools discussed, you can literally draw a huge number of shapes in just two clicks, which would take quite a long time to create manually.

This tutorial will help you install new shapes for the version of Photoshop.

Note: screenshots of the Windows 10 operating system, Photoshop CC 2017. For other versions of Photoshop, the algorithm will be the same.

Open Set Management

To get started, download the file with the new figures from the Internet and unzip it if it is zipped.

Next, open Photoshop CS6 and go to the tab in the main menu at the top of the screen Editing -Sets- Set management(Edit - Preset Manager). The following window will appear:

Button below the number 1 (in the form of a small arrow) allows you to select the type of add-on you want to install - brushes, textures, shapes, styles etc.

Button below the number 2 (in the form of a gear) shows the types of addition.

Loading Shapes into Photoshop

Click on the small black arrow and from the list that appears, by pressing the left mouse button, select the type of add-on - Custom figures(Custom Shapes):

A new window appears. Here you indicate the address of the downloaded file with figures. This file is located on your desktop or placed in a special folder for downloaded add-ons. In my case, the file is located in the "Styles" folder on the desktop:

Press again Download(Load)

Now, in the Manage Sets dialog box, you will be able to see at the end of the shape set the new shapes we just loaded:

Note : If there are many shapes, move the scroll bar down and new shapes will be visible at the end of the list

That's all, Photoshop has copied the specified shape file into its set. You can use it!

Photoshop is a raster image editor, but its functionality also includes the ability to create vector shapes. Vector shapes consist of primitives (points and lines) and fill. In fact, this is a vector path filled with some color.

Saving such images is possible only in raster formats, but, if required, the working document can be exported to a vector editor, for example.

The tools for creating vector shapes are located in the same place as all other tools - on the toolbar. If you want to become a real professional, then the hotkey for calling any of these tools is U.

This includes Rectangle, Rounded Rectangle, Ellipse, Polygon, Free Shape, and Line. All these tools perform one function: they create a work path consisting of anchor points and fill it with the main color.

As you can see, there are quite a lot of tools. Let's talk about everyone briefly.

1. Rectangle.
   Using this tool we can draw a rectangle or square (with the SHIFT).

   

2. Rectangle with rounded corners.
   This tool, as the name suggests, helps to draw the same figure, but with rounded corners.

   

   The fillet radius is preset in the options bar.

   

3. Ellipse.
   Using a tool "Ellipse" circles and ovals are created.

   

4. Polygon.
   Tool "Polygon" allows us to draw polygons with a given number of angles.

   

   The number of corners is also adjustable in the options bar. Please note that the setting contains the parameter "Parties". Don't let this fact mislead you.

   

5. Line.
   With this tool we can draw a straight line in any direction. Key SHIFT in this case, it allows you to draw lines at 90 or 45 degrees relative to the canvas.

   

   The line thickness is adjusted in the same place - in the parameters panel.

   

6. Any figure.
   Tool "Free figure" gives us the ability to create free-form shapes contained in a set of shapes.

   

   The standard Photoshop set containing arbitrary shapes can also be found in the top tool settings panel.

   

   You can add figures downloaded from the Internet to this set.

General Tool Settings

As we already know, most of the shape settings are found in the top options bar. The settings below apply equally to all instruments in the group.

The following settings allow you to perform various, rather complex, manipulations with figures, so let's talk about them in more detail.

Shape Manipulation

These manipulations are possible only if at least one shape is already present on the canvas (layer). Below it will become clear why this happens.

This item allows, after performing one or more previous operations, to combine all the contours into one solid figure.

Practice

The practical part of today's lesson will be a set of chaotic actions aimed only at seeing how the tool settings work in action. This will already be enough to understand the principles of working with figures.

So, practice.

1. First, let's create a regular square. To do this, select a tool "Rectangle", hold down the key SHIFT and pull from the center of the canvas. You can use guides for ease of use.

2. Then select a tool "Ellipse" and settings item "Subtract front figure". Now we will cut out a circle in our square.

3. Click once on any place on the canvas and, in the dialog box that opens, enter the dimensions of the future “hole”, and also check the box next to the item "From the center". The circle will be created exactly in the center of the canvas.

4. Click OK and we see the following:

The hole is ready.

5. Next we need to combine all the components, creating a solid figure. To do this, select the appropriate item in the settings. In this case, this is not necessary, but if the circle extended beyond the boundaries of the square, our figure would consist of two working contours.

6. Change the color of the figure. From the lesson we know which setting is responsible for filling. There is another, faster and more practical way to change colors. You need to double-click on the thumbnail of the layer with the shape and, in the color settings window, select the desired shade. In this way you can fill the shape with any solid color.

Accordingly, if a gradient fill or pattern is required, then we use the parameters panel.

7. Let's set the stroke. To do this, let's look at the block "Hatch" in the options panel. Here we select the stroke type "Dotted line" and use the slider to change its size.

8. Set the color of the dotted line by clicking on the adjacent color box.

9. Now, if you completely turn off the shape fill,

Then you can see the following picture:

Thus, we went through almost all the settings of the instruments from the group "Figure". Be sure to practice simulating various situations to understand what laws raster objects in Photoshop obey.

The figures are notable for the fact that, unlike their raster counterparts, they do not lose quality and do not acquire torn edges when scaled. However, they have the same properties and can be processed. You can apply styles to shapes, fill them in any way, and create new shapes by combining and subtracting.

Skills in working with shapes are indispensable when creating logos, various elements for websites and printing. Using these tools, you can convert raster elements into vector ones and then export them to the appropriate editor.

Figures can be downloaded from the Internet, or you can create your own. Using shapes you can draw huge posters and signs. In general, the usefulness of these tools is very difficult to overestimate, so pay special attention to studying this functionality of Photoshop, and they will help you with this.

Open Photoshop and click on the "Edit" button in the main menu. From the drop-down list, select “Manage Sets”. A dialog box will open in front of you, in the upper part you will see a scrolling list “Type of installation”, intended for selecting the add-on that needs to be installed. These can be brushes, textures, styles and other elements.

Select the add-on type “Custom Shapes” and click on the “Download” button located on the right side of the window. Using Explorer, point the program to the path to the desired file. It must have a csh extension. Click on the "Download" button again. The new set will be added to the existing ones, and you can use it at any time.

If, while working with the Custom Shapes tool, you need to quickly load a new set, then in the shapes palette, click on the small gear icon and select “Load Shapes” from the drop-down list. An explorer window will appear on the screen. Find the file you need in it and click on the “Download” button. The set will automatically be added to the very end of the existing list.

You can install a new set of shapes without opening Photoshop. To do this, copy the file with the csh extension to the Custom Shapes folder. It is located at C:\Program Files\Adobe\Adobe Photoshop CC 2014\Presets\Custom Shapes. The advantage of this method is that the added set will be available for selection through the Shapes palette menu.

How to Save a Vector Drawing as a Shape

If you have a vector image that you plan to use frequently, you can save it as a freeform shape in Photoshop. To do this, select the “Place” command from the “File” menu. In the latest version of the program - Photoshop CC, you should select the "Place Built-in" command.

Hold down the Ctrl key and click on the layer thumbnail to load the drawing as a selection. Now you need to save the created selection as an outline. To do this, open the “Paths” palette and click on the “Create work path” icon located at the bottom.

In the main menu of Photoshop, click on the "Edit" button and select the "Define Free Shape" command. A small window will open on the screen, enter the name of the created shape in it and click OK. From now on, your drawing is available for selection in the Shapes Palette.

Hello everyone, dear readers of the koskomp blog and my dear friends. Today I will tell you how to add shapes to Photoshop, how to use them and what they are for. And also at the end of the article we will draw a cute glass in vector style. Many people think that this tool is of no use, but I assure you that in web design this is almost the main function. Look at the design in my public page. It is literally built on figures. Therefore, you need to know this. In this case, the matter will not be limited to simply drawing squares. Everything is much more interesting here.

Let's start with something simple, namely drawing. The group of instruments itself consists of six types:

• Rectangle
• Rounded rectangle
• Ellipse
• Polygon
• Line (more details)
• Free figure

Each of these types has its own some features that differ from each other. Therefore, let us first consider the general principles of outline.

To add a shape, you need to select it in the tool group, and holding down the left mouse button, we begin to draw it, or rather, select the area and size. The figure itself can be of any size and by default it will be drawn disproportionately. But if you hold down the key SHIFT, then it will be smooth on all sides, and thus the rectangle will be a square, and the ellipse will be a circle.

In the top menu we will see the properties panel, where we can set the fill of the shape itself, as well as the stroke color. If you don't want any colors, just a line, then select the No Fill and No Stroke colors. We can also set the thickness of this very stroke if we decide to choose a color.

In order to change the color of the drawn object, you can simply select the “Shape” tool again and replace it in the properties at the top, or double-click on the icon in the layers panel.

Using custom shapes in Photoshop

If everything is clear with all the above figures (take it and draw), then I would like to linger a little on the free version. To get started, select this tool.

There is no clear form here (hence the name), but there are many ready-made options. In order to consider them all, in the properties there is an element “Shape”, or rather, expand it. As you can see, we have different contours here with which we can draw an arrow, a heart, a prohibition sign and much more.

Let's try to add a custom shape in the form of a check mark to Photoshop. I'll give it a color, a stroke, and draw it in the standard way, that is, by holding down the left mouse button and dragging it a little in the other direction. Don't forget to hold down the key Shift to maintain all proportions. This way you can draw cool non-standard objects. It is also noteworthy that no matter the size of the object we draw, it will always be even and smooth. All this is because the figure is initially a vector object. And vector objects do not consist of pixels, like a regular image, but are formed based on formulas.

How to install shapes in Photoshop

But the best part is that this set can be replenished, that is, arbitrary figures can be downloaded additionally, expanding your collection. This is completely easy to do. To do this, you just need to download these sets from any site, for example pixelbox. There is a very large collection with different sets. Let's say I download this wonderful set with skateboarders.

Now go to the “Downloads” folder or wherever your files are downloaded by default. Next, run the file that we downloaded. You don’t even have to unpack it; you can run it directly in the archive.

After this, Photoshop will open and new arbitrary elements will already appear in your collection. Take it and use it.

Shape capabilities

The figures themselves have very great possibilities. Initially, I thought that you could only draw squares and buttons with them, but I was very mistaken. Let's take a closer look.

Properties

It is worth considering that each figure has its own properties that can be changed to achieve the most interesting result. They are located in a separate window and are usually located somewhere in the layers panel area, but this is not necessary. If they are not activated for you, then do this by entering the main menu in “Window” - “Properties”. After that, you can draw any element and see what can be changed in it.

A rectangle and a rounded rectangle have the same set of properties. It mainly concerns the radius of corners. And if in the first case it is zero on all fronts, then in the second it is already established in advance. You can change this same radius, making the corners more rounded or vice versa, all at once or separately.

Let's just draw a rectangle for fun and set the radius to 35 in only two corners (top right and bottom left). Just before doing this, be sure to disable the connection of the angles by clicking on the paperclip icon between them, otherwise the values ​​will change for everyone.

If you are using a stroke, you can change its location. That is, it can be outside the figure, inside it, or go along the center of the contour. You can select this by clicking on the corresponding icon.

Also, notice the gear icon. It gives additional properties to your shapes. For example, if you have a rectangle or ellipse activated, you can immediately set it to draw in equal proportions to get a square or circle, and you no longer have to hold down the key SHIFT.

If you are using a polygon, you can specify the number of sides, smoothing, or drawing a star. And in the case of drawing a line, you can specify that . Therefore, do not forget to use this function.

Cut and add

But it’s not enough to just add shapes to Photoshop; you need to learn how to use all their charms. By default, when you add a new object, it is created on a new layer. But if you don't want this, then "operations with contours" select item "Merge Shapes". Now you can create entire objects from several elements.

Many will ask, how can they be selected then if they are all on the same layer? The answer is simple: on the toolbar we have two cursors, one of which is responsible for selecting a path, and the other for selecting a node. It’s precisely with the help of selecting the outline (black cursor) that we can select only a specific shape on the layer.

In addition, we can cut out, or rather subtract a figure from another, without affecting the original one. To do this, draw another object inside the original one (don't forget to set the mode to "Merge Shapes", as we did just above, so that they are on the same layer). As you can see, nothing much has changed yet. But that's how it should be.

Now, select a tool "Outline Selection" and point at the shape we just drew. After that we go again to "Operations with contours", but this time we choose "Subtract front figure". You will see for yourself how skillfully it was cut out and now instead of it there is a piece of background. But actually it is not. The element remains as it was, it just became invisible, but you can still move it, transform it and make it visible again.

This feature is often used when creating logos, banners and other web design elements.

How to align shapes with other elements

Another important property when drawing figures is their alignment. For example, we need to make several shapes with the same distance from each other, as well as on the same line. Let's say I take the Ellipse tool and, using the held Shift I'll draw a few circles.

Now, let's take the already familiar black cursor, which is called "Outline Selection" and using the mouse button held down, select all four circles, provided that they are still on the same layer. If each circle is on a different layer, then you will need to select the layers. To do this, you can use the pressed SHIFT or CTRL in the layers panel. After that, right-click and click "Merge Shapes".

But you don’t have to combine them. If, for example, each element requires its own color, then simply select the layers and take the Move tool, otherwise you will not be able to do anything further, that is, the alignment functions will be unavailable.

When we have selected everything, go to the menu "Outline Alignment" and select the parameters that we need. In my case I have to choose "Vertical centers" And "Distribute by width". In this case, the shapes will be aligned to the center, and the distance between them will be the same. This function works in the same way in the case of vertical arrangement.

Now everything will be aligned to its centers, but nothing will stop you from centering the figures along the bottom edge.

Deformation of figures

Well, it remains to examine one more interesting property, namely deformation. No, this is not exactly what we studied in this article, but we will be changing the appearance of the shapes.

In the same way, I can make some kind of crown out of a star. To do this, I select a polygon, set the star mode in the properties, and then draw it. After that I select the tool "Selecting a Node" and start moving all available points. Something like this - before and after.

Drawing Objects Using Shapes (Practice)

Now, let's take a practical look at how to add shapes in Photoshop so that you can use them to draw cool vector objects. For example, let's draw a vector cup of fast food coffee.

1. Choose "Rectangle with rounded corners" and draw the blank of our glass. Immediately choose a suitable color for the glass, for example brown. To do this, change it in the properties above. You don't have to put a stroke.
   
2. Now, let's select a tool "Selecting a Node" and select the entire left corner of the workpiece (you should use two points, not one).
   
3. Now pinch SHIFT and press the left arrow on your keyboard, after which a window will pop up telling you that this operation will turn the shape into an outline. Agree. After that, press the left arrow again while holding down Shift. There will be no more inscription. After this manipulation, the left corner should protrude.
   
4. Now we do the same with the right corner, that is, select it using the white cursor and make a couple of clicks on the right arrow to protrude the other side. If the message appears again, agree.
   
5. Next we will create the lid. To do this, again take a polygon with rounded edges, only this time select the item "Merge Shapes" It won’t work, since you can’t change the fill color of different contours on one layer.
6. Next, draw a rectangle on top of our resulting trapezoid. And if your color is not black, then put it in the properties.
   
7. Now I see that the lid is sticking out a lot on both sides. It would be necessary to reduce it slightly on the sides. To do this, press the key combination CTRL+T to activate "Free Transform", then press the key ALT and pull a little beyond the side area. This will allow us to reduce the lid on the sides proportionally.
   
8. Next, we take again "Selecting a Node" and just as in the previous case, we bend the corners a little, selecting first one and then the second in turn. It should end up looking something like this.
   
9. All that remains is to straighten out the whole thing. To do this, select both layers in the layers panel using the key held down. CTRL, and then take the “Move” tool and in the properties under the main menu set "Align centers horizontally".
   

You can also edit some elements, for example, highlight the nodes and reduce the size of the bottom to make the cup look more natural. Or you can add details, for example some arbitrary shape. But overall, we got a simple and at the same time stylish glass in vector design.

I hope that now you understand how to add shapes to Photoshop, what they are for and how to use them in web design and more. By the way, if you want to draw cool designs for social networks, banners, covers and even website layouts, then I recommend that you undergo professional training at online web design school. There are a whole bunch of different directions here. You just need to choose and do everything under the guidance of a professional.

Well, if you want to know Photoshop with a bang and learn how to use it with an A plus, then I recommend that you watch and study these awesome video tutorials. To date, this is one of the best and most detailed Photoshop tutorials I have ever seen. And the most important thing is that everything is told in simple human language. so you won’t need to stick into the topic, you will understand everything, even if you are a complete beginner. Highly recommend.

Well, this is where I will end my article. Don’t forget to subscribe to updates on my blog, as well as to public pages on social networks, so as not to miss the release of a new article and interesting news. I'm waiting for you again. Good luck to you. Bye bye!

Best regards, Dmitry Kostin