Game asset processing3 min read

Check a PSD Clipping Mask Before Exporting a Game Button

Use a circle and an oversized stripe layer to verify that your export preserves the intended clipped edges.

Check a PSD Clipping Mask Before Exporting a Game Button
A solid circle and a striped circle on a blue banded background
Concept illustration

A PSD button can look correct in the editor yet arrive in the game with stripes extending outside the circle. Photoshop uses the visible shape of the base layer to clip the layer above it. Make a small fixture so you can see whether your export contains the composite or the upper layer’s original pixels.

Build a fixture with two layers

Start with a 128×128 transparent canvas. Make a solid circle roughly 64 pixels wide and put stripes across the entire canvas on the layer above. Clip the stripes to the circle. Save a reference PNG of the composed button and keep the layered file for comparison.

Inspect the output in three places

  1. At the center, check that the stripes are present.
  2. Outside the circle, inspect transparency all the way to the old stripe boundary. Visible stripes there indicate that the exported output includes the unclipped layer pixels.
  3. Along the circle, composite the output over light and dark backgrounds to inspect partially transparent edges.

For a static button, a flattened copy of the effect is a practical deliverable. Keep the master editable. If the game needs to swap the pattern at runtime, hand off the base shape and pattern separately, then verify mask alignment in the target engine against the reference PNG.

Prepare a sample with the Tooliva asset tool, then run the checks in your own project.

Recommended tools

Ready to try "Check a PSD Clipping Mask Before Exporting a Game Button"?

Use our online tools to apply this tutorial to your indie game project right away.