# Shade

Add light and shadow with proper hue shifting, one step at a time, so the sprite gains...

- Repository: https://github.com/with-pebbly/aseprite-ai-artist (543 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add with-pebbly/aseprite-ai-artist --skill shade -g -a claude-code -y`
Codex: `npx skills add with-pebbly/aseprite-ai-artist --skill shade -g -a codex -y`
Cursor: `npx skills add with-pebbly/aseprite-ai-artist --skill shade -g -a cursor -y`
Gemini CLI: `npx skills add with-pebbly/aseprite-ai-artist --skill shade -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add with-pebbly/aseprite-ai-artist`

## Description

Add light and shadow with proper hue shifting, one step at a time, so the sprite gains form without gaining the flat-luminance look that marks generated pixel art. Use when flat art needs volume.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Shade a sprite

Flat shading, the same hue, darker, is the clearest signal that a sprite was
made by moving a brightness slider. Real shading shifts hue.

## The rule

- **Shadows** rotate toward blue/purple and desaturate slightly.
- **Highlights** rotate toward yellow/orange and saturate slightly.

`recolor` op `shade` implements this. Use it instead of choosing darker hex
values yourself.

## Procedure

1. **Fix the light direction** and state it. Upper-left is the safe default. It
   does not move again, not across the sprite, not across animation frames.

2. **Confirm the flat art is right first.** `look` op `preview`. Shading a bad
   silhouette wastes the effort.

3. **One shadow step.** Select the region away from the light, then:

   ```
   select op="rect" rect={…}
   recolor op="shade" amount=-0.2 selectionOnly=true
   ```

   Or draw the shadow shape directly with `draw` if it needs to follow a form
   the selection tools cannot describe.

4. **Look.** `look op="preview"`. Does it read as volume, or as a stain? A
   shadow that follows the form's cross-section reads; one that follows the
   outline does not.

5. **One light step**, on the side facing the light: `amount=0.2`.

6. **Look again.** Most sprites are finished here.

7. **Only if it needs it**: a deep shadow (`amount=-0.4`) in occluded crevices,
   a specular highlight of one or two pixels on the hardest material, or
   reflected light, a faint cool step on the shadow side's outer edge, which
   makes metal read as metal.

## Ramps

If you will shade a material more than once, put its ramp in the palette:

```
palette op="ramp" base="#c04030" steps=5
```

Then draw with ramp entries directly. Reuse the darkest step across materials, it ties a sprite together and costs no palette slots.

## Dithering

Only on 32px+ and only in large flat areas. Use `bayer4`, keep the two colours
adjacent in a ramp, and stop if it reads as noise. See
`rules://02-shading-and-light`.

## Checks

The rest: https://github.com/with-pebbly/aseprite-ai-artist/blob/HEAD/skills/shade/SKILL.md