SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member XX7509's Avatar
    Join Date
    Feb 2003
    Location
    Antarctica
    Posts
    568
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Why Does This Happen??

    Can someone explaine to me why this happens, and how I can fix it. Actually I think I know why it happens.

    I am making images for the web, my goal is to make the images transparent so they will work on any type of web background.

    I draw the image with a white background, and the paint software generates a match to blend the ranges of colors on the background the to vectors. It looks fine on a white background, but as soon as I place the image on a different color background I get a distorted effect always around the vector portions.

    I am saving the images in 89a format with white filtered out. To make is clearer I included a sample, compiled down into a bmp format.

    The second image looks fine, but when placed on a different color background I get a distorted effect, which is by no mean acceptiable for a web graphic. I see a lot of very complex images on the web that work fine in any background type, what is the trick, that I am missing?

    I know that the 89a format will filter out the color I select, but the blended shades of that color around the vectors, don't get blended, I don't think the format knows quite where the vectors start and stop.
    Attached Images Attached Images

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gif transparency has only a single bit, meaning that a pixel is either fully transparent or fully opaque. any antialiased edges will remain fully opaque, and thus the background you originally designed your graphic on will shine through. the only solutions available to solve this problem are:

    - design your image on a background colour which is similar enough to the background(s) you want ot place the image over
    - don't use antialiasing. this may work for certain shapes. but will make others look quite fuzzy
    - use a different format - PNG particularly - which has better support for transparency. unfortunately PNGs are not supported by older browsers, and even new versions of IE have some issues with PNG, as far as i know
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    Non-Member XX7509's Avatar
    Join Date
    Feb 2003
    Location
    Antarctica
    Posts
    568
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When trying to save to the PNG format I receive the following options:

    Use Single Color Transparency
    Use Alpha Channel Transparency
    Use Existing Image/Layer Transparency
    - Trans Inside Current Selection
    - Trans Outside Current Selection

    I don't know what these mean, but when I select Alpha Channel the entire backgroun, no matter what color it was when I saved it, display's in solid black, or I believe #000000

    I'm not sure about the limitations of the format, I have heard a few stories about it, but I do know that Microsoft completely intergrated the PNG format into FP02, no matter what format the image is when you import it, FP converts it into a PNG format, and then saves the original format. When FPSE incounteres a browser that does not support PNG in replaces the PNG format with the backed up *.original format. I'm not sure but Microsoft may have resolved the issue for the most part, otherwise I don't know what they would have developer FP02 in this manner. ARGH. I'll have to do some research on it.

    Any info on what those options mean?

  4. #4
    SitePoint Addict fdeaton's Avatar
    Join Date
    Mar 2002
    Location
    Huntsville, Alabama
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also looking forward to better png support. Search around zeldman.com or alistapart.com for png. I read an interesting article about pngs there a while back, but right now I don't remember just which one of the 2 sites it was on.

  5. #5
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also if you know what color background you are placing your image on, in photoshop you can do the save for web feature and choose the matte color that matches your background color...that should help
    DoesItMatter
    - anyone seen my underwear?

  6. #6
    Non-Member XX7509's Avatar
    Join Date
    Feb 2003
    Location
    Antarctica
    Posts
    568
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inter4design
    also if you know what color background you are placing your image on, in photoshop you can do the save for web feature and choose the matte color that matches your background color...that should help
    Yeah. I think my problem is that I'm not much of an artist, so I use mostly prebuilt shapes, and picture tubes to draw most images. The problem is then blend into the background. At the edge of the image there are different shades of the same color, when using gif only the main color becomes transparent all the shades stay the same. I beileve thats why I get the choppy borders.

    Does anyone know of a way to turn this blend feature off? So the shapes are not blended into the background when I generate them?

  7. #7
    Bangarang! Karloff's Avatar
    Join Date
    Mar 2003
    Location
    Manchester, United Kingdom
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    Unfortunately PNGs are not supported by older browsers, and even new versions of IE have some issues with PNG, as far as i know
    Unfortunately true :P

    Microsoft proposes this fix:

    Code:
    <html>
    <head></head>
    <body bgColor="blue">
    <!-- This DIV is the target container for the image. -->
    <DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
    	 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    	 src="image.png", sizingMethod='scale');" >
    </DIV>
    </body>
    </html>
    More information can be found here.
    Karl


    I'm desperately trying to figure out why Kamikaze pilots wore helmets. - George Carlin


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
  •