SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot thespian's Avatar
    Join Date
    Sep 2000
    Location
    South Africa
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am new to Web Design and very new to graphic design and PhotoShop. Please excuse my "terminology" and lack of knowledge.

    I am creating single (solid) colour images (imported from Illustrator) on a "transparent" background in photoshop. When "Saving as Web Image", I have attemted to retain the transparency. I save the document as a .gif file (since jpeg does not support transparency?) but when viewing this image via a browser, I have a white "glow" around the outlines of the image.

    The only way I have been able to overcome my problem is to create images that are not transparent but have the same background colour as the web page. Of course some browser / graphic card combinations play havoc with this solution, even when using browser-safe colours.

    I have the same (in fact worse) problem with a "Photographic" image that I have "cut" after feathering the edges.

    Examples of these images are at this temporary web page. Here the images have been saved using the same colour background as the web page.

    I am sure the answer to my problem is a simple one - it is just my lack of experience really. I would sincerely appreciate any advise.
    Bill Conté [Protected by Psalm 91]
    Web Mechanix
    Growing OLD is Mandatory - Growing UP is Optional!

  2. #2
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anti Aliasing is probably turned on.

    Anti Aliasing is basically blending of border colors. When you paste it image into photoshop it blends the edges to white to make the edges look more smooth. Most web graphics are anti aliased.

    But you want to use this image as a transparent one on a non white background.

    The best way to do it would be how you are doing it. As in saving the image against the background it will be used in. You can always later specify the BG color as the transparent color, but you will have the correct anti aliasing as it will be blending against the background color and your image will look really smooth.

    IF you don't want to anti alias you're image will be choppy.

    But open up a new photoshop image. Paste your image. Flatten in. Click on the magic wand tool. In the info box make sure anti aliasing is deselected, and put the tolerance at oh maybe 10. Then hit ctrl-A and then hold down alt and click somewhere in the whitespace. This should cut out your image with no white edges.

    Then you can open your new image, with a tranparent background. And save it.

    Your image will look choppy more than likely if you do this. Also these directions are using PS 5.0, and I think you have 6.0. So it may be a little different but it should be more or less the same.



    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  3. #3
    SitePoint Zealot thespian's Avatar
    Join Date
    Sep 2000
    Location
    South Africa
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aspen,

    Many thanx for your advice. Now that I understand the situation better, I am sure that I will be able to deal with it more effectively.

    Just one point though, you talk about ...

    You can always later specify the BG color as the transparent color, but you will have the correct anti aliasing as it will be blending against the background color and your image will look really smooth.
    What I would like to know is how and where I can set the background colour as the transparent colour.

    Many thanx for your patience and understanding.
    Bill Conté [Protected by Psalm 91]
    Web Mechanix
    Growing OLD is Mandatory - Growing UP is Optional!

  4. #4
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,939
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What color is to be transparent is specified in the GIf.

    Now I don't think photoshop has this capability but plenty of other image editing programs do. The one I use is Microsoft Photo Editor. But you can pick the transparent color, it can be anything. Red, Blue, Green. Whatever.

    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums


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
  •