Photoshop Tutorial: Masking An Image For The Web

Masking is an easy way to make clean and professional-looking web images. Below, you will find a narrated video tutorial on how to mask an image and save it for the web. I have also included written step by step instructions.

How to Mask an Image in Photoshop

Written Instructions

1. In Photoshop, create a new image (File > New) with the parameters of your choice
2. Place the image that you want to mask on the canvas (File > Place...). To do so, browse to the image on your hard drive, select it, and click on the "Place" button.
3. As needed, position and transform the image on the canvas and press enter/return.
4. Add a vector mask by selecting the layer with the placed image and clicking on the "add a mask" button two times (located at the bottom of the layers panel).
5. Select your preferred masking shape (i.e. rounded rectangle) from the toolbar (located at the left side of the application).
6. Confirm that the "paths" button is selected on the option bar (located at the top of the application).
7. Draw your masking shape over the top of the image (click and drag). When you release the mouse button, only the image area within your mask will remain visible.

Update

I have created an additional tutorial that expands upon this one. It explains how to add a border to, reposition, and transform a mask.