The Photoshop Guru's Handbook - The Guru Studio: Session 9

*Session 9*	Transparency for the Web "Now you see it, now you don't!"
Supplies for this Session: Nothing but good ol' Photoshop needed for this one folks.

Preface
I have been getting a lot of letters lately concerning transparency for web graphics, using Photoshop. So even though i feel there is already plenty of information out on the internet about this subject, i am going to add my two cents worth here in this Session. It won't be a long Session since this subject is not all that hard to grasp, but hopefully it will help add something to the vast amounts of tutorials currently avaliable for those who have web sites, and would like to learn how to do this.
We won't go through the normal type of introduction i usually have, instead, let's just jump right in shall we?

ALSO: if you feel the need to print this material out you have my permission. But please do not redistribute it.
Thanx Much.

With all that said, I hope you enjoy this session.

1) What's a rabbit to do?...

The Mechanics:

Ok then, to start off with we'll talk about why we need the ability to make specific areas of our web graphics transparent.
If you've ever done a web page before, you might have come across certain situations where you would have liked to have been able to create a picture that did not have four corners and a background colour that runs all the way to the edges. This would be one situation where you would like to use the transparency feature of Photoshop's Gif89a plugin filter.

Anyone using PS 4/5 will have this filter. It comes as a standard feature and is located under the Filter Menu, within the Export submenu. People using Photoshop 3 can get this as a plugin from any of the many plugin sites on the web. And it's free too by-the-way.
(Hey! Who says you can't get something for nothing these days right?)

Let's imagine that you have a web page, and you'd like to put a textured or coloured background on the page. Now one way you could save your image when using a solid coloured background would be to simply fill in the background of your image with the same colour, right? Well, yes, you could do that i suppose. But as my own web experience has taught me, this is not as good an idea as it sounds. The main reason is because the graphic formats we currently have to choose from for web images only allows us to save our graphics as either a Jpg (or Jpeg) or Compuserve Gif.

Example 1

Both of these formats have their own pros and cons about them. One that i've noticed about both formats though is that when you try to optimize your images for the web, to make download times faster for your visitors, they will tend to darken your original image's tonal (or gamma) qualities; usually by removing certain lighter pixels within an image. So that means that if you are using the same medium brown colour for your image and web page, the brown in your image will tend to darken a bit when you save it. Take a look at Ex 1. And when you put that image on your web page you'll quickly notice that the brown background of your image stands out like a sore thumb, instead of blending in and hiding itself like you hoped it would. That's where transparency can help.

Next Page...

to the Top