What exactly is it with graphics with extra color?

Discussion in 'Photoshop Tutorials' started by -Lost, Dec 13, 2007.

  1. -Lost

    -Lost Guest

    What exactly is it with graphics with extra color?

    Sorry for such a vague (poorly phrased) question, but for example I
    am referring to the subSilver theme in phpBB (forum) package. It
    comes with custom graphics (GIFs) and when I change the background
    color of the template document, you see left over color around their
    edges.

    I have not once created a graphic in this fashion, so I have no clue
    what it is or why it is.

    So, #1: What would be a simple method of handling the removal of the
    additional bit of color?

    #2: Why and how are people creating graphics like this?

    The best thing I can guess is that someone created the "icon" on a
    solid background, and then cut it from the background? *shrugs*

    http://locate32.net/forum/index.php - here is an example of what I
    mean. ALL graphics have a *slightly* white fleck or two around them.

    The icons at the top end up looking like frames (a nice little effect
    I guess), but the ones at the bottom of the page (the circular ones)
    look like crap.

    Thanks for any advice, tips, suggestions, et cetera.
     
    -Lost, Dec 13, 2007
    #1
    1. Advertisements

  2. -Lost

    Mike Russell Guest

    Tacit explained the problem completely, and how to deal with it for GIF
    images.

    I would add that the png format is now supported by the majority of
    browsers. Png supports partial transparency, and solves the fringing
    problem.
     
    Mike Russell, Dec 13, 2007
    #2
    1. Advertisements

  3. -Lost

    Owen Guest

    I looked at folder_locked_big.gif. If you look at the image X 20 or so
    times you will see the white bits very clearly. Take a 1 pixel brush
    and colour them the adjacent light bluish colour


    owen
     
    Owen, Dec 13, 2007
    #3
  4. -Lost

    jjs Guest

    That might be fringing. See Layers, Defringe. Also check for featheirng in
    your selection tool.
     
    jjs, Dec 13, 2007
    #4
  5. -Lost

    Mike Russell Guest

    [re using png instead of GIF for alpha transparency]
    I think the time has come to jump to PNG instead of GIF. My site shows 24%
    hits from people with IE6 in the last 24 hours or so, and none from IE5 or
    earlier. All my other hits is using a more recent browser that supports
    png. This was not true a year ago, when it was well over 50 percent IE6.
    The benefits of png are sufficient that my own judgement, and yours may
    differ, is that 24% of my viewers can put up with a white box around certain
    graphics.
    Ever your humble servant.
     
    Mike Russell, Dec 13, 2007
    #5
  6. -Lost

    tacit Guest

    Yes, that is correct.

    It is there because of a fundamental limitation in the GIF file format.
    A GIF image can be transparent, but it is "all or nothing" transparent.
    A pixel is 100% opaque or 100% transparent. The GIF format does not
    permit translucency; it does not allow a pixel to be partly transparent.

    Most graphics programs, including Photoshop, do anti-aliasing.
    Anti-aliasing is a technique that makes curves and slanted lines look
    smoother, by creating an optical illusion. Because pixels are
    rectangular or square, curves and slanted lines look like little
    "stairsteps." Anti-aliasing smooths out the appearance of stairsteps by
    placingtranslucent pixels that are partially opaque along the edges.

    Create a new image and fill it with white. Click the Line tool and set
    it to make black lines that are about 10 pixels wide. Draw a bunch of
    lines at different angles. Then turn off anti-aliasing and do it again.
    Notice how the lines look jaggy if anti-aliasing is off?

    When you make a GIF, you can not anti-alias the edges that are
    transparent because GIF does not permit partly transparent pixels. GIF
    images that are transparent look jaggy.

    Many programs, including Photoshop, get around this with "matting." When
    you save a transparent GIF in Save for Web, you can choose a "matte
    color." If you set this to the color of the background of your Web site,
    the program will fill in anti-aliased pixels around the edge of the GIF
    that are the same color as the background of the Web site. This makes
    the GIF look smooth and not jaggy. But if you put it on a different
    colored background, you will see a line or fringe around its edge. It
    only works as long as you do not change the background color.

    If oyu change the background color of the Web site, you must go back to
    the original .psd and use Save for Web again, and specify the new
    background color of the Web site as the "matte color."
     
    tacit, Dec 13, 2007
    #6
  7. -Lost

    -Lost Guest

    That explained quite a bit. Thank you, tacit!
     
    -Lost, Dec 14, 2007
    #7
  8. -Lost

    -Lost Guest

    Yes, yes they did.
    Good point, but for Internet Explorer 6 and below for example,
    transparency is not well supported (I believe JavaScript and/or filter
    hacks are used to achieve PNG transparency). Internet Explorer 7 I
    believe supports transparency in PNGs, but I've not yet been brave
    enough to install IE7 to find out.

    Thanks for the feedback, Mike.
     
    -Lost, Dec 14, 2007
    #8
  9. -Lost

    -Lost Guest

    You know, I honestly believe the same thing... but I'm so used to the
    JavaScript and CSS developers telling me I need to be fully aware of
    EVERY possible quirk and always make it a point to say, "To deny even
    one user is to admit a flaw in design and usability."

    The last 2 sites I did used a bit of conditional CSS to swap an image
    out. That's about as far as I'm willing to go in terms of catering
    to users of older browsers.
    Good to know. ; ) Thanks again!
     
    -Lost, Dec 15, 2007
    #9
  10. -Lost

    KatWoman Guest

    IE 7 is nice
    but if you use Roxio ez--cd be aware it will break you ability ot make DVD
    menus
    not sure why but it is so
     
    KatWoman, Dec 16, 2007
    #10
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.