Пиксель-арт для начинающих: как нарисовать первый спрайт

Почему пиксель-арт хорош для старта

Маленький холст не даёт спрятаться за растушёвкой. Каждый пиксель — решение, и спрайт реально закончить за вечер.

Ограничения вместо чистого листа

Холст 32×32 и палитра из шести цветов снимают вопрос «с чего начать»: силуэт, свет, одна деталь.

Не нужна твёрдая рука

Пиксель ставится кликом. Дрожь руки почти не важна: важны счёт и глаз. Линию вы собираете из клеток, как мозаику.

Настройка холста

Сначала настройте редактор, иначе сглаживание съест стиль до первого пятна.

16×16, 32×32, 64×64

16×16 — иконка: силуэт и два-три пятна. 32×32 — первый персонаж: голова, торс, ноги читаются. 64×64 — уже одежда и сцена, но соблазн дробить растёт. Начните с 32×32. Как выбрать программу — в статье, как рисовать в онлайн-редакторе.

Отключить сглаживание кисти

Выключите anti-aliasing, жёсткость 100%, размер 1 пиксель. Полупрозрачный край плодит грязные цвета вне палитры. Ластик тоже жёсткий, один пиксель. Мягкую круглую кисть смените сразу.

Зум и сетка

Работайте на зуме 800–1600%, клетку должно быть видно. Рядом держите превью 100%: красота на зуме врёт. Сетка 1×1 помогает не терять счёт. Двигайтесь стрелками на один пиксель — линия чище, чем кистью от руки.

Ограниченная палитра

Пять-восемь цветов учат выбирать тон. Соберите палитру до силуэта и не расширяйте «на один разочек».

5–8 цветов достаточно

Возьмите тёмный контур, локальный цвет, свет, тень и цвет фона. Для персонажа добавьте один акцент — волосы или пряжку. Восемь цветов уже щедро. Запишите HEX на слое-легенде, чтобы не подобрать «почти тот же» коричневый.

Тёплый свет и холодная тень

Свет сместите в жёлтый или розовый, тень — в синий или фиолетовый. Не берите тень как «тот же цвет, только темнее»: получится грязь. Пары разобраны в материале про теорию цвета.

Линии и силуэт

Сначала чёрное пятно на контрастном фоне. Если залитый силуэт не узнаётся, цвет не поможет.

Чистая пиксельная линия без «лестниц»

«Лестница» — ступени разной длины в одном наклоне: 3-1-4-2 вместо 2-2-2. Держите одинаковый шаг. Двойные пиксели на изломе уберите: угол — одна клетка. Контур толщиной в 1 пиксель, внутри заливка.

Читаемость на малом размере

Отключите зум. Голова, торс и ноги должны остаться пятнами разной формы. Конечность в 1 пиксель пропадает, слишком толстая слипается с телом. Оставьте дырку в клетку между рукой и торсом, если жест позволяет. Тот же принцип читаемого контура — в лайн-арте.

Тени, антиалиасинг, дизеринг

Объём на клетке строится тремя тонами. Сглаживание и шахматка — точечные приёмы, не фон всей работы.

Три тона на объект

Локальный цвет, свет, тень — хватает кубу, плащу и лицу. Свет — пятном со стороны источника, тень — на нижней и дальней плоскости. Контур чуть подкрасьте соседним тоном, чтобы он не был чужой проволокой.

Когда нужен дизеринг

Дизеринг — шахматка из двух цветов палитры. Нужен на плоскостях 64×64 и выше, где переход иначе ступенька. На 32×32 почти всегда шумит. Не мешайте его с антиалиасингом в одном углу. Антиалиасинг здесь — 1–2 пикселя промежуточного цвета на диагонали, не мягкая кисть.

Первый спрайт по шагам

Соберите персонажа 32×32 за один подход. Цель — читаемый силуэт, не ресницы.

1. Холст 32×32, жёсткая кисть 1 px, сетка, зум 800%.
2. Силуэт одним тёмным: голова, торс, ноги.
3. Залейте локальные цвета из палитры в 5–8 оттенков.
4. Поставьте свет и тень по одному пятну на плоскость.
5. Добавьте одну деталь — пряжку, прядь или глаз 2×2.
6. Экспортируйте PNG методом nearest neighbor, без размытия.

Силуэт → цвет → тень → детали

Не начинайте с глаза. Порядок жёсткий: пятно, цвет, три тона, мелочь. Если деталь не читается в 100%, сотрите её. Лучше пустое плечо, чем каша из пяти пикселей «доспеха».

Экспорт без размытия

• PNG, не JPG: сжатие пачкает палитру;
• масштабируйте в 4, 6 или 8 раз методом nearest neighbor;
• не ставьте билинейное сглаживание — спрайт поплывёт;
• фон отдельно или с прозрачностью, если нужен игровой объект;
• исходник оставьте в файле редактора со слоями.

Почему JPG вреден мелкой графике — в разборе форматов PNG, JPG и SVG.

Пора рисовать, а не читать

Теория без практики выветривается за пару дней. Откройте редактор и потратьте 15 минут на то, о чём только что прочитали, — этого достаточно, чтобы навык закрепился.

Ключевые темы статьи

• пиксель арт для начинающих
• как рисовать пиксель арт
• спрайт 32х32
• палитра пиксель арт
• дизеринг

← Как рисовать город и архитектуру: улица в перспективе Чиби и милые персонажи: правила, по которым работает «кавай» →