Мейнфреймент: промо-арт (руками, БЕЗ НЕЙРОСЕТЕЙ... почти)

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

Под катом небольшой рассказ как я к этому пришёл.

Точка старта вот этот арт:

Проблемы, которые теперь уже очевидны:
1) Невнятный подбор цветов
2) Плохой акцент (на жука и лампы)
3) Мало контекста, и он практически не связан с игрой.

Практика показала, что у меня плохо получается найти композицию/сюжет. Чтобы компенсировать этот недостаток, я использовал нейросеть Dall-E. И набросал несколько вариантов новой обложки.

А дальше я провёл опрос в своей группе ВК и на DTF. Почему-то здесь я опрос по обложке Мэйнфреймента не проводил…

Взял за основу вариант номер два. Вот он:

Почему этот арт? Здесь понятно, что главный герой — уборщик. И что он где-то внутри серверной или чего-то подобного. И что тут много насекомых. Но главное — акцент сделан на большом компьютере, что мне очень понравилось, т.к. это фактически и есть Mainframe (первая часть названия игры)

Что мне не понравилось: постер никак не отражает внутренность игры, не бьётся стилистически, в нём слишком много визуального шума и куча косяков нейро-арта.

Я подложил его фоном и начал рисовать поверх свой. С нуля. Вектором.

Сперва я практически обрисовал самого уборщика, заменив форму швабры, и поправив странный комбез с нейро-арта: разделил его на рубашку и штаны с лямками.

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

Матрица 4×4 — узнаваемый элемент игры. Её игрок видит уже спустя 5 минут игры, ещё и в главном меню, когда продолжает игру.

Чисто ради поддержания концепта я уже подумываю в полной версии игры сделать 16 локаций по 16 уровней. Чтобы была общая матрица локаций, и в каждой локации матрица уровней.

Следующая часть арта всегда вызывает у меня боль. Я не умею рисовать филлеры и часто ударяюсь в ненужные детали. А стены, пол и потолок — это как раз филлеры.

На пол ничего лучше плитки я не придумал. Заменил абстрактные артефакты нейро-арта на классическую плитку с хайтек-бороздками. Слева снизу я приподнял одну плитку, планировал что оттуда будет что-то вылезать (мусор, паук и т. д.)

По бокам я так же в два яруса оставил какие-то системные блоки, но сильно их упростил.

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

На данном этапе у меня готова «коробка» моей сцены.

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

Как вы заметили, нейро-арт был квадратным (его так генерит Dall-E, настроек не нашёл). Мне пришлось сильно выйти за границы, чтобы потом можно была нарезать на разные форматы, в т. ч. и вертикальный.

---

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

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

---

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

Нутакое. Но я сказал себе, что это не приговор, т.к. ещё нет окружения. Зато мне понравилось как получился переход от синего в центре к ржавому по краям. Эдакий эффект «старины». Нраица =)

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

А ещё в игре есть ЭТО:

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

Снова набрасываю вектором придуманное:

Снова пробую засветлить низ, и оно вродеб как начало работать. Добавил водичку под ведро и швабру, т.к. мне показалось это добавит больше статического действия и подчеркнёт тему уборки.

Мусор я решил сделать прям как в игре — чернота с зелёными контурами. Получилось приемлемо.

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

Отобразил свои хотелки:

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

Ещё я пытался что-то добавить на пол. Паук из-под плитки у меня не получился. Там слишком мало места оказалось.

Пробовал сделать вот такой провод-сороконожку:

Но это создаёт сильный прегруз, поэтому она отправилась в утиль.

То же самое случилось с жуком, который выползал из мусора справа:

Оно может быть прикольно само по себе, но если смотреть на картинку в целом — каша:

Плюс надо было место для логотипа внизу оставить.

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

---

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

Покрасил антуражные системные блоки и пауков, добавил везде где можно лампочек и света от них. Но аккуратно, чтобы не переборщить.

Меня немного смущал пустой правый угол. Но я помнил, что всё равно буду этот арт кадрировать.

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

Теперь у меня основные цвета — это голубой, синий и зелёный. Что является одним из классических цветовых сочетаний. Почему не жёлтый? Ведь:

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

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

Есть ещё одна причина, почему не жёлтый. Ведь у моей игры есть лого:

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

---

Несколько наблюдений вместо заключения

Векторный арт — это очень трудоёмко. Не то, чтобы я этого не знал, но это моя первая большая работа, каждый элемент которой отрисован в векторе. До этого я рисовал в векторе персонажей и отдельные элементы игровой графики. Сейчас же я познал БОЛЬ.

Из плюсов: не думаешь о качестве элементов, когда масштабируешь.

Из минусов: заебёшься делать криволинейные формы ( мне было лень — потому у меня все объекты угловаты, ТИПА СТИЛЬ, ага XD ), адекватный шейдинг только через растровый оверлей, рисуешь в 10 раз дольше чем планировал.

Отрисовка в сером цвете и дальнейшая покраска — занятный опыт. Удобно в случаях тонирования больших площадей.

Рисовать арт по запчастям — это очень хорошая практика. Ещё лучше — умение организовать работу со слоями в фотошопе.

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

---

Надеюсь, такой поэтапный разбор процесса будет кому-то полезен. Ставьте лайк, подписывайтесь на канал, прожимайте всё, что прожимается, жмякайте всё что жмякается. И коммент бахните =)