How to make semicircular edges in Photoshop. How to round sharp corners in Photoshop
25.07.2016 27.01.2018
In this tutorial you will learn how to smooth out sharp corners of shapes in Photoshop.
First, let's create a shape. You can do this by selecting the Custom Shape Tool from the toolbar. Hotkey calling the submenu of tools for creating vector shapes- U.
There are two ways to make this tool active:
1. With clamped Shift key Click on a group of tools and a submenu will open to select the desired tool;
2. Long-clicking the left mouse button on a group of tools will also open a submenu.
Load all available shapes into Photoshop (click on the shape’s thumbnail in top panel and click on the “gear” on the right to open additional settings):
From the drop-down list, select a shape with sharp corners, for example, this star with 10 corners:
When creating a figure, do not forget to hold keyShift- this will help maintain proportions.
Now you need to rasterize the figure - Right-click on the layer with the shape - Rasterize Layer.
We select the radius depending on the size of the canvas and the desired result, I chose 6 pixels.
Now we need to load the selection of the layer with the shape, to do this, hold down keyCtrlclick on the layer thumbnail with a figure on Layers panel.
When the selection is active, press the button "Refine edge" (Refine Edge):
A settings menu will open in which we need the parameter Feather leave on 0 , and the parameter Contrast increase to maximum 100%. Parameter Smooth customize it to your taste, it will help round the corners of the figure. In the case of the 10-sided star, I set it to maximum, but you may have completely different settings.
In the parameter Output to... leave the default setting - allocation.
Press the Enter key to apply the settings. We create new layer and with the help Paint Bucket Tool or by going to the menu Editing-Fill fill the selection in the right color, For example, black, as in the original figure. Turn off the visibility of the original layer with the shape and get this shape with rounded corners:
That's all. In this tutorial we learned how to round corners of shapes in Photoshop. I hope the lesson was useful to you.
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 you can work on the original, but when rounded corners will be 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 right button mice. Or by simply pressing the key (U). We set the radius of curvature at our discretion (see 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 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. 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. rounding corners in Photoshop ready. You can save the image that we received by
, 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). rounded corners 12. Attention! If you have images around the edges with
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 rounded corners can be used for both oval and shaped photographs. To do this, in step 5, instead of the "rectangle with " select the "ellipse", "polygon" or " tool any figure ". Then we perform all the same actions that we did to get.
rounding corners 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
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: Normal mode”, “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 a 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).
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.
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 the extra photo using the "Frame" tool, or you can immediately save the picture and you will already have 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 explore it in as soon as possible, then I highly recommend 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
All modern browsers support standards hypertext markup HTML5 and CCS3 styling. And if your site (template) supports modern standards, then you can make changes to the design, such as rounding corners, shadows, gradient fill without resorting to graphic editors.
Webmasters use it everywhere rounded corners in blocks and frames on websites. In this article I will tell you how to round the corners of pictures and photographs on the site without using third party programs, only using CSS.
In order for the examples given in the article to be displayed correctly on your screen, you must use the most latest versions browsers, FireFox, Chrome and those made based on them: Yandex.Browser, Amigo and so on.
Rounding corners of DIV blocks
According to the CSS3 standard, so that the block DIV had rounded corners, it needs to be styled border-radius, for example like this:
Border-radius: 10px;
For clarity, let’s draw two blocks with straight and rounded corners:
Block with right angles
Block with rounded corners
Rounding corners of pictures
By analogy with the example above, you can round the corners of images on the site, for example photographs. For clarity, let's round the corners for the photo from the page
Here is the image without CSS processing
And now with rounded corners:
Border-radius: 10px;
To make it really “beautiful”, let’s add some edging from the beginning...
Border-radius: 10px; border: 5px #ccc solid;
and then the shadows:
Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;
The option below (rounded corners with shadow without border) looks very similar to a mouse pad:
Border-radius: 10px; box-shadow: 0 0 10px #444;
And finally, a complete mockery of the image
Border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;
If you open the image in a new window, you will see that it (the image) is unchanged, and all the corners, shadows, and so on are just the result of processing CSS styles by your browser.
A small lyrical digression
Style border increases the size of the image by the amount of the border. If a value is specified border: 5px, then the final image will become wider and taller by 10 pixels. Keep this in mind, in some cases the layout of the site may not work.
A style box-shadow does not affect the size of the picture, the shadow seems to run over neighboring elements. When using it, the site layout does not suffer.
How to Round the Corners of Images in WordPress
In all the examples above, I wrote styles directly in html tags code. For example, the last one looks like this:
This is good when you need to re-arrange one picture or photograph. What if you want to change everything? Well, you won’t climb all over your site to edit the display of each one. In most cases WordPress tag IMG defines several style classes. One by one unique name file with an image, different in size, and also aligned. You can supplement one of them with the above parameters.
For example, for all images for which alignment is not specified, in the file style.css yours WordPress themes write the following:
Alignnone ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Either the most hard method for everyone with a picture on the site. Let's redefine the style for all tags IMG:
Img ( border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; )
The last option is suitable not only for WordPress, but for any CMS. And even for simple HTML pages in the case when, when displaying images, the tag IMG no style classes are assigned. But be careful. If you override the tag display options IMG you will change appearance ALL the pictures on the site!
Instead of a conclusion
All examples in the article are conditional and are intended only to demonstrate some CSS features on image processing and show how simple it is.