Pixel Art Normal Map Generator

A normal map can add light-responsive depth to sprites, tiles, and pixel-art materials without changing their pixel resolution. The key is restraint: preserve the source dimensions, avoid excessive smoothing, and keep the surface effect subtle.

Start With the Right Source

A grayscale height map is the most predictable source: brighter pixels represent areas intended to appear raised, and darker pixels represent recessed areas. A coloured sprite can work too, but its brightness may describe paint or lighting rather than actual surface depth.

• Keep the original canvas size; do not upscale before conversion.
• Use a clean height source for tiles, bricks, buttons, or other repeatable detail.
• Remove painted highlights and shadows if they would be mistaken for geometry.

Pixel Art Normal Map Workflow

1. Upload the original PNG. Keep the output size set to Same so the map aligns with the sprite or tile.
2. Start with low Strength. Strong conversion can turn single-pixel detail into exaggerated slopes.
3. Avoid smoothing unless the source is noisy. Pixel art usually benefits from crisp, intentional steps.
4. Preview under light. Check that raised pixels read as raised rather than dents.
5. Test in the target engine. If the lighting direction is inverted, flip the green channel once in either the generator or the engine importer.

Common Problems

The sprite looks noisy or metallic

Lower Strength, reduce unnecessary fine detail in the height source, and make sure colour variation is not being interpreted as physical height.

Bumps look like dents

The green channel may use the opposite convention from your engine. Flip it once and compare under a directional light.

Tiles show a seam

Make the source tile seamless before conversion. A normal map cannot repair a source texture whose left/right or top/bottom edges do not match.