dcsimg
A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: Jagged edges on imported pictures?

Hybrid View

  1. #1
    Senior Member
    Join Date
    Mar 2002
    Posts
    100

    Jagged edges on imported pictures?

    When I import a image file and set the background color (of the image) on transparency, the edges of the image have a slight jagged trace of the background still. I notice, this happens with curves and angles.

    Is there a way around this, or is this yet to be resolved?

  2. #2
    Senior Member
    Join Date
    Mar 2003
    Posts
    136
    The reason is you are using .jpg which has image compression.
    If you use .gif with a small palette of colors, adjacent colors make a non-jagged edge (limited to actual pixel size)

    However with .jpg even two straight-edges of say black and white contrast if examined closely will have a grey blur edge.

    You can see this if you make a picture with a .gif and save it. Then save again as .jpg and now take black and fill white large areas of the picture with the black color. You will see the black flows up to but not touching the adjacent areas.

    As more colors and angle-edges are introduced the image has more. Then the picture is saved and the compression effect blurs the edges even more to save pixels.

    So, the solution is to use .gif if you can.

    What if you want a photo-quality .jpg with more than 16 colors which will not save well as .gif?

    In this case you need to edit the .jpg under the zoom magnifying glass of the editor and laboriously paint into all the angles and crevices with a single-dot or as small a paintbrush as possible and remove all the offending blur/discolored bits. With very complex edges such as the hairline on a human head this can be a real time-consuming chore but most smooth surfaces are cleaned up fairly quickly.
    Last edited by carnwath; 06-01-2003 at 06:25 PM.

  3. #3
    Member
    Join Date
    Jan 2003
    Posts
    63
    Using gifs will not solve the problem, you need to use an anti-aliased png file with 32 bit alpha mask. Any decent image program such as corel photo paint, photoshop or paint shop pro should allow you to create what you need.

  4. #4
    Senior Member
    Join Date
    Mar 2003
    Posts
    136
    Ken, you may want to add to this some more...

    As I see it there are two distinct problems

    If I draw an elipse or a line at a shallow angle I will see distinct stair-casing or stepped increments in the pixels which can look ugly.

    A second problem is .jpg images naturally having a blended edge or blurring which I always thought WAS technically called anti-aliasing. That is, the format of the image in .jpg inherently made the image look smoother by this greying or softening or blurring of jagged edges.

    However when it comes to transparency this blurring makes it have a halo effect where the transparency does not reach into corners, and even curves have blocking effects. That's why I suggested manually painting into the corners. Or have I got it all wrong?

    The PNG Solution:
    Ten years into the WWW world and still .png is not common but as a
    a test I created a .png image here which has anti-aliased and non-antialised text and you can see the sharpness of the non-antialiased (though jaggy) but at least using .png the transparency will fill to the edges of the text of BOTH anti-aliased and non-anti-aliased.

    Therefore it looks like the best solution is to always save as .png with transparency rather than .jpg and either way, you choose text or graphics as anti-aliased or not depending if you want sharp edges or blurred fill-in of rough edges

    I used Paint-Shop Pro for the sample
    Attached Images Attached Images

  5. #5
    Member
    Join Date
    Jan 2003
    Posts
    63
    The best results will be with PNG with alpha transparency mask for the following reason: although your JPEG is anti-aliased it will be anti-aliased for the background colour. As JPEGs can't store transparency information and 3DFA only allows you to pick EXACTLY one colour as fully transparent, the rest fully non-transparent. With a PNG and alpha mask you can have gradual changes in transparency, which means the anti-aliasing will continue to work no matter what is behind the image in 3DFA.

    Hope that explains it a bit better.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center