Редактор пиксель-арта

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

Редактор пиксель-арта - это инструмент рисования на фиксированной сетке: вместо свободных мазков вы ставите отдельные пиксели, клетка за клеткой. В этом ограничении и есть очарование пиксель-арта: спрайты игр, ретро-иконки, аватары и иллюстрации в стиле 8 бит создаются осознанным выбором каждого пикселя.

В редакторе есть классический набор спрайт-редактора: карандаш, ластик, заливка и пипетка на сетках от 8x8 до 64x64, плюс покадровая анимация с живым предпросмотром. Экспортируйте результат как чёткий PNG любого размера, анимированный GIF или спрайт-лист, готовый для игрового движка.

А поскольку это Coddy, ваш рисунок - это ещё и код. Один клик превращает сетку в двумерный массив Python, фрагмент canvas на JavaScript, CSS-арт на box-shadow, SVG или CSV для таблиц: наглядный способ увидеть, что изображение - это просто массив цветов.

Чему вы научитесь, рисуя пиксель-арт

• Изображение - это двумерный массив: каждый пиксель - элемент со значением цвета. Экспорт в код показывает рисунок именно так: строки и столбцы hex-кодов.
• Маленькие палитры выглядят лучше. Классические спрайты используют от 4 до 32 цветов; ограничение вынуждает делать чистые формы и читаемые силуэты.
• Анимация - это просто кадры. Моргание или цикл ходьбы - несколько чуть разных сеток, показанных по очереди.
• Пиксель-арт масштабируется методом ближайшего соседа. Экспортируйте в 16x или 32x - квадраты останутся идеально чёткими; сглаживание их размыло бы.

Как рисовать пиксель-арт: пошагово

1. 1

   Выберите размер сетки

   Начинайте с малого: 16x16 или 32x32. Маленькие сетки заставляют делать простые читаемые формы; большинство классических спрайтов - 16x16 или 32x32. Размер можно сменить позже без потери рисунка.

2. 2

   Наметьте силуэт

   Карандаш - для контуров, заливка - для больших областей. Сначала нарисуйте общую форму одним цветом, потом добавляйте детали. Правая кнопка мыши (или ластик) стирает пиксель.

3. 3

   Затените маленькой палитрой

   Возьмите 2-3 тона на материал: базу, блик и тень. Встроенная палитра упорядочена так, чтобы такие рампы было легко найти, а пипетка подхватывает любой цвет уже на холсте.

4. 4

   Анимируйте (по желанию)

   Продублируйте кадр, сдвиньте несколько пикселей и нажмите воспроизведение. Двух-трёх кадров хватает на моргание, прыжок или мерцание пламени.

5. 5

   Экспортируйте

   Скачайте PNG с масштабом до 32x, анимированный GIF или спрайт-лист со всеми кадрами в ряд. Или откройте панель кода и скопируйте работу как Python, JavaScript, CSS, SVG или CSV.

Шпаргалка по пиксель-арту

Типовые размеры холста и форматы экспорта - и когда что использовать.

Примеры пиксель-арта

PIXELS = [    [None, "#e43b44", "#e43b44", None],    ["#e43b44", "#a22633", "#a22633", "#e43b44"],    [None, "#e43b44", "#a22633", None],    [None, None, "#e43b44", None],]
for row in PIXELS:    print("".join("█" if c else " " for c in row))

.pixel-art {    --px: 12px;    width: var(--px);    height: var(--px);    box-shadow:        calc(1 * var(--px)) 0 0 0 #e43b44,        calc(2 * var(--px)) 0 0 0 #e43b44,        calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}

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

• Начинать с сетки 64x64. Большой холст прячет слабые формы: учитесь на 16x16, где каждый пиксель - решение.
• Слишком много цветов. Если в спрайте 40 цветов, у него нет стиля. Возьмите маленькую рампу на материал и держитесь её.
• Масштабировать экспорт со сглаживанием. Пиксель-арт масштабируют ближайшим соседом (этот инструмент делает это за вас), иначе всё размывается.
• Экспортировать спрайты на белом фоне. Держите прозрачный фон для всего, что пойдёт в игру или поверх другого контента.
• Анимировать слишком многими кадрами. Классическое ощущение дают 2-4 удачных кадра, а не 16 почти одинаковых.

Вопросы о редакторе пиксель-арта