Learn how to create rounded corners on an image using Layer Mask.

This tutorial shows you a quick and simple method to apply rounded corners to an image. This method is useful in web design for making rounded buttons for web-page navigation and for better presentation of images on a web site. We create a transparent background layer and cut out an inverted rounded rectangle from the top layer to reveal the transparency beneath.

Final Effect

Load Image and Create Duplicate Layer

• Load your image file in photoshop
• Double click the background layer on the Layers panel on the right hand side. A pop-up window will appear, click OK.
• Duplicate this layer by right-clicking and select Duplicate Layer, click OK on the pop-up.

Create Rounded Rectangle

• Select the top layer (Layer 0 copy).
• Go to the tools panel and select rounded rectangle.
• Select the 'paths' tool type and draw a rectangle from the top-right to the bottom-left of your picture.

Draw Rounded Rectangle and turn it into a Selection Path

• From the Paths Panel (next to the Layers and Channels tabs on the right) right-click on Work Path and choose Make Selection. Accept default settings.
• Press Alt-Shift i to invert the selection.
• Go back to the layers panel, from the drop down menu next to opacity make sure Normal is selected.

Create Layer Mask

• Click the Add Layer Mask button at the bottom of the layers panel (to the right of 'fx').
• You should now see the rounded edges with transparent checker grid underneath.

To save images with transparency for the web goto 'Save file for web & devices' from the Files menu. Choose a 24bit PNG file format (for high quality). For smaller files choose PNG-8 or GIF file formats. If you want a coloured background, fill the background layer with the desired colour and save as a JPG