GIF export quality issues RRS feed

  • Question

  • Hi,

    I’m using Expression Design and have a document with some white text with a transparent background that I want to export as a gif for use on a web page.

    Exporting works fine, as does the transparent background, however the text is really jaggedy around the edges and looks horrible. The size of gif I’m trying to export is 170x56, which contains 3 pieces of text, sized 8pt, 12pt and 42pt.

    How can I export it so the text is crisp and clear?


    Friday, January 9, 2009 6:30 AM

All replies

  • Hi BrentonW,

    You can try this:

    • Group all text together then select the grouped layer goto Object on the menu and Convert object to paths

    • Right click on the object and create a slice from selection, then from there head over to the right and change format to gif, Slice contents, optimized, transparency ticked, dither ticked, and leave antialias off, try and export that layer and see how you go.

    Let me know how you get on,

    Wednesday, January 14, 2009 10:42 AM
  • Hi Steve,

    Thanks for the reply. Which version of Expression Design are you referring to? I'm using Expression Design version 4.0.2712.0, and can't seem to find anything regarding slices.

    Wednesday, January 14, 2009 1:29 PM
  • Steve,
    I ran into the same problem and tried what you described above. For me the quality actually got worse by turning the text into path and turning the antialias off.

    I've been trying to create images for my website so I'm making slices in gif format with transparency. But all curves are very pixellated, either have white noise with antialias or jagged line without it.

    Any other suggestions on how to improve the quality of the text and curves?

    Thank you
    Wednesday, April 8, 2009 10:59 PM
  • I don't know if the following will work but I'd give it a try:

    1 - set document resolution to A, B, C

    2 - design a bit of artwork using components that you've noticed to be troublesome

    3 - export to a lower resolution (in E3 it required two passes, one to set resolution and one to set size)

    4 - compare and judge the outputs opting for the improved method if there are differences

    A = 72 ppi

    B = 200 ppi

    C = 300 ppi
    Wednesday, April 8, 2009 11:38 PM
  • This is a limitation of the GIF format. GIF transparency is indexed mode only. This means the image is converted to indexed color and a single color entry is chosen as the "transparent" color. Any alpha-based transparency will be flattened and appear jagged. Alpha-blended transparency is supported by the PNG format as well as others.

    I recommend using PNG instead of GIF.

    Only caveat is that IE6 and lower do not support the alpha-transparency feature of any format. This supported was added for PNG in IE7 and beyond.

    Thursday, April 9, 2009 5:04 PM
  • Using a 'bounce' might help provided there is no hidden stuff happening behind slicing.  So for straight forward exports on Windows where ED (EGD, Acrylic, E3) seemed to go amiss try:

    a - export at maximal setting to a transparency preserving PNG

    b - open the PNG in IrfanView

    c - export/Save As from IrfanView into GIF

    (IrfanView was free for non-commercial use with a teeny-weeny modest fee for commercial use.  Don't know if it still is though :) )
    Thursday, April 9, 2009 8:31 PM