Return to Home Page

Unit 3 - Working with Layers

original image

This original image is a .Gif file. File size: 33K.

This is the original image I started with. It contained 4 layers in the following order from the top down:cactus, house, sky, and plain white background. The position (or stacking order) of layers is important in regards to how it will effect other layers.

The images below are examples of what you can do with an image when working with layers in Photoshop. The possibilities are endless. These samples don't even begin to explore all that can be done.

When working in Photoshop to create Web graphics, you use the option "Save for the Web". This is the area that allows you to chose file formats and settings. I got the best results saving the files as .jpg rather than .Gif Not only did they look better, but the files sizes were smaller also.


.jpg file with yellow overlay layer
.jpg medium quality with purple color layer
I added a new layer in overlay mode and colored it yellow. I set the opacity to 47%, and dragged it to the top. I made the cactus smaller to show more of the house. I decreased the opacity of the sky layer to 67%. I saved it as a low quality .jpg. File size: 9.76K.
I deleted the background layer. I added a new layer above the sky layer. I changed it to color mode and applied purple. I reduced the opacity to 52%. I saved for the Web as a .jpg at medium quality. File size: 15K

.jpg at 44%
orange color layer
I stretched the sky layer and raised the house layer. I reduced the opacity of the sky layer to 50%. This one is saved as .jpg at 44% quality. File size: 20.5K.
I added an orange layer in color mode, set to 28% opacity. I dragged the layer to the top of the stack to cast the burnt orange color over all the other layers. This one is saved as a low quality .jpg File size: 9.45
return to portfolio home page
Unit 1
Unit 2
Unit 3
Unit 4
Unit 5
Unit 6
Unit 7
Unit 8
Unit 9
Unit 10