Make round edges in Photoshop. Making rounded corners of pictures in Photoshop. A quick way to round out a photo

The rounded corners in the photo look quite interesting and attractive. Most often, such images are used when making collages or creating presentations. Also, pictures with rounded corners can be used as thumbnails for posts on the site. There are many options for use, but there is only one way (correct) to get such a photo. In this tutorial we will show you how to round corners in Photoshop.

Rounding Corners in Photoshop

To achieve the result, we use one of the group’s tools "Shapes", and then just remove everything unnecessary.

1. Open the photo in Photoshop that you are going to edit.

   

2. Then create a copy of the waterfall layer called "Background". To save time, use hotkeys CTRL+J. A copy is created in order to leave the original image intact. If (suddenly) something goes wrong, you can delete the failed layers and start again.

   

3. Let's move on. And then we need a tool "Rectangle with rounded corners".

   

   In this case, we are only interested in one of the settings – the rounding radius. The value of this parameter depends on the image size and needs. We will set the value to 30 pixels, so the result will be better visible.

   

4. Next, draw a rectangle of any size on the canvas (we will scale it later).

   

5. Now you need to stretch the resulting figure across the entire canvas. Calling the function "Free Transform" hotkeys CTRL+T. A frame will appear on the shape, which you can use to move, rotate, and resize the object.

   

6. We are interested in scaling. Stretch the figure using the markers indicated in the screenshot. After scaling is complete, click ENTER.

   

   Advice: in order to scale as accurately as possible, that is, without going beyond the canvas, you need to enable the so-called "Binding". Look at the screenshot, it shows where this function is located. It causes objects to automatically “stick” to supporting elements and canvas borders.

   

7. Next we need to select the resulting figure. To do this, hold down the key CTRL and click on the thumbnail of the layer with the rectangle.

   

8. As you can see, a selection has formed around the figure. Now go to the copy layer, and remove visibility from the layer with the shape (see screenshot).

   

9. The waterfall layer is now active and ready for editing. Editing consists of removing unnecessary things from the corners of the picture. Inverting selection using hotkeys CTRL+SHIFT+I. Now the selection remains only on the corners.

   

I have been looking for a long time for how to round the corners using Adobe Photoshop, but everything is left out somewhere, or it is written incorrectly. As it turns out, rounding the corners of any picture will take no more than 30 seconds, naturally after you learn how to do it.

And so, in order to perform such a simple operation, you need to launch the application and drop the image we need inside the program, or use Menu->File->Open->Required picture.jpg. I will use a regular image of nature.

Pay attention to the lower right corner, a background image has appeared in “Layers”, it must be converted to a layer. To do this, right-click on the background and select “Layer from background”.

As a result of this action, our background will be converted into a layer.

Create a duplicate of the image by right-clicking on Layer 0 and selecting “Create a duplicate layer.”

Figure2

Hide "Layer 0" from the work area. To hide a layer, click the EYES icon next to the layer name.

Select the desired part of the image.

Once you have marked the desired part of the image with a rectangle, right-click inside the selection and select “Create selected area”.

In the dialog box, click the OK button, but don’t touch the feathering.

A very important point! Select Layer 0 (Copy), then press the DELETE button on the keyboard. Layer 0 (copy) should be selected with a regular mouse click.

If everything is done correctly, in Photoshop you will see something like this. Now you can save the image, for example in png format, and enjoy the work of art.

There is one more point: if the cut out piece is two or even 3 times smaller than the original image, it will have a large empty area, which must be removed. To do this, select the cutting tool and select the area of ​​the image without the empty area.

Then go to the Edit->Copy menu.

Go to the File->New menu and just click OK. The program will automatically adjust the width and height of the canvas of the selected area of ​​the image.

In the new project “Unnamed 1”, and we will automatically find ourselves in it, go to the Edit->Insert menu.

The best way to save a picture is to use the “Save for Web” option. Firstly, you can manually select the image quality as a percentage, and secondly, the image size will be several times smaller than if saved in the usual way.

And what did we get as a result?

For those who don’t understand how I managed to round the corners, I specially recorded a video that will help you with this simple task.

In this quick tutorial, I'll show you how you can create rounded corners in Photoshop using simple masking techniques and filters.

You can adjust the corner radius to round the edge of your shape, text, etc. This is a quick and easy method that will create rounded corners. To create them you can use a layer mask.

Using a series of simple steps in Photoshop, you can create a rounded rectangle. Photoshop doesn't have a filter or any tool to make a round corner right away, but you can do it using Illustrator. It will allow you to create a rounded corner effect for almost every object. In it you need to go to the menu Effects > Stylization > Rounded Corners(Effects > Stylize > Rounded Corners).

Step 1

In this quick tutorial, I'll show you a simple method to create rounded corners in Photoshop using rasterized text, a shape, or an image. Let's take a vector image of a star with sharp corners (this method will also work well with right angles).

Step 2

Now you need to rasterize the layer. To do this, right-click on the star layer thumbnail in the layers palette and select from the context menu Rasterize layer(Rasterize Layer). You should do the same if you are using a text layer.

Step 3

Go to menu Filter > Blur(Filter > Blur) and select Gaussian Blur(Gaussian Blur). The blur radius will depend on the size of your image and the result you would like to achieve. I'll choose a radius of 5 pixels.

Step 4

Hold down the Ctrl key and click on the layer thumbnail to activate image selection. Next we go to the menu Selection and choose Refine edge(Select > Refine Edge). You can experiment with the parameters Antialiasing(Smooth) and Shading(Feather) to select the desired effect. Contrast(Contrast) make it 100.

Step 5

Take the color of the shape, in our case it is yellow and fill the entire selection with this color. You can do this by pressing the key combination “Shift + F5”.

Step 6

Without removing the selection, you must add a layer mask by clicking on the icon that is located at the bottom of the layers palette. That's all, now the star has rounded corners.

You can use the same method to create text with rounded corners as shown in the image below. Now you can come up with your own font.

Everyone has long been tired of traditional rectangular corners in website design. Rounded corners are in fashion, which are made not using images, but through styles, for which the border-radius property is used. This property can have one, two, three or four values ​​separated by a space, which determine the radius of all corners or each individually.

In table 1 shows a different number of values ​​and the type of block that is obtained in this case.

Code	Description	View
div ( border-radius: 10px; )	Rounding radius for all corners at once.
div ( border-radius: 0 10px; )	The first value sets the radius of the top left and bottom right corners, the second value sets the radius for the top right and bottom left.
div ( border-radius: 20px 10px 0; )	The first value sets the radius of the upper left corner, the second - both the upper right and lower left, and the third value - the lower right.
div ( border-radius: 20px 10px 5px 0; )	Sequentially sets the radius of the upper left, upper right, lower right and lower left corners.

Example 1 shows how to create a block with rounded corners.

Example 1. Corners of a block

HTML5 CSS3 IE 9+ Cr Op Sa Fx

The result of this example is shown in Fig. 1.

Rice. 1. Block with rounded corners

An interesting effect can be obtained if you set the rounding radius to be greater than half the height and width of the element. In this case, you will get a circle. Example 2 shows how to create a round button with a picture.

Example 2: Round button

HTML5 CSS3 IE 9+ Cr Op Sa Fx

The result of this example is shown in Fig. 2.

Rice. 2. Round button

In the Opera browser, rounding to is applied incorrectly if a border is not specified via the border property.

The border-radius property can be combined with other properties, for example, adding a shadow to an element. In example 3, a set of circles is made, one of which is highlighted using box-shadow . This set can be used to navigate through pages or photos.

Example 3. Glow

HTML5 CSS3 IE 9+ Cr Op Sa Fx

The result of this example is shown in Fig. 3.

Rice. 3. Glow around the circle

Using border-radius you can make not only a circle, but also an ellipse, as well as an elliptical rounding for a block. To do this, you need to write not one value, but two, separated by a slash. Writing 20px/10px means that the horizontal radius of the fillet will be 20 pixels, and the vertical radius will be 10 pixels. Example 4 shows how to create elliptical corners to add a comic-book style caption to a photo.

Example 4: Ellipses

HTML5 CSS3 IE 9+ Cr Op Sa Fx

You are your own teacher

The result of this example is shown in Fig. 4.

Rice. 4. Using elliptical corners

You can also change the appearance of the corners on images by adding the border-radius property to the img selector, as shown in Example 5.

Example 5: Images

HTML5 CSS3 IE 9+ Cr Op Sa Fx