Web Design & Development I

Lesson 3: Layer Basics

Overview:

In this lesson, you will learn about how layers work and then experiment
with adjusting the stacking order of layers in their project. You will also
be shown how to duplicate layers and then adjust layers so that they are visible
or hidden.

Learner Outcomes:

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

utilize layers to adjust the stacking order of objects

adjust layers so that they are visible or hidden

Activities

You will read Layer Basics, to develop
an understanding of how the concept of layers works. Then, the instructor
will demonstrate how to work with layers in the particular software product
being used by the class. You will experiment with layers by creating a new
layer in your button project, drawing an additional shape, and then manipulating
the stacking order of the layers to change which layer is on top.

The instructor will demonstrate how to duplicate a layer. You will then
duplicate the text layer on your button containing the button's title. The
instructor will demonstrate how to adjust the hide layers property in the
graphics software program. Next, hide the text layer that contained the
original title of the button and edit the text in the new layer to read
"Page 1." Repeat this process until you have created text for
"Page 2," "Page 3," and "Page 4."

Experiment with using layers to create more complex designs for your button.
Try adding multiple shapes or designs and then adjusting the stacking order
of the layers to create the desired effect. Below are examples of the simple
button we have been working on, and a more complex button that utilizes
multiple images on different layers.

Simple graphic button

Button
utilizing multiple images and layers

All done?

Remember to save your project. You will finish the button project in the next lesson.