Fix Unwanted Hard Edges in Transparent Image Files

Lately, I’ve been noticing a lot of transparent image files (such as a PNG) being used in creative ways. Unfortunately, I’ve also noticed a very minor design mistake being repeated when using these types of image formats. In particular, a certain satellite provider (who I will keep anonymous) uses a transparent image file with a neat lighting effect that moves around as a screen saver. The image, similar to the one below, uses a mixture of colors and transparency.

Image with Transparency

NOTE: PNG files are great image formats for web and other media since they tend to have a better compression and can include alpha channels (which allows for multiple values of transparency).

My guess is someone created the code for the screen saver effect, and then requested a resource from a designer, who in turn, created the image similar to the above. Sounds simple. But, it’s not until you see the screen saver in action and a very tiny mistake can be noticed. Can you spot the error in the animation below?

Aniamtion with Transparency

It’s a common mistake—one I’ve definitely made before—where extremely faint/transparent pixels fall over the boundaries of the canvas. The result is an image that looks like it was mistakenly cropped. For years, I’ve stared at the hard edge of the graphic bouncing around on my TV wondering why it was never fixed (I know it’s probably not worth the time to create a new graphic then roll out the subsequent updates to the systems). However, this company went through a major change and recently updated their screen saver graphic. Did they fix the mistake? Nope. Despite a brand new image that uses a similar transparent effect, there is still the subtle error of a hard line on what should be a feathered edge.

Image with Hard Edge

So how can you make sure that this never happens to you? Well, the solution is very simple. First, let’s take another look at the image. It appears to be completely fine, but we know from the animation above that the left edge will have a hard line.

Image with Transparency

TIP: The act of compressing the image file will exaggerate any hard edges occuring from pixels overlapping the boundaries.

Now, let’s use Adjustment Layers to show us what we don’t see. Add the Levels Adjustment Layer to the top of the layer stack and crank the Shadows slider (that’s the one to the far left) all the way to the right. The image now shows us a mass of pixels. We can immediately see that our pixels spill over the left edge.

Image with Adjustment Layer

To resolve this, use a medium-sized eraser with a feathered edge. Set the eraser’s opacity to around 30% and start to erase the left edge. Each pass with the eraser should show improved results. Eventually you’ll want your image to have nothing but white around the edges.

Image with Erased Edges

Lastly, throw away the Adjustment Layer. The result should appear almost identical to our original image. The only difference is the graphic no longer has a hard edge. PNG Image


Aniamtion with Transparency

One thought on “Fix Unwanted Hard Edges in Transparent Image Files

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>