Логотип
  • Telegram
  • WhatsApp
  • ВК
  • Youtube
  • Artstation
+74992296669
г. Москва Пн - Вс с 10:00 до 19:00
Содержание
Показать содержание
17489
0

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

Собрали информацию, которая поможет как новичкам в пиксель арте, так и более опытным художникам.

Игровая графика и софт
Как рисовать в стиле пиксель-арт: пошаговый гайд, программы и полезные ссылки

Картина немецкой художницы Norma 2D

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

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

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

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

Программы для работы

Создавать пиксельные рисунки можно разными инструментами.

Первый вариант — рисовать пиксель арт в стандартных графических редакторах: Photoshop, Paint, GIMP и им подобным. Во всех этих редакторах есть инструмент «карандаш», которым можно рисовать отдельные пиксели.

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

К таким программам относятся Aseprite и Piskel. Мы советуем начинать с одной из них.

Aseprite

Лучшая и наиболее удобная программа для пиксельного рисования. В Steam программа стоит 435 рублей, но её можно получить бесплатно, если скомпилировать исходники с GitHub своими руками.

В Aseprite есть все инструменты для создания картинок и гифок в пиксельном стиле.

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

У программы нет официальной локализации, но один из пользователей GitHub сделал свой фанатский перевод интерфейса.

Переведённый интерфейс Aseprite

Piskel

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

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

Хотя программа и доступна из браузера, её можно скачать и использовать на своём ПК, если вам хочется нарисовать (2) что-то не заходя в интернет.

В отличие от Aseprite, здесь нет русского языка — даже в виде фанатского перевода.

Piskel удобен для быстрых набросков своей идеи

Как нарисовать пиксельный рисунок: разбираем по шагам

Пиксель арт проходит через те же этапы создания, что и другие рисунки:

  • Лайн.
  • Цвет.
  • Светотень.
  • Текстура.
Рисование персонажа проходит по тем же этапам, что и в обычном рисунке. Можно рисовать как от пятна (shadow), так и от контура (line). Источник

Пройдёмся по основам каждого этапа и рассмотрим их особенности в пиксельном стиле. 

Лайн

Лайн — это контур в один или пару пикселек, который создает очертания объекта. Есть разные виды лайна. Нарисовать объект можно любым видом, но все они создают различные ощущения и используются художниками с определенной целью.

Для удобства мы воспользуемся классификацией, которую предложил блогер Saultoons. Всего можно выделить 7 типов лайна:

  • Стандартный.
  • Двойной.
  • Цветной.
  • Контурный.
  • Световой.
  • Выборочный.
  • Ломаный.
Все семь типов лайнов и его отсутствие на правом нижнем варианте персонажа. Источник

Стандартный

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

Пример применения стандартного лайна. Источник

Двойной

Такой же контур, как и в стандартном, но толщиной в два или три слоя. Двойным лайном выделяют главный спрайт на фоне менее важных объектов.

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

Пример удачного и неудачного использования двойного лайна. Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

Цветной 

Контур, пиксели которого окрашены в более тёмный цвет самого объекта. Например, если основной цвет персонажа — голубой, то рисовать лайн нужно синего цвета.

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

Пример использования цветного лайна. Контур в этот раз не чёрный — его цвет чуть темнее основного цвета существ. Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

Контурный 

«Брат» цветного лайна, так как в них обоих контур окрашивается в более тёмный оттенок внутреннего цвета. Отличие контурного лайна от цветного в том, что при нём контур повторяет цвета разных областей с разным окрасом.

Цветной лайн — это когда у объекта один цвет, допустим, синий, а его контур — тёмно-синий. 

Контурный лайн — это когда у объекта несколько цветов: красный, зелёный, оранжевый. Соответственно, контуры этих областей будут тёмно-красным, тёмно-зелёным и тёмно-оранжевым.

Контурный лайн используют для снижения контрастности объекта и его слияния с фоном.

Легче понять, как рисовать объекты с контурным лайном, на примере. 

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

Световой 

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

Пример: белая борода волшебника. Внутренний цвет бороды — белый, освещённая сторона контура — светло-серая, а затенённая сторона контура — тёмно-серая.

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

Пример светового лайна. Присмотритесь к освещённым и затенённым сторонам разным элементов волшебника. Источник

Выборочный 

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

Подробнее о технике сглаживания мы расскажем на этапе текстурирования.

Пример использования выборочного лайна. Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

Ломаный 

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

Брови сверху сделаны ломаным лайном. Дуги снизу — стандартным. Источник

Цвет

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

Помимо этих знаний следует держать в голове два правила:

Палитра должна состоять из ограниченного количества цветов

Для большой сцены хватит от 16 и до 32 цветов в палитре. Для одного персонажа может хватить и 6 цветов.

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

14 цветов для небольшого персонажа, как в варианте слева, — это слишком много. Рисунок получился «шумным». Вариант справа — сдержаннее и чётче из-за ограничений в палитре. Источник

Палитра должна быть сбалансированной

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

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

Только у третьего персонажа нет проблем с насыщенностью цветов. У первых двух — есть. Источник

Светотень

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

Градиент

Градиент — это плавный переход от одного оттенка к другому. Градиент также помогает отражать светотень, когда мы рисуем переход от светлого оттенка к более тёмному или наоборот. 

Чем дальше часть объекта от источника света, тем темнее там будет пиксель.

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

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

Правило можно нарушать, но зачастую хватает 3-4 оттенков тени. Источник

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

Снижение четырёх оттенков до трёх сильно увеличило читаемость рисунка. Источник

Контур

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

Кратко напомним: в освещённых местах рисуйте светлый контур, а в затенённых участках — тёмный.

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

Блики

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

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

Используйте все три приема (контур + градиент + блик), чтобы получить максимально объемный объект.

Текстура

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

Дизеринг

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

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

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

Пример использования дизеринга для получения особой эстетики. Источник

Ещё дизерингом сглаживают теневой градиент. О теневом градиенте мы говорили в блоке про светотень.

Дизеринг помогает сделать границы цветового перехода более размытыми. Теневые переходы при применении дизеринга будут смотреться более красиво и гладко.

Первый столбец — пример теневого перехода в обычном рисунке. Второй столбец — теневой переход в пиксель арта. Третий столбец — теневой переход в пиксель арте с использованием техники дизеринга. Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

Сглаживание

Сглаживание размывает острые и строгие границы — это делает объект более живым и естественным.

Пример объекта без сглаживания (слева) и с ним (справа). Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

Для применения сглаживания расставьте по краям предмета или его частей пиксели промежуточного цвета. 

Это значит, что если на границе объекта соединяется чёрный цвет (контур) и белый (внутренняя часть объекта), то сглаживающие пиксели будут серого цвета. Тоже самое будет работать и с любым другим цветом.

Серые пиксели на границе объекта и фона слева делают объект более живым и мягким. Источник — книга «Логика Пикселей — Гайд по Пиксель Арту»

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

Вариант персонажа посередине — пример переизбытка сглаживания. Источник

Полезные ссылки: сайты с уроками и обучающая книга 

  • Lospec. Сайт с несколькими тысячами палитр специально для пиксель арт рисунков. На сайте показаны арты, которые были созданы этой палитрой — это удобно, так как художник сразу видит, на какой результат и настроение от рисунка он может рассчитывать. На сайте есть множество полезных гайдов и ссылок на другие нужные художнику ресурсы.
  • Pixel Logic – A Guide to Pixel Art. 242-страничная книга про пиксель арт. В книге огромное количество полезной информации, которая разбита по удобным разделам. Многие картинки из этой статьи как раз взяты оттуда.

    Книга не переведена на русский и стоит 9 долларов, но собранная там информация стоит своих денег.
  • Derekyu. Сайт разработчика пиксельных инди-игр. На сайте есть несколько полезных уроков по пиксель-арту, которые дополнят знания, полученные из этой статьи.
  • Saint11. Сайт ещё одного инди-разработчика, который хорошо разбирается в пиксель-арте. На сайте есть много полезных уроков по пиксель-арту.

    Конкретно эта ссылка ведёт на одну из страниц сайта, на котором собрано множество гифок с полезной информацией и приемами  в пиксель арте. По одним только этим гифкам уже можно выстроить обучение по рисованию в жанре.
Автор
Никита Барышников
специально для SmirnovSchool
Расскажи коллегам

Комментарии

    СТОИТ ИЗУЧИТЬ ПО ТЕМЕ