Спрайтовая графика: руководство по созданию спрайтов от А до Я
Спрайтовая графика жива и не собирается сдавать свои позиции. Многие профессиональные разработчики игр начинали с анимации спрайтов и с разработки простых браузерных игр , а далее наращивали опыт и знания в программировании и разрабатывали сложные 3D-игры. Поэтому создание спрайтов может стать начальной точкой вашего длинного пути.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Пиксель-арт для начинающих: инструкция по применению
Инди-разработчикам нередко приходится совмещать сразу несколько ролей: геймдизайнера, программиста, композитора, художника. И, когда дело доходит до визуала, многие выбирают пиксель-арт — на первый взгляд он кажется простым. Но чтобы сделать красиво, нужно много опыта и определенные навыки. Нашел туториал для тех, кто только начал постигать основы этого стиля: с описанием специального софта и техник рисования на примере двух спрайтов.
Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.
Порог вхождения в пиксель-арте сравнительно низкий по сравнению с традиционным артом и 3D-графикой, что привлекает инди-разработчиков. Но это вовсе не означает, что будет просто доделать игру в этом стиле. Я видел много инди-девелоперов с пиксель-арт метроидваниями на краудфандинговых платформах. Они думали, что закончат все за год, но на самом деле им нужно было еще лет шесть.
Metal Slug 3 (Arcade). SNK, 2000 год
Пиксель-арт на том уровне, на котором большинство хочет его создавать, отнимает много времени, а кратких обучалок очень мало. Работая с 3D-моделью вы можете вращать ее, деформировать, перемещать отдельные ее части, копировать анимации с одной модели на другую и так далее. Пиксель-арт высокого уровня почти всегда отнимает кучу сил на скрупулезное размещение пикселей на каждом фрейме.
В общем, я предупредил.
А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!
Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.
Paint (бесплатно)
Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.
Piskel (бесплатно)
Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.
GraphigsGale (бесплатно)
GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.
Aseprite ($)
Пожалуй, самый популярный редактор на данный момент. Открытый исходный код, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.
GameMaker Studio 2 ($$+)
GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над UFO 50, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.
Photoshop ($$$+)
Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).
Прочее
Мой набор для пиксель-арта. Все черное, только сейчас заметил.
Графический планшет ($$+)
Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.
Суппорт запястья ($)
Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.
96×96 пикселей
Final Fight. Capcom, 1989 год
Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.
На таком большом спрайте будет легче показать технику, о которой я хочу рассказать. Также попиксельная отрисовка больше похожа на традиционные формы арта (например, рисование или живопись), с которыми вы, возможно, лучше знакомы. Освоив базовые техники, мы перейдем к спрайтам поменьше.
1. Выбираем палитру
Пиксель — гораздо более глубокое понятие в пиксель-арте, чем в любых других цифровых сферах. Пиксель-арт определяют его ограничения, например, цвета. Важно правильно подобрать палитру, она поможет определить ваш стиль. Но на старте я предлагаю не думать про палитры и выбрать одну из существующих (или просто несколько рандомных цветов) — вы легко можете ее поменять на любом этапе.
Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.
2. Грубые контуры
Начнем прорисовку с помощью инструмента Карандаш. Нарисуем скетч так же, как делаем это с обычной ручкой и бумагой. Конечно, пиксель-арт и традиционный арт пересекаются, особенно когда речь идет о таких крупных спрайтах. Мои наблюдения показывают, что сильные художники по пиксель-арту как минимум неплохо рисуют от руки и наоборот. Так что развивать навыки рисования всегда полезно.
3. Проработка контуров
Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.
Неровности
Нужно научиться рисовать две базовые линии в пиксель-арте: прямые и кривые. С ручкой и бумагой все сводится к мышечному контролю, но мы-то работаем с крошечными цветными блоками.
Ключ к отрисовке правильных пиксельных линий — неровности. Это единичные пиксели или небольшие сегменты, разрушающие сглаженность линии. Как я уже говорил, отдельный пиксель имеет огромное значение в пиксель-арте, поэтому неровности могут разрушить всю эстетику. Представьте, что вы проводите прямую линию на бумаге, и неожиданно кто-то ударяет по столу: неровности в пиксель-арте выглядят так же, как случайная закорючка.
Прямые
Кривые
Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.
Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.
4. Применяем первые цвета
Раскрасьте своего персонажа с помощью заливки или другого подходящего инструмента. Палитра упростит эту часть работы. Если софт не предусматривает использование палитр, можно поместить ее прямо в картинку, как на примере выше, и выбирать цвета с помощью пипетки.
В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.
5. Шейдинг
Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.
Форма и объем
Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.
Сглаживание (anti-aliasing, анти-алиасинг)
Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:
Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.
Так АА выглядит на плече орка. Он нужен, чтобы сгладить линии, отображающие изгиб его мышц
Сглаживание не должно выходить за пределы спрайта, который будет использоваться в игре или на фоне, цвет которого неизвестен. Например, если вы примените АА для светлого фона, на темном фоне сглаживание будет смотреться некрасиво.
6. Выборочный контур
Ранее контуры были полностью черными, из-за чего спрайт смотрелся очень мультяшно. Картинка была словно разделена на сегменты. Например, черные линии на руке слишком контрастно отображают мускулатуру, и персонаж выглядит менее цельным.
Если спрайт станет более естественным, а сегментация не столь явной, то базовые формы персонажа будут легче читаться. Для этого можно использовать выборочный контур — частично заменить черный контур более светлым. На освещенной части спрайта можно использовать самые светлые цвета или, там где спрайт соприкасается с негативным пространством, можно полностью убрать контур. Вместо черного нужно использовать цвет, который был выбран для тени — так сохраниться сегментация (для разграничения мышц, меха и так далее).
Также на этом этапе я добавил более темные тени. Получилось три градации зеленого на коже орка. Наиболее темно-зеленый цвет можно использовать для выборочного контура и АА.
7. Финальные штрихи
В конце стоит добавить блики (самые светлые пятна на спрайте), детали (серьги, заклепки, шрамы) и прочие улучшения, пока персонаж не будет готов или пока не придется перейти к следующему.
Есть несколько полезных приемов, которые можно применить на этом этапе. Поверните рисунок горизонтально, это часто помогает выявить ошибки в пропорциях и шейдинге. Также можно убрать цвет — выставить насыщенность на ноль, чтобы понять, где нужно изменить тени.
Создание шумов (dithering, дизеринг)
Пока что мы в основном применяли крупные, цельные участки теней. Но есть и другая техника — дизеринг, которая позволяет перейти от одного цвета к другому без добавления третьего. Посмотрите на пример ниже.
Верхний градиент от темного к светлому использует сотни различных оттенков синего.
Средний градиент использует всего девять цветов, но в нем все еще слишком много оттенков одного цвета. Возникает так называемый бандинг (от англ. band — полоса), при котором из-за толстых однородных полос глаз фокусируется на точках соприкосновения цветов, вместо самих цветов.
На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.
На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.
Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.
Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!
8. Последний взгляд
Одна из опасностей пиксель-арта в том, что он кажется легким и простым (из-за его структуры и ограничений стиля). Но в итоге вы потратите огромное количество времени на доработку своих спрайтов. Это похоже на головоломку, которую нужно решить — вот почему пиксель-арт привлекает перфекционистов. Помните, что один спрайт не должен отнимать слишком много времени — это лишь крохотный кусочек крайне сложного скопления кусочков. Важно не терять видение общей картины.
Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.
И порой полезно ненадолго оставить спрайт, чтобы чуть позже взглянуть на него свежим взглядом.
32×32 пикселя
Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.
В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».
Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.
Создание маленьких спрайтов — это постоянные компромиссы. Если вы добавите обводку, можете потерять место для тени. Если у вашего персонажа четко отображены руки и ноги, голова скорее всего должна быть не очень большой. Если эффективно использовать цвет, выборочную обводку и сглаживание, то отрисованный объект будет казаться больше, чем он есть на самом деле.
Для маленьких спрайтов мне нравится стиль тиби: персонажи выглядят очень мило, у них большие головы и глаза. Отличный способ создать яркого героя в ограниченном пространстве, да и в целом, очень приятный стиль. Но, возможно, вам нужно показать мобильность или силу персонажа, тогда вы можете уделить меньше пространства голове, чтобы тело выглядело более мощно. Все зависит от ваших предпочтений и целей.
Целая команда в сборе!
Форматы файлов
Такой результат может заставить понервничать любого пиксель-артиста
Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.
Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.
Как правильно делиться пиксель-артом
Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.
Есть несколько советов, как сохранить пиксель-арт в нужном качестве для различных соцсетей.
Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или убедитесь, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).
Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.
Как создать спрайт-лист с игровым персонажем в Affinity Designer
What You’ll Be Creating
Если вы когда-нибудь хотели попробовать себя в разработке игр и дизайне персонажей, это руководство для вас! Сегодня мы будем создавать спрайт-лист для сказочного птицеобразного существа для мобильных и видеоигр при помощи различных инструментов и функций в Affinity Designer. Мы пройдём через весь процесс от создания контура эскиза до раскраски и создания ряда поз, которые можно будет использовать в анимации. Давайте начнём!
1. Рисуем базовые части персонажа
Шаг 1
Я обычно начинаю создавать персонажа с эскиза и попытки найти нужное изображение, интересную форму и необычный внешний вид. В поиске оригинальных и необычных решений объединяйте вымышленные детали животных или объектов, которых встречаете в реальности. Вы можете вдохновиться просмотром разделов с игровыми персонажами или игровыми спрайтами на Envato Market, либо поискать спрайты с игровыми персонажами на Pinterest. Попытайтесь придумать свои собственные оригинальные идеи, создавая неожиданные комбинации.
Когда создадите несколько вариаций, выберите одну, которая понравится больше всего, и продолжайте с ней работать. Протестируйте различные позы и выражения лиц.
Я делаю множество приблизительных эскизов, и это помогает мне понять, как двигается мой персонаж, выглядит ли он интересно и оригинально, вписывается ли в окружающую среду или концепт нашей будущей игры и т.д.
Когда я, наконец, довольна сказочным, загадочным видом этого маленького парня, то могу представить эскиз, с которым мы будем работать в этом руководстве. Можете скачать его прямо отсюда – просто кликните правой кнопкой мыши на картинке и сохраните её на свой компьютер.
Шаг 2
Мы будем работать с Векторным режимом Affinity Designer, используя его векторные функции для создания спрайт-листа нашего персонажа для видеоигр, которого легко можно анимировать в различных положениях.
Давайте создадим Новый документ размером 600 х 800 пикселей. Используйте Инструмент «Поместить изображение» для импорта эскиза и расположения в середине холста.
Давайте обведём персонажа. Возьмите Инструмент «Эллипс» (М) и создайте фигуру, подходящую под размер лица. Возьмите Инструмент «Карандаш» (N) и нарисуйте клюв, следуя эскизу. . Можете изменить линии при помощи Инструмента «Узел» (А), чтобы сделать их более плавными.
Шаг 3
Выделите обе созданные нами фигуры и примените Операцию добавления на верхней контекстной панели инструментов. Таким образом мы объединили оба элемента в единую фигуру.
Теперь возьмите Инструмент «Эллипс» (М) для создания глаза и добавьте ещё пару эллипсов, чтобы сделать глаз более детальным. Следуйте линиям эскиза, чтобы фигуры соответствовали эскизу.
Шаг 4
При помощи Инструмента «Карандаш» (N) нарисуйте длинную, дугообразную линию поперёк лица и, если необходимо, измените её при помощи Инструмента «Узел» (А). Мы можем изменить Стиль, Ширину и другие параметры нашей линии на панели Обводки (вы найдёте её в одной из вкладок возле панели Цветов).
Здесь давайте установим Ширину на 11 и перейдём вниз к выпадающему окну «Нажатие». Здесь мы можем изменить ширину отдельных сегментов линии при помощи графика. Выделите правую точку кривой на графике и перетащите её вниз, чтобы сделать правую часть обводки тоньше (нос персонажа).
Шаг 5
Теперь возьмите Инструмент «Прямоугольник» (М) – перейдём к телу. Создайте прямоугольник, подстроив его под тело, и Преобразуйте его в Кривые на верхней контекстной панели инструментов. Перейдите к Инструменту «Узел» (А) и начните сдвигать нижние узлы в разные стороны друг от друга, сделав нижнюю часть шире.
Выделите оба верхних узла и перетащите их вверх, чтобы закрыть голову нашего персонажа. Затем выделите верхний правый узел и используйте функцию «Конвертировать в плавную линию» на верхней контекстной панели инструментов, сделав правую часть прямоугольника плавной и скруглённой.
Шаг 6
Теперь используйте Инструмент «Узел» (А) для изменения левой части тела, добавив больше узлов, сделав углы плавными и контур – соответствующим эскизу.
Шаг 7
Давайте добавим перья в нижней части тела, сформировав что-то вроде юбки. Возьмите Инструмент «Эллипс» (М) и сформируйте сжатую фигуру в нижней левой части тела. Нажмите Option-Shift и перетащите фигуру вправо, создав копию. Повторите то же действие, создав больше копий и заполнив всю нижнюю часть.
Наконец, выделите фигуру тела и перья, перейдите к верхней контекстной панели инструментов и примените «Добавить операции». Отлично! Теперь мы объединили элементы в единую фигуру.
Шаг 8
Теперь переходим к ноге. Давайте сделаем её простой: нарисуйте прямую вертикальную линию с маленькой ступнёй внизу. Перейдите на панель Обводки и добавьте больше глубины ноге, сделав её толще. Установите значение Ширины на 60 и примените график Нажатия, чтобы сделать нижнюю часть тоньше, как показано на скриншоте ниже.
Шаг 9
Теперь нам нужно превратить обводку в фигуру, чтобы мы могли изменять её, добавлять детали, контуры и т.д. Выделив ногу, перейдите в Слой > Разобрать обводку. Фигура выглядит достаточно хорошо, хотя у неё могло бы быть множество узлов.
Т.к. фигура всё ещё выглядит плавной, может быть достаточно затруднительно и времязатратно удалять все ненужные узлы вручную. Здесь у нас есть два варианта: либо оставить фигуру как есть с кучей узлов, либо, если вы – за качество, создать новую фигуру.
Здесь мы можем использовать один из инструментов рисования – либо Инструмент «Карандаш» (N), либо Инструмент «Перо» (P). Я предпочитаю Инструмент «Перо» (P). Просто обведите созданную ногу по верху, создав плавную, скруглённую фигуру, и при помощи Инструмента «Узел» (А) двигайте узлы вокруг.
Шаг 10
У нас есть двухслойная перьевая «юбка» на нашем эскизе, давайте добавим второй слой с телом, покрытым перьями. Скопируйте фигуру тела и вытяните её вниз, сделав фигуру высокой, чтобы она вписалась в эскиз. Удалите верхнюю часть вытянутой фигуры, оставив только юбку. Удалите верхнюю часть растянутой фигуры, оставив только юбку. Можете сделать это при помощи Инструмента «Узел» (А), выделив все ненужные верхние узлы и удалив их.
Как вариант, вы просто можете стереть верхнюю часть фигуры Инструментом «Векторная обрезка». Однако, я предпочитаю первый метод, т.к. Инструмент «Векторная обрезка» оставляет стёртую часть спрятанной внутри обтравочной маски. Во многих случаях это может быть достаточно полезно, например, когда вам нужно сохранить фигуру, но сейчас нам это не нужно.
Шаг 11
Теперь давайте сформируем стилизованную руку или крыло нашего птицеобразного персонажа. Создайте эллипс под размер руки на эскизе и Преобразуйте его в Кривые. Слегка перетащите обе боковые опорные точки, сделав фигуру шире внизу. Добавьте ещё один эллипс, сделав руку согнутой в локте.
Шаг 12
Преобразуйте второй эллипс в Кривые и используйте Инструмент «Узел» (А), чтобы двигать линии и подогнать их под эскиз. При помощи Операции добавления объедините фигуры и сделайте все узлы плавными.
Шаг 13
Наконец, при помощи Инструмента «Карандаш» (N) нарисуйте маленькую кисточку перьев на локте и объедините её с рукой.
Отлично! Контуры готовы. Теперь добавим цвета!
2. Применяя цвета и варьируя позы
Шаг 1
Мы будем работать с тёмно-фиолетовой палитрой. Я обычно выбираю цвета при помощи панели Цветов и Инструмента «Пипетка», которые можно найти над цветовым колесом на панели Цветов.
Постарайтесь сделать верхние части персонажа светлее нижний частей, чтобы отделить элементы друг от друга, сделав их выделяющимися. Сделайте лицо светло-бежевым, создав яркий контраст, чтобы показать главный элемент персонажа, привлекающий внимание зрителей.
Шаг 2
Теперь давайте поработаем над лицом. Примените цвета к всем трём эллипсам глаза, сделав его внутреннюю часть темнее, создав дыру. Давайте изменим красную линию поперёк лица. Сделайте её толще, увеличив Толщину обводки на панели Обводки. Вырежьте (Command-X) линию, выделите бежевую фигуру лица и перейдите в Редактировать > Вставить внутрь. Отлично! Теперь линия находится внутри фигуры лица, как внутри обтравочной маски. Мы всё ещё при желании можем изменить её.
Шаг 3
Давайте добавим немного теней, сделав персонажа более детальным. Возьмите Инструмент «Карандаш» (N) и начните рисовать фигуру, частично закрывающую левую сторону тела. Она не должна быть идеальной, т.к. мы её Вырежем (Command-X) и затем перейдём в Редактировать > Вставить внутри фигуры тела. Сделайте тень слегка темнее тела.
Шаг 4
Используйте Инструмент «Эллипс» (М) для добавления группы мелких кругов вдоль края тени, перекрывающих друг друга и придающих тени текстурный вид. Удерживайте клавишу Shift, чтобы сделать круги идеально ровными.
Добавьте тёмно-фиолетовый эллипс для тени за овалом лица (несколько раз нажмите Command-[, чтобы сдвинуть эллипс за фигуру лица). Добавьте больше деталей, сформировав тёмную тень на нижней «юбке», и добавьте синий оттенок с пёстрыми кругами на правой стороне тела персонажа. Наконец, сделайте руку намного светлее тела, отделив её от остальных элементов.
Не забудьте добавить две маленькие, скруглённые тени на ногах, сделав их более трёхмерными.
Шаг 5
Снизьте Непрозрачность ярко-синего блика на панели Слоёв, чтобы сделать его более мягким.
Если вы хотите поэкспериментировать с цветами, сделать их более яркими, используйте Инструмент «Пипетка», чтобы взять цвет одного элемента и применить его к другому элементу. Если вы ещё не пользовались этим инструментом в Affinity Designer, сначала он может показаться сложным, однако и очень удобным.
Найдите иконку Пипетки на панели Цвета и перетащите её прямо на свою картинку. Вы увидите линзу, которая поможет выбрать нужный цвет, который появится возле иконки Пипетки на панели Цвета. Теперь можете применить его к любой выбранной фигуре, просто кликнув на маленьком цветном кружке на панели Цвета.
Шаг 6
Давайте добавим больше деталей нашему персонажу. Добавьте тени ко всем частям тела, включая голову и руку (если ещё не добавили) и создайте ещё несколько пятен на лице, чтобы сделать его более текстурным.
Поместите ещё пару эллипсов внутри глаза, понемногу делая цвета ярче, чтобы глаза получились сияющими. Вы можете видеть мою панель Слоёв на скриншоте ниже, на котором изображены все части группы глаза.
Шаг 7
Наш персонаж уже выглядит хорошо на этом этапе, но если мы хотим видеть его на детальном фоне для видеоигры, он может сливаться с фоном, если цветовая палитра элементов похожа. Нам нужно сделать нашего персонажа более выделяющимся на любом фоне. Он должен быть привлекательным и хорошо видимым при первом взгляде. Вот простой способ визуально отделить персонажа: нам нужно использовать контуры! Чем толще контур вокруг персонажа, тем более выделяющимся он становится!
Выделите руку, перейдите на панель Цветов и примените чёрную Обводку со значением Ширины 3. Добавьте контур лицу и ногам. Вам может понадобиться выделить элементы внутри группы при помощи панели Слоёв, чтобы применить Обводку.
Шаг 8
Что касается тела, я хочу применить единую обводку ко всей фигуре. Тело состоит из двух элементов, поэтому мы применим небольшой приём. Выделите обе части тела и скопируйте их (Command-C > Command-V). Вы увидите копии на панели Слоёв. Выделите копии и объедините их в единую фигуру при помощи Операции добавления.
Теперь мы можем удалить цвет Заливки объединённой фигуры на панели Цветов и применить жирную Обводку 4, сохраняя контур поверх тела.
Шаг 9
Давайте посмотрим, что у нас получилось. Мы создали фантазийного персонажа, состоящего из тела (вместе с лицом), пары крылатых рук и пары забавных ног. И этого нам хватит для создания двигающегося игрового спрайта! Убедитесь, что вы Сгруппировали (Command-G) все части на панели Слоёв, чтобы работа оставалась аккуратной и единой.
Теперь мы можем создать определённый набор поз, которые будет показывать наш персонаж во время игры. Вы можете поискать раздел со спрайт-листом для игрового персонажа на GraphicRiver, чтобы увидеть, какие позы обычно используются в играх, или создать свои.
Здесь я представила базовые позы, просто двигая части нашего спрайта – стоя, в беге, в прыжке или в обмороке. Обратите внимание, что я удалила сияние из глаз в обморочной позе, чтобы персонаж выглядел более бессознательным.
Победа! Наш спрайт-лист для персонажа фантазийной игры готов!
Отличная работа! Мы только что закончили создание нашего птицеобразного создания и сделали спрайт-лист из нескольких простых поз, которые можно использовать в анимации. Надеюсь, вы нашли для себя полезные приёмы и советы, которые помогут вам получше узнать Affinity Designer или создать несколько новых, уникальных персонажей и спрайт-листы для игр для ПК, браузера или телефонов.
Если хотите получить готовый векторный EPS-файл с нашей птичкой, включая детальные рамки для каждой позы, взгляните на этот спрайт-лист. Его можно использовать для простой анимации.
Наслаждайтесь созданием новых персонажей и не забудьте поделиться своими результатами!