2 d персонажи иллюстратор
2D-художники и их специальности
Рассказываем, чем занимаются 2D-художники в игровых студиях. Это текстовая версия нашего видеоролика.
Игровая индустрия — масштабная творческая мастерская. В ней трудится огромное количество специалистов: концепт-художники, аниматоры, иллюстраторы, графические дизайнеры. Список профессий, доступных для освоения в этой сфере, можно продолжать бесконечно.
Зачем же в индустрии столько людей, и что все они делают? Вопрос серьёзный и особенно интересный для тех, кто хочет стать частью этого творческого мира и погрузиться в процесс работы над крутыми проектами.
В этой статье мы познакомим вас с 2D-специальностями: профессионалы, работающие в этом направлении, закладывают основу в любой игровой проект.
Все начинается с концепт-арта — с создания дизайна. Будь то персонаж, локация или целая игра, сначала нужно определиться с тем, как это будет выглядеть. Представлять образ в голове и увидеть его своими глазами — между этими вещами есть большая разница. Так гранатометчик-верзила в защитном костюме кажется хорошей идеей, но воплотив её на бумаге, команда художников Blizzard решила отказаться от неё, чтобы добавить персонажу индивидуальности. Для этого было решено снять шлем, потом уменьшить количество брони, и в итоге получился уже знакомый нам Крысавчик.
При этом представления о концепт-арте сильно искажаются, потому что все официальные концепты по играм призваны создать шумиху. Очень часто то, что мы видим в артбуках — скорее промо-арт, чем настоящий концепт. В итоге эти изображения задают нереалистичные стандарты работы над концептом и отпугивают начинающих художников.
В концепт-арте нет глубокой детализации: это наброски, а не законченные рисунки. Зато в нем всегда присутствует вариативность — мы ищем дизайн, ищем подходящую форму. И перед тем, как наконец создать идеальный дизайн, концепт-художник переделывает кучу грязной работы. И, конечно, не выставляет её напоказ.
У концептеров нет месяцев на грамотную отрисовку всех придуманных вариантов. Его задача – эффективно донести идею и потратить минимум времени. Поэтому в ход идут фотобаш, обрисовка 3D-моделей, «шейпы» (залитые одним цветом фигуры, которые можно комбинировать, чтобы подобрать композицию) и другие приёмы.
Жаль, что из-за искаженного восприятия концепт-арта эти методы называют читерством или ленью. Они нужны, но чтобы применять их грамотно, надо хорошо уметь рисовать и без них.
После концепты отравляются либо к 3D-моделерам, либо автор самостоятельно доводит избранные экземпляры до финала, или… их забирает человек оркестр — cg generalist (об этих мастерах речь пойдет ниже).
Промо-арт, в отличии от концепта, – чёткий, отполированный и создается на поздних этапах производства, когда весь дизайн уже одобрен.
Им занимаются иллюстраторы. Также они создают все статичные изображения: загрузочные экраны, обложки, рекламные плакаты, открытки. Все то, что мы потом покупаем и бережно храним у себя на полках.
В карточных играх иллюстрации – вообще основной графический элемент. Многие начинающие художники думают, что в игровой индустрии ты занимаешься либо 3D-визуализацией, либо концепт-артом, и это большое заблуждение. У иллюстраторов огромное количество задач, и поэтому им нужно разбираться буквально во всём: анатомии, перспективе, композиции, цвете, дизайне, детальном рендере. Их конечная цель — привлечь ваше внимание и рассказать историю. Согласитесь, задача не из простых.
Сейчас в игровой индустрии классическая 2D-анимация – редкость, ведь её создают, отрисовывая кадры последовательно и накладывая их один поверх другого. Такой способ больше подходит для создания катсцен и мультипликации. Но даже там студии вовсю используют возможности 3D, чтобы ускорить работу и удешевить производство.
Например, в недавнем фильме Клаус использовался специальный софт, распознающий отдельные нарисованные объекты и отслеживающий их движения так, будто они объёмные. С его помощью можно было наложить на объекты свет и тени, и это очень упростило работу аниматорам.
В игровых студиях также часто применяют скелетную 2D-анимацию в программах типа Spine или Dragon Bones (бесплатная платформа для скелетной анимации). У нас, кстати, есть целый курс, посвященный анимации в этих программах.
Пока идет работа над локациями и персонажами, UX/UI-художники создают интерфейс. Основных принципа тут два: удобство и незаметность. Игрок не должен отвлекаться от геймплея на кучу окон и сообщений, и ему должно быть интуитивно понятно, что делать в любой предлагаемой ситуации. В Ведьмаке, кстати, этими принципами пренебрегли. И интерфейс стал чуть ли не единственным слабым местом игры.
Замечали за собой, что во время езды на Плотве вы смотрите не по сторонам, а только на миникарту, где точками показан путь? Или может, вы пытались подходить к интересным объектам сбоку, чтобы висящие задания не закрывали обзор? За всеми этими тонкими, но такими важными деталями стоят UI-художники, разрабатывающие внешний вид интерфейса, и UX, которые отвечают за логику взаимодействия пользователя с игрой.
В некоторых студиях (особенно на малобюджетных проектах) работают художники, которые занимаются вообще всем: рисуют иконки, адаптируют концепты под игру и так далее. Графику для первой The Banner Saga полностью рисовал один человек — Эрни Йоргенсен. Правда, с его слов, после этого он чуть не умер, и им пришлось нанять дополнительного художника для второй части. А к третьей игре студия, следуя новой традиции, пополнилась еще одним художником.
Над многими играми, особенно в больших студиях, действительно работает большая команда. Процесс их создания – комплексный, и поэтому для получения действительно сильного результата нужен опыт немалого количества специалистов. Но так происходит не всегда — бывает, что игру создают один-два человека. В любом случае, начинающие художники не должны пугаться: уверенность приходит с опытом и практикой.
Автор — Дмитрий Шрамко специально для Smirnov School, онлайн-школы, где готовят концепт-художников, левел-артистов и 3D-моделеров для игр и анимации.
Связаться нами можно в ВК, ФБ и на сайте. Отзывы студентов публикуются тут. Скажите, что пришли с DTF и мы предоставим вам приятную скидку.
Персонаж за 4 часа: создать 2D-героя, не забыв про анимацию
Как совместить большие планы и сжатые сроки.
Поговорим о персонажах — именно с их конкретными образами мы связываем многие проекты, будь то Tomb Raider, The Witcher или Pac-Man.
Даже с ограничениями во времени и ресурсах можно создать героев, которые полюбятся игрокам. Если у вас есть хорошая механика, не стоит бояться проблем с артом — исходите из реальных возможностей и помните, что даже самая простая стилизованная графика может выглядеть классно.
Ваши главные инструменты — это стилизация и обобщение, они помогут сделать персонажей узнаваемыми. Возьмём «Симпсонов» — их герои выполнены в одном обобщённом стиле — не таком натуралистичном, как на картинах художников Возрождения.
Тут главное — узнаваемый считываемый образ и чёткое следование канону.
В быстром цикле разработки, например, при создании инди-платформера нужно думать не только о внешнем виде персонажей, но и об удобстве для масштабирования.
Хорошо, когда персонажи легко тиражируются — в этом поможет минимальное количество деталей и читаемый силуэт. Чем сложнее персонаж, тем трудозатратнее производство графики и анимации.
Bowmasters — мобильная контентная игра в стиле GaaS. Для таких проектов, с учётом быстрого цикла разработки, необходимо выпускать новый контент и поддерживать интерес игроков. Для них новый контент становится одним из уникальных USP, а разработчикам нужно делать ставку на оптимизацию скорости выпуска персонажей.
Но не только скорость разработки повлияла на внешний вид наших персонажей и стилистику в целом. Отсылки к мемам, популярным образам и любимым героям играют важную роль. Есть небольшой лайфхак: сделали игру — добавьте туда котика.
Самые доступные инструменты, которые помогут понять востребованность образов, — это Google Trends и Yandex Wordstat. С ними можно не только определить, какой из героев больше на слуху, но и оценить динамику тренда — вовремя заметить, что один из вариантов уже пошёл вниз и начинает забываться.
К разработке графики стоит переходить, когда природное чутьё, понимание трендов, художественный вкус и знание рынка привели к взвешенному образу персонажа.
Обычно пайплайн разработки 2D-контента для мобильных раннеров, платформеров или экшенов не сильно отличается от студии к студии. Коротко расскажу о нашем:
Геймдизайнер создает документ с подробным визуальным описанием персонажа, а также необходимыми анимациями, суперспособностями, и даже репликами — это очень важно, чтобы получить релевантный образ. Туда же прикладываются референсы, и задача отправляется художнику.
Создаются первые черновые скетчи — 3-6 максимально разных идей в рамках одной концепции. Скетчи обычно делаются в ч/б линиях или «от пятна», чтобы определиться с примерным силуэтом, образом и ключевыми деталями.
Выбирается общий образ, после чего уточняются формы и детали, предлагаются различные решения для нюансов. Проработанные скетчи через фидбек и уточнения приобретают необходимый внешний вид.
После согласования монохромного скетча подбирается цветовая схема персонажа, после выбора которой вносятся последние правки — получается финальный скетч.
Разработка финального арта происходит в Photoshop. Все важные детали создаются в отдельных слоях с соблюдением иерархии наложения объектов друг на друга, как для привычной перекладной анимации, которая позволяет не рисовать каждый кадр отдельно. То есть ноги — это нижние слои, затем части туловища, элементы лица, одежда. Верхние слои — это рука, которая ближе к игроку, так как при анимации она может перекрывать корпус.
Все слои именуются в соответствии с содержанием и на английском языке — это облегчает экспорт и поиск какого-либо определённого элемента персонажа.
Финальный персонаж также проходит этап согласования перед тем, как задачу на арт можно считать завершённой.
Важный момент: для персонажей очень важна «читаемость» — они не должны сливаться с фоном, потому герои всегда проверяются не в вакууме или на дефолтной подложке, а на реальных игровых бэкграундах. И так как мы разрабатываем мобильные игры, то тестируем сразу на устройствах, а не на мониторах, чтобы понимать, как это видит игрок.
Это же работает и на сложных проектах — персонажи должны выглядеть в окружении гармонично. Нельзя жертвовать считываемостью в угоду дизайну отдельных элементов.
По опыту могу сказать, что такой итеративный процесс разработки и апрува скетчей помогает избежать дорогостоящих правок или замены финальной графики.
А для удержания стилистического единства персонажей мы пользуемся простыми правилами:
Отдельно стоит прописать то, чего делать не стоит, и к каким последствиям это может привести. Например, не менять пропорции без согласования, так как может не подойти анимация. Такой документ тоже поможет сэкономить время на правках, быстро обучать и онбордить новых членов команды.
Когда сделали одного такого персонажа по всем правилам, то сделать пачку следующих по образу и подобию уже будет проще.
Если проект не ограничивается одним персонажем и парой спрайтов для фона, то следует также организовать систему хранения файлов и каталогов. Это отдельная тема, но могу точно сказать, что хорошая структура хранения и понятный нейминг — ключ к сохранению порядка на проекте и экономии времени.
Такой подход облегчит поиск и доступ к необходимым файлам как самими 2D-художниками, так и аниматорам и программистам.
Когда арт готов, можно переходить к созданию анимации. Для персонажей Bowmasters мы используем костную анимацию в Spine.
Для стандартных героев по умолчанию есть три типа скелета (для толстяка, накачанного и обычного телосложения) и набор универсальных движений и поз — это позволяет в разы сокращать трудозатраты при сохранении стандарта качества графики. То есть все наши персонажи заранее адаптированы под «пересадку» стандартных анимаций, что минимизирует время на риг. Десять минут — и новый герой может прыгать, падать, грозно размахивать руками или трястись от испуга.
А вот уникальные, сочные анимации припасены для фаталити — мы проводили опросы игроков и ничто их так не радует, как сокрушительная победа над соперником. Таким образом игрок не пресыщен перманентным визуальным безумием.
Когда стиль выработан и понятен, можно позволить себе некоторые отступления от правил. Если это сделает вашего героя действительно особенным и ценным для игрока, то вы вправе отойти от канона, не нарушив стилистической гармонии образа. Мы тоже так делаем.
Например, один из наших любимых персонажей — Акула. Может показаться, что она отличается по форме от гуманоидных персонажей, но если разобраться, в её основе все тот же классический набор основных спрайтов — под неё легко адаптировать стандартный персонажный риг.
Мы немного «нарушили» правило только по части визуального стиля, а на трудозатратах со стороны аниматоров и кодеров это никак не отразилось. Отбросив условности, можно сказать, что внутри акула — тоже человек!
Бывает так, что есть и далеко идущие цели, и готовые пайплайны с инструкциями, но присутствует стойкое ощущение, что порядка на проекте всё ещё не хватает. Возможно, просадка именно в планировании — нет понимания, сколько, чего и какими силами можно добавить в игру в следующем апдейте. И это очень важный момент, о котором забывают многие начинающие разработчики игр.
Если знать, сколько времени было затрачено в среднем на типовые образцы графики, можно выделить общие сроки для каждого вида контента, будь то персонаж или какая-нибудь стандартная интерфейсная кнопка.
Но даже в рамках одного типа, арт может разниться по степени трудоёмкости — это следует учитывать при планировании, условно разделив внутри типов графику на простую, обычную и сложную в исполнении.
После этого можно прогнозировать реальные сроки путём простых вычислений.
Для условного примера рассмотрим графику для простого персонажа гиперказуальной игры с минимальной детализацией, для которого уже утверждены технические требования и порядок разработки:
Аналогичным образом прогнозируем трудозатраты на производство прочей необходимой графики и делим получившиеся результаты на количество художников команды, которым предстоит заниматься разработкой.
Мы попробовали разобрать процесс разработки персонажа для гиперказуальных проектов, но при этом есть много нюансов у воркфлоу разных жанров. Для быстрого старта можно взять готовый, это особенно полезно на этапе проработки прототипов.
Оптимизируйте, планируйте и помните, что незаурядные персонажи и весёлая анимация могут вдохнуть жизнь в игру с самой простой графикой.
Как создать внешний вид персонажа в Adobe Illustrator
1. Рисуем голову
Шаг 1
Открыв Adobe Illustrator и создав новый документ 600 х 600 пикселей в ширину и высоту, мы начнём рисовать голову, которая будет одинаковой у всех персонажей.
Инструментом «Эллипс» (L) нарисуйте овал. На картинке ниже вы увидите, какой цвет вам нужен. Чтобы придать голове неправильную форму, перейдите в Эффект > Деформация > Раздувание. Введите параметры, которые вы увидите ниже.
Шаг 2
Создайте ещё два круга, перекрывающих друг друга как на картинке ниже. Перейдите на панель Обработки контуров и нажмите на кнопку Вычитание переднего. Теперь создайте круг такого же цвета заливки как и голова. Поместите фигуру полумесяца на круге, который вы только что создали. У нас есть ухо.
Шаг 3
Так как это левое ухо, мы разместим его на левой стороне головы. Выделив его, выберите Инструмент «Зеркальное отражение» (О). Удерживая клавишу Alt, кликните на лбу в центре лица.
В новом диалоговом окне выберите Вертикально, Угол 90 градусов и нажмите Копировать. Вуаля! У нас есть два уха.
Шаг 4
Крошечный эллипс на лице возле левого уха покажет румянец на левой щеке. Его нужно слегка повернуть вправо. Инструментом «Зеркальное отражение» (О) (Вертикально, Угол 90 градусов, Копировать) создайте правую щёку.
Инструментом «Прямоугольник» (М) нарисуйте маленький прямоугольник под головой. Выделив его, перейдите в Эффект > Деформация > Дуга вниз и введите следующие параметры:
Шаг 5
Создайте ещё три головы на основе предыдущей путём «копировать-вставить». Поиграйте с цветами и создайте разные типы кожи или просто введите цветовые коды, которые видите ниже.
2. Создаём разные глаза
Шаг 1
Удерживая клавиши Shift и Alt, сдвиньте глаз вправо. Появится ещё один глаз. Для удобства сгруппируйте оба глаза (щелчок правой кнопкой > Сгруппировать).
Шаг 2
Добавим брови. Создайте два круга, перекрывающих друг друга, как на картинке снизу. Убедитесь, что большой круг расположен поверх маленького. Перейдите на панель Обработки контуров и нажмите кнопку Вычитание переднего.
Шаг 3
Расположите левую бровь над левым глазом. Выделив левую бровь, выберите инструмент «Зеркальное отражение» (О) и, удерживая клавишу Alt, кликните между глазами.
В новом диалоговом окне выберите Вертикально, Угол 90 градусов и нажмите Копировать. Теперь у нас есть две брови.
Шаг 4
Сейчас мы создадим копию глаз и бровей, чтобы получились разные вариации этого «комплекта». Измените цвета глаз и бровей или даже слегка сдвиньте брови для разнообразия.
Глаза на картинке 3 созданы по мотиву бровей и выглядят как закрытые глаза, когда вы громко смеётесь.
3. Создаём разные рты
Шаг 1
Сначала создадим маленький белый эллипс и затем Инструментом «Преобразовать опорную точку» (Shift-C) сделаем левую и правую опорные точки острыми, кликнув на них. Выберите верхнюю и нижнюю опорные точки (при помощи Инструмента «Прямое выделение» (А) и сдвиньте их вниз, нажав Стрелку вниз на клавиатуре.
Шаг 2
Передвигая указатели опорных точек рта, вы можете создать множество разных вариаций рта. Вы также можете просто нарисовать крошечный эллипс, как на последней картинке внизу, чтобы показать поющий или удивлённый рот.
4. Создаём разные причёски
Шаг 1
Возьмите одну из голов, которую вы создали ранее, т.к. будет проще рисовать волосы непосредственно на голове.
Дважды щёлкните на Инструменте «Деформация» (Shift-R). Введите параметры, как указано ниже. Обратите внимание на стрелки, которые указывают, куда двигать мышь.
Очень важно выделить объект, прежде чем вы примените Инструмент «Деформация» (Shift-R), в противном случае вы растяните другие окружающие его объекты.
Шаг 2
Другая причёска для другого типа кожи.
Шаг 3
Шаг 4
Определённые причёски лучше всего сделать из маленьких кружков.
5. Создаём наряды
Шаг 1
Сейчас мы создадим разные наряды.
Выделите один прямоугольник и перейдите в Эффект > Деформация > Дуга. Введите параметры, указанные ниже. У обоих прямоугольников параметры одинаковые. Растяните прямоугольники: Объект > Разобрать оформление.
Шаг 2
Нарисуйте прямоугольник с любым цветом заливки и расположите, как указано ниже, покрывая нижнюю часть скруглённых прямоугольников. Используем его как отсекатель. Выделив его, создайте копию на переднем плане (Control-C, Control-F).
Шаг 3
Шаг 4
Скопируйте рубашку, которую вы создали в предыдущем шаге и измените цвета заливки. У вас получится ещё одна рубашка.
Шаг 5
Шаг 6
Скопируйте наряд, который вы создали в предыдущем шаге, и измените цвета заливки. У вас получился ещё один наряд!
Шаг 7
Создайте копию одного из предыдущих нарядов, удалите рубашку и добавьте несколько полос. Используйте кнопку Пересечение на панели Обработки контуров, чтобы вырезать полоски. Этот наряд выглядит как полосатая футболка с длинными рукавами.
6. Объединяем персонажей
Шаг 1
Пора посмотреть, что мы сделали! Соберите все элементы и создайте разных персонажей. Вот несколько персонажей, которые у меня получились:
Шаг 2
Теперь, когда мы видим характер каждого персонажа, можем добавить каких-нибудь соответствующих аксессуаров.
Спокойному поющему мальчику мы дадим бабочку. Инструментом «Многоугольник» создайте треугольник. После того как сузили его, поверните его вправо. Инструментом «Зеркальное отражение» (О) создайте его отражённую вертикальную копию. Поместите крошечный эллипс между двумя треугольниками, чтобы получить бабочку. Пусть он её примерит!
Шаг 3
Шаг 4
После создания круга, разместите пятиугольник (при помощи Инструмента «Многоугольник») в середине него. Затем удалите цвет заливки и примените тот же цвет обводки. Инструментом «Отрезок линии» (\) нарисуйте линию от каждой точки пятиугольника к границам круга. Добавьте ещё пять пятиугольников (без цвета обводки, цвет заливки тёмный), как показано на картинке внизу.
Выберите круг, созданный в начале этого шага, и сделайте его копию на переднем плане (Control-C, Control-F). Затем выберите один из пятиугольников, перекрывающих круг. Нажмите Пересечение на панели Обработки контуров. Снова создайте копию круга. Выделите второй перекрывающий пятиугольник и нажмите Пересечение. Ещё раз создайте копию круга на переднем плане, выделите третий пятиугольник и продолжайте делать то же самое, пока не покроете все пять пятиугольников.
Шаг 5
Инструментом «Карандаш» (N) создайте оправу очков с толстой чёрной обводкой и без заливки.
Нарисуйте прямоугольник (без обводки, с чёрной заливкой), чтобы создать дужки очков (см.картинку 2). Инструментом «Зеркальное отражение» (О) создайте ещё одну дужку. Пусть мальчик их примерит!
Шаг 6
Этот милый африканский мальчик, должно быть, наслаждается музыкой. Сделаем для него наушники.
Инструментом «Эллипс» (L) нарисуйте круг без заливки с цветом обводки на ваш выбор. Выберите Инструмент «Ножницы» (С) и кликните на левой и правой опорных точках этого круга. Удалите ненужные части, и у вас получится полукруг.
Выделите его и сделайте копию на переднем плане, затем на панели Обводка сделайте новую обводку толще. Также отметьте галочкой Скруглённые концы на панели Обводки. Снова возьмите «Ножницы» (С) и удалите ненужные части, отмеченные ниже. У вас только что получилась дужка наушников.
Изображение 2. Удалите цвет обводки и установите цвет заливки. Нарисуйте эллипс. Инструментом «Скруглённый прямоугольник» создайте скруглённый прямоугольник. Поместите эти две фигуры на дужку. Инструментом «Зеркальное отражение» (О) создайте отражение левой подушки. Отдадим наушники мальчику.
7. Создаём фон
Шаг 1
Дайте название каждому тёмно-голубому вертикальному прямоугольнику при помощи Инструмента «Текст» (Т). Вероятно, ваш текст будет чёрным, поэтому можете изменить цвет по своему выбору.
Шаг 2
Перед тем, как перетащить каждый объект на своё место, сгруппируйте каждую деталь персонажа. Разместите всё на своих местах.
Шаг 3
Вывод
Ура! Мы снова это сделали! Примите мои поздравления, т.к. это был большой проект. Я уверена, что теперь вы легко сможете создать разных персонажей. Я просто оставлю вас с этим, чтобы вы насладились процессом. до следующего раза.