SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Gif woes

  1. #1
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to create a transparent gif with a drop shadow around it. Every time I export it, there are either tell-tale traces of the original background, or the edges of the image appear ragged. I've attached this gif and the psd for you to take a look at. I have exported the psd in Index mode, and have tried cleaning up the stray background as best as I could, but it still comes out bad.

    Anyone have any suggestions?

    http://www.learningcommunity.capella...ewski/logo.psd

    http://www.learningcommunity.capella...ewski/logo.gif

    Thanks.



  2. #2
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Drop shadows and transparent GIFs tend to not go very well together! Do you need to have a transparent GIF or can you just create it on a white background?

  3. #3
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nicky,

    I'd really like to keep it transparent, since I am plopping it down on a page with a background image, and it's really a pain to try to recreate the background on my gif so that it matches.


  4. #4
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had this same problem with some of my graphics, so I can offer a suggestion. As Nicky said, transparent .gifs and drop shadows tend not to cooperate, so what I did was put a small amount of the background's nearest color around the edge of the drop shadow. It worked quite well.

    If you need to find the closest color to your background I recommend EyeDropper which will let you select a color anywhere on your screen, and it will give you the resulting RGB color scheme, which you can insert into Photoshop to get the nearest web color.

    If you want to view my results with this idea, you can check the main page of Pawsitronic and look at the top graphics "main..help.. sitemap.." which are done as described above.

    Good luck!
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holly, depending on what version of Photoshop you are using...here is the best method.

    1) Create your drop shadow as normal.

    2) Make a new layer and fill it with whatever background color that the shadow will be over.

    3) Choose IMAGE>MODE>INDEXED COLOR

    4) Fiddle with the settings until you are satisfied with the preview

    5) Select FILE>EXPORT>GIF89a EXPORT

    6) Select the background color with the eyedropper tool.

    7) Save file.

    That will work with every version of Photoshop from 4-5.5 (Version 6 does not include the GIF89a export module)
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, everyone. I will give it another go tonight and hopefully tackle this beast...

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holly...give this image a try...

    http://www.dreamingpig.com/for_holly.gif

    just remember, that you might need to lower the feathering of your shadow to get an acceptable edge on it. See if the image above works for you...
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Member
    Join Date
    Sep 2000
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole, I'm still having the same problems, even with your gif. I have gone so far as to zoom in on the edges and use the eyedropper pixel by pixel until it appears completely clear - only to have it look not good <is that close enough? - Nicky!>it is imported onto my page. Oh well. Guess I will try to incorporate a background on this after all.

    Thanks for trying, though.

    <Sorry guys. I'm really uptight so starring out doesn't do it for me, but I think we get the message >
    <Edited by Nicky on 11-28-2000 at 06:39 PM>

  9. #9
    SitePoint Member
    Join Date
    Nov 2000
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As has been mentioned, true alpha channel enabled GIF files are not possible. However, if you are willing to precomposite your GIF file to it's background it can look great - drop shadows, semi-transparent blends, etc.

    Anyway, my two cents.

    Chris
    PhotoWebber Programmer
    <Edited by W. Luke on 12-04-2000 at 06:59 PM>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •