Dithering

Туториал по дизерингу

  — Дизеринг (Dithering) (англ. dither от староанглийского didderen — дрожать.
В компьютерной графике дизеринг используется для создания иллюзии глубины цвета для изображений с относительно небольшим количеством цветов в палитре. (Материал из свободной википедии)

Итак, если сказать своими словами: дизеринг дает псевдо-цвет, за счет чередующихся пикселей двух реальных цветов. Допустим у нас есть черно-белый монитор и ,соответственно, только два цвета   —  черный и белый. Чтобы получить иллюзию серого, разместим пиксели черного и белого в шахматном порядке.

Готово! Вы великолепны.

Зачем это было нужно?
Вспомним Gameboy, с его 4-мя оттенками серого или NES с его 54-мя цветами. С такими суровыми ограничениями, дизеринг был очень хорошим приемом.

На кой это нужно сейчас?
Для приадния олдскульного шарма и трушности в пиксель-арте.
Дизеринг   — ,это как минимум,хороший тон. Если игнорировать данный прием, ваш арт будет смотреться незавершенным. (К слову, стоит добавить что дизеринг в пиксель-арте далеко не везде обоснован, и часто заменятся отрисовкой фактуры материала или просто игнорируется)

Вот культовая вещь. Здесь просто дофига дизеринга и всего Два цвета.

Как сделать также круто:

способ №1, Ручной:

Самый провереный способ   —  руками. Берем однопиксельный карандаш и упорно тыцаем пиксели смежных цветов в определенном порядке.
например здесь:


Это самый действенный и правильный подход когда дизеринг нужен на небольшой площади. При рисовании объекта, отдельного тайла или героя.

способ №2, Паттерны:

Когда рисуем сцену, например для бекграунда или чего нибудь еще, целесообразно применять заготовленные кисти с дизерингом.

Например как сдесь:

Создаем кисть с паттерном:
1)Берем фотошоп, создаем новый документ, 4 на 4 пикселя обычно как раз то что нужно. Рисуем однопиксельным карандашом наш черно-белый паттерн.
2)Определяем нашу картинку как пресет для кисти (File > Define brush preset)
3)Называем его как нибудь. Желательно логично, чтобы не искать нужную кисть в будущем.
4)Выбираем нашу кисть и заходим в её настройки (hotkey - F5). Дублируем кисть и выставляем параметр Spacing на 100%. Этот параметр задает через какой промежуток, относительно размера кисти, кисть будет повторяться. Это важный параметр и он должен быть именно 100% Догадываетесь почему?
Готово.

способ №3, Читерский:

Иногда нужно сделать дизеринг на крупной площади, при том монотонной. Обычно это небо для какой нибудь сцены. Можно всё сделать и способом №2, но есть способ быстрее и проще. Использовать алгоритмы дизеринга самого фотошопа.
Создаем новый документ, размером равным нужному фону с дизерингом.
Заливаем градиентом с переходом от одног онужного цвета в другой.
Сохраняем через Save For Web (Shift+Cntrl+Alt+S если кто не знал) и выбираем PNG-8, а в меню палитры понижаем количество цветов, до которого надо уменьшить палитру. Также тут можно выбрать способ програмного дизеринга. Экспериментируйте.

Еще немного теории:

Как видите, количественным соотношением пикселей одного или иного цвета, мы можем регулировать оттенок нашего псевдо-цвета, и управлять плавностью перехода.
Так, если на границе двух цветов использовали соотношение 50/50, а за ним 25/75 (граница с "шахматными", затем полностью столбец основного цвета, а за ним черезпиксельное чередование вносимого цвета) получаем вот такой плавный градиент.



Также дизерингом можно сделать тени под игроком, если хотите обойтись без альфа-канала. Просто чередуйте пиксели прозрачности и цвета тени.
Ну и конечно же не забывайте, что использование дизеринга для шейдинга делает работы куда более красивыми, трушными и выразительными.
Удачи и креатива вам в работе. В ближайшее время выложу подборку сових кистей для дизеринга.