Затенение в пиксель-арте

Затенение в пиксельном масштабе — скульптура из квадратов: кладите массы теней там, где плоскости отворачиваются от света, и держите каждый кластер осмысленным.

Один источник света, решённый заранее

Выберите направление — классика по умолчанию сверху слева — и никогда не двигайте его посреди спрайта. Каждая тень отвечает на один вопрос: смотрит ли эта плоскость на свет? Единые ответы по всей работе создают форму; гуляющие ответы создают шум. Сначала набросайте массы теней плоскими формами, детали — потом.

Плоский слайм без затенения рядом с тем же слаймом с направленным затенением — Рисунок: одно направление света, решённое заранее, — каждая тень ему отвечает.

Затенённый шар со светом слева и тот же шар со светом справа — Рисунок: последовательный свет выигрывает у правильного — никогда не двигайте его посреди спрайта.

Думайте кластерами, а не пикселями

Кластер — связное пятно одного цвета. Сильный пиксель-арт использует мало крупных кластеров; слабый рассыпает одинокие пиксели («шум») и лестницы в пиксель шириной («полосатость»). Затемняя, наращивайте имеющиеся кластеры, а не рассыпайте новые точки: меняйте форму массы тени вместо того, чтобы перчить её. Постоянно отдаляйте: кластеры судят в размере показа, а не на 800%.

Две классические ошибки

Затенение «подушкой» — затемнение всех краёв к центру, будто свет идёт от зрителя. Оно сплющивает всё в подушку. Вместо этого сдвигайте тени вбок.
Полосатость — ступенчатые ряды пикселей, соединяющие два цвета, обычно вдоль кривых. Ломайте их: сливайте ступени в тёмный кластер или перешагивайте кривую заново.

Шар с затенением «подушкой» и тёмными краями рядом с шаром с направленным затенением — Рисунок: «подушка» сплющивает всё в подушку — сдвигайте тени вбок.

Градиентам нужен дизеринг, плашкам — дисциплина

Там, где поверхность плавно гнётся (щёки, металл, небо), дизеринг меняет полосатость на фактуру. Там, где поверхности плоские (мультяшная одежда, интерфейс), держите заливки чистыми и пусть говорят шаги перехода. Одна работа может использовать оба приёма — только никогда на одной поверхности. В конце проверьте значения в оттенках серого.

Частые вопросы

Что такое затенение «подушкой» и чем оно плохо?

Затенение всех краёв к середине, будто свет спереди. Оно убивает направленную форму — вместо этого привязывайте тени к одному направлению света.

Что такое кластеры в пиксель-арте?

Связные пятна одного цвета. Меньше и крупнее кластеры читаются чище; рассыпанные одиночки читаются как шум.

Нужно ли дизерить затенение?

На плавных градиентах — да; на плоских заливках — нет. Подбирайте приём под поверхность, а не по привычке.

Как затемнять металл иначе, чем кожу?

Металл хочет плотных контрастных шагов и крошечных бликов; кожа — мягких близких по значению переходов с тенями со сдвигом тона. Подбирайте приём под материал.

Готовы рисовать? Откройте редактор пиксель-арта