The Photoshop Guru's Handbook - HOME
Session 10
Session Header Image
MORE Transparency
for the Web

"Da Fuzz Buster!"
(Part 2 of Session 9)
Page 1 / Page 2
Supplies for this Session:
Nothing but good ol' Photoshop needed for this one folks.

Preface
Greetings people of the world!
This Session is the last one in this series.

In this Session we'll be covering how to fix "the fuzzies" that we ended up with in the Gif file we saw in Session 9. When we ended, we had made a transparent area within our gif image, but had that ever so lovely (not!) fuzzy edge around the cirlce part of our image. This Session will deal with how to get rid of that, as well as what i consider to be a "cleaner" way to create transparent gifs, that can be put against any kind of background you wish.

Let's get started 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.
 

What's a rabbit to do?...

The Mechanics: a review

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.
.

image with fuzzy edgesOk so let's have another look at the image we finished with at the end of Session 9. Take a look at it here. Notice the fuzzy border around the circlular part? That's what we want to get rid of in this Session.
1)

"Like a bad-hair day!"

The Problem:

image / no transparencyHere we have an image i created in Photoshop. It's a simple text image, with no transparency. I wanted you to see it here so that when i show you the version that *does* have transparency you'll be able to see what colour the fuzzy edges would be. Whatever colour your background is in your image will be the most prominent colour of your fuzzy edges. But this isn't always the case. That also depends on what colour the background is of your web page. This white background i'm using for my page will hide the outer-most edges of the fuzzy border on my transparent version of this image.

to the Top


Let's move on now to exporting our image and creating the transparent area.

((( Turn to Page 2 )))

HR
"The Photoshop Guru's Handbook"  and all contents of this site
are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved.
HR