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.
At the completion of this exercise, you will be able to:
- apply layer effects such as drop shadow, glow, and bevel and emboss
- adjust the opacity of a layer or object
- adjust blending properties to create more advanced blending effects
- Using your graphics software, open the file that you created in the previous lesson (the file with the many layers of images)
- 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.
- 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.
- 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.
- 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.
- Once the banner image is completed, save it to your images
- 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.
Make sure that you have inserted your portfolio banner onto your portfolio
pages so that your instructor can check your work.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.