Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Affinity Designer

Как создать спрайт-лист с игровым персонажем в Affinity Designer

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Easy Character Design.
How to Create a Character Kit in Adobe Illustrator
How to Create a Cute Gingerbread Man in Adobe Illustrator

Russian (Pусский) translation by Anastassiya Abramenko (you can also view the original English article)

Final product image
What You'll Be Creating

Если вы когда-нибудь хотели попробовать себя в разработке игр и дизайне персонажей, это руководство для вас!  Сегодня мы будем создавать спрайт-лист для сказочного птицеобразного существа для мобильных и видеоигр при помощи различных инструментов и функций в Affinity Designer.  Мы пройдём через весь процесс от создания контура эскиза до раскраски и создания ряда поз, которые можно будет использовать в анимации.  Давайте начнём! 

1. Рисуем базовые части персонажа 

Шаг 1

Я обычно начинаю создавать персонажа с эскиза и попытки найти нужное изображение, интересную форму и необычный внешний вид.  В поиске оригинальных и необычных решений объединяйте вымышленные детали животных или объектов, которых встречаете в реальности.  Вы можете вдохновиться просмотром разделов с игровыми персонажами или игровыми спрайтами на Envato Market, либо поискать спрайты с игровыми персонажами на Pinterest.  Попытайтесь придумать свои собственные оригинальные идеи, создавая неожиданные комбинации. 

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

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

making sketches

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

character sketch

Шаг 2

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

Давайте создадим Новый документ размером 600 х 800 пикселей.  Используйте Инструмент «Поместить изображение» для импорта эскиза и расположения в середине холста. 

Давайте обведём персонажа.  Возьмите Инструмент «Эллипс» (М) и создайте фигуру, подходящую под размер лица.  Возьмите Инструмент «Карандаш» (N) и нарисуйте клюв, следуя эскизу.  . Можете изменить линии при помощи Инструмента «Узел» (А), чтобы сделать их более плавными.  

outlining the sketch

Шаг 3

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

Теперь возьмите Инструмент «Эллипс» (М) для создания глаза и добавьте ещё пару эллипсов, чтобы сделать глаз более детальным.  Следуйте линиям эскиза, чтобы фигуры соответствовали эскизу. 

merging the shapes with add operation

Шаг 4

При помощи Инструмента «Карандаш» (N) нарисуйте длинную, дугообразную линию поперёк лица и, если необходимо, измените её при помощи Инструмента «Узел» (А).  Мы можем изменить Стиль, Ширину и другие параметры нашей линии на панели Обводки (вы найдёте её в одной из вкладок возле панели Цветов).  

Здесь давайте установим Ширину на 11 и перейдём вниз к выпадающему окну «Нажатие».  Здесь мы можем изменить ширину отдельных сегментов линии при помощи графика. Выделите правую точку кривой на графике и перетащите её вниз, чтобы сделать правую часть обводки тоньше (нос персонажа).  

adding details with Stroke panel

Шаг 5

Теперь возьмите Инструмент «Прямоугольник» (М) – перейдём к телу.  Создайте прямоугольник, подстроив его под тело, и Преобразуйте его в Кривые на верхней контекстной панели инструментов.  Перейдите к Инструменту «Узел» (А) и начните сдвигать нижние узлы в разные стороны друг от друга, сделав нижнюю часть шире. 

Выделите оба верхних узла и перетащите их вверх, чтобы закрыть голову нашего персонажа.  Затем выделите верхний правый узел и используйте функцию «Конвертировать в плавную линию» на верхней контекстной панели инструментов, сделав правую часть прямоугольника плавной и скруглённой. 

shaping the body with rectangle tool 1

Шаг 6

Теперь используйте Инструмент «Узел» (А) для изменения левой части тела, добавив больше узлов, сделав углы плавными и контур – соответствующим эскизу. 

shaping the body with rectangle tool 2

Шаг 7

Давайте добавим перья в нижней части тела, сформировав что-то вроде юбки.  Возьмите Инструмент «Эллипс» (М) и сформируйте сжатую фигуру в нижней левой части тела.  Нажмите Option-Shift и перетащите фигуру вправо, создав копию.  Повторите то же действие, создав больше копий и заполнив всю нижнюю часть.  

Наконец, выделите фигуру тела и перья, перейдите к верхней контекстной панели инструментов и примените «Добавить операции».  Отлично! Теперь мы объединили элементы в единую фигуру. 

add feathers with ellipse tool

Шаг 8

Теперь переходим к ноге.  Давайте сделаем её простой: нарисуйте прямую вертикальную линию с маленькой ступнёй внизу.  Перейдите на панель Обводки и добавьте больше глубины ноге, сделав её толще.  Установите значение Ширины на 60 и примените график Нажатия, чтобы сделать нижнюю часть тоньше, как показано на скриншоте ниже.  

make legs with stroke

Шаг 9

Теперь нам нужно превратить обводку в фигуру, чтобы мы могли изменять её, добавлять детали, контуры и т.д.  Выделив ногу, перейдите в Слой > Разобрать обводку.  Фигура выглядит достаточно хорошо, хотя у неё могло бы быть множество узлов. 

expand stroke of leg

Т.к. фигура всё ещё выглядит плавной, может быть достаточно затруднительно и времязатратно удалять все ненужные узлы вручную. Здесь у нас есть два варианта: либо оставить фигуру как есть с кучей узлов, либо, если вы – за качество, создать новую фигуру. 

Здесь мы можем использовать один из инструментов рисования – либо Инструмент «Карандаш» (N), либо Инструмент «Перо» (P).  Я предпочитаю Инструмент «Перо» (P). Просто обведите созданную ногу по верху, создав плавную, скруглённую фигуру, и при помощи Инструмента «Узел» (А) двигайте узлы вокруг. 

Скопируйте ногу. 

use pen tool to outline the leg

Шаг 10

У нас есть двухслойная перьевая «юбка» на нашем эскизе, давайте добавим второй слой с телом, покрытым перьями.  Скопируйте фигуру тела и вытяните её вниз, сделав фигуру высокой, чтобы она вписалась в эскиз.  Удалите верхнюю часть вытянутой фигуры, оставив только юбку. Удалите верхнюю часть растянутой фигуры, оставив только юбку.  Можете сделать это при помощи Инструмента «Узел» (А), выделив все ненужные верхние узлы и удалив их. 

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

add second feathers layer

Шаг 11

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

make arm from ellipses

Шаг 12

Преобразуйте второй эллипс в Кривые и используйте Инструмент «Узел» (А), чтобы двигать линии и подогнать их под эскиз.  При помощи Операции добавления объедините фигуры и сделайте все узлы плавными. 

make arm from ellipses 2

Шаг 13

Наконец, при помощи Инструмента «Карандаш» (N) нарисуйте маленькую кисточку перьев на локте и объедините её с рукой.  

Отлично!  Контуры готовы.  Теперь добавим цвета! 

add feathers to the arm

2. Применяя цвета и варьируя позы 

Шаг 1

Мы будем работать с тёмно-фиолетовой палитрой.  Я обычно выбираю цвета при помощи панели Цветов и Инструмента «Пипетка», которые можно найти над цветовым колесом на панели Цветов

character color palette

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

apply colors to the body and face

Шаг 2

Теперь давайте поработаем над лицом.  Примените цвета к всем трём эллипсам глаза, сделав его внутреннюю часть темнее, создав дыру. Давайте изменим красную линию поперёк лица.  Сделайте её толще, увеличив Толщину обводки на панели ОбводкиВырежьте (Command-X) линию, выделите бежевую фигуру лица и перейдите в Редактировать > Вставить внутрь.  Отлично! Теперь линия находится внутри фигуры лица, как внутри обтравочной маски. Мы всё ещё при желании можем изменить её.  

paste the stroke inside the face

Шаг 3

Давайте добавим немного теней, сделав персонажа более детальным.  Возьмите Инструмент «Карандаш» (N) и начните рисовать фигуру, частично закрывающую левую сторону тела.  Она не должна быть идеальной, т.к. мы её Вырежем (Command-X) и затем перейдём в Редактировать > Вставить внутри фигуры тела.  Сделайте тень слегка темнее тела.  

draw the shadows

Шаг 4

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

Добавьте тёмно-фиолетовый эллипс для тени за овалом лица (несколько раз нажмите Command-[, чтобы сдвинуть эллипс за фигуру лица).  Добавьте больше деталей, сформировав тёмную тень на нижней «юбке», и добавьте синий оттенок с пёстрыми кругами на правой стороне тела персонажа.  Наконец, сделайте руку намного светлее тела, отделив её от остальных элементов.  

Не забудьте добавить две маленькие, скруглённые тени на ногах, сделав их более трёхмерными. 

add details and shadows

Шаг 5

Снизьте Непрозрачность ярко-синего блика на панели Слоёв, чтобы сделать его более мягким. 

Если вы хотите поэкспериментировать с цветами, сделать их более яркими, используйте Инструмент «Пипетка», чтобы взять цвет одного элемента и применить его к другому элементу.  Если вы ещё не пользовались этим инструментом в Affinity Designer, сначала он может показаться сложным, однако и очень удобным. 

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

edit the colors with the color box and opacity

Шаг 6

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

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

add details to the face

Шаг 7

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

Выделите руку, перейдите на панель Цветов и примените чёрную Обводку со значением Ширины 3.  Добавьте контур лицу и ногам.  Вам может понадобиться выделить элементы внутри группы при помощи панели Слоёв, чтобы применить Обводку.  

add outline strokes to the body parts

Шаг 8

Что касается тела, я хочу применить единую обводку ко всей фигуре.  Тело состоит из двух элементов, поэтому мы применим небольшой приём.  Выделите обе части тела и скопируйте их (Command-C > Command-V).  Вы увидите копии на панели Слоёв.  Выделите копии и объедините их в единую фигуру при помощи Операции добавления.  

Теперь мы можем удалить цвет Заливки объединённой фигуры на панели Цветов и применить жирную Обводку 4, сохраняя контур поверх тела.  

add outline strokes to the body parts 2

Шаг 9

Давайте посмотрим, что у нас получилось.  Мы создали фантазийного персонажа, состоящего из тела (вместе с лицом), пары крылатых рук и пары забавных ног.  И этого нам хватит для создания двигающегося игрового спрайта!  Убедитесь, что вы Сгруппировали (Command-G) все части на панели Слоёв, чтобы работа оставалась аккуратной и единой. 

group the body parts in the layers panel

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

Здесь я представила базовые позы, просто двигая части нашего спрайта – стоя, в беге, в прыжке или в обмороке.  Обратите внимание, что я удалила сияние из глаз в обморочной позе, чтобы персонаж выглядел более бессознательным. 

character sprite sheet poses

Победа! Наш спрайт-лист для персонажа фантазийной игры готов! 

Отличная работа!  Мы только что закончили создание нашего птицеобразного создания и сделали спрайт-лист из нескольких простых поз, которые можно использовать в анимации.  Надеюсь, вы нашли для себя полезные приёмы и советы, которые помогут вам получше узнать Affinity Designer или создать несколько новых, уникальных персонажей и спрайт-листы для игр для ПК, браузера или телефонов. 

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

Наслаждайтесь созданием новых персонажей и не забудьте поделиться своими результатами! 

game character sprite sheet in affinity designer
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.