entranceRound edges in photoshop cs6. How to round corners of an image with CSS without Photoshop
The right angles of the images are loved by everyone. But still, there are times when these same corners need to be rounded. Then the Photoshop program will come to your aid again. In this article, we'll take a look at one of the many ways you can do this. Keep in mind, my method also involves a little clipping of the image around 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, which you can watch at the end of this tutorial. So let's start rounding the corners of the image:
Step 1
By default, all images opened in Photoshop become the background image. Photoshop names this layer as "Background" and also blocks it from unnecessary editing. This is signaled to us by a small lock 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 on OK. The lock should now be gone.
Step 5
In the layers panel, click on the very first layer with our original image and press the keyboard shortcut 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 where the image once was, a checkerboard background (transparency) will appear.
Step 7
Now let's make our shape layer invisible. To do this, in the layers panel, click on the eye icon opposite the layer with the square. Here is the original image with rounded corners.
Step 8
Run the command Image - so that Photoshop removes all the extra space around the image. As a result, the transparency mode should only be visible in the corners.
In the future, in order 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. An image with rounded corners will look like this:
And how to make only, for example, one rounded corner?
Very simple. Let's go back to the stage when we drew the shape. Stretch it so that you only see one rounded corner and the other three are hidden outside the canvas. Here, and then follow the instructions above. Everything is the same.
I hope the instructions helped you and you can do something cool! Good luck.
If you spot an error in the text, select it and press Ctrl + Enter. Thanks!
All modern browsers support HTML5 hypertext markup standards and CCS3 stylesheets. And if your site (template) supports modern standards, then you can make changes to the design, such as rounding of corners, shadows, gradient fill, without resorting to the help of graphic editors.
Webmasters commonly use rounded corners for blocks and frames on websites. In this article I will tell you how to round the corners of pictures and photos on the site without using third-party programs using CSS only.
In order for the examples given in the article to be displayed correctly on your screen, you must use the most fresh versions browsers, FireFox, Chrome and those based on them: Yandex Browser, Amigo and so on.
Rounding corners for 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:
Right angle block
Rounded corner block
Rounding off the corners of pictures
By analogy with the example above, you can round off the corners of images on the site, such as photographs. For clarity, we will round the corners for the photo from the page.
Here is the image without CSS processing
Now with rounded corners:
Border-radius: 10px;
To make it completely "beautiful", from the beginning we will add edging ...
Border-radius: 10px; border: 5px #ccc solid;
and then shadows:
Border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px # 444;
Option below ( rounded corners with shadow without border) is 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 corners, shadows, and so on are just the result of processing CSS styles with your browser.
Small lyrical digression
Style border increases the size of the image by the amount of the border. If value is specified border: 5px, then the final image will be wider and taller by 10 pixels. Consider this, in some cases the layout of the site may "go".
A style box-shadow does not affect the size of the picture, the shadow seems to run over the neighboring elements. When using it, the layout of the site does not suffer.
How to round the corners of images in WordPress
In all the examples above, I wrote the styles directly in the tags html code... For example, the latter looks like this:
This is good when you need to redesign one picture or photo. What if you want to change everything? Well, you will not climb all over your site to edit the display of each. In most cases WordPress tag IMG defines several classes of styles. One by the unique file name with the image, the other by size, and also by alignment. You can supplement one of them with the above parameters.
For example, for all images for which no alignment is specified, in the file style.css your WordPress themes write the following:
Alignnone (border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px # 444;)
Either the hardest method for all the picture on the site. Override the style for all tags IMG:
Img (border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px # 444;)
The latter option is suitable not only for WordPress, but for any CMS. And even for a 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 display options of the tag IMG you change appearance ALL pictures on the site!
Instead of a conclusion
All examples in this article are conditional and are intended only to demonstrate some of the possibilities of CSS for image processing and to show how simple it is.
Good morning, afternoon, evening or night, everyone. Dmitry Kostin is with you again and again. Once I looked through different pictures and then I liked some of them. And he liked the fact that they had rounded edges. It looks somehow more interesting right away. Don't you think? And so 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 down to our photoshop.
Simple anti-aliasing
Anti-aliasing 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
Here is the third method is already radically different from the previous two. So take a break for a couple of seconds and move on. I will not change the image and will load this car into Photoshop again.
Do you see what you did in the end? The picture has become with rounded edges, and all due to the fact that it is displayed only in the way where our drawn rounded rectangle is. But now you can crop the extra photo using the "Frame" tool, or save the picture right away 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 study it in the shortest possible time, then I highly recommend that you look at one wonderful course on photoshop for beginners... The course is excellently done, everything is told and shown just fine, and each material is analyzed in great detail.
Well, for today I'm finishing my lesson. Don't forget to subscribe to new articles and share it with your friends. I was glad to see you on my blog. I look forward to seeing you again. Bye Bye.
Best regards, Dmitry Kostin
In this quick tutorial, I'll show you how you can create rounded corners in Photoshop using simple methods masking and filters.
You will be able to adjust the corner radius to round off the edge of your shape, text, etc. This is a quick and easy method to create rounded corners. You can use a Layer Mask to create them.
Using the series simple steps in Photoshop, you can make a rounded rectangle. Photoshop doesn't have a filter or tool to make a round corner right away, but you can do it with 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> Stylize> Rounded Corners(Effects> Stylize> Rounded Corners).
Step 1
In this quick tutorial, I'll show you a simple method to get rounded corners in Photoshop using rasterized text, shape, or some kind of image. Take a vector image of a star with sharp corners (this method will work well with right angles as well).
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 choose Rasterize layer(Rasterize Layer). You must do the same if you are using a text layer.
Step 3
Go to the menu Filter> Blur(Filter> Blur) and select Gaussian blur(Gaussian Blur). The radius of the blur will depend on the size of your image and the result you would like to get. I'll choose a 5px radius.
Step 4
Hold down the "Ctrl" key and click on the layer thumbnail to activate the selection of the image. Next, go to the menu Highlighting and choose Refine edge(Select> Refine Edge). You can experiment with the parameters Anti-aliasing(Smooth) and Feathering(Feather) to select the desired effect. Contrast(Contrast) make 100.
Step 5
Take the color of the shape, in our case it is yellow and fill the entire selection with that color. You can do this by pressing the key combination "Shift + F5".
Step 6
Without deselecting, you must add a layer mask by clicking on the icon located at the bottom of the layers palette. That's it, 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.
In this section of my site, I decided to place Photoshop lessons, which can be useful to you when creating a website design. I think it will not be superfluous, on my part, before starting learning Photoshop, to introduce you hotkeys photoshop... Using hotkeys photoshop, you will make your job easier and save time. ...
My first Photoshop tutorial will tell you how round corners Photo.
When making sites, you often have to face the problem of how to round the corners of the picture, or how round corners Photo. In this tutorial Photoshop i will teach you how round corners figure in photoshop... Also this Photoshop lesson will allow you round corners photos. I hope this is clear to you. After all, for Photoshop both picture and photography are all one. I use Adobe in my work Photoshop SC5, Russian version. Well, I'm not strong in languages.
My today's lesson is about rounding the corners of a photo in Photoshop. Let's take a photo together with rounded corners like mine.
1. To implement rounding corners in Photoshop, open with Photoshop the picture (photo) we need. For example, I took one of the photos from my photo archive.
2. We bring the dimensions of the picture 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 just crop the picture to the desired size.
3. Select the picture (CTRL + A) (a dotted line will appear around the perimeter) and copy it (CTRL + C); We copy the photo so that the original image remains unchanged, after we implement rounding corners in Photoshop... Although it is possible to 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 desired image size and click "OK". Please note that I have set the background to "transparent". You can immediately set the background of the color you require;
5. Paste the copied picture into a new window (CTRL + V) and create new layer(CTRL + SHIFT + N). In this layer, using the rectangle tool rounded corners"draw a rectangle of the required size. The color of the rectangle does not matter. The choice of the tool is made by pressing the right mouse button. Or by simply pressing the key (U). Set the radius of the round at your 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. Do not forget to activate the "move" on the toolbar (top button). You can also resize figures. To do this, press (CTRL + T) and drag the shape to the desired size using the mouse while holding the left key. If you want to resize with the same proportions, you need to hold SHIFT and drag around the corner of the shape.
6. Go to the layers panel. Hold down CTRL and left-click on the preview (picture) of the rectangle layer. A dashed outline of the shape appears.
7. Go to the bottom layer. To do this, in the layers panel, click to the right of the picture. In our case - layer 1. The blue selection 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 outside of our rectangle that has rounded corners.
9. Press DEL on the keyboard. The part of the image that is outside the rectangle will be removed.
10. Activate the rectangle layer again. We delete it by clicking on the trash can icon.
11. Press the "M" key and left-click anywhere on the image. The selection has been removed. ready. You can save the image that we got by performing & rounding corners in Photoshop, in the format we need.
If such an image will be used to create a site design, save it for Web and devices (ALT + SHIFT + CTRL + S).
12. Attention! If you have at the edges of the image with rounded corners there are transparent pixels, you need to trim. 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 image size, and any extra transparent pixels will be removed.
The Photoshop lesson can be used for both oval and curly photographs. To do this, in step 5, instead of the "rectangle with rounded corners"select the tool" ellipse "," polygon "or" arbitrary shape. " rounding corners.