home › Body › How to set the size of a rectangle in Photoshop. How to draw in Photoshop

How to set the size of a rectangle in Photoshop. How to draw in Photoshop

The easiest way to draw a rectangle in Photoshop is to use the Rectangle Tool (Rectangle). Tool " Rectangle tool»Belongs to the group of tools for drawing shapes and takes pride of place in it.

The Rectangle Tool in Photoshop's Tools Palette

Of course, you can just take the Rectangle Tool from Photoshop's Tool Palette. And you can activate it using hotkeys. By pressing the key, the tool from the group of tools for drawing shapes that was last used becomes active. If it was not " Rectangle", Then you should use the keyboard shortcut, which allows you to switch between different tools within this group.

Drawing Modes

A rectangle, like any other shape in Photoshop, can be drawn in one of the following modes:

" Shape" (Figure), when a vector path is created with a raster "filling". Such a rectangle can be filled with a solid color, gradient or pattern. Each shape drawn in the Shape mode is placed on a separate layer, marked with a special icon, which informs the user that a vector object is located in this layer. Later, you can return to any created shape and change its shape, fill and stroke;
"Path" (Contour), when a vector path is created that performs auxiliary functions. Such a rectangle is not part of the image, but can be converted, for example, into a selection area or used to obtain a vector mask. All paths drawn in Path mode are temporary elements until they are saved. To control the paths in Photoshop, there is a panel " Paths"(Contours). Any contour, as a vector primitive, can always be edited;
"Pixels" (Pixels), when a certain number of pixels of a given color are added to the document. Such a rectangle immediately becomes part of the bitmap. When drawing in Pixels mode, no vector paths are created and no additional layers are added. The quadrangle drawn in it will take its place in the current layer. In the future, you can work with it in the same way as with any other raster image.

Rectangles drawn in modes: 1 - Shape; 2-Path; 3-Pixels

To select the mode in which you want to draw a rectangle, you should refer to " Options Bar"(Options panel) when the tool" Rectangle Tool»Already active. All possible modes are presented in the "Pick tool mode" drop-down list (which in the Russian version of Photoshop is translated as " Selection tool mode', although a more accurate translation would be ' Selecting the operating mode of the tool»).

Pick tool mode dropdown list for the Rectangle Tool

The selected mode determines not only the properties of the future object, but also the parameters that will be available on the options panel during its creation. For the most part, these parameters are absolutely the same for all "Figures", so they will not be considered within the framework of this article. Further, we will only talk about those unique parameters of the Rectangle Tool, which determine the shape, size and location of the rectangle.

Determining the proportions, sizes and location of a rectangle

In the most general case, in order to draw a rectangle in Photoshop, you must:

Take the tool " Rectangle tool";
Select the drawing mode from the drop-down list "Pick tool mode";
Press the left mouse button in the place of the document window where one of the vertices of the rectangle should be located;
Keeping the left mouse button pressed, move the cursor to the point where its opposite vertex should be;
Release the mouse button.

But this is far from the only way to draw a rectangle in Photoshop. To determine the required shape and size of the future geometric figure, you can resort to help or use. In addition, in the process of constructing a rectangle, you can use.

Options panel

In Photoshop, for each tool from the group of tools for creating shapes, a number of specific, unique to it alone, options are offered. These options are presented in a drop-down menu, which is called up by clicking on the gear icon on the " Options bar"(Options panel).

Drop-down menu with options for the Rectangle Tool

The following options are available for the Rectangle Tool in the Options Bar:

" Unconstrained" (Arbitrary), which is active by default. Its use allows you to draw rectangles of arbitrary shapes and sizes, following the sequence of actions presented just above;
" Square"(Square), the choice of which will cause all sides and angles of the drawn quadrangle to be equal to each other;
" Fixed size"(Specified size), when activated, you can immediately determine the exact dimensions of the future rectangle. When it is selected, two text fields become available: “W" (W) and "H" (H), in which you can enter, respectively, the required width and height of the rectangle. Then it remains only to indicate the place where the figure should be located;
" Proportional" (Set proportions), when activated, you can set the aspect ratio of the future rectangle. When it is selected, two fields also become available: “W" (W) and "H" (H), in which you can enter, respectively, the required ratio of the width of the rectangle to its height. Then, when drawing a quadrilateral, it will always have the specified proportions;
"From Center" (From the center), when enabled, the starting point when drawing a rectangle will not be one of the vertices, but its geometric center. This option can be used in conjunction with any of the above options.

The process of drawing a rectangle when choosing different options for the Rectangle Tool: 1 - Unconstrained; 2 - Unconstrained + From Center; 3 - Square; 4 - Square + From Center; 5 - Fixed Size; 6 - Fixed Size + From Center; 7 - Proportional; 8 - Proportional + From Center

Hotkeys

When working with the Rectangle Tool, you can use hotkeys. So, if in the process of drawing a rectangle:

Press and hold the key, the rectangle will be created in the form of a square. Drawing a rectangle with the key pressed proceeds in exactly the same way as if the "Square" option was selected for the Rectangle Tool;
Press and hold the key, then the base point of the created rectangle will be its geometric center. That is, the action of the pressed key is tantamount to activating the option "From Center"For the Rectangle Tool";
Press and hold two keys at the same time: and , then the created rectangle will be a square, and its base point will be its geometric center. In other words, the and keys have the same effect as the "Square" option in combination with the "From Center" option set for the Rectangle Tool in the Options Bar;
Press and hold the (Space) key, then you can change the location of the rectangle being created, and after releasing the key, continue drawing the figure, but in a new place.

The process of drawing a rectangle using hot keys: 1 - Shift; 2 - Alt; 3 - Alt + Shift; 4-Space

In this window there are two text fields: " Width"(Width) and" Height»(Height), where you can enter the desired dimensions of the figure. It also has the ability to activate the option "From Center"(From the center). If the option "From Center" is active, then the point specified to call the dialog box will be the geometric center of the rectangle, if not, its upper left vertex. After setting the appropriate parameters, you must click the " OK", After which the rectangle will immediately appear in the very place where the click was made to call the " Create Rectangle" dialog box.

The following demonstrates all the techniques described in this article that can be used when drawing a rectangle using the Rectangle Tool in Photoshop.

Video for the article

Perhaps the most common geometric figure is a rectangle or square, which is essentially the same thing. The only difference is that all sides of a square are equal.

But the conversation is not about that. In this Photoshop tutorial, you will learn how to make a rectangle using two methods. Let's get started!

Method #1: Using the Rectangle Tool

Go to the toolbar on the left side of the screen, and find the “Shapes” group, where, on hover, a list with all available shapes will open. We need the very first one - “Rectangle”.

Thanks to this amazing tool, we will be able to build a rectangle of any size with the desired aspect ratio. In this case, the quality will not deteriorate even when scaling, because. the figure is created in a vector. You can set the desired parameters of the figure in the upper horizontal menu of the program. Basically, the settings for the fill, border and thickness of the lines that form the shape are set.

Thanks to the pressed key SHIFT you will be able to draw a rectangle with equal sides on the canvas - i.e. square. You can also initially set the size of the shape in the top panel:

After you set the dimensions, you need to click on the canvas, after which a small window will appear in which you will need to confirm the creation of a rectangle with the specified parameters. If everything is fine, then just click “OK”.

Result:

Method #2: Using the Selection Tool

We use this method less often, but sometimes it helps out. To draw a rectangle, we need to find the “Selection” group in the toolbar and select “Rectangular area” from the drop-down list. See screenshot below:

If this is not the first time you open the Photoshop program, you should know what kind of tool it is.

To begin with, we will need to create a selection as a rectangle on the canvas. Again, if you want to make a square, hold down the SHIFT key.

Now we need to fill the rectangular area. You can call up a window with fill parameters using a combination of hot keys SHIFT+F5.

You can do it even easier and select “Fill” in the toolbar, and then click on the selected area on the canvas.

To deselect, just click on any other part of the canvas or press a keyboard shortcut CTRL+D.

Important! Note that the Rectangular Marquee tool also has a settings panel at the top where you can set the desired settings, including the proportions of the shape.

This concludes our short lesson on how to draw a rectangle in Photoshop.

See you in our next lessons!

Drawing tools allow you to create and edit vector shapes. They make it easy to create various elements for web pages.

Create a new training file.

Click the left mouse button on the tool -shapes- on the toolbar, the tool selection window will open:

Here are the main shapes that we can use. Choose any and look at the options panel:

For any figure, you can choose:

drawing mode:
- shape layer. The shape is created on a separate layer. A shape layer consists of a fill layer that defines the color of the shape, and an associated vector mask that defines the boundaries of the shape. The shape's borders are a path that appears in the Paths tab of the Layers panel.
- contours. This mode allows you to draw outlines of shapes that can be filled or stroked with an arbitrary color. Paths appear on the Paths tab of the Layers panel.
- Pixel fill. When working in this mode, not vector, but raster images are created, which can be processed in the same way as any raster image
style and color

set parameters specific to this shape

Draw rectangles

Let's choose the first shape - a rectangle. On the panel, select the mode - layer-shape. Select a style by clicking on the triangle on the right.

Choose whichever you like. By the way, if you click on the triangle in the circle (on the right), you can select additional styles in the context menu that opens. If you do not want to use a style, then select a white square with a red line through it.

Now you can set the geometric parameters:

Arbitrarily- as you draw, so be it.
Square- when stretching the shape with the mouse, the width and height will always be the same.
Specified size- you can set the width and height of the rectangle (in cm) and click on the canvas. A rectangle with the specified dimensions will appear.
Set aspect ratio- you can set how many times the width will be less (or more) than the height. When stretching the figure, the proportion will be preserved.
From the center- draws a rectangle from the center.
Snap to pixels- rectangle edges snap to pixel borders.

Now select -arbitrarily- and drag your rectangle on the canvas with the mouse. For example, here is what I got when using the Button, Glass Buttons and Web Styles styles.

Quite a useful tool for creating buttons and menus for your web pages, isn't it?

Draw rectangles with rounded corners

Let's select the second shape - a rectangle with rounded corners. On the panel, select the mode - the layer-shape, the corner radius - for example, 15 and the color (you can style it as you like). The geometric parameters are the same as for the rectangle.

Here's what I got with various combinations of radius and style.

Why not news blocks and menu buttons?

Draw circles

Let's choose the third figure - an ellipse. On the panel, select the mode - shape layer, color and style. The geometric parameters are the same as for a rectangle, with the only difference being that a circle can be chosen instead of a square. Select -arbitrary- and stretch the ellipse. If you want it to be a circle, then hold down the Shift key or select -circle- in the geometric parameters.

Here's what happened to me:

Draw polygons

Let's choose a shape - a polygon. On the panel, select the mode - layer-shape, the number of sides in the range from 3 to 100 (for example, 3 - for a triangle, 6 - for a hexagon), color and style. Consider the geometric parameters:

Radius is the radius of the polygon.
Smooth outer corners
Star- with the checkbox unchecked, the polygon is convex, with the checkbox checked, the polygon is concave.
Beam depth- if the polygon is concave, then its vertices, as it were, form rays. This parameter shows how much of the polygon's radius will be occupied by rays. The higher the %, the longer and sharper the rays.
Smooth outer corners- with unchecked the corners are sharp; with a tick, the corners are rounded.

For example:

The first nonagon has a radius of 3 cm, the rest of the boxes are unchecked.

The second nonagon has a radius of 3 cm, the checkmark is -star-, the depth of the rays is 25%, the rest of the checkboxes are unchecked.

The third nonagon has a radius of 3 cm, the depth of the rays is 50%, all the checkboxes are checked.

All have a style applied.

Draw lines

Let's choose a figure - lines. On the panel, select the mode - layer-shape, line thickness (in pixels), color and style. Consider the geometric parameters:

If all the checkboxes are cleared, it will be just a line, the parameters set the arrows at the ends of this line.

Start- arrow at the beginning of the line.
End- arrow at the end of the line.
Width- proportions of the arrow as a percentage of the line thickness (from 10% to 1000%).
Length- proportions of the arrow as a percentage of the line thickness (from 10% to 5000%).
Curvature- determines the degree of curvature of the widest part of the arrow in the place where it meets the line (from -50% to +50%).

For example:

The first line is unchecked, width - 500%, length - 1000%, thickness - 2 pixels.

The second line has everything the same, but there is a tick at -beginning- and curvature - 5%.

The third line has everything the same, but the -end- checkbox is ticked and the -beginning- checkbox is unchecked.

The fourth line has both checkboxes, width - 500%, length - 1000%, curvature - 15%, thickness - 5 pixels.

All have a style applied.

Draw arbitrary shapes

Let's choose a figure - an arbitrary figure. On the panel, select the mode - shape layer, color and style. The geometric parameters are the same as for a rectangle. But here there is a choice of the figure itself:

If you click on the triangle in the circle (on the right), you can select additional shapes in the context menu that opens.

Draw multiple shapes on one layer

The principle here is the same as with the rectangular selection tools (in the first lesson, we made a non-standard selection area using the tools on the options bar: add to selection, subtract from selection, etc.). The same tools are available in the Shapes Options bar.

For example, create a rectangle shape, now in the options bar click on the "add to shape area" icon, and now select an ellipse shape. Move the mouse cursor to the upper border of our rectangle, press the left mouse button and, without releasing, stretch the ellipse. It should look something like this:

If the ellipse is not stretched as you would like, you can fix it. To do this, take the tool -outline selection- on the toolbar:

Move the cursor to the border of the ellipse and, holding down the left mouse button, drag the ellipse where it should be. Using all these tools, you can draw shapes of varying complexity.

Save Shapes

Let's say we liked the last shape we created and want to use it in the future. To do this, you need to save it. For this menu Edit -> Define Custom Shape. Give a name to the new shape.

Now our shape has appeared in the drop-down panel for selecting arbitrary shapes.

This lesson is over. Next time we'll focus on paths and bitmaps.

How to draw a rectangle in Photoshop without a fill

In this tutorial, I'll show you how to draw a rectangle in Photoshop without a uniform fill, that is, only its perimeter will be outlined. After all, an ordinary filled rectangle is drawn quite simply, but some people have problems with this one.

Open a picture in Photoshop on which you want to draw a rectangle or create a new document.

I open this image:

The rectangle must be created on a new layer, it cannot be made against the background. Create a new layer:

Draw a rectangle of the required size on the picture by holding the left mouse button

We click on the selected area with the right mouse button and from the drop-down menu select the item "Stroke".

In the next window, specify the width and color of the stroke and click "OK".

Here's what we get. Remove the selection using the keyboard shortcut Ctrl + D.

The rectangle is ready.

Watch a video on the topic:

comp-profi.com

3 Ways to Draw a Square and a Rectangle in Photoshop

Although a square and a rectangle are the simplest geometric shapes, but in order to draw them in Photoshop, you need to make some effort and have basic knowledge. A beginner without proper training, most likely, will not cope with this task.

In this article, we will analyze the 3 most popular ways to draw a rectangle or square in Photoshop.

But before you start choosing a drawing method, you need to decide on future parameters. Rectangle/square can be:

filled with a solid color or only with borders drawn;
arbitrary or with precisely specified dimensions;
with the ability to change its size at any time without loss of quality.

Method 1. Arbitrary shape tool

In this method, a rectangle or square will be drawn with a solid color. If you only need the border, go to the next two methods.

On the toolbar, select the Freeform Shape tool. There are two possible scenarios for the development of events:

Option 1. Square or rectangle with further resizing without loss of quality

Here, of course, the use of a vector figure is implied. To draw it, you need to select an option shape layer:

In the future, you can resize this figure without losing quality. To do this, use the Free Transform tool - Ctrl + T, and use the corner handles to resize.

For those who do not know: vector shapes are not made of pixels, but of special mathematical formulas. Therefore, resizing is not a process of stretching / shrinking pixels, but a complex mathematical recalculation, due to which there is no loss of quality.

Option 2. Standard (raster) square/rectangle

To draw a raster shape at once, use the setting on the Options Bar Perform pixel fill. But before you start drawing it - create a new layer!

But in fact, you can draw vector and vector at once, and then just rasterize it. Here you can choose for yourself.

How to make a rectangle square

The usual rule with the Shift key pressed does not work with arbitrary shapes. Therefore, you need to use the tool options panel and select a setting so that Photoshop draws a square.

In the same panel, pay attention, you can specify the exact size of the required rectangle/square or draw it according to predetermined proportions.

By default, dimensions are determined by pixels. If you want to change the unit of measurement, first enter a value in the field, and then right-click on it. The unit selection window will appear. Available: pixels, inches, centimeters, millimeters, points and peaks.

Rectangle or square with rounded corners

To get a shape with rounded corners, do the same as described above, but at the very beginning select the tool Rectangle with rounded edges. In the tool options bar, you only need to specify radius rounding.

Method 2. Stroke the selection

This method is as simple as 5 cents. Select the Rectangle Marquee Tool and draw a rectangle with a dotted line. To draw a square, hold down the Shift key.

Now we need to stroke the borders of this selected area. To do this, go to Editing - Stroke.

Then, in the new window, set the stroke type: specify the frame thickness, the desired color and mark how the stroke will go:

Inside- means the frame will lie on the inside of the selected area;
Centered- means the frame will be divided equally into a part passing inside the selection and into a part from the outside;
Outside- means the frame will go around the dotted selection line.

Here's how it might turn out:

In the screenshot above, I deliberately did not remove the dotted line, because it will not disappear for you either. To permanently get rid of it, press Ctrl + D.

In this method, in order to draw a shape of the exact size, you first need to specify in the options bar of the Rectangular Marquee tool Style - Specified size or given proportions. After that, the fields will become active, where you enter the width and height values in pixels. Right-clicking on one of these fields will bring up a menu for changing the units of measurement.

Method 2.1 Filling in the selection

The most common way to draw a rectangle is to draw a selection box (as described above) and simply fill it with any color. Here is a rectangle or square for you.

Method 3. Modification of the selection

In fact, I like this method least of all because of the obvious minus - the corners of the rectangle will be cropped, and the border of the frame itself is in a feathered state and it is not possible to influence these facts.

So, you need to select the Rectangular Marquee tool again, draw a frame for the future rectangle or square (with the Shift key), and then go to the menu Selection and choose a team Modification - Border.

A new window will appear in which, in our case, we specify the width of the border of the rectangle. Let's say I specify 7 pixels. We get the following result:

And now you just need to paint over the resulting frame. The Brush tool is suitable for this. Here, by the way, you can approach the issue more creatively and paint over, for example, with different colors. Result:

It remains only to remove the selection - Ctrl + D. I think this method is only suitable for my rare specific tasks, since feathering and undercut corners only spoil everything.

Noticed an error in the text - select it and press Ctrl + Enter. Thank you!

psand.ru

How to draw a transparent or colored rectangle in Photoshop

Making a rectangle in Photoshop is a fairly simple task that even a beginner can do. I advise you to learn how to draw this simple shape, as this skill can be useful for you to perform many tasks. Be it website design, photo frame or image correction. Despite the seemingly large size of the lesson, you will cope with this task in just a few minutes.

I'll show you several ways to draw a rectangle, all of which you'll ever need.

Let's start with shapes. We create a new document. 1000 by 1000 pixels will be enough.

Now go to the toolbar and look for the rectangle tool.

Holding down the right mouse button, we draw over the working field.

The rectangle is ready! To get rid of the thin black border, rasterize the layer. Rasterization can be found in the layers window.

Now the second way. Selected area.

On the top panel, look for the “Layers” tab and create a new one.

Now it's time to get acquainted with one of the most popular tools in Photoshop - the selected area, which is located at the top of the side toolbar.

We draw on the working field by holding the right mouse button.

A selected area has formed, which we must fill. So let's move on to the "Select Primary Color" tool. By clicking on it, we open the color map and choose any shade that we like.

We are looking for the Fill tool, select it and click on the selected area.

And now the key combination ctrl + d and the selection is removed! The rectangle is ready!

The third method will teach us how to draw a transparent triangle in Photoshop, which is often used as a photo frame. It's just as easy to draw. Create a new layer, select a rectangular selection and place it on the workspace. In general, we perform all of the above actions.

And now we will stroke the selected area, for which we go to the top panel and click on the "Editing" tab. We are interested in the Stroke command.

As you can see, a dialog box has appeared, prompting us to select the line thickness, stroke color, and frame location. Set the parameters to your taste or choose mine.

Press the key combination ctrl + d to remove the selection and enjoy the result.

As you can see, we have a full-fledged frame in the form of a transparent triangle.

We have already learned how to make a rectangle in Photoshop. Let's learn how to edit it! For example, let's try to change the color and size.

As you may have noticed, I recommended that you create a new layer to draw the rectangle. And this is no accident. Your rectangle is not anchored to the workspace. You can edit it as much as you like, while the workspace will remain unchanged. I want to warn you that these methods are applicable to a rectangle created by any of the above methods.

First, let's try to change the color. Again, there are several methods. The first is the fill tool. Choose the color you want from the toolbar. Then click on the fill tool. And after already on our rectangle.

The rectangle was yellow, but became green. Very simple, don't you think?

The second way is overlay options. In the horse of the word, we look for the desired one and click on it with the left mouse button.

In the dialog box that appears, check the box next to Color Overlay. Click on the box filled with color and choose the one you like.

There are many ways to change the color of a rectangle. But you can very well limit yourself to two main ones.

Now let's learn how to size the rectangle.

Resizing a rectangle in Photoshop is extremely easy. Select the Move tool and click on the rectangle.

By dragging the corner with the mouse, you can change its size. And also flip along the axis.

photoshop-work.ru

How to draw a rectangle in Photoshop

The simplest geometric figure is a rectangle (square). Various elements of sites, banners and other compositions can consist of rectangles.

Photoshop gives us the ability to draw a rectangle in several ways.

The first way is a tool "Rectangle".

From the name it is clear that the tool allows you to draw rectangles. When using this tool, a vector shape is created that does not distort or lose quality when scaling.

The tool settings are on the top panel.

It is possible to draw a rectangle with given dimensions. Dimensions are specified in the fields corresponding to the width and height, and the rectangle is created with one click with confirmation.

The second way is a tool "Rectangular area".

This tool creates a selected area of a rectangular shape.

As in the case of the previous tool, the key works SHIFT, creating a square.

The rectangular area needs to be filled. To do this, you can press the keyboard shortcut SHIFT+F5 and set the fill type,

or use the tool "Pouring".

The selection is removed with the keys CTRL+D.

For a rectangular area, you can also specify the dimensions or proportions (for example, 3x4).

All about rectangles for today. Now you know how to create them, and in two ways.

We are glad we were able to help you resolve the issue.
Ask your question in the comments, describing in detail the essence of the problem. Our experts will try to answer as quickly as possible.

Did this article help you?

Not really

lumpics.ru

How to draw a square in Photoshop

It would seem that in this article we will consider a very simple question, to which everyone knows the answer, but, believe me, everything is not so simple here and there are many nuances, especially when drawing a square or rectangle without filling.

And so we get started. First, draw a square with a fill. To do this, I open the following image in Photoshop:

Select the Rectangle tool from the toolbar

Now, in the top panel, click on the arrow to open the parameters and set the width, height, or select an arbitrary square:

Let's draw this square. The fill color, of course, can be changed.

Now let's solve the problem more difficult, it is how to draw a square or rectangle in photoshop without fill.

Such a rectangle needs to be drawn on a new layer, so create it. "Layers - New".

Select the Rectangular Marquee tool.

Draw a rectangle on the picture using this tool. To draw a square, hold down shift and drag to the desired size.

Specify the width and color of the stroke and click OK.

The result is such a square without filling, as we wanted:

And also watch the thematic video:

pc-knowledge.ru

How to draw in Photoshop - Lesson 9. Drawing a shape in photoshop

Drawing tools allow you to create and edit vector shapes. They make it easy to create various elements for web pages.

Create a new training file.

Click the left mouse button on the tool -shapes- on the toolbar, the tool selection window will open:

Here are the main shapes that we can use. Choose any and look at the options panel:

For any figure, you can choose:

drawing mode:
- shape layer. The shape is created on a separate layer. A shape layer consists of a fill layer that defines the color of the shape, and an associated vector mask that defines the boundaries of the shape. The shape's borders are a path that appears in the Paths tab of the Layers panel.
- contours. This mode allows you to draw outlines of shapes that can be filled or stroked with an arbitrary color. Paths appear on the Paths tab of the Layers panel.
- Pixel fill. When working in this mode, not vector, but raster images are created, which can be processed in the same way as any raster image
style and color

set parameters specific to this shape

Draw rectangles

Let's choose the first shape - a rectangle. On the panel, select the mode - layer-shape. Select a style by clicking on the triangle on the right.

Now you can set the geometric parameters:

Arbitrarily- as you draw, so be it.
Square- when stretching the shape with the mouse, the width and height will always be the same.
Specified size- you can set the width and height of the rectangle (in cm) and click on the canvas. A rectangle with the specified dimensions will appear.
Set aspect ratio- you can set how many times the width will be less (or more) than the height. When stretching the figure, the proportion will be preserved.
From the center- draws a rectangle from the center.
Snap to pixels- rectangle edges snap to pixel borders.

Now select -arbitrarily- and drag your rectangle on the canvas with the mouse. For example, here is what I got when using the Button, Glass Buttons and Web Styles styles.

Quite a useful tool for creating buttons and menus for your web pages, isn't it?

Draw rectangles with rounded corners

Here's what I got with various combinations of radius and style.

Why not news blocks and menu buttons?

Draw circles

Here's what happened to me:

Draw polygons

Radius is the radius of the polygon.
Smooth outer corners
Star- with the checkbox unchecked, the polygon is convex, with the checkbox checked, the polygon is concave.
Beam depth- if the polygon is concave, then its vertices, as it were, form rays. This parameter shows how much of the polygon's radius will be occupied by rays. The higher the %, the longer and sharper the rays.
Smooth outer corners- with unchecked the corners are sharp; with a tick, the corners are rounded.

For example:

The first nonagon has a radius of 3 cm, the rest of the boxes are unchecked.

The second nonagon has a radius of 3 cm, the checkmark is -star-, the depth of the rays is 25%, the rest of the checkboxes are unchecked.

The third nonagon has a radius of 3 cm, the depth of the rays is 50%, all the checkboxes are checked.

All have a style applied.

Draw lines

Let's choose a figure - lines. On the panel, select the mode - layer-shape, line thickness (in pixels), color and style. Consider the geometric parameters:

If all the checkboxes are cleared, it will be just a line, the parameters set the arrows at the ends of this line.

Start- arrow at the beginning of the line.
End- arrow at the end of the line.
Width- proportions of the arrow as a percentage of the line thickness (from 10% to 1000%).
Length- proportions of the arrow as a percentage of the line thickness (from 10% to 5000%).
Curvature- determines the degree of curvature of the widest part of the arrow in the place where it meets the line (from -50% to +50%).

For example:

The first line is unchecked, width - 500%, length - 1000%, thickness - 2 pixels.

The second line has everything the same, but there is a tick at -beginning- and curvature - 5%.

The third line has everything the same, but the -end- checkbox is ticked and the -beginning- checkbox is unchecked.

The fourth line has both checkboxes, width - 500%, length - 1000%, curvature - 15%, thickness - 5 pixels.

All have a style applied.

Draw arbitrary shapes

If you click on the triangle in the circle (on the right), you can select additional shapes in the context menu that opens.

Draw multiple shapes on one layer

If the ellipse is not stretched as you would like, you can fix it. To do this, take the tool -outline selection- on the toolbar:

Move the cursor to the border of the ellipse and, holding down the left mouse button, drag the ellipse where it should be. Using all these tools, you can draw shapes of varying complexity.

Save Shapes

Let's say we liked the last shape we created and want to use it in the future. To do this, you need to save it. For this menu Edit -> Define Custom Shape. Give a name to the new shape.

Now our shape has appeared in the drop-down panel for selecting arbitrary shapes.

This lesson is over. Next time we'll focus on paths and bitmaps.

Lesson 2. Layers and text

Lesson 3. Filters

Lesson 6

Lesson 7. Drawing - brush and pencil

Lesson 11

Previous Lesson Return to Next Lesson

www.site-do.ru

How to Draw Vector Shapes in Photoshop, Fill and Stroke Options

In the vast majority of cases, you will draw vector shapes. Unlike pixel shapes, vector shapes are flexible, scalable and do not depend on image resolution, which means that we can set them to any size we want, edit and scale them as much as we need without losing quality, and even print them in any size also without loss of quality!

Regardless of whether they are shown on the screen or in print, the edges of vector shapes always remain crisp and sharp.

To make sure you're drawing vector shapes and not paths or pixels, select the Shape option from the Tool Mode Views in the Options Bar:

Selecting the Shape option in the Options Bar

Filling a shape with color

The next thing we usually do after selecting the "Shape" option is to select the color that fills the shape, in Photoshop CS6 and above, this is done by clicking on the "Fill" field in the Options Bar:

Click the button in the options bar to open the Shape Fill Properties dialog box.

This action opens a window that allows us to choose from four different ways to fill out the form, each represented by one of four icons along the top of the window. Assignment of icons, starting from the left edge:

no color(No Color) - white rectangle with a red diagonal line, no fill
pure color(Solid Color) - solid color fill
Gradient(Gradient) - gradient fill
Pattern(Pattern) - fill with a Photoshop pattern (pattern)

Various methods of filling a form

No color (No Color)

As the name suggests, selecting this option will leave the shape with no fill, with empty pixels inside. What is it for? Well, in some cases, only the contour itself may be needed. Also, often only a stroke with transparent pixels inside is needed.

Below is a simple example of what a form looks like without a color fill. All that we see is the main contour of the form, which is called "Contour" (Path). The outline only appears in the Photoshop document, so if you save your work as a JPEG or PNG, or print it, the outline won't be visible. To make it visible, we need to add a stroke to it, which we'll see how to add next:

Rectangle shape with no fill or stroke.

Solid Color

To fill your form with a solid color, select the "Solid Color" option, second icon from the left:

Option "Pure color" (Solid Color) to fill the shape with a solid solid color

With the option active, select a color for the shape by clicking on one of the color swatches. The colors you've recently used while working in Photoshop will appear above the main swatches:

Color selection by clicking on the sample.

If the color you need is not among the samples presented, click on the "Color Picker" icon located in the upper right corner of the window:

Click on the Color Picker icon to select your own color.

The Color Picker dialog box will open, select a color in it and click OK to close the Color Picker after selecting the desired color.

As you can see in the figure below, after these actions we have the same form, only now the form has a color:

A figure filled with color.

Gradient Fill

To fill your shape with a gradient, select the "Gradient" option. Then click on one of the thumbnails to select a preset gradient, or use the gradient strip thumbnail below to create your own gradient variation.

Choose a pre-made one or create your own gradient to fill the shape.

Here's the same shape, only now it's filled with a gradient:

A shape filled with one of Photoshop's preset gradients.

Pattern fill (Patterns)

Finally, the pattern fill option allows us to fill the shape with one of Photoshop's preset patterns.
Click on one of the thumbnails to select a pattern. Not many pattern options are preinstalled in Photoshop, choosing, loading and installing a fill pattern is described in detail here.

Below is the same shape, this time filled with a pattern:

The same shape, only this time filled with the standard Photoshop pattern.

If you're not sure yet what color, gradient, or pattern your shape needs, don't worry. As we'll see later, you can always come back to edit the shape later and change the fill.

Adding a Stroke to a Vector Shape

This option has been in Photoshop since version CS6. By default, Photoshop won't add a stroke to the edges of a shape, but adding one is as easy as adding a color fill.

To add a stroke, click on the appropriate option in the Options Bar:

Option to add a stroke.

This opens a window with options where we can choose the color of the stroke, as well as set many other options.

At the top of the window we have the same four icons for selecting the fill type of the stroke line, these are No Color, Solid Color, Gradient and Pattern. By default, "No Color" is selected. I'll choose the "Solid Color" type. Select and assign a stroke color in exactly the same way as the fill color, as described above.

Changing the Stroke Weight

To change the stroke weight, use the appropriate input box located immediately to the right of the color swatch rectangle in the options bar. By default, the weight is set to 3 pt (points). But you can set other units of measurement, if you click on this input field with the right mouse button, a drop-down list of units of measurement will open. I almost always choose pixels:

Change the width and units of the stroke.

Align Edges option

To the right of all others, in the options bar is the option "Align edges". When this feature is turned on (it's on by default), Photoshop will align the edges of the stroke with the pixel grid, making the image sharper.
The option will be active only if the stroke unit is pixel.

More Stroke Options

By default, Photoshop draws a solid line stroke, but we can change this by clicking the Stroke Options button in the Options Bar:

Button of the window for selecting additional properties - selection of a stroke stroke - solid, dashed, dotted, etc.

This opens the Stroke Options window. In this window, we can change the line type from solid to dashed or dotted. In addition, there are three additional stroke options:

Stroke Options Dialog Box

Option "Align"(Align) allows us to choose whether the stroke is located inside the path, outside or in the middle.
Next option "Ends"(Caps) only works if we have selected a dashed stroke. We can change the appearance of the ends of the segments.

the stroke ends at the border of its specified length and the end has a rectangular shape
the end has a semicircular shape and protrudes half the width beyond the border of a given stroke length on each side
the end has a rectangular shape and protrudes half the width beyond the border of the specified stroke length on each side

"Angles"(Corners) allow you to change the appearance of the corner at the junction of stroke lines. The coals can be sharp (default), rounded, or beveled. This option works if the stroke is outside or in the middle of the path. If the stroke is inside the path, the corners always remain sharp.

Clicking on the button at the bottom of the window "Other options ..." (More Options...) opens another window where we can set the length of strokes and gaps between strokes. Here is an example of a rectangular shape with a fill and dashed stroke, with different stroke lengths:

A stroke within a shape that uses two types of strokes - a line and a dot.
.

In this tutorial, we'll cover the basics of working with shapes and shape layers in Photoshop. We will start our lesson by learning the five basic tools for drawing geometric shapes - Rectangle, Rounded Rectangle, Ellipse, Polygon and Line.

Then, in the next tutorial, we'll look at how to draw more complex shapes using the Freeform Shape tool. Most people think that Photoshop is only used for image editing, and if you asked them to recommend a good graphic editor, in most cases the answer would be "Adobe Illustrator".

Indeed, the capabilities of Adobe Illustrator in the field of vector graphics are much wider than Photoshop programs, but, nevertheless, Photoshop can do more in this area than you should expect from a bitmap editor. The various tools in the Shapes group and Photoshop's shape layers make it easy to add simple vector images to drawings and drawings.

Photoshop has six tools for drawing shapes - Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool, Polygon Tool, Line " (Line Tool) and "Custom Shape" (Custom Shape Tool). They are located in one place on the toolbar.

By default, the Rectangle tool is visible on the panel, but if we click on the tool icon and hold down the mouse button for a few seconds, a pop-up menu will appear with a list of the rest of the Shapes group tools from which we can choose the one we need:

All six tools of the Shapes group are located in one place on the toolbar

If you first select one tool in the Shapes group and then want to switch to another, there is no need to revisit the toolbar (although you can do this if you wish). Photoshop allows us to select the desired tool from the options bar at the top of the screen, where all six tools are presented. For example, in the toolbar, I'll select the Rectangle tool:

Selecting the Rectangle Tool

After selecting the Rectangle Tool, six icons appear in the Options Bar representing the various tools in the Shapes group. The tools are placed from left to right in the same order as they appear in the toolbar, so we again see the Rectangle, Rounded Rectangle, Ellipse, Polygon, Line, and Freeform tools. To select the desired tool, simply click on one of the icons:

All six Shapes tools can be selected directly from the Options Bar (after one of them is selected from the Toolbar)

Selecting the Shape Layer option

Before we start drawing shapes, we need to tell Photoshop what type of shape we want to draw, and in this case I don't mean "rectangle" or "circle" by shape type. In fact, Photoshop allows us to draw three different types of shapes - vector shapes, paths, and pixel shapes.

In another tutorial, we'll take a closer look at how these three types of shapes differ and in which case which type to use, but in most cases, you'll be drawing vector shapes. They are drawn in a program such as Illustrator. Unlike pixel shapes, vector shapes are resolution independent and completely scalable. This means that we can resize them as we wish without losing image quality. The edges of vector shapes remain crisp and sharp both on screen and when printed.

To draw vector shapes, select the Shape Layers option from the Options Bar. This is the first of three icons closer to the left (the middle icon is the Paths option and the right one is the Fill Pixels option):

To draw vector shapes, select the Shape Layer option.

Choosing a Color for a Shape

After selecting the Shape Layer option, we need to choose a color for our shape. We do this by clicking on the color swatch icon located to the right of the word "Color" (Color) in the settings panel:

Click on the color swatch icon to select the desired color for the shape

This action will open the color palette where we can select the desired color. In my case, I'll choose red. Once you've chosen a color, click OK to close the color palette:

Choose a color for the shape from the color palette

If you're not sure you've chosen the right color for your figure, don't worry about it. Next, we'll look at how to use shape layers to easily go back to the previous steps and change the color of a shape at any time after we've drawn it.

Rectangle tool

As you may have guessed from the name, the Rectangle Tool allows us to draw four-sided rectangular shapes. Simply click in the document window to define the starting point of the shape and then, with the mouse button held down, drag the mouse diagonally to finish drawing the shape. As you move the cursor, you will see the thin outlines of the future figure:

Drag the cursor to draw a rectangular shape. As the cursor moves, the outline of the shape will appear.

When you're happy with the result, release the mouse button and the program will instantly fill the shape with the color you chose in the settings panel:

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

Drawing a shape from the center

If you need to draw a rectangle (or other shape) from the center instead of from the corner, place the cursor in the document window to determine the center of the future rectangle and, while holding down the mouse button, start dragging the cursor and drawing the shape as usual. While doing so, press and hold the Alt (Win) / Option (Mac) key as you move the cursor. Pressing this key tells the program to draw the figure from the center. This trick works with all the Shape tools, not just the Rectangle tool:

To draw a shape from the center, hold down Alt (Win) / Option (Mac) as you move the cursor

Drawing squares

We can also draw squares with the Rectangle Tool. To draw a square, place the cursor in the document window and start dragging it, drawing a rectangular shape. Once you've started doing this, press the Shift key and keep holding it down as you move the cursor. Pressing the Shift key converts the shape to a square, no matter which direction you move the cursor. You can also add an Alt (Win) / Option (Mac) keypress to draw the square from the center (so you press and hold Shift+Alt (Win) / Shift+Option (Mac)):

To draw a square, while using the Rectangle tool, press and hold the Shift key

Again, Photoshop will only draw a thin outline of the square as you move the cursor, but when you release the mouse button, it will fill the square with color:

The program always waits for you to release the mouse button, and only then fills the shape with color

Options for tools in the Shapes group

If you look in the Options bar, to the right of the six Shapes group tool icons, you'll see a small downward-pointing arrow. Clicking this arrow will open a list of additional options for the Shapes tool of your choice. For example, when selecting the Rectangle Tool, pressing the arrow will open a menu with options for the Rectangle Tool. With the exception of working with the Polygon and Line tools, which we'll cover later, you won't use this menu often because we've already learned how to select basic options using keyboard shortcuts and individual keys.

For example, the Unconstrained option is selected by default, and it is responsible for the normal behavior of the Rectangle tool, allowing us to draw rectangular shapes of any size and with any aspect ratio. The Square option allows us to draw squares, but we can do this by simply pressing and holding the Shift key as we move the cursor. The From Center option 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:

Click on the small arrow to see more options for the Rectangle Tool

shape layer

Before we move on to the rest of the tools in the Shapes group, let's take a look at the Layers panel. As you remember, at the beginning of the lesson, we learned that in order to draw vector shapes in Photoshop, you must select the "Shape Layer" option in the Options Bar. And now after I have drawn the shape, we can see that a shape layer (a layer of type Shape) has appeared in the layers panel, which the program has named “Shape 1” (Shape 1). Each new vector shape we draw will be placed on a separate layer, which looks different than a regular pixel layer. On the left side of the layer is a color swatch icon that displays the current fill color of our shape, and to the right of the color icon is a vector mask thumbnail:

Shape layers have a color swatch icon on the left side and a vector mask thumbnail to the right of it

As I mentioned earlier, we don't have to worry about choosing the right color for the shape because we can easily change the fill color of the shape after it's created. To do this, double-click on the color swatch icon of the shape layer:

To change the current color of the shape, double click on the color swatch icon

Photoshop will reopen the Color Picker where we can choose a different color for our shape. I'll choose, this time, blue:

Choose a different color from the color palette

It is enough just to go back at any time and change the color of the shape.

To the right of the color swatch icon on the shape layer is a vector mask thumbnail. The white area on the thumbnail represents our shape. Vector masks are similar to regular layer masks in that they partially obscure a layer, leaving portions visible. In other words, when we draw a vector shape, the program actually fills the entire layer with the selected color, but the mask only shows the color inside the shape area, while the color on the rest of the layer area is hidden. When working with the tools of the "Shapes" group, of course, it is not at all necessary to know how the vector mask works, but it is always nice to understand how the tools work. The gray area around the shape in the vector mask thumbnail represents the area on the layer where the color is not visible, while the white area in the thumbnail represents the area of the color layer:

The white area on the vector mask represents the area on the layer where the color is visible.

To make it easier for us to see how Photoshop renders a vector shape, we can temporarily disable vector masks by pressing and holding the Shift key while clicking on the vector mask thumbnail:

Hold down the Shift key and click on the vector mask to turn it off

After turning off the vector mask, the layer becomes open, and we can see that it is completely filled with the blue color that I chose to fill the shape. If we look closer, we can see a thin outline of where the shape is located on the layer:

After turning off the vector mask, you can see that the entire layer is filled with color.

To turn the vector mask back on, simply hold down the Shift key while clicking on the mask thumbnail in the layers panel again. After turning on the mask, the color will remain only inside the area of the shape, while in the rest of the layer the color will disappear from view. The white areas around the shape in the document window belong to the background layer below:

Document after re-enabling the vector mask

Now that we're familiar with shape layers, let's take a look at the other shapes you can draw in Photoshop using the tools in the Shapes group.

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 how rounded the corners are using the Radius option in the Options Bar. The larger the radius value we enter, the rounder the corners become. In my case, I'll enter a Radius value of 50 pixels:

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

To draw a rounded rectangle, after you have entered a radius value, 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 to finish drawing the shape. Just like with the Rectangle shape, as you move the cursor, the program will display a thin outline of the shape:

Drag the 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 a radius of 150px. This value is so large (for this shape, anyway) that the left and right sides of the rectangle are curved:

The larger the radius value, the rounder 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:

A small radius value rounds corners less

Unfortunately, there is no preview of the degree of rounding of the corners. 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, as is possible in Illustrator. Photoshop also does not allow us to go back and even slightly correct the rounding of the corners after we have drawn the shape.

All of the above means that drawing rounded rectangles is essentially trial and error. If you don't like the rounded corners of the shape after you've drawn it, press Ctrl+Z (Win) / Command+Z (Mac) to quickly undo it, then enter a new radius value in the Options Bar and start drawing the rectangle again.

Just like with the Rectangle tool, you can use the Rounded Rectangle tool to draw rounded squares. Just press and hold the Shift key after you've started drawing the shape, and your rounded rectangle will take on the shape of a rounded square. Press and hold the Alt (Win) / Option (Mac) key to draw the shape from the center.

If we click on the little arrow in the Options bar to open a menu of advanced options for the Rounded Rectangle Tool, we can see that the Free, Square, and From Center options are the same as the Rectangle Tool options. And again, we already know how to select these options using keyboard shortcuts and individual keys:

The Rectangle and Rounded Rectangle tools have the same additional options

Ellipse Tool

The Ellipse Tool allows us to draw ellipses and circles. Just like with the Rectangle and Rounded Rectangle tools, 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 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:

Ellisfilled upcolor

Press and hold the Shift key after you've started working with the Ellipse Tool to draw a perfectly even circle. Pressing the Alt (Win) / Option (Mac) key will let you draw the shape from the center:

Start drawing and then add a Shift keystroke to create a perfectly even circle.

Clicking the little arrow in the Options Bar will open the Ellipse tool options, which are similar to the options for the Rectangle and Rounded Rectangle tools. The only difference is that with the Ellipse tool option, you can draw circles instead of squares:

The Ellipse Tool has almost the same options as the Rectangle and Rounded Rectangle tools.

Polygon Tool

The Polygon Tool is more interesting for us in terms of drawing shapes. Whereas with the Rectangle Tool we can only draw quadrangular rectangles, the Polygon Tool allows us to draw polygons with as many sides as we wish. Next, we will look at how even stars can be drawn using this tool.

Specify the number of sides you want for the polygon in the Sides option in the Options Bar. The default value for Sides is 5, but you can enter any number between 3 and 100:

Use the Sides option to tell Photoshop how many sides your polygonal shape will have

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

The Polygon tool is indispensable when we need to draw a shape other than a quad

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

A simple triangle drawn with the Polygon tool

Here is a polygon with 12 sides:

PolygonWithtwelveparties

Draw stars with the Polygon tool

To draw a star with the Polygon Tool, click on the little arrow in the Options Bar to open the list of options for the Polygon Tool and select the Star option:

From the list of options for the "Polygon" tool, select "Star"

After selecting the "Star" option, click in the document window and drag the cursor to draw a star. The Sides option in the Options Bar determines the number of star vertices. So, if the default value of the parameter is five, we get a five-pointed star: And finally, we will look at the Line Tool, which is the last tool in the Geometric Shapes group. It allows us to draw straight lines and arrows. Set the desired line weight in pixels by typing a value in the Weight box in the Options Bar. In my case, I'll enter a value of 16 pixels:

Use the Thickness option to define the thickness of the line

Then click in the document window and drag your cursor to draw a line. After you have started drawing the line, press and hold the Shift key to constrain the direction in which the cursor moves. This will allow you to draw horizontal or vertical lines with ease:

Hold down a keyShift to draw horizontal or vertical lines

To set arrowheads at the ends of a line, click on the little arrow icon in the Options Bar to select the Arrowheads options. Photoshop allows us to add arrows at the beginning of a line, at the end, or at both ends at the same time. If you want an arrow to appear in the direction you draw the line, which is more logical, select the End option. Make sure you select this option before you start drawing the line, because the program won't let us go back and set the arrow after the line is drawn:

To add an arrow in the direction in which the line was drawn, select the End option

Below is a line similar to the previous line I drew, but with an arrow at the end:

Easy to draw arrows with the Line tool

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

Increase the Curvature value to change the shape of the arrow

As a result, the shape of the arrow will change. Again, make sure you select the Curvature value before you start drawing the line, otherwise you'll have to delete the shape and draw it again:

Arrow with Curvature set to 50%

Hide the outline around the shape

If you take a close look at the shape you've drawn (regardless of which Shapes tool you've used), you'll most likely see a thin outline around it, which can sometimes be irritating. The outline around the shape appears whenever the shape's vector mask is selected, and it's always selected by default after we draw a new shape.

If you look at the shape layer in the Layers panel, you'll see that the vector mask thumbnail has a white highlighted border around it, which tells us that the mask is actually selected. You can hide the outline around the shape by deselecting the vector mask. To do this, simply click on the vector mask thumbnail. The highlighted border around the thumbnail will disappear, and so will the outline around the shape in the document:

Click on the vector mask thumbnail to deselect it and hide the outline around the shape

And here we are! We've covered the basics of working with shape layers and the five tools in the Shapes group in Photoshop! In the next tutorial, we'll learn how to create more complex shapes using the Custom Shape Tool.

Translation: Ksenia Rudenko

Popular in category: