Using Photoshop masks for creating web graphics

If you want to create a dropped shadow background than you could just add a drop shadow layer effect to a specific layer. But what happens when you would like to create a dropped shadow background that fades with the background itself. The easiest way is to use Photoshop “power”.

I am talking about Photoshop masks, and in this illustrated tutorial I will show you how to use masks to create faded shadowed background and also how to use masks when dealing with header images like in the example just bellow.

What is a mask?

Photoshop masks have nothing to do with a movie “The Mask“. Well, maybe a little. When you create a mask for your layer, you are telling to PS what is visible and what is not. Let’s say we want to create a shadowed background that fades with the background. What should we do? Follow the steps.

1. Use a Rectangular Marquee Tool to create a box and then fill it with a Paint Bucket Tool (black color).
2. To create the exact copy of the layer go to Layer > New > Layer via Copy (or just press CTRL + J). Invert the colors with CTRL + I.
3. Add a shadow to the first layer.
4. Now, we will add a mask. There are two ways of adding a mask. You could use the Layer > Add Layer Mask > Reveal All, but we will use the easier way like in the explanation below. Click on the Add layer mask button on the Layer toolbar, and you will create a mask. Nothing happened :) Well, you created a mask, but we didn’t tell PS what to do with it.
5. To “mask” something from the layer, you can use only black and white color spectrum. What you color with black is invisible, and what you color with white is visible. You can “paint” the mask with brush and pencil tools, or fill it with a Paint Bucket Tool. So, you can do pretty much the same things like in the layer itself. You should explore it.
6. To create a shadowed background that fades with the background of the browser window, we will first create a selection like in the picture (with the mask selected). Apply the feather to the selection, and fill it with black. Voila. You created your background. It’s not so hard.

Dealing with header images

To create a header with the images that we have in our collection, we will also use the masks. When dealing with many images, and you are not sure which one you will use, the masks come to help. Because it is easy to delete a mask, and create a new one, the masks are best suited for this job.

1. Before you start, define the area of the header, and select the images. (Be careful not to select to many images and take care of the width and height of the header area). You can fill the header area with color.
2. Copy the image and paste it into the header area (Hold CTRL + Left mouse click to the layer with the header area) with Edit > Paste Into (or just press SHIFT + CTRL + V). By using the Paste Into function of the PS, you created a mask.
3. Paste as many pictures as you want like explained in the previous step. Every picture will get its own layer with its own layer mask (if you used the selection method explained in the first step).
4. When you are done, select the mask of each layer and use the brush tool with a soft round to create fade the picture with the previous one.
5. Note: If you move the layer the mask moves with it. If you don’t want that to happen, just click the “link” icon located between the layer and the mask in the layer toolbar.

In this tutorial you have learned the basics for using PS masks for creating web graphics. You should explore the masks and use what you learned so far to expand your knowledge even more. Stay tuned for more tutorials.