How to draw the outline of a rectangle in Photoshop. Vector Shape Tools: Rectangle Tool

In Photoshop you can draw several versions of a square. A filled square and a square with a frame. It is better to draw squares using vector objects, specifically using the Rectangle tool.

Rectangle tool

Select the shapes (horizontal key U), then the Rectangle tool (Rectangle Tool), see the screenshot below.

Set the "Fill Pixels" property.

Select the fill color of the square (the first color in the toolbar), draw a square while holding down the Shift key.

Square with frame

The square should be drawn on a new empty layer, without any fill. You can create a new layer by simultaneously pressing the keys Alt + Ctrl + Shift + N.

1. Install Paths (paths in Russian);
2. Draw a square with the Shift key held down;

Convert the vector square into a selection (Select) by pressing Ctrl + Enter.

Paint over the selection (in in this case white).

Alt + ← BackSpace - first selected color.

Ctrl + ← BackSpace - second selected color.

Right-click on the square layer and select Blending Options.

In styles, select "Stroke" and set the frame thickness in pixels and the frame color. You can experiment with other options.

The result is a square with a red border 3 pixels thick.

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

In this article we will look at 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 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. Free Shape Tool

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

From the toolbar, select Tool. Then there are two possible scenarios:

Option 1. Square or rectangle with further ability to resize without loss of quality

This, of course, implies the use of a vector figure. To draw it you need to select the option Shape layer:

In the future, you can change the size of this figure without loss of quality. To do this, use the tool - Ctrl + T, and use the corner markers to change the size.

For those who don't know: vector shapes are not made of pixels, but of special mathematical formulas. Therefore, resizing is not a process of stretching/compressing 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 right away, use the setting in the options bar Fill pixels. But before you start drawing it - !

But in fact, you can draw a vector one at once, and then just draw it. Now choose for yourself.

How to make a rectangle square

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

In the same panel, please note, 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 picas.

Rectangle or square with rounded corners

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

Method 2: Stroke the selected area

This method is as simple as 5 kopecks. select the tool and draw a rectangle with a dotted line. To draw a square, hold down the Shift key.

Now you need to outline the boundaries of this selected area. To do this, go to Editing - Stroke.

Then, in a new window, configure the type of stroke: specify the thickness of the frame, the desired color and mark how the stroke will be done:

• Inside- this means the frame will lie on inside selected area;
• Centered— this means the frame will be divided equally into the part that runs inside the selection and the part on the outside;
• Outside- this means the frame will go around the dotted line of the selection.

Here's how it might turn out:

In the screenshot above, I didn’t remove it on purpose dotted line, because it will not disappear for you either. To finally get rid of it, press Ctrl+D.

In this method, in order to draw a shape of the exact size, you must first specify in the tool options bar Style — Specified size or Specified proportions. After this, 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 units of measurement.

Method 2.1 Painting a selection

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

Method 3: Selection modification

In fact, I like this method least of all because of the obvious disadvantage - the corners of the rectangle will be cropped, and the border of the frame itself will not be able to influence these facts.

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

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

Now you just need to paint over the resulting frame. Suitable for this. Here, by the way, you can approach the issue more creatively and paint over, for example, different colors. Result:

All that remains is to remove the selection - Ctrl+D. I think this method is only suitable for rare specific tasks, since shading and cropped corners only spoil everything.

If you notice an error in the text, select it and press Ctrl + Enter. Thank you!

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

Create a new training file.

Left-click on the -shapes- tool in the toolbar, the tool selection window will open:

Here are the basic shapes we can use. Select any one and look at the options panel:

For any shape you can choose:

• drawing mode:
  • Shape layer. The figure is created in 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 shape's boundaries. The outline of a shape is a path that appears in the Paths tab of the Layers panel.
  
  
  • Outlines. This mode allows you to draw outlines of shapes that can be filled or outlined with any color. Paths appear in the Paths tab of the Layers panel.
  
  
  • Pixel Fill. When working in this mode, not vector, but raster images, which can be processed in the same way as any raster image
  
  
• style and color of the figure


• set parameters specific to this figure

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

Choose any one 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 crossed out with a red line.

Now you can set the geometric parameters:

• Arbitrarily- as you draw, so it will be.
• Square- when you stretch 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 proportions- you can set how many times the width will be smaller (or larger) than the height. When stretching the figure, the proportion will be maintained.
• From the center- draws a rectangle from the center.
• Snap to Pixels- the edges of the rectangle are snapped to the pixel boundaries.

Enough useful tool to create 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. In the panel, select the mode - shape layer, corner radius - for example, 15 and color (you can style it as you want). The geometric parameters are the same as for a rectangle.

This is what happened to me various combinations radius and style.

Why not news blocks and menu buttons?

Drawing circles

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

Here's what I got:

Drawing polygons

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

• Radius- radius of the polygon.
• Smooth outer corners
• Star- with the checkbox unchecked, the polygon is convex, with the checkbox ticked, the polygon is concave.
• Beam depth- if the polygon is concave, then its vertices seem to form rays. This parameter shows what part of the polygon radius will be occupied by rays. The higher the %, the longer and sharper the rays.
• Smooth outer corners- with the checkbox unchecked, the corners are sharp, with the checkbox checked, the corners are rounded.

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

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

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

All have a style applied to them.

Drawing lines

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

If all the checkboxes are unchecked, there will be just a line, the parameters are set by 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 where it meets the line (from -50% to +50%).

The first line has all checkboxes unchecked, width - 500%, length - 1000%, thickness - 2 pixels.

For the second line, everything is the same, but there is a checkmark at -beginning- and the curvature is 5%.

For the third line, everything is the same, but the -end- is checked and the -beginning- is unchecked.

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

All have a style applied to them.

Let's draw arbitrary figures

Let's choose a figure - an arbitrary figure. In the panel, select the mode - layer-shape, 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.

Drawing multiple shapes in one layer

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

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

If the ellipse is not stretched as desired, you can correct it. To do this, select the path selection tool from the toolbar:

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

Saving the 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 the new shape a name.

Now our shape has appeared in the drop-down custom shape selection panel.

This concludes the lesson. Next time we'll deal with outlines and raster images.

As soon as you release your mouse button, Photoshop fills the shape with the color or fill type you selected in the Options Bar:

As soon as you release the left mouse button, Photoshop fills the shape with a color or other preset fill.

Changing the size of a shape after you've drawn it

After you have drawn your initial shape (in our case, a rectangle), its current dimensions will appear in the “Width” (W) and “Height” (H) input fields ) in the options panel.
Here we see that my rectangle is 464 pixels wide and 257 pixels high:

The height and width of the shape are shown in the corresponding input fields in the options bar.

If you need to change the size of the finished Photoshop shapes(and this works for all vector shape tools, not just Rectangle), simply enter the size you want in the Width and/or Height fields. For example, let's say that I suddenly need to change the width of the rectangle to 500 pixels. All I have to do is enter a value of 500px in the Width field in the Options Bar. If necessary, you can change the height in the same way.

If you want to change the width or height, but at the same time maintain the original aspect ratio of the shape, first click on the small chain icon located between the width and height input fields:

Click this icon if you want the aspect ratio to remain the same when changing the length or width of the shape.

How to pre-set the size of a shape before drawing it

If you know in advance the exact width and height of your the figure being created, Photoshop has an option for constructing a shape with given dimensions.

To get started, select the right tool constructing vector figures. Then simply left-click anywhere inside the document window, which will open a dialog box where you can enter the width and height values. Click OK to close the dialog box and Photoshop will automatically draw the shape you want:

Dialog box for constructing a figure with predefined dimensions.

Drawing shapes from the center

Here are some simple but very useful keyboard shortcuts. If you press and hold the Alt key and drag your cursor to create a shape, you'll start drawing it from the center rather than from a corner. This rule works with any of the tools Photoshop shapes, and not just with "Rectangle". But when constructing a figure from the center, one thing should be taken into account important point. The Alt key must be held down after how you start creating the figure, i.e. After that, as you press the left mouse button and start dragging the cursor. You should also release Alt After that, as you release the left mouse button, i.e. after you finish building the figure:

Press and hold the Alt key to start building the shape from its center. The circle shows the starting point for constructing the figure.

Drawing squares

To draw a perfect square using the Rectangle Tool, click inside the document to set the starting point and begin dragging as usual. Once you have started dragging, press and hold the Shift key. This will cause the rectangle to turn into a square. Again, release Shift only after releasing the mouse button. You can also combine the Shift and Alt keys to build a perfect square from the center:

Press and hold the Shift key while dragging to draw a square.

Again, during the process of creating a shape, you will only see an empty outline, and as soon as you release the mouse button (i.e., you finish creating the shape), Photoshop will fill the finished outline with color.

Making a rectangle in Photoshop is pretty simple task, which even a beginner can do. I advise you to learn how to draw this the simplest figure, since this skill can be useful to you to perform many tasks. Be it website design, photo frame or image correction. Despite the apparent large amount 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 need someday.

Let's start with the figures. Let's create a new document. 1000 by 1000 pixels will be quite enough.

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

Hold down the right mouse button and drag across the working area.

The rectangle is ready! To get rid of the thin black border, rasterize the layer. You will find the rasterization 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 instruments in Photoshop - a selected area that is located at the top of the side toolbar.

We move across the working field by holding down the right mouse button.

A selected area has formed that we must fill. Therefore, we move to the “Select Primary Color” tool. By clicking on it, we open the color map and select any shade that we like.

We look for the “Fill” tool, select it and click on the selected area.

And now the key combination is 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. Drawing it is just as easy. Create a new layer, select a rectangular selected area and place it on the working area. In general, we perform all of the above steps.

Now we will stroke the selected area, for which we go to the top panel and click the “Editing” tab. We are interested in the “Stroke” command.

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

Press the key combination ctrl+d to deselect 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 changing the color and size.

As you may have noticed, I recommended that you create a new layer to draw the rectangle. And this is not without reason. Your rectangle is not bound to the workspace. You can edit it as much as you like, while the workspace will remain unchanged. I would like to warn you that these methods apply to a rectangle created by any of the above methods.

First, let's try changing the color. Again, there are several methods. The first one is the fill tool. Select the desired color from the toolbar. Then click on the fill tool. And then along our rectangle.

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

The second way is the blending options. In the last word we look for the one we need 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 select the one you like.

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

Now let's teach me the size of the rectangle.

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

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