Gamedev Андрей Верещагин
6 230

Создание промо-артов для игровой студии

Опыт разработчиков из Azur Games.

В закладки

Ведущий промо-художник из студии Azur Games (Modern Strike Online, World War Heroes) Александр Баев написал для DTF колонку, в которой описал процесс создания промо-арта от формулировки идеи до финального воплощения.

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

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

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

Не так давно обновился фирменный стиль бренда, вместе с чем появилась задача по обновлению key visual-арта.

Пайплайн

Поиск идеи

Создание промо-иллюстрации начинается с понимания цели, которую то или иное изображение будет выполнять. Наш key visual, в первую очередь, решает задачу брендирования корпоративных страниц компании в социальных сетях, следовательно на нём необходимо отразить наши ключевые проекты. Мы решили, что на иллюстрации должна быть многофигурная композиция из персонажей и техники как минимум из пяти наших игр.

Чтобы лучше понять, как реализовать идею, мы собрали несколько референсов.

Кстати, помимо популярных источников референсов (Google, Pinterest, Flickr) советую китайский аналог Pinterest — huaban.com. Вам придётся потратить некоторое время, чтобы зарегистрироваться на сайте с китайским языком и получить доступ ко всем его функциям, но, поверьте, оно того стоит! После того, как вы определились с идеей, следующим шагом становится поиск композиции.

Поиск композиции и скетчи

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

Теперь от теории к практике. На основе собранных материалов (бесплатных стоковых фотографий, отрендеренных изображений моделей и скриншотов, сделанных из приложения Mixamo от Adobe), я создал для себя библиотеку форм и объектов. Затем каждый из этих объектов превратил в custom shape и с помощью одноимённого инструмента сделал эскизы.

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

Составление сцены в Unity

Сборка сцены в Unity начинается со сбора базы ассетов, которые будут использоваться в арте. В данном случае — это ассеты наших проектов. Если вы начинающий художник или просто делаете арт для тестового задания, то рекомендую использовать бесплатные ассеты, доступные как на сторонних ресурсах (www.turbosquid.com www.cgtrader.com ), так и непосредственно во встроенном Unity Asset Store. В Asset Store вы найдёте не только ассеты персонажей и окружения, но и всевозможные эффекты и плагины. Некоторые из них очень просты в освоении, поэтому вам будет проще собирать базовые сцены в Unity, не прибегая к созданию собственных ассетов.

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

Переключение цветового пространства

Если вы ранее не пользовались Unity или другими 3D-пакетами, то не пугайтесь, ведь всё, что вам понадобится — это базовые знания навигации в 3D-пакетах и умение правильно формулировать запросы в поисковой строке YouTube. Существует огромное количество видео-уроков, объясняющих базовые функции интерфейса Unity, а также другие необходимые операции: настройка источников света и камеры, создание террейна, позинг зариганных моделей.

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

Установка пост-процессинга
Активация пост-процессинга
Изображение без пост-процессинга
Изображение после добавления пост-процессинга

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

Далее делаем выгрузку арта из Unity. Предлагаю два способа: первый — скачать в Asset Store любое приложение или плагин, который делает скриншоты сцены, второй — просто сделать скриншот экрана.

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

После всех манипуляций у меня получился такой набор

Первичная обработка в Photoshop

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

Каждый элемент с сохраненной засветкой
Засветки обрезаны по контуру объектов
Засветки срезаны на новый слой и почищены от лишнего фона

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

Композинг и оверпеинт

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

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

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

Постобработка и наложение эффектов

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

#арт #опыт

{ "author_name": "Андрей Верещагин", "author_type": "editor", "tags": ["\u043e\u043f\u044b\u0442","\u0430\u0440\u0442"], "comments": 41, "likes": 53, "favorites": 66, "is_advertisement": false, "subsite_label": "gamedev", "id": 27081, "is_wide": true, "is_ugc": false, "date": "Sat, 15 Sep 2018 19:18:37 +0300" }
{ "id": 27081, "author_id": 22254, "diff_limit": 1000, "urls": {"diff":"\/comments\/27081\/get","add":"\/comments\/27081\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/27081"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

41 комментарий 41 комм.

Популярные

По порядку

Написать комментарий...
19

Просто добавляешь мужика который воюет не туда - profit.

Ответить
5

Ну такое. Явно забыли поработать с окружением. С позами персонажей ещё бы поработать. Ноги в колене согнутые на зрителя - ну это не самое лучшее решение. Оно сжирает дизайн персонажей.

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

Окружение - не разработано вообще. Они бегут по пустыне. В чем нет смысла. Даже если кругом туман - то на первый план нужно добавить предметов которые укажут где и за что солдатики воюют.

Ответить
3

Визуально выглядит отвратительно и очень не профессионально. Явно арты, которые в Play market и AppStore, в упомянутых играх(MSO и WWH), рисовал не он! Тогда возникают вопросы...

Ответить
3

Есть вероятность что просто хотел по быстрому запилить статью для себя или по распоряжению начальства - в рамках продвижения игры. Но времени особого не было. Поэтому все очень дешево и выглядит.

Ответить
0

А мне всё понравилось, хотя бы я уметь так же. Хотя бы на таком же уровне как автор.

Ответить
0

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

Ответить
0

Если делаешь арт для студии, то все нужные модели тебе дадут. Лишь бы уметь красиво всё это обматтепейнтить.

Ответить
0

Было бы странно - если бы в рамках студии не давали бы))

Ответить
1

Огромное спасибо за статью!
Она огонь
Еще, было бы здорово почитать про лайфхаки с записью промо-роликов/трейлеров :)

Ответить
0

Странное руководство по созданию того, что обычно создаётся с нуля. Референсы? Возможно это круто для практики. Но для действительного гейм-арта нужны девственные идеи, в которых объединятся и суть игры, и таланты художников.

Ответить
5

Все художники (ну может кроме каких-нибудь абстракционистов) используют референсы.

Ответить
2

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

Ответить
0

Мой внутренний аутист попросил уточнить "только одно" из двух вариантов.

Ответить
–1

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

Ответить
5

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

Ответить
3

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

Ответить
0

Извиняюсь за орфографию ;)

Ответить
2

Таланта не существует. Слово "талант" нивелирует все те годы вложенные в развитие умений.

Ответить
0

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

Ответить
1

Если вы чего то не видите. Это не означает что этого "нет" и самостоятельная практика с детства - это именно что "практика" а не какой то там "талант".
Можно говорить о силе воли и умения концентрироваться на задачи, но никак не о том - что человек сел и сразу пошло заебись.

Ответить
0

Ты меня не услышал. Я тебе говорю не о самоучках и практике. Я тебе говорю именно о тех людях, которые сели, взяли и пошло заебись. Они просто умеют. Художники с твёрдой и «умной» рукой, актеры с уникальной мимикой и легкостью переключения, обладатели шикарного голоса, танцоры с офигенным чувством ритма и многие другие.
Смирись, они просто умеют. Без учебы.

Ответить
0

Я прекрасно тебя услышал и скажу что такого не бывает. В принципе. Если вы увидели что человек сел и пошло заебись - то это лишь означает что ЛИЧНО вы не видели как этот человек тренировался.

Ответить
0

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

Ответить
1

Ты так и не понял. Вот растёт ребёнок, от 1 до 3 лет он просто валяется, бегает, орет и подобное.
И тут внезапно он в 4 года начинает напевать песенку идеальным голосом, попадая в ноты. Но он не знает даже, что это. Не знаком с этим искусством, не изучал, никто не говорил.
Оно просто из него льётся.
И есть уйма людей, которые всю жизнь носят в себе разные таланты, но работают кто на заводах, кто в сервисах, кто ещё где. И учатся на другие профессии, не имеют хобби.
Просто умеют. Не суди по себе)

Ответить
0

Я ЛИЧНО видел, как я ЛИЧНО делаю то, что умею с детства без учителей и ресурсов. Просто чувствую это.

Ответить
0

Приятно наверное прибывать в иллюзии ? Я по запросу
UnicornWrangler ничего творческого не нашел.

Ответить
0

А я говорил, что что-то выкладываю в сеть?) Прости, но я даже твиттер завёл только для авторизации на DTF)
Я зарабатываю своим творчеством, и мне это нравится. Хвалиться перед всеми смысла нет.

Ответить
1

Я зарабатываю своим творчеством, и мне это нравится

Хвалиться перед всеми смысла нет.

Это биполярочка или просто распирает ЧСВ очередного художнека с 10к подписоты во вконтакте?

Ответить
0

У меня нет страницы ВКонтакте)
А оскорбления оставь для себя любимого )

Ответить
0

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

Ответить
0

Не верьте ) Все мои новые клиенты приходят по рекомендации старых. Плюс постоянные любимые клиенты.

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

Ответить
0

>что обычно создаётся с нуля.

Неа)

Ответить
1

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

Ответить
1

Если уж брали методы из кино, то учли бы, что движение влево в кадре – символ регресса.
Да и при верстке графики ставят изображение слева, а надпись справа. Это для тех народов кто пишет слева-направо.

Ответить
1

Вышло, мягко говоря, любительски, какую цель преследовал автор статьи, впечатлить профанов? Или реклама? Тогда простительно. А так - что арт, что статья, сделаны "на коленке".

Ответить
0

бля это же гениально

Ответить
0

Да уж

Ответить
0

Не понятно что тут развели. Статья для новичков, поэтому и работа максимально простая.

Ответить
0

К Р А С И В О

Ответить
–1

ты хотел сказать
K P A C U B O

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Игру с лучшим стелсом никто не заметил
Подписаться на push-уведомления