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 from 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.
- Open the photo in Photoshop that you are going to edit.
- Then create a copy of the waterfall layer called "Background". To save time, use hotkeys CTRL+J. The copy is created in order to leave the original image intact. If (suddenly) something goes wrong, you can delete the failed layers and start over.
- Go ahead. 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.
- Next, draw a rectangle of any size on the canvas (we will scale it later).
- Now you need to stretch the resulting figure across the entire canvas. Calling the function « Free transformation»
hotkeys CTRL+T. A frame will appear on the shape, which you can use to move, rotate, and resize the object.
- 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 located. It causes objects to automatically “stick” to supporting elements and canvas borders.
- 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.
- 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).
- 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.
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 around the perimeter will appear) 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 arrow keys on the keyboard or using the mouse while holding down 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 the desired size 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. The blue highlight 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.
The 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.
Everyone likes right angles in images. But still, there are times when these same corners need to be rounded. Then help you again the program will come photoshop In this article we will look at one of the many ways how this can be done. Keep in mind that my method also involves cutting off the image a little at the edges, this is a kind of sacrifice in the name of rounded corners.
For those who like more clarity, I recorded a video tutorial that can be watched at the end of this lesson. So, let's start rounding the corners of the image:
Step 1
By default, all images opened in Photoshop become background image. Photoshop names this layer as “Background” and also blocks it from unnecessary editing. This is indicated to us by a small padlock icon.
To unlock such a layer, you need to double-click on it. The New Layer dialog box appears. Don't change anything, just click OK. The lock should now disappear.
Step 5
In the layers panel, click on the very first layer with our original image and press the key combination Ctrl+Shift+I. As a result, we should select the entire area outside the boundaries of our square. It is called . Take a closer look at what has changed:
Step 6
Now press the key combination Ctrl+X (edit - cut) to delete the selected area. The selection should disappear and a checkerboard background (transparency) will appear where the image once was.
Step 7
Now let's make our shape layer invisible. To do this, in the layers panel, click on the eye icon opposite the square layer. Here is the original image with rounded corners.
Step 8
Run the command Image - to have Photoshop remove all the extra space around the image. As a result, the transparency mode should be visible only in the corners.
In the future, to use such an image, it must be saved in PNG format! In this case, the corners will remain transparent. Otherwise, if you save, for example, in JPG format, the corners will automatically become with a white background.
So, everything is ready. The image with rounded corners will look like this:
How to make only, for example, one rounded corner?
Very simple. Let's go back to the stage when we drew the figure. Stretch it so that only one rounded corner is visible to you, and the other three are hidden outside the canvas. Here, then follow the instructions described above. Everything is the same.
I hope the instructions helped you and you can make something cool! Good luck.
If you notice an error in the text, select it and press Ctrl + Enter. Thank you!
note that CSS styles for a given figure are entered into the file once, and the HTML tag can be placed on the site an unlimited number of times.
As a result of the output we get the following rectangle with frame.
How to Make Rounded Corners in CSS
The attribute is used to round corners border-radius.
We could add just this attribute. It normally displays the rounding result in new versions of browsers, but many users still have older versions where this attribute does not work correctly. Therefore, for compatibility, we will add a few more descriptions of this attribute, tied directly to certain browsers, to our block in the Style.css file, resulting in the following code:
The HTML div tag will give us rectangle in a frame with a roundedand corners:
and the HTML tag for displaying the text will look like this:
|
pib9.ru
|
We get rounded rectangle and text: 
If you remove the rectangle size description attributes from the code width And height, then you can get the following shapes with rounded corners:
1. No text
In this case, the forms take on the dimensions of the environment: the length corresponds to the width of the field, and the height changes as the form is filled with content.
Round selected corners
In the style description, the 10px parameter in the attribute border-radius shows the radius of curvature, which can be changed by selecting the one you need. If set to 0, rounding will not occur. This property can be used when you need to round selected corners.
Let's write down the values of the rounding radius for each corner, indicating zeros where we cancel the rounding. For example, let's cancel the rounding in the third and fourth corners. Our code will look like this:
1. Upper left corner.
2. Upper right corner.
3. Bottom right corner.
4. Lower left corner.
This results in a rectangle with selected curves only in the upper corners.
Angles are counted clockwise, starting from the upper left corner: 
2. Rounding corners using HTML code without writing to a style file
Consider the second method of obtaining a rectangle with rounded corners with using HTML code without writing to a style file.
HTML rounded corners
There is one small feature that simplifies the whole process even more - this HTML rounded corners. It consists in generating HTML code, which contains the same styles as in the CSS codes. This uses the same attributes as in the CSS block and eliminates the need to write the block to the Style.css file. In a word, we completely replace the CSS code with HTML code.
Instead of our CSS block, we get an HTML script, which we insert into the place where the rectangle with rounded corners should appear:
The first method of rounding corners can be used when the same shape is used more than once without changing styles. The second method is used for forms whose styles are used once.
3. Pictures with rounded corners. Frame around HTML image
I also want to give you useful information. Often using pictures for website design, I really want to make them even more beautiful by changing their shape, framing them with a frame of a beautiful color and different widths. This raises the question: “ How to round the corners of a picture?”.
This is done very simply, and now we will learn how to do it.
Let's place the image on the site, making it its own background as the background of the div tag. We get the following code and image:
Rounding the corners of the picture by adding a frame
Rounding the corners of images in CSS and HTML and adding a border can be done in one of the two ways described above.
Using the first method in this article, the image codes for the style file and div tag HTML code will look like this:
Please note that some attributes can be entered into the style file, and some into the div tag. In our case, the image dimensions width and height are inserted into the HTML code.
The HTML code of the second method, without using the style file described in this article, looks like this:
As a result of the codes of each of the two methods, we get the same result - a picture with rounded corners:
Good morning, afternoon, evening or night everyone. Dmitry Kostin is with you again and again. Somehow I was looking through different pictures and then I liked some of them. And they liked them because they had rounded edges. It immediately looks more interesting. Don't you think so? And that’s why in today’s lesson I would like to tell you how to round corners in Photoshop to make the photo look more interesting.
What I love about Photoshop is that in many cases the same thing can be done in several ways. So it is here. Let's get started with our photoshop.
Simple smoothing
Smoothing Using Borders
This method is similar to the previous one, but still very different. We will do everything with the same image.
By creating a shape
The third method is already radically different from the previous two. So take a break for a couple of seconds and move on. I won’t change the image and will load this car into Photoshop again.
Do you see what you ended up with? The picture has rounded edges, and all because it is displayed only where our drawn rounded rectangle is. But now you can crop out the extra photo using the Frame tool, or you can immediately save the picture and you will already have a separate image with rounded corners.
Try to do everything yourself, and at the same time tell me which of the presented methods is more preferable to you.
And by the way, if you have gaps in Photoshop or you just want to fully learn it in the shortest possible time, then I highly recommend that you watch one great photoshop course for beginners. The course is well done, everything is told and shown just great, and each material is discussed in great detail.
Well, I’m finishing my lesson for today. Don't forget to subscribe for new articles and share this with your friends. I was glad to see you on my blog. I'm waiting for you again. Bye bye.
Best regards, Dmitry Kostin
