Lesson 3: Layer Effects and Blending


In this lesson, you will learn about layer effects such as drop shadow, glow, and bevel and emboss. You will also learn how to adjust the opacity of an image or layer, and will apply layer blending properties. The images you created from Lesson 2 will be used to create a practice collage-style web banner.

The final project for this module will be to create a personalized web banner for your web portfolio. You will add this image to the top of each of your portfolio web pages.

Learner Outcomes

At the completion of this exercise, you will be able to:

  1. apply layer effects such as drop shadow, glow, and bevel and emboss
  2. adjust the opacity of a layer or object
  3. adjust blending properties to create more advanced blending effects


  1. Using your graphics software, open the file that you created in the previous lesson (the file with the many layers of images)
  2. Now, create a new project with a canvas size of 600 pixels wide by 100 pixels in height. Next, copy over all of the layers from the Lesson 2 file to the new project.
  3. Read Layer Effects and Blending, to develop an understanding of how the concept of layers effects work. Then, the instructor will demonstrate how to apply layer effects, adjust opacity and adjust blending properties in the particular software product being used by the class.
  4. Create a practice web banner using the images from the previous lessons (a sample banner is shown below). The banner should include text for a title, multiple images, and utilize the layer effects and blending properties. Experiment with different effects and blending properties to get a sense of what each one does. This is just a practice activity so have fun with it and don't be afraid to try different ideas. In the next activity, you will use your own images to create a banner that will be used for your portfolio.

    sample web banner

  5. Now that you've had some practice creating a banner, it's time to create a web banner for your class portfolio. Similar to the practice banner, the portfolio banner should include a text title, multiple images or shapes, and a demonstration of layer effects and blending. Make sure that the width of the banner is the same as the width of your portfolio pages. You may acquire whatever images you choose so long as they comply with copyright laws. When creating your web banner, make sure to consider the elements that make good design as discussed in Unit 1.
  6. Once the banner image is completed, save it to your images subfolder.
  7. Now, insert code into each of the web pages in your portfolio root folder so that your banner displays at the top of each page. Remember to include an alt attribute with a text version for those who are unable to see the image.

Resources/Online Documents

All done?

Make sure that you have inserted your portfolio banner onto your portfolio pages so that your instructor can check your work.