• Site Plan
• Modularization Plan
• Style Guide
• Copyright
• Colophon
• Learning Report #1
• Learning Report #2
• Learning Report #3
• Learning Report #4
• Learning Report #5
• Learning Report #6
• Learning Report #7
• Learning Report #8

Learning Report #3

Transparent Background Image

This learning report I wanted to learn how to make an image that was transparent in some form.

What I Learned

I learned the hard way again about images and how difficult they are to work with. First with making the image transparent, I discovered that you need to use an image editing program. I happened to use Adobe Photoshop ©. With Photoshop, you can erase the background of an image and keep what you want.

Explanation/Examples

If you look to the right of the screen you will see my edited image. I placed the image using the CSS sheet that is on this page.

To Erase the Background of Your Image

1. Highlight the part of the image you want to use (use either the Magic Want Tool or Lasso Tool fond on the sidebar toolbar)
2. Choose Select > Inverse
3. Select the Background Eraser Tool and erase the background

Make the Image Transparent

In the Layers panel in the bottom right corner, enter a value in the Fill Opacity text box or drag the Fill Opacity pop‑up slider.