How to draw in Photoshop. Figure drawing. Rectangular Marquee tool in Photoshop Make a rectangular outline in Photoshop

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 are created, 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.

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

Here's what I got with different combinations of 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 3cm, the rest of the checkboxes 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.

Drawing arbitrary shapes

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 the rectangular selection tools (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.

The simplest geometric figure is a rectangle (square). Rectangles can consist of various elements of websites, banners and other compositions. Photoshop gives us the opportunity to depict a rectangle in several ways.

There are two ways to depict rectangular shapes in Photoshop. The first involves using vector tools, and the second involves filling the selected area with color.

Method 1: Rectangle Tool

This tool is in the group "Shapes" on the left panel.

From the name it is clear that the tool allows you to draw rectangles. When using this tool, a vector shape is created that is not distorted or loses quality when scaled. The tool settings are located on the top panel. Here you can select the fill color and set the type of border and its thickness.

The dimensions are indicated in the corresponding width and height fields, and the rectangle is created with one click and confirmation.

Method 2: Selected Area

The tool is used to create rectangles "Rectangular area" from the group "Selection".

Using this tool, a selected rectangular area is created. Just like in the case of the previous tool, the key works SHIFT, creating a square.

"Rectangular area" needs filling. To do this, you can press the keyboard shortcut SHIFT+F5 and set the fill type.

You can also use the tool "Fill".

Result:

The selection can be removed using the keys CTRL+D. For a rectangular area, you can also set arbitrary dimensions or proportions (for example, 3x4).

In addition, it is possible to create a selection with specified proportions, for example, 3x4.

Today it's all about rectangles. Now you know how to create them, and in two ways.

In this tutorial we'll look at the basics of working with shapes and shape layers in Photoshop. We'll 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 processing, and if you asked them to recommend a good graphics editor, in most cases the answer would be “Adobe Illustrator”.

Indeed, the capabilities of the Adobe Illustrator editor in the field of vector graphics are much wider than the Photoshop program, but, nevertheless, the Photoshop program in this area can do more than what should be expected from a raster image editor. Photoshop's various Shapes tools and shape layers make it easy to add simple vector images to your drawings and drawings.

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

By default, the Rectangle tool is visible in the toolbar, 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 remaining tools in the Shapes group from which we can choose the one we need:

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

If you first selected one tool in the Shapes group and then want to switch to another, there's no need to revisit the Tools panel (although you can do that if you want). Photoshop allows us to select the tool we need from the Options bar at the top of the screen, where all six tools are presented. For example, in the Tools panel, I'll select the Rectangle Tool:

Selecting the Rectangle Tool

Once you select the Rectangle Tool, six icons appear in the Options Bar, representing the various tools in the Shapes group. The tools are arranged 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 panel (after one of them is selected in the Tools panel)

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 look in detail at how these three types of shapes differ and when to use which type, but in most cases, you'll be drawing vector shapes. These are the ones that are drawn in a program like 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 during subsequent printing.

To draw vector shapes, select the Shape Layers option in the settings panel. This is the first of three icons, located towards the left edge (the middle icon is the Paths option and the right 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'll do this by clicking on the color swatch icon located to the right of the word "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 select a color, click OK to close the color palette:

In the color palette, select a color for the figure

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

Rectangle Tool

As you might 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, while holding down the mouse button, drag the mouse cursor diagonally to finish drawing the shape. As you move the cursor, you will see the subtle outlines of the future figure:

Drag your cursor to draw a rectangular shape. As you move the cursor, the outline of the shape will appear

When you're happy with the result, release the mouse button and the program will immediately 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 rather than from a corner, position the cursor in the document window to define the center of the future rectangle and, while holding down the mouse button, begin dragging the cursor and drawing the shape as usual. While doing this, press the Alt (Win) / Option (Mac) key and continue to hold it down as you move the cursor. Pressing this key tells the program to draw the shape from the center. This technique 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 using the Rectangle tool. To draw a square, place the cursor in the document window and start dragging it, drawing a rectangular shape. Once you start doing this, press the Shift key and continue to hold it down as you move the cursor. Pressing the Shift key will transform the shape into a square, no matter which direction you move the cursor. You can also add an Alt (Win) / Option (Mac) keystroke 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

Once again, Photoshop will only show 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

Shapes group tool options

If you look in the Options panel, you'll see a small downward-pointing arrow to the right of the six Shapes group tool icons. Clicking this arrow will open a list of additional options for the Shapes group tool you have selected. For example, when you select the Rectangle Tool, clicking the arrow will open a menu with options for the Rectangle Tool. With the exception of the Polygon and Line tools, which we'll look at later, you won't use this menu very 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 operation of the Rectangle Tool, allowing us to draw rectangular shapes of any size and 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 the small arrow to see more options for the Rectangle Tool

Shape layer

Before we move on to the rest of the Shapes group, let's take a look at the Layers panel. As you remember, at the beginning of the lesson we learned that to draw vector shapes in Photoshop, you need to select the “Shape Layer” option in the Options panel. And now that I've drawn the shape, we can see that a shape layer has appeared in the Layers panel (a layer of type Shape), which the program called “Shape 1”. Each new vector shape we draw will be placed on its own layer, which looks different than a regular pixel layer. On the left side of the layer is a color swatch icon, which 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 once we've created it. To do this, double-click on the shape layer color swatch icon:

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

Photoshop will re-open the color palette where we can choose a different color for our shape. I'll choose, this time, the color blue:

Select a different color from the color palette

It’s easy enough to go back and change the color of the shape at any time.

To the right of the color swatch icon on the shape layer is a vector mask thumbnail. The white area in the thumbnail represents our figure. Vector masks are similar to regular layer masks in that they partially cover a layer, leaving certain areas 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 displays 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, it is, of course, not at all necessary to know how a 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 on the layer with color:

The white area on the vector mask represents the area on the layer where 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 all filled with the blue color that I chose to fill the shape. If we look more closely, we can see a thin outline of the shape's location 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 shape area, while the color in the rest of the layer will be hidden 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've learned about shape layers, let's look at other shapes you can draw in Photoshop using the Shapes group tools.

Rounded Rectangle Tool

The Rounded Rectangle Tool is very similar to the Rectangle Tool except that it allows us to draw rounded rectangles. We adjust the degree of rounding of the corners using the Radius option in the settings panel. 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 determine the degree to which corners are rounded

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 your cursor to draw a rounded rectangle after you've entered a radius value in the Options bar

When you release your mouse button, Photoshop will finish drawing the shape and fill it with color:

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

Below is another rectangle with the radius set to 150 pixels. This value is so large (for this figure, anyway) that the left and right sides of the rectangle are shaped like a curve:

The larger the radius value, the rounder the corners.

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

A small radius value rounds corners less

Unfortunately, there is no preview of the degree of corner rounding. 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 available in Illustrator. Photoshop also doesn't allow us to go back and even slightly adjust the rounding of the corners after we've drawn the shape.

All of the above means that drawing rounded rectangles is essentially a matter of trial and error. If you don't like the rounded corners of your 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 the Rectangle Tool, you can use the Rounded Rectangle Tool to draw rounded squares. Simply press and hold down the Shift key once you've started drawing the shape, and your rounded rectangle will take the shape of a rounded square. Press and hold Alt (Win) / Option (Mac) to draw the shape from the center.

If we click on the small arrow in the Options Bar to open the Advanced Options menu for the Rounded Rectangle Tool, we'll see that the Freestyle, Square, and Center options are the same as the Rectangle Tool options. Again, we already know how to select these options using keyboard shortcuts and individual keys:

The Rectangle and Rounded Rectangle tools have the same advanced options

Ellipse tool

The Ellipse Tool allows us to draw ellipses and circles. Just as 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:

Drawing an ellipse using the Ellipse tool

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

Ellisfilled upcolor

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

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

Clicking the small arrow in the Options bar will open the Ellipse tool options, which are similar to the Rectangle and Rounded Rectangle tools. The only difference is that the Ellipse tool option lets you 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 its ability to draw shapes. While with the Rectangle tool we can only draw four-sided rectangles, the Polygon tool allows us to draw polygons with as many sides as we wish. Next we will look at how you can even draw stars using this tool.

Specify the number of sides you require for the polygon in the Sides option box in the settings panel. The default value for Sides is 5, but you can enter any number from 3 to 100:

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

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

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

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

A simple triangle drawn with the Polygon tool

Here is a polygon with 12 sides:

PolygonWithtwelveparties

Drawing stars with the Polygon tool

To draw a star using the Polygon tool, click on the small arrow in the options bar to open the list of Polygon tool options and select the Star option:

From the list of options for the Polygon tool, select “Star”

After selecting the “Star” option, click the mouse in the document window and drag the cursor to draw a star. The Sides option in the settings panel determines the number of points on the star. So, if the default value is five, we will get a five-pointed star: And finally, we'll 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 thickness in pixels by entering a value in the Weight parameter box in the settings panel. In my case, I'll enter a value of 16 pixels:

Use the Thickness option to determine the thickness of the line

Then click in the document window and drag the cursor to draw a line. Once you've started drawing a line, press and hold the Shift key to constrain the direction the cursor can move. This will allow you to easily draw horizontal or vertical lines:

Hold down the keyShift for drawing horizontal or vertical lines

To set arrows at the ends of the line, click on the small arrow icon in the settings panel 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 to have an arrow in the direction in which you draw the line, which is more logical, select the End option. Make sure you select this option before you start drawing the line, as the program will not allow us to go back and define 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:

The Line Tool makes it easy to draw arrows

If the default arrow size does not suit you, you can change it using the Width and Length parameters. We can also add a bend to the arrow using the “Curvature” parameter. By default, the value of this parameter is 0%. I'll 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 option before you start drawing the line, otherwise you'll have to delete the shape and re-draw it:

Arrow with Curvature set to 50%

Hiding the outline around a shape

If you look closely at a shape you've drawn (no matter which Shapes tool you've used), you'll likely see a thin outline around it, which can sometimes be annoying. The outline around the shape appears whenever the vector shape mask is selected, and it is 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 now we're done! We've covered the basics of working with shape layers and the five Shapes tools in Photoshop! In the next tutorial, we'll learn how to create more complex shapes using the Custom Shape Tool.

Translation: Ksenia Rudenko

How to draw a rectangle in Photoshop without fill

In this tutorial I will 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 need to draw a rectangle or create a new document.

I open this picture:

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

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

Right-click on the selected area and select “Stroke” from the drop-down menu.

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

This is what we get. Remove 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 rectangle in Photoshop

Although a square and a rectangle are the simplest geometric shapes, to draw them in Photoshop you need to put in 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 the Free Shape 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 Free Transform tool - Ctrl+T, and use the corner handles to change the size.

For those who don’t know: vector shapes do not consist 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, create a new layer!

But in fact, you can draw a vector one at once, and then simply rasterize 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 Rectangular Marquee 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 the inside of the 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 deliberately did not remove the dotted line, since 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 options bar of the Rectangular Area tool 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 is in a state of shading, 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 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. The Brush tool is suitable for this. Here, by the way, you can approach the issue more creatively and paint, for example, with 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!

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 figure, as this skill can be useful to you for 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 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 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 tools in Photoshop - the selection area, which 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 want 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, look for the one you 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 turn it over on the axis.

photoshop-work.ru

How to draw a rectangle in Photoshop

The simplest geometric figure is a rectangle (square). Rectangles can consist of various elements of websites, banners and other compositions.

Photoshop gives us the opportunity to depict 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 is not distorted or loses quality when scaled.

The tool settings are located on the top panel.

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

The second way is a tool "Rectangular area".

Using this tool, a selected rectangular area is created.

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

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

or use the tool "Fill".

The selection can be removed using the keys CTRL+D.

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

Today it's all about rectangles. Now you know how to create them, and in two ways.

Did this article help you?

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, not everything is so simple and there are many nuances, especially when drawing a square or rectangle without filling.

And so let's get started. First, draw a square with fill. To do this, I open this picture 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 a square like this. The fill color, of course, can be changed.

Now let's solve a more difficult problem, this how to draw a square or rectangle in Photoshop without filling.

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

Select the Rectangular Marquee tool.

Using this tool, draw a rectangle in the picture. To draw a square, hold shift and stretch to the desired size.

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

The result is a square without filling, just like we wanted:

And also watch the thematic video:

pc-knowledge.ru

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

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 are created, 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.

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

Here's what I got with different combinations of 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 3cm, the rest of the checkboxes 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.

Drawing arbitrary shapes

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 the rectangular selection tools (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.

www.site-do.ru

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

In the vast majority of cases, you will be drawing vector shapes. Unlike pixel shapes, vector shapes are flexible, scalable and independent of image resolution, which means 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 format. size also without loss of quality!

Whether they're shown on screen or in print, the edges of vector shapes always remain crisp and clear.

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

Selecting the Shape option from the Options Bar

Filling a shape with color

The next step we typically do after selecting the Shape option is to select the color to fill the shape, in Photoshop CS6 and above, this is done by clicking on the Fill field in the Options Bar:

Click on 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 of which is represented by one of four icons located along the top of the window. The purpose of the icons, starting from the left edge:

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

Various mold filling methods

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 you may only need the circuit itself. Also, often you only need a stroke with transparent pixels inside.

Below is a simple example of what a form looks like without a color fill. All we see is the main outline of the form, which is called “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 will not be visible. To make it visible, we must add a stroke to it, which we will look at how to add next:

Rectangle shape without fill or stroke.

Solid Color

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

Solid Color option 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. Colors you've recently used in Photoshop will appear above the main swatches:

Select a color by clicking on the swatch.

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.

A color picker dialog box will open, select a color from it and click OK to close the Color Picker after selecting the color you want.

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 choose a preset gradient, or use the gradient strip thumbnail below to create your own gradient variation.

Select a ready-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.

Filling with a pattern (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. There aren't many pattern options pre-installed in Photoshop; choosing, loading, and installing a fill pattern is covered in detail here.

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

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

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

Add a stroke to a vector shape

This option has been available in Photoshop since version CS6. By default, Photoshop won't add a stroke to the edges of the 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 stroke color, as well as set many other options.

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

Changing stroke thickness

To change the stroke thickness, use the input box located directly to the right of the color swatch rectangle in the Options Bar. By default, the thickness is set to 3 pt. But you can specify 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 select pixels:

Change the stroke width and units.

Align Edges Option

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

Additional stroke options

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

Button in the window for selecting additional properties - selecting a stroke - solid, dotted, dotted, etc.

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

Advanced Stroke Options Dialog Box

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

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

"Angles"(Corners) allow you to change the appearance of the corner at the junction of the stroke lines. Coals can be sharp (default), rounded, or beveled. This option works if the stroke is located 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 "More Options..." window opens another window where we can set the length of strokes and breaks between strokes. Here's an example of a rectangular shape with a fill and a dashed stroke with different stroke lengths:

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

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

But that's not what we're talking about. 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, when you hover, a list with all available shapes will open. We need the very first one - “Rectangle”.

Thanks to this amazing tool, we can 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 top horizontal menu of the program. Basically, you set the settings for the fill, border, and thickness of the lines that form the shape.

Thanks to the pressed key SHIFT you can draw a rectangle with equal sides on the canvas - i.e. square. You can also initially set the dimensions of the figure 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. 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 your first time opening Photoshop, you should know what this tool is.

First, we will need to create a selection in the form of a rectangle on the canvas. Again, if you want it to be a square, hold down the SHIFT key.

Now we need to fill the rectangular area. You can open the window with fill parameters using a hotkey combination SHIFT+F5.

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

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

Important! Note that the Rectangular Marquee Tool also has an settings panel at the top where you can set the settings you want, 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!