Основы рисования пиксель арта
Данная статья представляет собой небольшой блок знаний об пиксель арте и его рисовании.
Что это и зачем это?
Пиксель арт – это изображение, нарисованное пикселями (квадратами). Пиксель-арт появился на свет из необходимости т. к. старые приставки и автоматы не могли создавать что-то сложнее мозаики из квадратных точек. Между тем, компьютерная графика уже требовалась. Сначала это были чёрно-белые, потом с палитрой из 4 цветов и дальше по нарастающей. С увеличением мощностей увеличивается количество пикселей на экране. Со временем пиксель арт теряет популярность, уступая место 3D и векторной графике. Однако с приходом Terraria, Undertale, Fez, Hotline Miami и много других, пиксель арт получил надежду на возрождение. У него появилась своя база поклонников и много художников начало развиваться в этой области. Поэтому я пишу эту статью, чтобы облегчить путь новичкам, желающим начать рисовать пиксель арт.
Про нетрадиционные способы рисования
Сейчас есть очень много способов создания пиксель арта, которые могут быть легче, чем традиционный. Например, как в игре Dead Cells. Художники создали 3D модель, после экспортировали в. png с дальнейшим ухудшением качества, чтобы выглядело «пиксельно». Это сделано дабы уменьшить затраты времени и денег на прорисовку большого количества кадров.
Основы пиксельарта (Часть 1)
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты — это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.
Предыстория
Metal Slug 3 (Arcade). SNK, 2000.
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? — cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Как рисовать пиксель-арт: программы, пайплайн, советы
Разбираемся в процессе создания пиксель-арта: от необходимых программ до подробного пайплайна.
Работа художницы Norma2D
В прошлом консоли и компьютеры тянули игры только в низком разрешении и с ограниченной цветовой палитрой, поэтому разработчикам игр и художникам приходилось передавать свои фантазии через набор пикселей.
Сегодня у нас есть мощное «железо» и продвинутые программы, в которых можно создавать невероятно реалистичные вещи — больше нет тех ограничений, которые вынуждали создавать пиксельное искусство.
Но несмотря на новые возможности, пиксель-арт не умер. Из необходимого подхода пиксель-арт вырос в эстетичный жанр с приятными вайбами прошлого. Теперь это ещё и инструмент, который экономит человекочасы и позволяет инди-разработчикам создавать свои игры без гигантских финансовых и временных вложений.
Скриншот из Dead Cells — популярной игры, дизайн которой создан в жанре Pixel Art
В каких программах создают пиксель-арт
Рисовать пиксель-арт можно в Photoshop, Paint, GIMP, Krita и других популярных редакторах, но это не так неудобно, как рисование в специальных программах.
Если вы всё равно хотите оставаться в рамках одной среды, то для создания пиксель-арта подойдут встроенные базовые инструменты, которые есть в любой из перечисленных программ:
- Карандаш. Для рисования пикселями.
- Лупа. Для увеличения и уменьшения масштаба.
- Ластик. Для стирания лишних пикселей.
- Палитра. Для подбора цветов.
Пиксель-арт, созданного в Photoshop. Источник
Если вы не против попробовать что-то новое, то присмотритесь к специальным программам, заточенным исключительно под пиксельное творчество.
Aseprite
- Цена: 435 рублей в Steam и 20$ на официальном сайте. Бесплатно, если сможете скомпилировать программу самостоятельно (об этом ниже).
- Платформы: Windows, MacOS и Ubuntu.
У Aseprite есть много крутых функций: создание новых пиксельных кистей, загрузка пользовательских палитр, создание палитры из готового изображения, быстрое создание ровных линий и геометрических фигур, создание пиксельных анимаций и многое другое.
Программа платная, но её можно получить бесплатно. Дело в том, что Aseprite — это программа с открытым исходным кодом, которая выложена на GitHub. И если пользователь не против потратить несколько десятков минут на компиляцию исходников, то он может получить программу бесплатно.
Посмотреть гайд по компиляции можно здесь.
Программа на английском языке, но один из энтузиастов сделал для неё русификатор.
Интерфейс Aseprite
Piskel
- Цена: Бесплатно.
- Платформы: Windows, MacOS и Ubuntu.
Бесплатный веб-редактор со всеми основными функциями, которые нужны при рисовании в пиксель-арте. Здесь тоже можно быстро рисовать прямые линии и фигуры, создавать пользовательские палитры и пиксельную анимацию, но по богатству возможностей редактор всё же отстает от Aseprite.
Основные его преимущества — бесплатность и возможность создавать арт прямо в браузере. Удобно, если не хочется ничего скачивать или нужно сделать быстрый набросок. При этом программу можно скачать и использовать как декстопный редактор без интернет-подключения.
Из минусов — у программы нет русского языка: ни официального, ни пользовательского.
Интерфейс Piskel
GameMaker Studio 2
- Цена: в зависимости от уровня подписки. От бесплатного до 1389 рублей в месяц.
- Платформы: Windows, MacOS.
Это не графический редактор, а игровой движок для создания 2D-игр, в котором есть встроенный редактор 2D-изображений, он же редактор спрайтов.
Программа подойдет, если вы хотите создавать 2D-игры, а не просто рисовать пиксель-арт. Для этого здесь есть все встроенные инструменты. Возможностей меньше, чем в Aseprite, но после создания картинки её можно сразу использовать в игровых целях — не нужно ничего экспортировать и подгонять под работу движка.
У движка есть встроенный русскоязычный интерфейс и несколько уровней доступа. На бесплатном уровне вам дают полную версию программы, но созданную игру можно будет экспортировать только в GXC — игровой магазин от браузера Opera.
За возможность экспортировать игру на ПК, мобилки и консоли нужно будет платить ежемесячную подписку.
Интерфейс редактора спрайтов в GameMaker Studio 2
Другие профильные программы
Есть еще Pixel Studio, PyxelEdit, GraphicsGale и много других программ. Если перечисленных выше программ недостаточно, то рекомендуем почитать эту статью: 11 программ для работы с пиксель-артом.
Как рисовать пиксель-арт: пайплайн
Пайплайн — это последовательность этапов создания арта. Один из классических пайплайнов цифрового рисунка выглядит так: лайн -> светотень -> цвет -> текстурирование/рендер.
Пример такого пайплайна. Книжку нарисовала Катерина Сафронова на курсе по основам CG
В зависимости от работы или подхода художника некоторые этапы могут меняться или и вовсе исчезать. Так вместо рисования лайном художник может работать от пятна, то есть вместо линий использовать сплошные формы для создания силуэта.
В этом плане пиксель-арт не отличается от других направлений цифрового рисунка. Здесь мы следуем по идентичному пайплайну, но учитываем особенности жанра — о них мы поговорим чуть позже.
Картинки и примеры взяты у блогеров Saultoons, Peter Milko, MortMort и Diseven, художника Lux и инди-разработчиков Pedro Medeiros и Derek Yu.
Этапы рисования пиксельного волшебника. Источник
Лайн
Лайн в пиксель-арте — это контур в один или несколько пикселей, который очерчивает границы объекта. Каждый из подвидов лайна носит свою функцию и применяется в зависимости от ситуации и стиля рисунка.
Как же я люблю пиксель-лайны, вот они слева направо: чёрный, усиленный, цветной, контур области, световой, выборочный, ломаный. Источник
Чаще всего лайн рисуют чёрной линией толщиной в один пиксель. Это стандартный чёрный лайн.
Обычный чёрный лайн и финальный рисунок. Источник
Цветной (coloured) лайн получается, когда в качестве контура художник использует более тёмные оттенки внутреннего цвета объекта. То есть если объект окрашен в синий цвет, то в качестве лайна используется тёмно-синий оттенок. Такой подвид лайна уменьшает контрастность и чёткость контура, что может пригодиться при отрисовке фона или второстепенного объекта.
Пример цветного лайна. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Контур области (area outline) — это подвид цветного лайна, в котором контур повторяет цвета внутренней области, но отличается более тёмным оттенком. В отличие от цветного лайна, который повторяет один внутренний цвет, контур области повторяет множество внутренних цветов.
Сравнение цветового лайна и контура области. Источник
Падение света на объект можно показать как цветом, так и через контур. Если художник решил использовать для этой цели контур, то тогда он использует выборочный (sel-out) лайн,окрашивая контур с солнечной стороны в более светлые оттенки, а контур с затенённой стороны — в более тёмные.
Такой подтип лайна в связке с тенями внутри объекта ещё больше усиливает ощущение объемности объекта, что чудесно для статичных изображений, но может может быть плохо для пиксель-арт анимации, ибо такое сложнее анимировать.
Пример выборочного лайна. Посмотрите на мускулистую рыбу. Со светлой стороны нет чёрного контура, а с затемнённой — есть. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Ещё один подтип — ломаный лайн. По сути это простой контур с небольшими пустотами, которые разрывают сплошную линию. С помощью ломаного лайна смягчают края и фигуры без применении техники сглаживания.
На рисунке ниже показано два способа смягчения: на верхней картинке применяется ломаный лайн, а на нижней — техника сглаживания.
Обратите внимания на надбровные дуги. Источник
На первом этапе можно рисовать не только лайном, но и от пятна — это когда художник сначала рисует сплошные формы, а затем начинает удалять или добавлять пиксели к первоначальной фигуре.
Рисование от пятна. Сначала художник нарисовал прямоугольный треугольник, а зачем начал удалять и добавлять пиксель на отдельных участках. Источник
Цвет
В пиксель-арте действуют те же правила, что и в любом другом арте. Он подчиняется общим законам композиции, перспективы и цвета.
Важно разбираться во всех этих сферах, если вы хотите рисовать крутые пиксельные рисунки. Если вы знаете, что где-то в теории цвета у вас проседают знания, то рекомендуем прочитать четыре наших статьи:
- Цвет. Температура и восприятие.
- Температура цвета меняет перспективу. Правда ли это?
- Помещаем объект в окружение. Изучаем свет и цвет.
- Работа с цветом. Опыт Марко Буччи, иллюстратора, сотрудничавшего с Walt Disney
Но всё же у жанра есть свои характерные особенности:
Не добавляйте в палитру одного объекта слишком много цветов
Слишком большое количество цветов на одном объекте может сделать рисунок «шумным». В примере ниже для создания пиксельного волшебника хватило шести цветов.
Слева — пример переизбытка цветов палитры. Справа — лаконичное её использование. Источник
Если художник рисует целую сцену, для палитры хватит от 16 до 32 цветов. Это не железное правило, а скорее напутствие. Цветов в палитре может быть и больше, и меньше — в зависимости от типа рисунка и вашей идеи.
Можно с минимальным количеством оттенков сделать «читаемую» композицию:
Всего трёх оттенков хватило, чтобы передать силуэт всех объектов композиции. Источник
Обращайте внимание на насыщенность палитры
Если цвета будут слишком насыщенными, то рисунок будет выжигать глаза. Если все цвета будут пастельными, то рисунок получится блеклым.
Старайтесь комбинировать: простые и нейтральные оттенки для основной площади рисунка и насыщенные яркие цвета в важных акцентах.
Первые две палитры имеют явные проблемы с насыщенностью. Третья палитра включает в себя как яркие, так и пастельные тона. Источник
Полезные ссылки
Для создания собственной палитры цветов пригодится сайт coolors.co — здесь можно сгенерировать случайную палитру или выбрать одну из тысячи уже созданных. Выбранную или сгенерированную палитру можно экспортировать в любой графический редактор.
Ещё один полезный сайт — Lospec. Здесь можно скачать одну из более 2000 пиксельных палитр. Под большинством палитр приведена картинка в соответствующих цветах, чтобы художник мог на практике увидеть, как эти цвета будут выглядеть на его картине.
Палитры Lospec и как они выглядят на готовых рисунках
Если вы рисуете в Aseprite, то палитру можно создать из любой картинки в интернете. Это удобно, если вы нашли крутой референс, стилистику и настроение которого хочется повторить.
Просто загрузите арт, который вам понравился, затем нажмите на кнопку с тремя горизонтальными линиями и выберите последний пункт выпадающего меню.
Создание палитры из готового рисунка
В отличие от обычного цифрового или классического рисунка, в пиксель-арте можно пренебрегать частыми теневыми переходами. У художника может появиться соблазн показать детальный переход тени и сделать более трёх затемненных оттенков по мере удаления от источника света.
Такой переход затемнённых оттенков называется градиентом. Градиент — это одна из техник затенения, которой часто пользуются пиксель-арт художники.
Пример удачного теневого градиента. Источник
Но в пиксель-арте это может сыграть против творца. Если на пиксельном объекте будет слишком много переходов от одного тёмного оттенка к ещё более тёмному, то на выходе можно получить неестественный и некрасивый теневой градиент. Для примера держите гифку, которые перевели крутые ребята из группы «Pixel Gif | Пиксельные гифки | Arts». Присмотритесь к оранжевому роботу в центре.
Автор упрощает излишне детальный теневой переход у оранжевого робота до нескольких оттенков. Источник
Затенение можно передать и с помощью цветного контура. Для этого в освещенных участках объекта сделайте контур более светлым, а в теневом участке сделайте цвет контура более тёмным и насыщенным.
Присмотритесь к контуру этого квадрата. Контур затемнённой стороны тёмно-коричневый, почти что бурый. Контур освещённой стороны гораздо светлее. Источник
Следует избегать «подушечного» затенения (Pillow Shading). Этот вид затенения возникает, если художник слабо представляет, как на самом деле работает свет. По итогу он окрашивает центр объекта в самый яркий цвет, а границы — в самый тёмный.
Слева — нормальное затенение. Справа — «подушечное» затенение. Источник
Можно применить и все техники разом. На картинке ниже на кустах слева почти не используется затенение, за исключением некоторых участков. На кустах справа автор применил множество техник сразу: добавил чёткий контур, выделил края листков светлыми тонами и использовал теневой градиент.
Куст слева — пример слабой работы с освещением. Справа автор применил несколько техник светотени сразу. Источник
Такое применение дизеринга уже неактуально — память компьютера позволяет хранить в палитре миллионы цветов. Если для рисунка нужен новый оттенок, то его просто выбирают на заготовленной палитре.
Но техника не ушла в прошлое — у неё появились другие применения. Пиксель-арт художники выяснили, что дизеринг отлично подходит для смягчения перехода между цветами.
Когда зритель отчётливо видит границы перехода между разными оттенками цвета, это может выглядеть некрасиво и неэстетично. Дизеринг смягчает переход, даже если в нём используется меньше оттенков, нежели при обычном градиенте.
Посмотрите на картинку ниже. Первый градиент включает в себя слишком много оттенков. Настолько, что он уже перестал быть пиксель-артом. Во втором градиенте оттенков мало и из-за этого мы видим между ними границы перехода. А теперь взгляните на третий градиент:
В третьем градиенте оттенков ещё меньше, но при этом сам переход в несколько раз мягче — так происходит как раз из-за использование техники дизеринга. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Дизеринг создается либо вручную — автор расставляет пиксели между двумя цветами, — либо при помощи заливки с градиентом с включенной функцией дизеринга. Вот так это выглядит в Aseprite:
Сверху — включенная функция дизеринга. Справа — сам инструмент
Сглаживание
Сглаживание — ещё одна техника, которая смягчает острые и изогнутые объекты, а также размывает жёсткие контуры.
Слева объект без сглаживания, справа — со сглаживанием. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Суть техники в расставлении пикселей по углам объекта или контура — при этом цвет «сглаживающих» пикселей должен быть промежуточным.
Ещё один пример сглаживания. Слева объект без сглаживания, справа — со сглаживанием. При этом цвет сглаживающих пикселей промежуточный между чёрным и фиолетовым — в данном случае это синий. Источник
Со сглаживанием можно перестараться — тогда изображение получится размытым и неестественным. Чтобы избежать эффекта размытия, не ставьте сглаживающие пиксели в большом количестве.
Первый волшебник без сглаживания, второй — с переизбытком сглаживания. У третьего волшебника всё идеально — сглаживающих пикселей не очень много. Источник
Сглаживание также применяется для смешивания цветовых переходов и создания более мягкого градиента. В этом он чем-то похож на дизеринг: результат похожий, но подход — разный.
Пример смягчения цветовых переходов. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Что важно знать, чтобы делать крутой пиксель-арт
Важен каждый пиксель
Пиксель-арт — это не то направление, где можно оставить случайный мазок кистью. Небольшое количество пикселей для работы означает, что каждый из них очень ценен и должен быть размещен с большей тщательностью. Это касается всего: контура, цвета, теней, и в особенности — текстур.
Поэтому всякий раз при создании новой пиксельной картинки думайте о том, какую роль на себя берёт тот или иной пиксель. Нужен ли он здесь? Всего пара пикселей, расположенных в разных позициях, могут изменить всю атмосферу рисунка.
У этой летучей мыши меняются несколько пикселей, но вместе с ними изменяются и эмоции от рисунка. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Избегайте зазубрин
Зазубрины — это неровности в контуре. Вот как они выглядят:
Зазубрины делаеют линии кривыми, а формы — угловатыми. Источник
Зазубрины появляются, когда количество пикселей в контуре идёт друг за другом непоследовательно. Если в контуре объекта художник сделал штрих в два пикселя, а потом сразу за ним рисует отрезок в четыре пикселя, то в этот момент появится зазубрина.
Если предыдущий отрезок состоял из трёх линий, то следующий должен состоять из двух или четырёх. Важно сохранять шаг в один пиксель. Источник — книга «Pixel Logic — A Guide to Pixel Art»
Избегать зазубрины просто: соблюдайте постоянство шага при рисовании контура, то есть уменьшайте или увеличивайте количество пикселей последовательно. Тогда ваши линии будут ровным и красивыми.
Используйте острые и прямые углы
Интересную вещь об особенностях жанра сказал пиксель-арт художник Педро Медейрос:
Пиксели — это квадраты, и мы не можем ничего с этим сделать.
А вот что мы можем сделать, так это использовать этот факт для получения очень четких линий. Я всегда стараюсь использовать как можно больше углов в 90 градусов, поэтому форма пикселя помогает мне передать этот угол.
Еще одно хорошее применение формы пикселя — это заостренные вещи. Пиксели очень острые, и это нужно использовать в отрисовке острия мечей и стрел.
Если для создания объекта подходит длинная прямая линия — рисуйте длинную прямую линию:
В пиксель-арте очень удобно рисовать контуры под углом в 45 градусов. Старайтесь чаще использовать такие углы при рисовании объектов:
Рисуйте только важные детали
Педро Медейро отмечает, что при работе с маленьким разрешением очень важно выбирать, что показать на картине, а что оставить на откуп фантазии зрителя.
Вы не сможете показать всё. Старайтесь выбирать тщательно, убирая все неважное, и концентрируйтесь на тех элементах, которые передают главное.
Пример — мой персонаж из игры Celeste. Я сосредоточился на его бороде и волосах, потому что они много говорят о его характере. Его шарф и рюкзак я тоже посчитал важными, поскольку они помогают передать, что он взбирается на холодную гору. Тео очень спокойный человек, поэтому я нарисовал его в расслабленной позе, переместив его торс на один пиксель назад.
Обычно я избегаю дизеринг-узоров в одежде персонажей, но в этом случае я добавил их — так я гораздо лучше изображаю фланелевую рубашку, а через неё — хипстероватость моего персонажа. Наушники, висящие на рюкзаке, карманы и даже его лицо не были включены в спрайт, что позволило мне сэкономить много места.
Пиксель-арт: от черновика до игрового ассета
→
В этой статье я постараюсь визуализировать общий подход к работе. Итак, вы решили учиться арту: вы скачали какое-то ПО, запустили его и увидели все эти опции, бесконечные цвета и многое другое, быстро всё закрыли, удалили программу и выбросили свой ноутбук в окно.
Возможно, спустя несколько месяцев вы это повторите. Иногда вы попытаетесь нарисовать пару линий, которые выглядят как детский карандашный рисунок, или даже хуже, и на этом решите бросить.
Если вам это знакомо, то данная статья как раз для вас, так что продолжайте читать.
Независимые разработчики игр довольно часто жалуются на то, что они не могут создавать графику, потому что они программисты, а денег на оплату художников у них нет.
И хотя изучение арта может показаться устрашающей задачей, в реальности вы можете подняться до вполне достойного уровня, потратив на практику по крайней мере один год.
Если возьмётесь за работу очень усердно, то, возможно, получите неплохие результаты через несколько месяцев.
Приготовьтесь к пиксель-арту
В этой статье я рассмотрю пиксель-арт. Считаете, что он давно стал клише и от него все устали?
Ну, на самом деле, пиксель-арт — превосходное подспорье для того, чтобы стать художником. Вы обнаружите, что достаточно хорошо освоив пиксель-арт, очень легко можно перейти к другим стилям графики.
Ещё одно серьёзное преимущество заключается в том, что вам нужна только мышь, и не надо тратить деньги на графический планшет. На самом деле, большинство людей, рисующих пиксель арт, предпочитает ради повышенной точности пользоваться мышью.
Часто про пиксель-арт говорят и такое: «он может выглядеть красиво, но большинство пиксельной графики инди-разработчиков ужасно».
И я могу с этим согласиться, но если вы будете следовать правилам из этой статьи, то ваш пиксель-арт будет выше среднего, не волнуйтесь.
10 этапов создания пиксель-арта
Лучший способ повышения навыка — сначала узнать правила. Позже их можно нарушить, но когда учишься чему-то новому, следование правилам даёт тебе сильный толчок вперёд.
В этой статье я расскажу вам о десяти этапах и паре правил, которые помогут вам начать. Можете повторять их с любой пиксель-артной графикой, которую вам нужно создать.
Чтобы игра выглядела хорошо, ей нужен уверенный графический стиль, и если вы будете следовать моим рекомендациям, вы этого добьётесь.
Этап 1 — палитра
Никогда не выбирайте цвета самостоятельно. Цвет — сам по себе искусство, но, к счастью, мы можем позволить заняться им профессионалам. Загляните сюда и выберите цветовую палитру.
Учтите, что количество цветов в палитрах может быть разным. Не рекомендую использовать палитры больше 32 цветов, а для начала даже 16 цветов.
Для этой статьи я выберу такую палитру. Можно было взять любую другую, я выбрал её случайным образом из списка.
Этап 2 — разрешение
Для начала выбирайте небольшое разрешение. Если вы новичок, то ударьтесь в ретро и создавайте спрайты размером 16×16 или 32×32, не больше.
Можно использовать и другие соотношения, например 24×32, главное, не слишком больше этого.
Этап 3 — контуры
При рисовании объекта сначала нарисуйте одним цветом, например чёрным, его контур. На этом этапе не допускаются никакие другие цвета.
Рекомендуется всегда иметь перед глазами референс (справочное изображение). Вы должны иметь возможность видеть референс, пока рисуете, а не постоянно переключать окна.
Также проверьте, чтобы в контуре не было дыр, на данном этапе это самое важное.
Я нарисовал такого паренька с разрешением 32×32. Выглядит он ужасно.
По крайней мере, теперь вы не будете жаловаться, что я не начал с самого начала!
Этап 4 — цвета
Убедившись, что контур достаточно хорош, можно приступать к заливке внутренней части. В большинстве программ есть инструмент «Заливка цветом», и это самый быстрый способ заполнения внутренних областей нужным цветом.
Здесь снова используйте как можно меньше цветов, и только из палитры, которую вы выбрали. В хорошем дизайне персонажа будет как минимум три различных диапазона. По сути, диапазон (ramp) — это способ упорядочивания цветов палитры по семействам оттенков, от тёмного к светлому.
Обычно на этом этапе нужно выбирать цвета из середины каждого диапазона, то есть не очень тёмные и не очень светлые, только если по каким-то причинам вы рисуете объект или персонаж, для которого нужны именно они.
Вот пример возможных диапазонов ранее выбранной мной палитры. Заметьте, что я не добавлял все цвета из палитры, только некоторые, чтобы вы поняли принцип.
Также на картинке видно, что цвет может использоваться в нескольких диапазонах, становясь или начальным, или конечным цветом.
Итак, я выбрал несколько цветов из палитры и раскрасил своего персонажа.
Помните, я говорил, что важно не оставлять дыр?
Этап 5 — оттенки
На этом этапе могут застрять многие, и на самом деле можно создать красиво выглядящую игру только на основе предыдущих этапов, без оттенков. Достаточно придерживаться правила цветовой палитры, сохранять целостность художественного стиля, и ваша игра уже будет выглядеть лучше, чем большинство других.
Но чтобы расти как художнику, вам необходимо освоить навык затенения.
Для начала есть простой трюк: нужно выбрать направление освещения в игре — слева или справа, а затем придерживаться его при создании каждого спрайта, тайла и всего остального.
Примечание
Это означает, что если у вас есть персонаж, смотрящий вправо, то чтобы он смотрел влево, нельзя просто отзеркалить его в коде. Его нужно перерисовать с учётом фиксированного направления света.
Основная идея затенения заключается в том, что части изображения, на которые падает прямой свет, становятся светлее, а части, на которые не падает свет, остаются в тени, поэтому они становятся темнее. Очень просто, правда?
Но если вы новичок в графике, то, скорее всего, не понимаете, как это сделать, и в большинстве туториалов это не объясняется, потому что просто читая слова, этому не научиться.
Поэтому вот вам хитрость. В своём примере я возьму освещение, падающее справа.
Для начала каждому цвету персонажа я подберу более светлый цвет, и раскрашу один пиксель каждого края, находящегося справа или сверху.
Затем для каждого цвета персонажа я выберу более тёмный цвет и раскрашу им каждый пиксель каждого края, находящегося слева или внизу.
Знаю, что это выглядит довольно ужасно, но продолжайте чтение, и вскоре мы улучшим ситуацию.
Если по каким-то причинам этот этап кажется вам слишком сложным, то приблизьте изображение и посмотрите, как я это сделал — добавлены два дополнительных оттенка для синего, красного и бежевого цветов. Все они выбраны из палитры и нанесены с учётом правила «сверху-справа»/«слева-внизу».
Этап 6 — пропорции
Это ещё один источник неудач для начинающего художника. К счастью, пиксель-арт низкого разрешения сильно упрощает его.
На этом этапе всё становится довольно субъективным. Возможно, это вас удивит, но чтобы стать хорошим художником, нужно практиковаться не руками, а глазами.
Ваша основная задача — разбудить в себе нечто, называемое «взглядом художника». Это особый навык, позволяющий вам смотреть на вещи и разлагать их на составные части, а затем складывать их своими руками.
«Взгляд художника» раскрывается сочетанием создания собственной графики и изучения работ других людей. Необходимы оба шага: если вы просто продолжите рисовать, не глядя на работы других, или будете только изучать других, не рисуя, то этот взгляд у вас не разовьётся.
Давайте проверим ваши собственные глаза — снова взгляните на этот ужасный спрайт и скажите, какие его части выглядят глупо.
(Не тратьте время на поиск отличий между этим и предыдущим изображением, они одинаковы, я просто повторил его здесь для удобства.)
Первое, что приходит в голову — похоже, что наш персонаж падает. Давайте ему поможем.
Единственное, что я здесь сделал — переместил по горизонтали несколько пикселей. Из этого можно понять, что создание рисунков — это очень итеративный процесс. У вас не получится сделать всё правильно с первого раза, придётся вносить кучу переработок.
Давайте ещё раз взглянем на эту версию и подумаем, что теперь с ней не так?
Мне кажется, что бедный персонаж танцует, но он не должен танцевать, так что давайте это исправим.
Отлично, поза стала получше, а ещё я добавил ему штаны.
Примечание
Для создания поз можно использовать тысячи референсов из Интернета. Вполне может хватить даже каких-то случайных фотографий.
Не думайте, что художники рисуют только из своего воображения, они смотрят на референсы!
Это похоже на то, как кодеры ежедневно заходят в Google или на Stack Overflow — никого это не волнует.
Этап 7 — подчищаем блоки
Видите эти некрасивые чёрные скопления пикселей?
Давайте избавимся от них всех и создадим правило, что пиксель может касаться максимум двух других пикселей.
Персонаж стал чище. По какой-то причине это изменение дало мне понять, что у него должен быть длинный нос, поэтому добавим его.
Иногда сам процесс редактирования даёт нам вдохновение.
Примечание
При удалении скоплений пикселей существуют некоторые исключения: иногда нельзя удалить определённый пиксель, даже если он образует скопление, потому что в противном случае в контуре возникнет дырка.
Я добавил нос и немного изменил форму головы, чтобы она лучше соответствовала носу.
Также я добавил контуры вокруг ног, чтобы они соответствовали остальным частям. Весь арт в игре должен быть целостным!
Этап 8 — подчищаем оттенки
Хитрость, которую мы применили при затенении, сработал, но в некоторых частях персонаж всё равно выглядит немного уродливо.
Если ваш взгляд художника уже активировался, то у вас появятся предпочтения по замене тёмных и светлых пикселей более нейтральным оттенком.
Здесь я сделал пару действий — заменил все яркие и тёмные пиксели, которые казались неуместными, а затем изменил внешние контуры.
Пиксель-арт имеет такое низкое разрешение, что контуры отнимают пространство, необходимое для деталей. В некоторых важных местах они нужны, но не в этом случае.
Также я добавил персонажу руки и ноги, больше соответствующие стилю других его частей.
Небольшое изменение: я изменил его штаны и переместил на пару пикселей. Но что-то всё равно кажется странным, я не совсем понимаю, что делать дальше.
Давайте попробуем убрать контуры, заменив их на цвета ближайших пикселей.
Если посмотреть на персонажа теперь, то ноги выглядят странно, как у кентавра. И ещё у него странное лицо — нос смотрит в одном направлении, а глаза — в другом.
Художники используют хитрость, позволяющую мозгу искать ошибки — они смотрят на рисунок под другим углом.
Свежий взгляд позволяет заметить то, что не видел раньше, и когда я убирал контуры, можно было просто посмотреть на перевёрнутое изображение!
Итак, я переделал многие части его головы, рук и ног. Он уже выглядит полностью иначе, немного правильнее.
Но постойте, почему у него нет ушей? И почему кажется, что его шляпа висит в воздухе, а не соединена с головой?
Мы это исправили, и теперь персонаж начал выглядеть намного профессиональнее. Посмотрите на затенение на шляпе. Понимаете ли вы, как оно работает?
В нём просто применено то же правило — свет с одной стороны, тень с другой. При правильной реализации персонаж выглядит почти трёхмерным.
Чтобы затенение выглядело правильным, если у вас ещё не открылся «взгляд художника», то просто пробуйте разные сочетания тёмных, нейтральных и светлых пикселей.
Всегда придерживайтесь трёх оттенков. Здесь сложно ошибиться, потому что при работе со спрайтами низкого разрешения изменений бывает очень мало.
Однако внешний вид затенения иногда может сильно зависеть от единственного пикселя. Это вы поймёте со временем и практикой.
Примечание
Как только вы начнёте понимать, как работает затенение, то сможете лучше создавать объекты, имеющие объём, что и является основной задачей затенения.
Однако стоит помнить, что изучаемой нами системы с тремя оттенками более чем достаточно для большинства пиксель-арта низкого разрешения. Добавление большего количества оттенков делает пиксель-арт более грязным и шумным.
Этап 9 — доводка
Да, персонажа уже можно использовать, но давайте продолжим улучшать его.
Ещё один простой трюк, позволяющий добавить объёма — знание о том, что в дальних частях объектов нужно использовать более тёмные оттенки.
Поэтому я сделал одну из рук и одну из ног более тёмного оттенка, всё просто.
Давайте ещё что-нибудь улучшим!
Здесь я немного изменил положение рук. Совершенно нормально перерисовывать части персонажа, пока вы не будете полностью довольны. Чем больше практикуетесь, тем быстрее будете получать качественный результат и тем меньше понадобится переделок.
Ещё я добавил шарф и волосы. Учтите, что если добавлять разные элементы, расположенные близко друг к другу и имеющие одинаковые или похожие цвета, то это будет сбивать с толку.
В нашем случае шарф позволяет добавить контраста для отделения волос от рубашки.
Также я немного изменил цвет глаз, это уже касается дизайна персонажа — мне показалось, что чёрные глаза не соответствуют остальным частям.
А затем нужны два тёмных пикселя посередине рубашки?
В основном ради эксперимента: я попробовал, и мне понравился результат. Так как пиксель-арт с низким разрешением требует немного воображения, эти два пикселя намекают складки на одежде, или что персонаж одет в водолазку, или что он женского пола.
Наконец, я снова вернул контур, рисуя по пикселю за раз и избегая создания скоплений пикселей.
Рисовать контуры или нет — в основном вопрос предпочтений. Но они помогают создать контраст между персонажами и фоном.
Контур не обязан всегда быть чёрным. Вот альтернативный способ создания контура — мы смотрим на соседние с контуром пиксели и выбираем немного более тёмный оттенок.
Разумеется, я всегда использую только цвета из исходной палитры, не забывайте об этом!
Эта последняя версия может выглядеть лучше, но чем больше цветов, тем больше времени будет уходить на анимацию. Поэтому здесь я снова вернусь к чёрному контуру.
Примечание
Если сравнить версию с контуром и версию без контура, то контур может выглядеть «тяжёлым».
Выбор того или иного варианта зависит от эффекта, который нужен для вашего стиля графики.
Этап 10 — анимация
По сути анимирование заключается в следующем: мы берём наш спрайт и создаём слегка отличающиеся кадры в других позах.
Низкое разрешение пиксель-арта помогает и в обучении анимации. Давайте начнём с анимации бездействия, самой простой из всех видов анимаций.
По сути, я просто выделил половину спрайта и переместил её вниз. Если вы ленивый разработчик, то вам и этого будет достаточно, но не для меня!
На этот раз я переместил ещё несколько пикселей, переместив вверх волосы, шляпу и нос. Так сделано потому, что когда перемещает голову вниз, всё остальное тоже сдвигается вниз, но не мгновенно, что добавляет задержку для этих частей.
Обе руки я немного сместил влево, чтобы симулировать небольшой вторичное движение. Это не какой-то специализированный термин, он просто означает, что это независимое действие, никак не связанное с колебаниями головы.
Этап 10 — субпиксельная анимация
Если вы добрались досюда, то уже входите на территорию более сложных задач.
Пока низкое разрешение помогало скрывать то, что мы изучаем графику, но иногда оно работает против нас.
Последний кадр стал хорошим тому примером: движения шляпы и носа слишком уж сильные. Но мы ведь сдвинули их всего на один пиксель вверх!
Вот если бы мы могли сдвинуть их меньше, чем на пиксель, чтобы сделать движение более плавным… Но увы, пиксель — это самая маленькая величина.
Однако есть одна хитрость — вместо того, чтобы двигать пиксели, мы можем двигать цвета!
Поэтому я вернул нос и шляпу на их исходное место, и вместо этого меняю только цвета, заливая их соответствующими тёмными и светлыми оттенками так, как мне показалось правильным.
И этот трюк тоже зависит от вашего «взгляда художника». Активно тренируйте его, и постепенно начнёте работать всё проще и быстрее!
Заключение
Надеюсь, вам понравилось наблюдать, как я превратил совершенно бесформенную фигуру из палочек и кружочков в персонажа, которого можно использовать в игре. Я попытался показать все этапы и объяснить, почему и как я их выполнял, чтобы это не превратилось в ещё один туториал «нарисуйте оставшуюся часть совы».
Я планирую выпустить похожие статьи по другим темам, например, тайлсетам, низкополигональным моделям или даже музыке, всё зависит только от свободного времени и мотивации.
Также не забудьте прочитать мою статью про pixel perfect graphics, которая тоже очень важна для создания целостного графического стиля.
- Разработка игр
- Графический дизайн
- Дизайн игр