---
title: "SpriteIlluminator: Normal map painting"
description: "Enhance your generated normal maps with the new structure tool"
canonical: "https://www.codeandweb.com/spriteilluminator/tutorials/normal-map-painting-with-spriteilluminator"
date: "2015-05-11T00:00:00.000Z"
modified: "2015-05-11T00:00:00.000Z"
source: "html"
---

# SpriteIlluminator: Normal map painting

Andreas Löw

[spriteilluminator](https://www.codeandweb.com/tags/spriteilluminator),  [tutorial](https://www.codeandweb.com/tags/tutorial),  [general](https://www.codeandweb.com/tags/general)

![SpriteIlluminator: Normal map painting](https://www.codeandweb.com/static/ef03ba78f28adc9b4aa821a8a2f2f5a3/a6312/post-image.png)

What you are going to learn:

*   A quick way to generate normal maps
*   Enhancing the generated normal map by applying structure

Take a look at this video first. We'll explain the details below:

Video: **dynamic lighting effects for 2d games - painting a normal map** (1:00) https://player.vimeo.com/video/126253549?h=e79685b768

## Generating the normal map

We are using [SpriteIlluminator](https://www.codeandweb.com/spriteilluminator.md) to generate and paint the normal map for this gecko. The first step is to add the image - simply by dragging it onto the left **Sprites** panel.

The image we used is from ShutterStock: [Gecko Image © Alhovic / ShutterStock](http://www.shutterstock.com/pic-68665210.html). We've reduced shadows & highlights of the original - because this would create some strange effect when used with dynamic light effects.

This image has a transparent background — which allows you to easily extrude the gecko's body using the SpriteIlluminator's **Bevel** effect.

Using the effect twice with different settings lets you put detail on different parts of the image.

  ![Original gecko sprite with transparent background used for normal map generation](https://www.codeandweb.com/static/97e1bb93084b439430e858c96eefcf00/6a955/gecko_uni.png)

[Gecko Image © Alhovic / ShutterStock](http://www.shutterstock.com/pic-68665210.html)

#### Bevel: Adding volume to the file grained parts of the sprite

Use SpriteIlluminator's bevel tool to add volume to the finer parts of the sprite.

*   **Bevel size** : 12
    
*   **Bevel height** : 150%
    
*   **Smoothness** : 12
    

  ![Applying bevel on a normal mapped sprite](https://www.codeandweb.com/static/350718e67f8aadf9983183d0183e754a/0d81c/normal-map-painting-with-spriteilluminator-bevel-pass-1.jpg)

#### Bevel again: Adding volume to the sprite's body

Use SpriteIlluminator's bevel tool again to add volume to the body.

*   **Bevel size** : 50
    
*   **Bevel height** : 200%
    
*   **Smoothness** : 50
    

  ![Adding volume to a normal mapped sprite](https://www.codeandweb.com/static/7dc104af4fc8402adcc24ae8a563f10f/0d81c/normal-map-painting-with-spriteilluminator-bevel-pass-2.jpg)

This already looks quite impressive — but the gecko's sprite is still too smooth.

#### Adding structure to the normal map

SpriteIlluminator comes with a whole bunch of different structural patterns. One of them is called **Reptile** — which is a perfect match for the gecko image.

Structure is added using the **Structure brush** . The most important thing to change is the **scale** of the texture. The default settings are way too big for this small animal. Also increase the brush's size to speed up painting. Use **Intensity** to control how strong the effect is applied.

Use the brush to apply the structure to the back and tail of the gecko.

  ![Adding structure to a normal mapped sprite](https://www.codeandweb.com/static/a13873e34c73ac30ab30aa02f827c41f/283d3/normal-map-painting-adding-structure.png)

#### Using your own structure patterns

You can easily add your own patterns in case you need something special.

Your custom patterns can be placed in any directory - just point **Custom pattern directory** in SpriteIlluminator's **Structure brush** to that location. Don't forget to restart SI after changing the directory or adding images — otherwise they won't show up in the UI.

TexturePacker interprets the luminosity of the pattern's color as height. The brighter a color the closer to the screen, the darker the farther away.

You can either use big pattern — which cover the whole extend of your sprites — or small patterns. The smaller patterns must be tilable.

Reptile's pattern image is shown on the right.

  ![Reptile pattern texture used for adding structural detail to normal maps](https://www.codeandweb.com/static/8065cf13f2dd625e3ccf31e2248e457c/5c083/reptile.png)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "SpriteIlluminator: Normal map painting",
  "author": [
    {
      "@type": "Person",
      "name": "Andreas Löw"
    }
  ],
  "dateModified": "2015-05-11T00:00:00.000Z",
  "image": "/static/ef03ba78f28adc9b4aa821a8a2f2f5a3/a6312/post-image.png"
}
```

```json
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "thumbnailUrl": "https://i.vimeocdn.com/video/518857937-666d471f509997cac79b102999cb2c082f66b4d0c68e142e445c8efe78a1b5c7-d?f=webp",
  "embedUrl": "https://player.vimeo.com/video/126253549?h=e79685b768",
  "name": "dynamic lighting effects for 2d games - painting a normal map",
  "description": "Use SpriteIlluminator to add structure and volume to your graphics. Create and edit normal maps for your 2d game's light effects.",
  "height": 1080,
  "width": 1920,
  "videoQuality": "HD",
  "uploadDate": "2015-04-28T08:56:39-04:00",
  "dateModified": "2024-05-27T09:26:35-04:00",
  "duration": "PT00H01M00S",
  "keywords": [
    "normal maps",
    "2d lighting",
    "2d light",
    "game development",
    "gamedev",
    "unity3d",
    "cocos2d",
    "phaser",
    "unity"
  ],
  "thumbnail": {
    "@type": "ImageObject",
    "url": "https://i.vimeocdn.com/video/518857937-666d471f509997cac79b102999cb2c082f66b4d0c68e142e445c8efe78a1b5c7-d?f=webp",
    "width": 1280,
    "height": 720
  },
  "url": "https://www.codeandweb.com/spriteilluminator/tutorials/normal-map-painting-with-spriteilluminator"
}
```