Lesson 2: Layer Effects and Blending

Overview

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 1 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.

Activities

Part 1:  Practice Collage

  1. First, read Basic Image Manipulation to learn about some of the basic ways to manipulate images in your graphics program.
  2. Next, 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.
  3. Open the file that you created in lesson 1 (the file with the many layers of images).
  4. Use the images from the selection practice and manipulate them to create a collage. Try using some of the basic image manipulation techniques to resize the images. Adjust the layer order to change the way the images move to the front and which are positioned to the back. Play with layer effects such as opacity to blend the images together. 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. The image below is one example of a collage made from the selection practice images.
    Sample collage

Part 2: Create a Web Banner

  1. Now that you've had some practice combining images in your practice collage, it's time to create a web banner for your class portfolio. In Unit 3 you learned about page layout with CSS. In that lesson, you applied a hybrid fixed/fluid layout to your page with a minimum width of 720 pixels. You did that because you knew in a future lesson you would be creating a banner image that is 720 pixels wide. Well, that future lesson has arrived! Create a banner that is 720 pixels wide. Your banner's height is up to you, but keep in mind that if a banner is too tall, some users will have to scroll down to see the main content, and some users won't do that. Also, the larger an image is, the longer it takes to download, so it's important to use graphics efficiently. That said, it's also important for you to have plenty of canvas on which to practice your graphics skills, so try to find a balance between all these competing needs. You can always resize your image later if your initial height proves to be too short or too tall.
  2. Once your banner image is completed, save it to your images subfolder.
  3. Now, add the banner image to the home page (index.html) of your portfolio using an <img> element. In order to be visible on the web page, recall that the image needs to be inside the <body> element. Depending on your design, it might look best either immediately above or immediately below the main <H1> heading. Try it in both locations, and see which location you like best.
  4. Remember to include an alt attribute containing alternate text (a short description) for people who are unable to see the banner.
  5. After you've placed the banner in a location that you like on your site's home page and are satisfied with the results, use the same code to add the banner to the top of all other pages on your site.

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. When finished, proceed to the next lesson.