Как перенести характер нарисованного от руки персонажа в пиксель-арт

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

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

Определитесь, какого размера должен быть персонаж в готовом виде. Холст, который кажется просторным в редакторе, при уменьшении масштаба может оставить слишком мало пикселей для лица, конечностей или ключевой детали. Руководство Adafruit наглядно демонстрирует, как различные размеры холста и ограничения палитры влияют на создание спрайтов; в нем рассматриваются примеры 16×16 и 32×32, а также показывается, что подходящий размер зависит от области применения. Руководство Adafruit по пиксель-арту для MakeCode Arcade

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

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

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

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

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

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

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

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

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

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

Используйте тени, чтобы подчеркнуть форму или разделить соседние области, а не для того, чтобы повторить каждый градиент с рисунка. В пиксель-арте допустимо сглаживание (anti-aliasing), но мягкие переходные цвета могут сделать крошечную форму менее четкой, если применять их без проверки в итоговом масштабе. В руководстве Adafruit объясняется, что сглаживание использует пиксели промежуточного контраста для смягчения ступенчатых краев; подходит ли этот прием вашему персонажу, зависит от его стиля и планируемого размера. Adafruit о границах пикселей и сглаживании

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

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

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

• Adafruit Industries, Спрайты пиксель-арта для MakeCode Arcade

• Pixor, Контуры в пиксель-арте: силуэт, внутренние линии и складки