Как рисовать пиксель-арт: программы, пайплайн, советы

Разбираемся в процессе создания пиксель-арта: от необходимых программ до подробного пайплайна.

FV8tb9vWQAAOB27.png

Работа художницы Norma2D

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

Сегодня у нас есть мощное «железо» и продвинутые программы, в которых можно создавать невероятно реалистичные вещи — больше нет тех ограничений, которые вынуждали создавать пиксельное искусство.
Но несмотря на новые возможности, пиксель-арт не умер. Из необходимого подхода пиксель-арт вырос в эстетичный жанр с приятными вайбами прошлого. Теперь это ещё и инструмент, который экономит человекочасы и позволяет инди-разработчикам создавать свои игры без гигантских финансовых и временных вложений.

image49.jpg

Скриншот из Dead Cells — популярной игры, дизайн которой создан в жанре Pixel Art

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

image21.png

Пример пиксель-арта. Источник

В каких программах создают пиксель-арт

Рисовать пиксель-арт можно в Photoshop, Paint, GIMP, Krita и других популярных редакторах, но это не так неудобно, как рисование в специальных программах.

Если вы всё равно хотите оставаться в рамках одной среды, то для создания пиксель-арта подойдут встроенные базовые инструменты, которые есть в любой из перечисленных программ:

  • Карандаш. Для рисования пикселями.
  • Лупа. Для увеличения и уменьшения масштаба.
  • Ластик. Для стирания лишних пикселей.
  • Палитра. Для подбора цветов.

image40.png

Пиксель-арт, созданный в Photoshop. Источник

Если вы не против попробовать что-то новое, то присмотритесь к специальным программам, заточенным исключительно под пиксельное творчество.

Aseprite

  • Цена: 435 рублей в Steam и 20$ на официальном сайте. Бесплатно, если сможете скомпилировать программу самостоятельно (об этом ниже).
  • Платформы: Windows, MacOS и Ubuntu.

У Aseprite есть много крутых функций: создание новых пиксельных кистей, загрузка пользовательских палитр, создание палитры из готового изображения, быстрое создание ровных линий и геометрических фигур, создание пиксельных анимаций и многое другое.

Программа платная, но её можно получить бесплатно. Дело в том, что Aseprite — это программа с открытым исходным кодом, которая выложена на GitHub. И если пользователь не против потратить несколько десятков минут на компиляцию исходников, то он может получить программу бесплатно.

Посмотреть гайд по компиляции можно здесь.

Программа на английском языке, но один из энтузиастов сделал для неё русификатор.

image34.png

Интерфейс Aseprite

Piskel

  • Цена: Бесплатно.
  • Платформы: Windows, MacOS и Ubuntu.

Бесплатный веб-редактор со всеми основными функциями, которые нужны при рисовании в пиксель-арте. Здесь тоже можно быстро рисовать прямые линии и фигуры, создавать пользовательские палитры и пиксельную анимацию, но по богатству возможностей редактор всё же отстает от Aseprite.

Основные его преимущества — бесплатность и возможность создавать арт прямо в браузере. Удобно, если не хочется ничего скачивать или нужно сделать быстрый набросок. При этом программу можно скачать и использовать как декстопный редактор без интернет-подключения.

Из минусов — у программы нет русского языка: ни официального, ни пользовательского.

image2.png

Интерфейс Piskel

GameMaker Studio 2

  • Цена: в зависимости от уровня подписки. От бесплатного до 1389 рублей в месяц.
  • Платформы: Windows, MacOS.

Это не графический редактор, а игровой движок для создания 2D-игр, в котором есть встроенный редактор 2D-изображений, он же редактор спрайтов.

Программа подойдет, если вы хотите создавать 2D-игры, а не просто рисовать пиксель-арт. Для этого здесь есть все встроенные инструменты. Возможностей меньше, чем в Aseprite, но после создания картинки её можно сразу использовать в игровых целях — не нужно ничего экспортировать и подгонять под работу движка.

У движка есть встроенный русскоязычный интерфейс и несколько уровней доступа. На бесплатном уровне вам дают полную версию программы, но созданную игру можно будет экспортировать только в GXC — игровой магазин от браузера Opera.

За возможность экспортировать игру на ПК, мобилки и консоли нужно будет платить ежемесячную подписку.

image41.png

Интерфейс редактора спрайтов в GameMaker Studio 2

Другие профильные программы

Есть еще Pixel Studio, PyxelEdit, GraphicsGale и много других программ. Если перечисленных выше программ недостаточно, то рекомендуем почитать эту статью: 11 программ для работы с пиксель-артом.

Как рисовать пиксель-арт: пайплайн

Пайплайн — это последовательность этапов создания арта. Один из классических пайплайнов цифрового рисунка выглядит так: лайн -> цвет -> светотень -> текстурирование/рендер.

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

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

Картинки и примеры взяты у блогеров Saultoons, Peter Milko, MortMort и Diseven, художника Lux и инди-разработчиков Pedro Medeiros и Derek Yu.

image8.png

Этапы рисования пиксельного волшебника. Источник

Лайн

Лайн в пиксель-арте — это контур в один или несколько пикселей, который очерчивает границы объекта. Каждый из подвидов лайна носит свою функцию и применяется в зависимости от ситуации и стиля рисунка.

image23.png

Как же я люблю пиксель-лайны, вот они слева направо: чёрный, усиленный, цветной, контур области, световой, выборочный, ломаный. Источник

Чаще всего лайн рисуют чёрной линией толщиной в один пиксель. Это стандартный чёрный лайн.

image24.png

Обычный чёрный лайн и финальный рисунок. Источник

Углублённый лайн — это всё тот же чёрный контур, но толщиной не в один, а в два-три пикселя. Этот подтип лайна применяют, если хочется выделить объект на фоне других.

Не перестарайтесь — у толщины контура есть своя граница, при переходе которой рисунки получаются слишком «жирными».

image56.jpg

Пример чересчур жирного контура. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

image51.jpg

Пример цветного лайна. Источник — книга «Pixel Logic - A Guide to Pixel Art»

Контур области (area outline) — это подвид цветного лайна, в котором контур повторяет цвета внутренней области, но отличается более тёмным оттенком. В отличие от цветного лайна, который повторяет один внутренний цвет, контур области повторяет множество внутренних цветов.

image26.png

Сравнение цветового лайна и контура области. Источник

Падение света на объект можно показать как цветом, так и через контур. Если художник решил использовать для этой цели контур, то тогда он использует выборочный (sel-out) лайн,окрашивая контур с солнечной стороны в более светлые оттенки, а контур с затенённой стороны — в более тёмные.

Такой подтип лайна в связке с тенями внутри объекта ещё больше усиливает ощущение объемности объекта, что чудесно для статичных изображений, но может может быть плохо для пиксель-арт анимации, ибо такое сложнее анимировать.

image25.png

Пример выборочного лайна. Посмотрите на мускулистую рыбу. Со светлой стороны нет чёрного контура, а с затемнённой — есть. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

image52.png

Обратите внимания на надбровные дуги. Источник

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

image29.png

Рисование от пятна. Сначала художник нарисовал прямоугольный треугольник, а зачем начал удалять и добавлять пиксель на отдельных участках. Источник

Цвет

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

Не добавляйте в палитру одного объекта слишком много цветов

Слишком большое количество цветов на одном объекте может сделать рисунок «шумным». В примере ниже для создания пиксельного волшебника хватило шести цветов.

image47.png

Слева — пример переизбытка цветов палитры. Справа — лаконичное её использование. Источник

Если художник рисует целую сцену, для палитры хватит от 16 до 32 цветов. Это не железное правило, а скорее напутствие. Цветов в палитре может быть и больше, и меньше — в зависимости от типа рисунка и вашей идеи.

Можно с минимальным количеством оттенков сделать «читаемую» композицию:

image33.png

Всего трёх оттенков хватило, чтобы передать силуэт всех объектов композиции. Источник

Обращайте внимание на насыщенность палитры

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

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

image15.png

Первые две палитры имеют явные проблемы с насыщенностью. Третья палитра включает в себя как яркие, так и пастельные тона. Источник

Полезные ссылки

Для создания собственной палитры цветов пригодится сайт coolors.co — здесь можно сгенерировать случайную палитру или выбрать одну из тысячи уже созданных. Выбранную или сгенерированную палитру можно экспортировать в любой графический редактор.

Ещё один полезный сайт — Lospec. Здесь можно скачать одну из более 2000 пиксельных палитр. Под большинством палитр приведена картинка в соответствующих цветах, чтобы художник мог на практике увидеть, как эти цвета будут выглядеть на его картине.

image32.png

Палитры Lospec и как они выглядят на готовых рисунках

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

image12.png

Создание палитры из готового рисунка

Тени

Светотень в пиксель-арте выполняет такую же функцию, как и в обычном рисунке — она придает объектам объем. Как и в обычном рисунке, в пиксель-арте нужно выбрать источник света и его направление, после чего окрасить неосвещённые зоны в более тёмный оттенок основного цвета.

image18.png

Пример рисунка без теней. Источник


image7.png

Пример рисунка с тенями. Источник

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

Такой переход затемнённых оттенков называется градиентом. Градиент — это одна из техник затенения, которой часто пользуются пиксель-арт художники.

image6.png

Пример удачного теневого градиента. Источник

Но в пиксель-арте это может сыграть против творца. Если на пиксельном объекте будет слишком много переходов от одного тёмного оттенка к ещё более тёмному, то на выходе можно получить неестественный и некрасивый теневой градиент. Для примера держите гифку, которые перевели крутые ребята из группы «Pixel Gif | Пиксельные гифки | Arts». Присмотритесь к оранжевому роботу в центре.

image38.gif

Автор упрощает излишне детальный теневой переход у оранжевого робота до нескольких оттенков. Источник

Затенение можно передать и с помощью цветного контура. Для этого в освещенных участках объекта сделайте контур более светлым, а в теневом участке сделайте цвет контура более тёмным и насыщенным.

image50.png

Присмотритесь к контуру этого квадрата. Контур затемнённой стороны тёмно-коричневый, почти что бурый. Контур освещённой стороны гораздо светлее. Источник

Следует избегать «подушечного» затенения (Pillow Shading). Этот вид затенения возникает, если художник слабо представляет, как на самом деле работает свет. По итогу он окрашивает центр объекта в самый яркий цвет, а границы — в самый тёмный.

image19.png

Слева — нормальное затенение. Справа — «подушечное» затенение. Источник

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

image9.png

Куст слева — пример слабой работы с освещением. Справа автор применил несколько техник светотени сразу. Источник

Текстурирование

На этом этапе прорисовываются мелкие детали: пятна, грязь на объектах, потёртость и другие мелочи. Этот этап и действия характеры и для обычного CG-рисунка, но есть две особые техники, которые применяют именно в пиксель-арте.

Дизеринг

Дизеринг — это техника, которая помогала обходить технические ограничения в цветопередаче. С её помощью пиксельные художники создавали цвета, которых не было в палитре и которые нельзя было туда добавить из-за малого количества памяти.

Работало это просто: из двух цветов создавался третий путём перемешивания пикселей двух изначальных цветов.

image5.png

В полотно жёлтого цвета в шахматном порядке добавляем зелёный

image3.png

Проделываем так со всей площадью куба

image27.png

Отдаляем картину и вот наш глаз уже видит новый оттенок зелёного

Такое применение дизеринга уже неактуально — память компьютера позволяет хранить в палитре миллионы цветов. Если для рисунка нужен новый оттенок, то его просто выбирают на заготовленной палитре.

Но техника не ушла в прошлое — у неё появились другие применения. Пиксель-арт художники выяснили, что дизеринг отлично подходит для смягчения перехода между цветами.

Когда зритель отчётливо видит границы перехода между разными оттенками цвета, это может выглядеть некрасиво и неэстетично. Дизеринг смягчает переход, даже если в нём используется меньше оттенков, нежели при обычном градиенте.

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

image4.png
В третьем градиенте оттенков ещё меньше, но при этом сам переход в несколько раз мягче — так происходит как раз из-за использование техники дизеринга. Источник — книга «Pixel Logic - A Guide to Pixel Art»

Помимо сглаживания цветового перехода, техника применяется для текстурирования объектов. Объекты, на которых применяют дизеринг, получают эффект потёртости, грязи, шероховатости, небрежности и копоти.

image22.png

Дизеринг на пиксельной броне, который создает эффект потёртости. Источник

image42.png

Дизеринг на стене создает эффект грязи. Источник

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

image30.png

Стилизованный дизеринг на фоне. Источник

image37.png

Ещё несколько видов стилизованного дизеринга. В этих картинах они применены не с целью сгладить цветовые переходы или получить шероховатую текстуру объектов. Здесь дизеринг применяется для получения особой эстетики. Источник

Дизеринг создается либо вручную — автор расставляет пиксели между двумя цветами, — либо при помощи заливки с градиентом с включенной функцией дизеринга. Вот так это выглядит в Aseprite:

image14.png

Сверху — включенная функция дизеринга. Справа — сам инструмент

Сглаживание

Сглаживание — ещё одна техника, которая смягчает острые и изогнутые объекты, а также размывает жёсткие контуры.

image48.png

Слева объект без сглаживания, справа — со сглаживанием. При этом цвет сглаживающих пикселей промежуточный между чёрным и фиолетовым — в данном случае это синий. Источник

Суть техники в расставлении пикселей по углам объекта или контура — при этом цвет «сглаживающих» пикселей должен быть промежуточным. Со сглаживанием можно перестараться — тогда изображение получится размытым и неестественным. Чтобы избежать эффекта размытия, не ставьте сглаживающие пиксели в большом количестве.

image55.png

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

Проблемы со сглаживанием бывают не только из-за переизбытка сглаживающих пикселей. Иногда загибы контуров бывают слишком резкие, из-за чего вместо сглаживающих пикселей нужно нарисовать сглаживающие линии. Ошибка в том, что художники повторяют форму контура и рисуют столько же сглаживающих пикселей, сколько и пикселей самого контура. На выходе художник получает некрасивые «лесенки».

image44.png

Чтобы избежать лесенок делайте сглаживающие линии в половину или в ⅔ меньше контура. Также следите за оттенками: сглаживающие линии не должны иметь в себе более трёх оттенков пикселей, как на верхней левом примере. Источник

image43.png

Пример правильного и неправильного использования сглаживания. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

image10.png

Пример смягчения цветовых переходов. Источник — книга «Pixel Logic - A Guide to Pixel Art»

Что важно знать, чтобы делать крутой пиксель-арт

Важен каждый пиксель

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

Поэтому всякий раз при создании новой пиксельной картинки думайте о том, какую роль на себя берёт тот или иной пиксель. Нужен ли он здесь? Всего пара пикселей, расположенных в разных позициях, могут изменить всю атмосферу рисунка.

image31.png

У этой летучей мыши меняются несколько пикселей, но вместе с ними изменяются и эмоции от рисунка. Источник — книга «Pixel Logic - A Guide to Pixel Art»

Избегайте зазубрин

Зазубрины — это неровности в контуре. Вот как они выглядят:

image17.png

Зазубрины делаеют линии кривыми, а формы — угловатыми. Источник

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

image20.jpg

Если предыдущий отрезок состоял из трёх линий, то следующий должен состоять из двух или четырёх. Важно сохранять шаг в один пиксель. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

Используйте острые и прямые углы

Интересную вещь об особенностях жанра сказал пиксель-арт художник Педро Медейрос:

«Пиксели — это квадраты, и мы не можем ничего с этим сделать. А вот что мы можем сделать, так это использовать этот факт для получения очень четких линий. Я всегда стараюсь использовать как можно больше углов в 90 градусов, поэтому форма пикселя помогает мне передать этот угол.

Еще одно хорошее применение формы пикселя — это заостренные вещи. Пиксели очень острые, и это нужно использовать в отрисовке острия мечей и стрел».

Если для создания объекта подходит длинная прямая линия — рисуйте длинную прямую линию:

image53.png
Источник

В пиксель-арте очень удобно рисовать контуры под углом в 45 градусов. Старайтесь чаще использовать такие углы при рисовании объектов:

image54.png

Источник

Рисуйте только важные детали

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

«Вы не сможете показать всё. Старайтесь выбирать тщательно, убирая все неважное, и концентрируйтесь на тех элементах, которые передают главное.

Пример — мой персонаж из игры Celeste. Я сосредоточился на его бороде и волосах, потому что они много говорят о его характере. Его шарф и рюкзак я тоже посчитал важными, поскольку они помогают передать, что он взбирается на холодную гору. Тео очень спокойный человек, поэтому я нарисовал его в расслабленной позе, переместив его торс на один пиксель назад.

Обычно я избегаю дизеринг-узоров в одежде персонажей, но в этом случае я добавил их — так я гораздо лучше изображаю фланелевую рубашку, а через неё — хипстероватость моего персонажа. Наушники, висящие на рюкзаке, карманы и даже его лицо не были включены в спрайт, что позволило мне сэкономить много места».

image13.png

Тот самый персонаж Педро. Источник

755 0 850 9
0
RENDER.RU