How to round sharp corners in Photoshop. How to round the corners of an image using Photoshop
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 given different quantities 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
Result this example 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 Opera browser rounding to
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
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
In this short article we will look at an example of creating a “thin” frame 1 - 2 pixels thick in Photoshop with rounded edges . These frames (and their fragments) are widely used by designers and webmasters when creating layouts and creating templates for websites. Used to frame articles, menus, buttons, etc.
So let's get started:
1. Let's create new document(Top menu "File" - "New") with dimensions, for example, 500 by 500 pixels. Background content: transparent.
2. Go to the Toolbar (located on the left), select the “Rectangular Marquee” tool (M). On our document we draw a rectangular area. Options for the "Rectangular Area" tool: "New Selection", "Feather: 0 px.", "Style: Normal" (Fig. 1).
3. B top menu select the tab "Selection" - "Modification" - "Optimize" (Fig. 2). Let's take the radius value, for example, equal to 20 pixels. Click "Yes". We see that the corners of our selected rectangle have been rounded by the selected value (20 pixels) (Fig. 3).
4. In the top menu, select "Edit" - "Stroke". Set the stroke parameters. Width: 2 px. (for clarity). Let's take some red color. In the same tab, set: “Position relative to the border: center (you can select the values “inside” and “outside”)”, “Overlay: Mode normal”, “Opacity: 100%”, “Save transparency: empty”. Click the "Yes" button (Fig. 4). We remove the selection using the keyboard shortcut “Ctrl + D” and get the frame we need, 2 pixels thick in red with rounded edges (Fig. 5). Now its fragments or the entire frame can be used to design any template, banner, etc.
 |
 |
| Rice. 1 | Rice. 2 |
 |
 |
| Rice. 3 | Rice. 4 |
 |
 |
| Rice. 5 | Rice. 6 |
For example, and for better visualization, I created new layer filled with white, moved it below the layer with our frame and created several more similar frames with blurred thickness, colors and rounded corners (Fig. 6).
In this section of my site I decided to place photoshop lessons, which may be useful to you when creating a website design. I think it would not be superfluous, on my part, before starting to learn Photoshop, to introduce you Photoshop hotkeys. Using Photoshop hotkeys, you will make your work easier and save time. .
My first Photoshop lesson will tell you how round the corners photo.
When creating websites, you often have to deal with the problem of how to round the corners of a picture, or how to round the corners photo. In this lesson Photoshop I'll teach you how round the corners drawing in photoshop. Also this one Photoshop lesson will allow you round the corners photos. I hope this is clear to you. After all, for Photoshop both the picture and the photograph are all the same. In my work I use Adobe Photoshop SC5, Russian version. Well, I'm not good at languages.
Today's lesson is about rounding the corners of a photo in Photoshop. Let's take a photo together with rounded corners like in my picture.
1. To implement rounding corners in Photoshop, open with Photoshop the picture (photo) we need. As an example, I took one of the photographs from my photo archive.
2. We bring the dimensions of the drawing to the parameters we need. To do this, press ALT+CTRL+I. The Image Size window opens. We set the dimensions we need. You can simply crop the image to the desired size.
3. Select the picture (CTRL+A) (a dotted line along the perimeter) and copy it (CTRL+C); We copy the photo so that the original image remains unchanged after we complete the rounding corners in Photoshop. Although we can work on the original, when the rounded corners are ready, we will simply save the photo as another image.
4. Open a new window (CTRL+N), set the required image dimensions and click “OK”. Please note that I set the background to “transparent”. You can immediately set the background to the color you require;
5. Paste the copied image into a new window (CTRL+V) and create a new layer (CTRL+SHIFT+N). In This Layer, use the Rectangle Tool rounded corners"Draw a rectangle of the required size. The color of the rectangle does not matter. The tool is selected by clicking on the right mouse button. Or by simply pressing the key (U). We set the radius of curvature at our discretion (see the figure below);
If necessary, you can move the drawn shape using the arrows on the keyboard or using the mouse while holding down the left key. First, do not forget to activate “move” on the toolbar ( top button). You can also resize figures. To do this, press (CTRL+T) and stretch the shape to required sizes using the mouse while holding down the left key. If you want to change the size while maintaining the proportions, you need to hold SHIFT and drag by the corner of the shape.
6. Go to the layers panel. While holding CTRL, left-click on the preview (picture) of the rectangle layer. A dotted outline of the shape appears.
7. Move on to the bottom layer. To do this, click on the right side of the image in the layers panel. In our case - layer 1. Selection blue will go to layer 1.
8. Press CTRL+ SHIFT+I. A dotted selection will appear along the border of that part of the picture that is located outside our rectangle having rounded corners.
9. Press DEL on the keyboard. The part of the image that is outside the rectangle will be deleted.
10. Reactivate the rectangle layer. Delete it by clicking on the trash can icon.
11. Press the "M" key and left-click anywhere in the image. The selection has been removed. ready. You can save the image that we received by rounding corners in Photoshop, in the format we need.
If such an image will be used to create a website design, save it for Web and devices (ALT+SHIFT+CTRL+S).
12. Attention! If you have images around the edges with rounded corners There are still transparent pixels, you need to perform trimming. To do this, click “Image”, select “Trimming”, in the window that appears, set the settings as in my picture and click “Ok”. The canvas will be resized to the size of the image and any extra transparent pixels will be removed.
Given photoshop lesson can be used for both oval and shaped photographs. To do this, in step 5, instead of the "rectangle with rounded corners" select the "ellipse", "polygon" or " tool any figure". Then we perform all the same actions that we did to get rounding corners.
I've been looking for a long time how to round corners using Adobe Photoshop, but everywhere somewhere they do not add it, 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 with work area"Layer 0". 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.
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 make rounded corners in Photoshop using simple methods masking 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 simple steps in Photoshop, you can make a rectangle with rounded corners. Photoshop doesn't have a filter or any tool to immediately make round corner but you can do it with 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 lesson I'll show you a simple method that will allow you to create rounded corners in Photoshop using rasterized text, a shape, or some image. Let's take vector image stars with sharp angles (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 in context menu select 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 pick up 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.