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.

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?

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.

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.

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.

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.

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.