Как создать пиксель-арт

Дадо Алмейда, концепт-художник по играм и анимации, учит нас, как создавать пиксельную графику! Это пошаговое руководство проведет вас через создание портрета размером 64x64 пикселя с советами по созданию привлекательных пиксельных линий и техник раскраски.

ВВЕДЕНИЕ В ПИКСЕЛЬНОЕ ИСКУССТВО

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

Раньше не было стиля «пиксель-арт», потому что каждое искусство, созданное на компьютере, должно было быть пиксельным.

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

Создание искусства с учетом этих ограничений - основа пиксель-арта как вида искусства.

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

Ниже приведены несколько примеров моего исследования пиксельной графики.

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

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

Техническая сторона этого вида искусства важна, особенно если вы хотите отдать дань уважения видеоигре.

Но помните, что вам не нужно заставлять себя создавать произведение размером 32 × 32 пикселя только с 3 цветами, если вы этого не хотите.

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

ОБУЧЕНИЕ В ПРОЦЕССЕ РАБОТЫ

В этой статье мы будем работать над доступной задачей.

Я хочу, чтобы вы создали портрет размером 64 × 64 пикселя.

Вы можете нарисовать себя, сделать фанарт или придумать персонажа.

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

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

НАСТРОЙКА ХОЛСТА

В этой статье я буду использовать Clip Studio Paint.

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

  • Создайте документ размером 64 × 64 пикселя (1);
  • Перейдите в « Просмотр»Настройки сетки / линейки»(2);
  • Настройте следующим образом, чтобы вы могли видеть сетку с каждым пикселем. Вы можете включить / выключить сетку в любое время с помощью сочетания клавиш Shift + G. (3);

Хорошая практика для работы с пиксельной графикой - это привыкнуть к рисованию в увеличенном масштабе, не теряя при этом изображения в реальном размере (4);

Чтобы создать дополнительный вид текущего холста, перейдите в « Окно»Холст»Новое окно»и откройте новый экземпляр текущего холста.

Установите его на 100% и поместите в свое рабочее пространство (5).

СОЗДАНИЕ ИНСТРУМЕНТОВ PIXEL ART

Пришло время представить базовую концепцию.

Пиксель-арт не поддерживает автоматическое сглаживание.

Сглаживание - полезный алгоритм, сглаживающий края фигуры.

Это делается путем добавления дополнительной строки пикселей, ближайшей к краю с псевдонимом.

Как вы можете видеть в примере, сглаженный край (7) имеет автоматический градиент пикселей, чтобы придать форме более гладкий контур.

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

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

В Clip Studio Paint вам нужно отключить сглаживание в:

  • кисти (8);
  • такие инструменты, как «Выделение», «Заливка», «Текст», например. (9);
  • и во время любого преобразования с помощью Edit>Transform(10);

В Clip Studio Paint у вас уже есть перо для пиксельной графики. Это называется «Точечное перо» в категории « Маркер» (11).

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

Я предлагаю вам следовать этому руководству, используя только эту кисть.

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

Рисование линейного искусства

Поскольку это будет фронтальный портрет, я начну рисовать с помощью Симметричной линейки(12);

Поместите симметричную линейку на холст и, чтобы убедиться, что она находится в мертвой точке, используйте инструмент « Объект», чтобы выбрать ее и ввести значения вручную (13);

В этом случае я изменил значения Center Xи Center Yна 32, что составляет половину моего общего размера холста (64 пикселя).

Теперь снова выберите точечное перои начните рисовать.

Поскольку размер этой кисти нельзя изменить, рекомендуется увеличить масштаб холста, который вы рисуете (15), и использовать дублированный вид в качестве ссылки (14).

Я начал свой портрет с начального наброска, чтобы найти конструкцию головы (16), а затем начал добавлять детали (17).

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

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

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

В приведенном ниже примере линия (18) не выглядит гладкой, потому что там много дублированных пикселей, где она должна быть однопиксельной линией.

Вы можете исправить эти «двойники» (это термин), удалив все соседние пиксели на кривой. В примере (19) я удалил все пиксели, отмеченные красным.

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

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

СОВЕТ: если вам нужно стереть пиксель, вы можете просто переключиться на прозрачный цвет (у меня ярлык установлен на X);

В приведенном ниже примере вы можете увидеть разницу между исходным эскизом (20) и очищенной версией (21).

Готовы к другой технике?

Приступим к исправлению рисунка и корректировке некоторых кривых.

Посмотрев на пример ниже (22), вы можете заметить, что распределение и расстояние между пикселями не соответствуют логической прогрессии. (например: 3, 2, 1, 4…)

В этой улучшенной версии (23) вы можете увидеть лучшую последовательность пикселей для создания кривой. (например: 1, 2, 2, 3…)

Обладая этими знаниями, я предлагаю вам попробовать следующее упражнение, прежде чем продолжить рисовать:

Попробуйте нарисовать несколько случайных линий и кривых с помощью двух концепций, которые вы только что изучили: удаление двойников и сохранение «пиксельной прогрессии».

Это даст вам твердое представление о том, как рисовать контуры в пиксельной графике.

Ниже моя последняя линия (25).

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

Найдите время, чтобы сравнить с исходной версией (24) и постарайтесь заметить, где я применил методы.

ВРЕМЯ ОКРАСКИ

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

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

А пока я предлагаю вам начать с простой цветовой палитры. В качестве отправной точки вы можете использовать 56 цветов палитры, используемой игровой консолью NES (Nintendo Entertainment System) (26).

Выбор цвета и тона в этой палитре не идеален, но это хорошая отправная точка.

В приведенных ниже примерах у вас есть компьютерная цветовая палитра PC-98 (27) и персональная палитра, которую я создал в прошлом (28);

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

Я начинаю с заливки линий базовыми цветами (выравнивание).

Я начинаю с 5 исходных цветов, включая черную линию, чтобы нарисовать этот портрет (29).

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

Чтобы затенить (добавить тени) цвет кожи на портрете, вам не нужно использовать только более темное значение определенного цвета;

Я потенциально могу использовать любой доступный цвет, если значения читаются правильно.

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

Теперь вы можете использовать этот слой, чтобы проверить соотношение значений ваших цветов (32).

В приведенном ниже примере вы можете увидеть, как мне удалось использовать старый цвет фона (фиолетовый) в качестве оттенка моей коричневой кожи (31). Я предпочитаю использовать черный фон, чтобы сэкономить один цвет…

Опять же, мне это не нужно, но я бы хотел воспользоваться этими ограничениями, налагаемыми цветовой палитрой NES.

Для бликов на коже и очках (33) мне не нужно было вводить какие-либо новые цвета, потому что при проверке значений оттенков серого (34)

Я заметил, что для этого можно использовать цвет футболки.

Я хотел добавить ручное сглаживание, чтобы сгладить границу между освещенными и затененными участками кожи (36).

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

Итак, здесь я отказался от «виртуальных ограничений» в пользу произведения искусства.

В этом примере я добавил два новых цвета (37), чтобы добавить больше деталей к штриховке.

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

Используя два новых дополнительных цвета, я увеличил рендеринг на лице, добавив больше объема, морщин ( потому что я старею ) и смягчил некоторые тени на освещенной стороне портрета (38).

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

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

Дизеринг - это продвинутая техника, и это всего лишь базовое ее использование.

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

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

После некоторой настройки мне удалось полностью нарисовать портрет.

Я очень доволен окончательным результатом, потому что я смог уместить множество деталей для иллюстрации размером 64 × 64 пикселя, используя всего 7 цветов.

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

ЭКСПОРТ

И последнее, но не менее важное ...

При сохранении и экспорте пиксельной графики используйте формат GIF или PNG.

Избегайте использования формата JPEG, особенно с любым уровнем сжатия.

Это разрушит всю любовь и заботу, которые вы использовали для создания своего пиксельного искусства.

Посмотрите на примеры ниже: сжатый на 99% JPEG (41) может выглядеть нормально на расстоянии, но он добавляет некоторые нежелательные цвета.

Сжатая на 80% версия (42) заставит любого художника-пикселя растекаться. Так что, пожалуйста, не делай этого. 🙂

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

Для Instagram у вас не будет выбора, потому что система автоматически конвертирует и изменяет размер изображения в некачественный jpeg.

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

Надеюсь, вам понравился этот урок, а также надеюсь, что вам удалось создать свой первый портрет в стиле пиксель-арт.

ПОПУЛЯРНЫЕ СТАТЬИ