Transparent PNGs look simple when they work. They look amateurish when they do not.

The difference is usually not the PNG format itself. PNG supports transparency just fine. The problem is almost always the mask: hard edges, dirty pixels, color halos, or an export path that flattened the image against the wrong background before the file ever reached the browser.

This originally started as a quick note giving credit to David Chess' old PNG alpha-channel transparency tutorial. I used that approach when I was building the Slaptijack sandwich logo. I wanted a faded sandwich over a red background, but I also wanted the master image to work on other backgrounds later. That is exactly the kind of problem alpha-channel transparency solves.

The details of Photoshop have changed since 2007, but the underlying idea has not: keep the artwork and the transparency separate while you are editing, test the result against multiple backgrounds, and export a PNG that preserves the transparent pixels you actually meant to preserve.

What Alpha Transparency Actually Means

A normal RGB image stores red, green, and blue values for each pixel. An image with alpha transparency stores one more piece of information: how opaque that pixel should be.

Think of the alpha channel as a grayscale mask:

• White means fully opaque.
• Black means fully transparent.
• Gray means partially transparent.

That partial transparency is the magic. It is what makes anti-aliased edges, drop shadows, glows, soft fades, and semi-transparent artwork look clean when placed over different backgrounds.

For web graphics, that usually means exporting a 32-bit PNG: red, green, blue, and alpha. You can also work with explicit alpha channels in Photoshop's Channels panel. Adobe's current alpha channel documentation still describes the same basic model: selections can be saved as alpha channel masks, edited in grayscale, and loaded again later. The specific UI moves around over time, but the mental model is durable.

The Practical Photoshop Workflow

The safest workflow is layer-based:

1. Put the artwork on its own layer.
2. Remove or hide the solid background layer.
3. Use a layer mask to define what should be visible.
4. Refine the mask until the edge looks good.
5. Test the artwork over several background colors.
6. Export as PNG with transparency preserved.

That is better than destructively erasing pixels. A layer mask lets you change your mind, soften edges, fix holes, and reuse the source artwork. If you are building a logo, icon, badge, or UI asset, that editability matters.

Here is the rough workflow I use for this kind of asset.

Start With A Clean Source

If the source image already has a busy background, spend time on the selection. Photoshop gives you several ways to get there:

• Object Selection or Select Subject for a first pass.
• The Pen tool when the shape has clean geometric edges.
• Select and Mask for hair, fabric, shadows, or soft edges.
• Manual brush work on the mask for the last 10 percent.

Do not expect the automatic selection to be final. It is a starting point. Automatic selection tools are good enough now that they can save real time, but they are also very good at leaving one-pixel garbage around the edge. That garbage is invisible on a white canvas and painfully visible on a dark page.

Once the selection is close, add it as a layer mask. Keep the original artwork under the mask instead of deleting the background outright.

Build The Transparency With A Mask

Open the mask and look at it like a black-and-white image. The mask is where most transparency problems are born.

For a crisp icon edge, you usually want a high-contrast mask with clean anti-aliasing. For a shadow or fade, you want a smooth gradient. For a logo that will sit on several background colors, you want to avoid pixels that have been visibly blended against the old background.

Useful checks:

• Zoom to 100 percent before judging the final edge.
• Put a black layer under the artwork.
• Put a white layer under the artwork.
• Put a saturated color layer under the artwork.
• Toggle those backgrounds while inspecting the edge.

If the asset only looks good on one background, it is not really transparent in the useful sense. It is pre-composited artwork pretending to be portable.

Avoid The Halo Problem

The classic transparent PNG failure is a light or dark halo around the edge. This happens when the visible color pixels were blended against a background that no longer exists.

For example, if you cut a logo out of a white background and place it on a red page, the semi-transparent edge pixels may still carry a little white. On the white canvas it looked perfect. On red, it looks like someone sprinkled dust around the artwork.

Ways to reduce halos:

• Refine the mask edge instead of using a rough selection.
• Remove stray background pixels before export.
• Use Photoshop's selection and mask refinement tools carefully.
• Test on the actual site background and at least one opposite background.
• When needed, paint edge color corrections on a clipped layer.

Do not over-feather a logo to hide a bad cutout. Feathering can make a photo composite look natural, but it can make interface graphics look mushy.

Export The PNG Correctly

When the artwork looks right, hide the test background layers and export the asset as PNG with transparency enabled. In modern Photoshop, the usual paths are Export As, Quick Export as PNG, or generating assets from named layers. The right choice depends on whether this is a one-off graphic or part of a repeatable asset pipeline.

Before you ship it, reopen the PNG and check:

• The background is actually transparent.
• The dimensions are what you expected.
• The edge still looks clean at 100 percent.
• The file size is reasonable for the web.
• The asset works on the real page background.

That last point matters more than the tool dialog. The browser is where the asset has to live.

When PNG Is The Right Format

PNG is a good choice when you need:

• Lossless graphics.
• Sharp edges.
• Transparent backgrounds.
• UI assets, logos, icons, badges, and screenshots.
• Artwork that will be placed over different backgrounds.

It is not always the best choice for large photographic images. A full-width photo exported as PNG can be enormous compared with a JPEG, WebP, or AVIF. Use PNG when the transparency or lossless detail matters.

If you are moving icons around on macOS, the older Converting Mac OS X Icon Files to PNG post is a useful companion. If you are working specifically on site identity, Creating favicon.ico In Photoshop is the related legacy note, though favicons now deserve a broader modern pass of their own.

A Simple Transparent Logo Checklist

Before calling a transparent PNG done, run this quick checklist:

• The source Photoshop file keeps the artwork and mask editable.
• There is no permanent background layer baked into the export.
• The edge has been checked on black, white, and the real site background.
• The image is exported as PNG with transparency preserved.
• The file has been reopened and inspected after export.
• The asset has been tested in the browser, not just inside Photoshop.

That workflow is a little more deliberate than "delete the background and save as PNG." It is also the difference between a graphic that only works in one mockup and a reusable asset you can place almost anywhere.

The funny part is that the original Slaptijack sandwich logo problem was not a fancy design problem. It was a practical engineering problem wearing a design hat: preserve the useful information, separate it from the environment, and make the output reusable.

That is still how I think about transparent PNGs.

More practical notes live at Slaptijack.