Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problemsaving .GIF used for web with fading and shadow effects

Status
Not open for further replies.

azzi2000

MIS
Jan 28, 2004
145
US
Using Photoshop 7.0:
I am farely new (Amateur) with photoshop 7.0. so excuse my ignorance.

I have a picture with fading effect along with transparency on the backgroud.
I would like to know
a) how to select around the border area a shadow
b) how to save the picture so it can be used on a web site with the fading effect blending in with the web site.
Please advice,
Thank you.
Dré
 
"how to select around the border area a shadow"

Well there are many ways to do this so you may want to try a few. Usually the picture itself will help in the decision making.

First you can try:

Select > Color Range > select[shadows] to see if you can capture the shadow area.

If you need the inverse, you can follow with:
Select > Inverse

If this don't work I (or someone else),can make other suggestions.

Sometimes posting the pic (if necessary) can help.
 
mscallisto:
Thanks for replying.
What I need to do is to select a picture using lasco or any other one. then around the border be able to use shadow.
Please advice,
Thank you.
Dré
 
azzi...

What you are attempting to do is going to be difficult. GIF images have a limited number of colors (256) and so they do not allow for graduated tones, or fading. What you get instead is a visible banding as the shadows would fade from dark to light, and usually the effect is not pretty. To add to this problem, the transparency will give you a hard edge, it will not look like it fades to the background color.

JPG's will allow for a nice drop shadow, nice fades and graduations, but unfortunately for the web, they do not support transparency.

PNG format is the best compromise for what you are trying, unfortunately it is not supported by most web browsers. IE supports PNG format in only the most rudimentary way, Mozilla does a better job, older versions of IE and Netscape don't, at all, nor does AOL's poor excuse of a web browser. Plus, for a novice, PNG might not be the easiest way for you to accomplish what you want.

Okay, so that out of the way, what would I recommend? I would recommend you use JPG format. Match the background color of the JPG image with the background color of your website. That way the fading effect will appear to fade into the website background when the image is placed.

I am not sure what you mean by shadow around the border area, but if you posted a pic as mscallisto says, it may help.


When in doubt, deny all terms and defnitions.
 
viol8ion:
Wow, you certainly explained it very well. I did not know the difference but you made it very clear. Thank you for the explanation.

As for the shadow: it is a normal rectangle picture with curved borders and a shadow drop down (like lights hitting from the upleft side) giving the efect of a shades.


Please advise,
Thank you.
Dré
 

Is this the effect you are looking for?

To do this, I went to Image>Canvas Size and made the canvas just a tad larger for the shadow.

I right clicked on the image in the Layers palette, and selected FDuplicate Layer.

I erased the one layer (easiest is to erase background)

I then erased the white border around the image on the image layer. I double clicked on the right side of the layer in the layer palette to get the layer style menu, selected drop shadow, and played with the options til I got what I wanted.

When in doubt, deny all terms and defnitions.
 
Viol8ion:
thank you so much. If it wasn't for your explanation I would have never figured it out.
(You explained it perfectly)
Thank you so much.... :) :) :)
You deserve 10 Stars.
Thank you.
Dré
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top