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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Но всё же у жанра есть свои характерные особенности:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Напоследок — если вы хотите узнать больше о «3D-пиксель-арте», он же воксель-арт, то мы написали об этом направлении подробную статью: Что такое воксели — и в каких программах вы можете создать воксель-арт. Надеемся, она будет вам полезна!

Текст написал Никита Барышников, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.