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

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

Работа художницы <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmobile.twitter.com%2Fnorma_2d&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Norma2D</a>
Работа художницы Norma2D

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

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

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

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

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

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

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

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

  • Карандаш. Для рисования пикселями.
  • Лупа. Для увеличения и уменьшения масштаба.
  • Ластик. Для стирания лишних пикселей.
  • Палитра. Для подбора цветов.
Пиксель-арт, созданного в Photoshop. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.artstation.com%2Fartwork%2Fzzzl6&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Пиксель-арт, созданного в Photoshop. Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример такого пайплайна. Книжку нарисовала <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.artstation.com%2Fkotokate&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Катерина Сафронова</a> на курсе по <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fsmirnov.school%2Fcgb%2F&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">основам CG</a>
Пример такого пайплайна. Книжку нарисовала Катерина Сафронова на курсе по основам CG

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

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

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

Этапы рисования пиксельного волшебника. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Этапы рисования пиксельного волшебника. Источник

Лайн

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

Как же я люблю пиксель-лайны, вот они слева направо: чёрный, усиленный, цветной, контур области, световой, выборочный, ломаный. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Как же я люблю пиксель-лайны, вот они слева направо: чёрный, усиленный, цветной, контур области, световой, выборочный, ломаный. Источник

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

Обычный чёрный лайн и финальный рисунок. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Обычный чёрный лайн и финальный рисунок. Источник

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

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

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

Пример цветного лайна. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
Пример цветного лайна. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

Сравнение цветового лайна и контура области. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Сравнение цветового лайна и контура области. Источник

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

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

Пример выборочного лайна. Посмотрите на мускулистую рыбу. Со светлой стороны нет чёрного контура, а с затемнённой — есть. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
Пример выборочного лайна. Посмотрите на мускулистую рыбу. Со светлой стороны нет чёрного контура, а с затемнённой — есть. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

Обратите внимания на надбровные дуги. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fpixelparmesan.com%2Fanti-aliasing-fundamentals-for-pixel-artists%2F&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Обратите внимания на надбровные дуги. Источник

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

Рисование от пятна. Сначала художник нарисовал прямоугольный треугольник, а зачем начал удалять и добавлять пиксель на отдельных участках. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Рисование от пятна. Сначала художник нарисовал прямоугольный треугольник, а зачем начал удалять и добавлять пиксель на отдельных участках. Источник

Цвет

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

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

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

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

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

Слева — пример переизбытка цветов палитры. Справа — лаконичное её использование. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Слева — пример переизбытка цветов палитры. Справа — лаконичное её использование. Источник

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

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

Всего трёх оттенков хватило, чтобы передать силуэт всех объектов композиции. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fsaint11.org%2Fblog%2Fthoughts_on_low_resolution%2F&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Всего трёх оттенков хватило, чтобы передать силуэт всех объектов композиции. Источник

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

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

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

Первые две палитры имеют явные проблемы с насыщенностью. Третья палитра включает в себя как яркие, так и пастельные тона. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Первые две палитры имеют явные проблемы с насыщенностью. Третья палитра включает в себя как яркие, так и пастельные тона. Источник

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

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

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

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

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

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

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

Тени

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

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

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

Пример удачного теневого градиента. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.behance.net%2Fgallery%2F57601691%2FAlien-Beach&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Пример удачного теневого градиента. Источник

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

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

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

Присмотритесь к контуру этого квадрата. Контур затемнённой стороны тёмно-коричневый, почти что бурый. Контур освещённой стороны гораздо светлее. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjO9ruYaCJmU&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Присмотритесь к контуру этого квадрата. Контур затемнённой стороны тёмно-коричневый, почти что бурый. Контур освещённой стороны гораздо светлее. Источник

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

Слева — нормальное затенение. Справа — «подушечное» затенение. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Слева — нормальное затенение. Справа — «подушечное» затенение. Источник

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

Куст слева — пример слабой работы с освещением. Справа автор применил несколько техник светотени сразу. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjO9ruYaCJmU&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Куст слева — пример слабой работы с освещением. Справа автор применил несколько техник светотени сразу. Источник

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

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

Дизеринг

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

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

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

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

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

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

В третьем градиенте оттенков ещё меньше, но при этом сам переход в несколько раз мягче — так происходит как раз из-за использование техники дизеринга. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
В третьем градиенте оттенков ещё меньше, но при этом сам переход в несколько раз мягче — так происходит как раз из-за использование техники дизеринга. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

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

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

Сглаживание

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

Слева объект без сглаживания, справа — со сглаживанием. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
Слева объект без сглаживания, справа — со сглаживанием. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

Ещё один пример сглаживания. Слева объект без сглаживания, справа — со сглаживанием. При этом цвет сглаживающих пикселей промежуточный между чёрным и фиолетовым — в данном случае это синий. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fvk.com%2F%40pixel_gif_arts-kak-sozdat-piksel-art-chast-5-sglazhivanie-i-banding&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Ещё один пример сглаживания. Слева объект без сглаживания, справа — со сглаживанием. При этом цвет сглаживающих пикселей промежуточный между чёрным и фиолетовым — в данном случае это синий. Источник

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

Первый волшебник без сглаживания, второй — с переизбытком сглаживания. У третьего волшебника всё идеально — сглаживающих пикселей не очень много. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Первый волшебник без сглаживания, второй — с переизбытком сглаживания. У третьего волшебника всё идеально — сглаживающих пикселей не очень много. Источник

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

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

Пример смягчения цветовых переходов. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
Пример смягчения цветовых переходов. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

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

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

У этой летучей мыши меняются несколько пикселей, но вместе с ними изменяются и эмоции от рисунка. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
У этой летучей мыши меняются несколько пикселей, но вместе с ними изменяются и эмоции от рисунка. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

Зазубрины делаеют линии кривыми, а формы — угловатыми. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DlfR7Qj04-UA&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Зазубрины делаеют линии кривыми, а формы — угловатыми. Источник

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

Если предыдущий отрезок состоял из трёх линий, то следующий должен состоять из двух или четырёх. Важно сохранять шаг в один пиксель. Источник — книга <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fmichafrar.gumroad.com%2Fl%2Fpixel-logic&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">«Pixel Logic - A Guide to Pixel Art»</a>
Если предыдущий отрезок состоял из трёх линий, то следующий должен состоять из двух или четырёх. Важно сохранять шаг в один пиксель. Источник — книга «Pixel Logic - A Guide to Pixel Art»

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

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

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

Пиксели — это квадраты, и мы не можем ничего с этим сделать.

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

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

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

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

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

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

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

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

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

Тот самый персонаж Педро. <a href="https://api.dtf.ru/v2.8/redirect?to=https%3A%2F%2Fsaint11.org%2Fabout%2F&postId=1257126" rel="nofollow noreferrer noopener" target="_blank">Источник</a>
Тот самый персонаж Педро. Источник

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

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

501501
11
79 комментариев

Рисовал когда-то пиксели

71
Ответить
43
Ответить

Здравствуйте! В какой программе можно создать такую гифку? В Game Marker?

Ответить

Комментарий недоступен

25
Ответить

Комментарий недоступен

23
Ответить

Было бы интересно глянуть изменения/исправления которые бы ты сделал на основе прочтения данного материала.

3
Ответить
Комментарий удалён модератором