Solved

PNG has jagged edges

Posted on 2008-06-23
2
171 Views
Last Modified: 2013-11-19
The logo and some of the other icons on the page at http://fellowtip.codeyoda.us have jagged edges.  My developer asked for .png files with no background and that's what he's using.  He can't figure out what the problem is so I'm hoping you can help.
0
Comment
Question by:Iamageorgiabulldog
2 Comments
 
LVL 38

Accepted Solution

by:
lherrou earned 125 total points
ID: 21859494
Iamageorgiabulldog,

When the PNG was originally output, I am guessing there was not a colored background, so there's no anti-aliasing (http://en.wikipedia.org/wiki/Anti-aliasing) applied (since there's no background, the graphics program doesn't know what color to shade to). The solution is to have a background layer in the color you think you're going to use (or at least close), and then make that background layer invisible.

In addition, your PNG is more than twice as big in pixels as the area where it's being used, so it's being scaled by the browser. This can enhance the jaggies. I took your PNG and, in Photoshop, added a white background layer, then re-sized to 200 px wide, hide the background, and saved for web as a new PNG. The result is below, you can see it's nice and smooth by comparison.

Cheers,
LHerrou
fourseasons-logo-sm.png
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Web design prices 4 402
add colored shadow in AI CS5 7 223
Windows 10 Photo Editor that works on Domains 4 89
Saving a YouTube movie locally? 6 17
Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Learn the basics of inputting and editing your text components in Prezi. We will cover how to set styles, position, and group your text components. In your Prezi editor, click anywhere on the canvas to add text: A flashing cursor informs you that yo…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question