Neverside

Drop Shadow plus transparent GIF Q

Hi

I'm using PS CS2..a newbie. I followed the transparent GIFs tutorial (http://www.absolutecross.com/tutorials/photoshop/basics/transparent-gifs/) with success until step 6. When I went to File-> Export...I couldn't get the GIF89a option or 'transparency from' option. By that time, my head was spinning....didn't know what I did, but I saved it as .gif and tested it live in my webpg and it worked. <insert smilie doing the happy dance>

Confident from that exercise, I went on to the drop shadow tutorial (http://www.absolutecross.com/tutorials/photoshop/basics/dropshadows/). Erm...it doesn't tell how to save. I'm truly sorry, I still need to be led by the hand. I tried to save as .gif, psd etc...actually, I don't remember exactly what I did...but when I tried it out, I either got a the whole block of picture (the attached grey bg one) or the cookie with dropshadow plus a surrounding white area circling the picture.

Would appreciate if you could guide me on the saving part. TIA!

p/s Wish I found this resource earlier. My current website really sucks. I wish to completely revamp the site to a something simpler...with the help of the very promising tutorials (and forum) here. LOL, I see y'all high-tailing outta here.

Last edited by Tepee, June 20th, 2006 07:47 PM (Edited 2 times)

I have to get to work in a min so I can't post to much for the moment... however, have a look at this new revised version of the transparent GIFs tutorial, which I was working on last night as I'm doing my whole "site revamp"......
http://absolutecross.com/test/

I plan on even further revising it, though this is as far as I got with it so far... be certain to read the "Note" area at the top, as it explains a bit that the method differs in newer versions of Photoshop compared to when the tutorial was originally written. File -> Export -> GIF89a no longer exists in newer versions of Photoshop (again, check the Note for info). Also keep in mind that making a transparent GIF out of a image that has a drop shadow is very tricky, and the results will likely be iffy no matter what you do (PNG files on the other hand are great for this, though their support in certain.... IE..... browsers leaves much to be desired).

Let me know if this helps, and when I get home tonight I'll try to help more.

___________________

-- Dave
Neverside Admin

absolutecross.com

Much thanks for the reply.

I went the Help>>Export Transparent Image route. Problem is to save as .gif, the colors are drastically reduced....shadow came out but not smooth. Tried to save as .png. Didn't work; the whole file showed up.

I think what I'll do for images with added shadows, I won't make it transparent, rather, I'll paint the background to match the color of the webpage's background. Make sense?

I forgot to mention.... when you do the Help >> Export Transparent Image..... you still need to have first converted your image into Indexed Color, as in the first part of Step 6. A dialog box will come up that offers a dropdown menu..... try all of the various settings to find one that best reproduces your image's colors - select that press press OK -- after that is when you begin the Help >> Export...

Also keep in mind that GIF images are limited to a maximum of 256 colors.... while that's plenty for many web-images -- namely those with lots of solid colors, and "not" lots of gradients or shadows - since gradients and shadows only look smooth because each "row" of pixels is a lighter and lighter shade of color (quickly surpassing the 256 color limit).

Do try out the File >> Save For Web way... I hadn't used it much myself, since I only use transparent GIFs if I absolutely must (which is almost never)... though I found that method to be quite easy (thank you Adobe! haha). I need to do a poll/survey and find out which versions of Photoshop have which methods available - I can't recall anymore how it worked in Photoshop 4, 5, 6, etc haha and at which versions they began adding the new ways.

Peace.

___________________

-- Dave
Neverside Admin

absolutecross.com