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.

Using Photoshop masks for creating web graphics

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.

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

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.

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

Using Photoshop masks for creating web graphics

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.

10 thoughts on “Using Photoshop masks for creating web graphics”

  1. This is perfect. I was wondering how to do something like this. I had a basic grasp of masks, but all my attempts were coming out ugly. Thanks for the guide.

  2. Hi!
    I tried this but just got lost and result is not the expected one.
    The tutorial is not easy and friendly.
    Can you plz update this tutorial in much easier way with more process description?

    Thanks

  3. Hi Sachin.
    You see, since I am a PS users for a bunch of years, I don’t realize what seems to be the problem for you. Could you be more specific of the problem you encountered?
    Best,
    Emanuel

  4. Birgit It seem to me that you haven’t made the 2nd step in the first part of the article. You should make the exact copy of the layer that has the “drop shadow” on it and put in on top of the previous layer. Don’t forget to delete the shadow from the top layer. This way you are “masking a mask”.

    I hope this will be helpfull to you.

  5. thanks for the quick reply :)
    now I see, I was too sloppy…

    I like to use a different technique: put the layer in question in a separate folder and apply the mask to the folder. This way you don’t have to care for 2 layers if you change something :)

  6. You can always link the two layers so if you change the widths and height of one layer, it automatically changes the other as well.

    The point is that everyone has to figure it out for themselves what suites the best for them. You too :)

  7. I heard of using Photoshop masks for creating web graphicss are incredibly simple but very powerful. Thank you very much. I tried this tutorial using your tutorial method and now its working good.

Leave a Reply

Your email address will not be published. Required fields are marked *