Разбираемся в процессе создания пиксель-арта: от необходимых программ до подробного пайплайна.
В прошлом консоли и компьютеры тянули игры только в низком разрешении и с ограниченной цветовой палитрой, поэтому разработчикам игр и художникам приходилось передавать свои фантазии через набор пикселей.
Сегодня у нас есть мощное «железо» и продвинутые программы, в которых можно создавать невероятно реалистичные вещи — больше нет тех ограничений, которые вынуждали создавать пиксельное искусство.
Но несмотря на новые возможности, пиксель-арт не умер. Из необходимого подхода пиксель-арт вырос в эстетичный жанр с приятными вайбами прошлого. Теперь это ещё и инструмент, который экономит человекочасы и позволяет инди-разработчикам создавать свои игры без гигантских финансовых и временных вложений.
Скриншот из Dead Cells — популярной игры, дизайн которой создан в жанре Pixel ArtЕще это крутой инструмент для начинающих художников. Пиксель-арт доброжелателен к новичкам и прощает им многие огрехи. Рисуя в этом жанре, можно изучить основные законы композиции и создания арта, чтобы затем попробовать себя в классическом цифровом рисунке.
В каких программах создают пиксель-арт
Рисовать пиксель-арт можно в Photoshop, Paint, GIMP, Krita и других популярных редакторах, но это не так неудобно, как рисование в специальных программах.
Если вы всё равно хотите оставаться в рамках одной среды, то для создания пиксель-арта подойдут встроенные базовые инструменты, которые есть в любой из перечисленных программ:
- Карандаш. Для рисования пикселями.
- Лупа. Для увеличения и уменьшения масштаба.
- Ластик. Для стирания лишних пикселей.
- Палитра. Для подбора цветов.
Если вы не против попробовать что-то новое, то присмотритесь к Aseprite, который заточен исключительно под пиксельное творчество.
У Aseprite есть много крутых функций: создание новых пиксельных кистей, загрузка пользовательских палитр, создание палитры из готового изображения, быстрое создание ровных линий и геометрических фигур, создание пиксельных анимаций и многое другое.
Программа платная, но её можно получить бесплатно. Дело в том, что Aseprite — это программа с открытым исходным кодом, которая выложена на GitHub. И если пользователь не против потратить несколько десятков минут на компиляцию исходников, то он может получить программу бесплатно.
Посмотреть гайд по компиляции можно здесь.
Программа на английском языке, но один из энтузиастов сделал для неё русификатор.
Как рисовать пиксель-арт: пайплайн
Пайплайн — это последовательность этапов создания арта. Один из классических пайплайнов цифрового рисунка выглядит так: лайн -> светотень -> цвет -> текстурирование/рендер.
В зависимости от работы или подхода художника некоторые этапы могут меняться или и вовсе исчезать. Так вместо рисования лайном художник может работать от пятна, то есть вместо линий использовать сплошные формы для создания силуэта.
В этом плане пиксель-арт не отличается от других направлений цифрового рисунка. Здесь мы следуем по идентичному пайплайну, но учитываем особенности жанра — о них мы поговорим чуть позже.
Картинки и примеры взяты у блогеров 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:
Сглаживание
Сглаживание — ещё одна техника, которая смягчает острые и изогнутые объекты, а также размывает жёсткие контуры.
Суть техники в расставлении пикселей по углам объекта или контура — при этом цвет «сглаживающих» пикселей должен быть промежуточным.
Со сглаживанием можно перестараться — тогда изображение получится размытым и неестественным. Чтобы избежать эффекта размытия, не ставьте сглаживающие пиксели в большом количестве.
Проблемы со сглаживанием бывают не только из-за переизбытка сглаживающих пикселей. Иногда загибы контуров бывают слишком резкие, из-за чего вместо сглаживающих пикселей нужно нарисовать сглаживающие линии. Ошибка в том, что художники повторяют форму контура и рисуют столько же сглаживающих пикселей, сколько и пикселей самого контура. На выходе художник получает некрасивые «лесенки».
Сглаживание также применяется для смешивания цветовых переходов и создания более мягкого градиента. В этом он чем-то похож на дизеринг: результат похожий, но подход — разный.
Что важно знать, чтобы делать крутой пиксель-арт
Важен каждый пиксель
Пиксель-арт — это не то направление, где можно оставить случайный мазок кистью. Небольшое количество пикселей для работы означает, что каждый из них очень ценен и должен быть размещен с большей тщательностью. Это касается всего: контура, цвета, теней, и в особенности — текстур.
Поэтому всякий раз при создании новой пиксельной картинки думайте о том, какую роль на себя берёт тот или иной пиксель. Нужен ли он здесь? Всего пара пикселей, расположенных в разных позициях, могут изменить всю атмосферу рисунка.
Избегайте зазубрин
Зазубрины — это неровности в контуре. Вот как они выглядят:
Зазубрины появляются, когда количество пикселей в контуре идёт друг за другом непоследовательно. Если в контуре объекта художник сделал штрих в два пикселя, а потом сразу за ним рисует отрезок в четыре пикселя, то в этот момент появится зазубрина.
Избегать зазубрины просто: соблюдайте постоянство шага при рисовании контура, то есть уменьшайте или увеличивайте количество пикселей последовательно. Тогда ваши линии будут ровным и красивыми.
Используйте острые и прямые углы
Интересную вещь об особенностях жанра сказал пиксель-арт художник Педро Медейрос:
Пиксели — это квадраты, и мы не можем ничего с этим сделать.А вот что мы можем сделать, так это использовать этот факт для получения очень четких линий. Я всегда стараюсь использовать как можно больше углов в 90 градусов, поэтому форма пикселя помогает мне передать этот угол.Еще одно хорошее применение формы пикселя — это заостренные вещи. Пиксели очень острые, и это нужно использовать в отрисовке острия мечей и стрел.
Если для создания объекта подходит длинная прямая линия — рисуйте длинную прямую линию:
В пиксель-арте очень удобно рисовать контуры под углом в 45 градусов. Старайтесь чаще использовать такие углы при рисовании объектов:
Рисуйте только важные детали
Педро Медейро отмечает, что при работе с маленьким разрешением очень важно выбирать, что показать на картине, а что оставить на откуп фантазии зрителя.
Вы не сможете показать всё. Старайтесь выбирать тщательно, убирая все неважное, и концентрируйтесь на тех элементах, которые передают главное. Пример — мой персонаж из игры Celeste. Я сосредоточился на его бороде и волосах, потому что они много говорят о его характере. Его шарф и рюкзак я тоже посчитал важными, поскольку они помогают передать, что он взбирается на холодную гору.
Тео очень спокойный человек, поэтому я нарисовал его в расслабленной позе, переместив его торс на один пиксель назад.Обычно я избегаю дизеринг-узоров в одежде персонажей, но в этом случае я добавил их — так я гораздо лучше изображаю фланелевую рубашку, а через неё — хипстероватость моего персонажа. Наушники, висящие на рюкзаке, карманы и даже его лицо не были включены в спрайт, что позволило мне сэкономить много места.
Как стать CG-художником
Самообучение — это долгий и сложный путь. Придётся годами собирать нужные знания по крупицам, а затем не мало времени соединять их воедино. Онлайн-курсы — это то, что сэкономит ваше время и энергию.
Наша школа занимается подготовкой и обучением начинающих и опытных художников, и за 10 лет работы нам удалось обучить более 10000 студентов. Наши выпускники работают в таких компаниях, как Mytona, Pixar, Nexters и других.
За 10 лет мы выпустили более 30 курсов по 2D и 3D графике. Мы также обучаем левел арту, анимации и даже созданию комиксов. Вы сможете найти обучение вне зависимости от своего уровня — даже если вы ещё только думаете о рисовании.
Вот какие работы создают наши студенты:
Мы предлагаем беспроцентную рассрочку на наши курсы, а также дарим различные подарки: от статей и видео с рекомендациями по трудоустройству и до мини-курсов для изучения узконаправленных инструментов рисования.
Все читатели этой статьи могут также воспользоваться промокодом dzendzhitsu5, который даёт 5% скидку на большинство наших курсов. Скопируй его и переходи на сайт, чтобы узнать больше о программах обучения.