Blog

Transparent areas look black? Fix them in a brand refresh

Find out whether black areas are real pixels or a preview or export issue, then preserve transparency and clean edges across your refreshed brand assets.

David MorganApps and software 4 min read

A logo or photo cutout looks right in the editor, but black fills its transparent areas in a preview or after export. That can make a brand refresh look inconsistent across websites, presentations, and social posts.

First check whether the black is part of the image or only the background used to display it. Then fix the source or export settings so transparent areas reveal the design behind them.

Find out where the black comes from

  1. Make a copy of the affected image, then open it in Photo Editor. Its layers and selections can help you inspect the artwork without changing your only original.
  2. In the copy, place a temporary solid-color layer beneath the image. Use a light color, then a bright color, and finally a dark gray. If the area changes with the background, it is transparent or partly transparent. If it stays black, black pixels are probably in the artwork.
  3. Check the edges of the affected area. Look for a thin dark outline around a logo, hair, or other cutout. A fringe can come from partly transparent edge pixels that were blended against black.
  4. Compare the source image with the exported file in more than one viewer or layout. If the source looks correct but the exported copy does not, focus on the export format and background settings.

What the result means

The area changes color when you change the background

The image likely has transparency, and the black is the viewer's display background. Some previews use black where other apps show a checkerboard or a white canvas. Check the asset over the actual colors used in your brand layouts before changing the artwork.

The area stays black on every background

The black is probably opaque image content, not a transparent opening. It may be part of the original artwork, a background that was never removed, or a layer that was filled with black. Removing it blindly could damage black text or shapes that belong in the design.

The middle is clear but the edges look dark

The cutout may contain semi-transparent pixels around its edge. Those pixels blend the foreground with a matte, or background color, used earlier in editing. A dark matte can leave a black halo when the image is placed on a light or colored background.

The original looks right but the export turns black

The export may have flattened the image onto a black background, or used a format that does not keep transparency. A preview can also render transparency differently from the final app or website, so test the exported file in its intended setting.

Fix the image without damaging the artwork

  1. Keep an untouched original. Save a separate working copy before removing pixels or changing layers. This gives you a way back if a black detail turns out to be part of the logo or photo.
  2. Remove only a real background. If the black is opaque and unwanted, select the background rather than the foreground artwork. Use the selection and brush tools on a separate layer to refine the area, and check that small text, thin lines, and dark shapes remain intact.
  3. Preserve transparency when exporting. Use PNG when you need a widely supported transparent image. WebP can also store transparency, but check that the destination supports it. JPEG does not preserve transparent pixels, so it must fill them with a color when saved.
  4. Check for a flattening background. If the export settings offer a background color or a transparency option, choose transparency rather than black or another solid fill. Keep the layered working file as well as the exported image.
  5. Clean dark edge halos. If a dark fringe remains, refine the edge in the source artwork instead of placing a solid color behind the whole image. Remove stray dark pixels and check the edge against both light and dark backgrounds so it does not trade one visible halo for another.
  6. Reopen the exported copy and test it. Place it over the actual brand colors, including any dark or bright backgrounds where it will appear. Check the full image and a close view of its edges before replacing assets in a site or presentation.

Check transparency across the brand refresh

A transparent logo is not tied to one background color. It should reveal whatever sits behind it, which is useful for flexible layouts but can make a preview seem confusing. Review it on the real backgrounds where it will appear, not only on the editor's canvas.

For each refreshed asset, keep a layered source copy and export a separate file for use. If a design needs to sit on a specific color, consider making a separate version with that background included rather than relying on every viewer to display transparency in the same way. Compare the versions at their intended size, since thin outlines and dark edge pixels can be harder to spot in a small thumbnail.

When you open an image in TooLab's Photo Editor, the file is handled in your browser and is not uploaded. Use a copy of important artwork while checking selections, layers, and edge cleanup.