Праздник цветения – это первое внутриигровое событие, которое проводится сразу в нескольких играх Riot: игроки смогут поучаствовать в ионийском торжестве как в League of Legends, так и в Legends of Runeterra. Но прежде чем мы расскажем, как к этому пришли, давайте разберемся, что же такое этот Праздник цветения.

Праздник цветения – внутримировое (то есть каноничное для вселенной League of Legends) событие, которое посвящено цветам душ, распускающимся в Ионии. Когда у цветов проявляются духовные свойства, ионийцы общаются с усопшими близкими и празднуют их мирный переход к загробной жизни или оплакивают их неспособность обрести покой.

Spirit Blossom

Но Лига и LoR – абсолютно разные игры. Первая – MOBA, а вторая – ККИ. У них разные игроки и эстетика. Как же добиться, чтобы событие выглядело целостно?

Визуальный дизайн входит в чат

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

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

Начнем с самого начала: создания визуального бренда Праздника цветения.

Создание визуальной идентичности Праздника цветения

С Крейгом Riot MrParkinson Паркинсоном – визуальным дизайнером League of Legends

Key art

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

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

Затем я разделил образцы на ключевые категории и стал изучать их формы, цвета и текстуры. Это помогло выбрать направление для бренда Праздника цветения. Но возник вопрос: как соединить вместе кусочки в стилистике аниме, Лиги и мифологии Восточной Азии и получить целостную картину?

Язык форм

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

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

exploration

Я опирался на восточноазиатские мотивы: цветы, завитки, облака. Я набрасывал варианты, которые удачно вписались бы в интерфейс, но меня не покидала мысль, что чего-то не хватает: более глубокой связи с тем, что делает команда тематического развития. Что, если сделать эскизы образов частью дизайна?

Yasuo concept

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

Цвета и текстуры

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

colors

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

Когда с подготовкой было покончено – а команда сказала твердое "да", – началась пора безумия. Кажется, я придумал около 90 логотипов. Только представьте! И каждый раз, когда я что-то показывал и получал отзывы, список сокращался – пока не остался один вариант.

final logo

Когда все утвердили, я составил руководство для других команд, работавших над событием. За дело взялась команда Legends of Runeterra.

Праздник цветения приходит в LoR

с Томом Riot Tomukus Сейером, старшим дизайнером графики Legends of Runeterra

LoR Key Art

Я отвечаю за дизайн и внедрение материалов в Legends of Runeterra. Это значит, что мне нужно работать с дизайнерами, которые занимаются качеством пользовательского взаимодействия (UX), инженерами, концепт-художниками, сценаристами – по сути, почти со всей командой LoR, – чтобы игрокам было на что посмотреть и что потрогать в нашей игре.

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

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

Чтобы этого добиться, я изучил материалы и руководства по визуальному дизайну от Riot MrParkinson, а затем перевел их в формат LoR. Пусть действие Лиги и LoR и происходит в одной вселенной (и разрабатывает их одна компания), каждая игра обладает уникальным стилем и визуальным дизайном. Клиент Лиги выполнен в современном плоском стиле – конечно, и в нем есть объемные и витиеватые формы, но в целом он отличается от клиента LoR, где используется скеоморфный подход.

Скеоморфный дизайн подражает реальности. Вспомните, как выглядели интерфейсы первых смартфонов: дизайн их приложений был очень реалистичным. У заметок была текстура бумаги, а шрифты выглядели так, будто вы пишете ручкой или карандашом. Такой подход использовался потому, что люди не знали, как делать заметки на тачскрине. Скеоморфный дизайн используется и в LoR, чтобы сильнее погрузить игрока в мир Рунтерры. Все, с чем вы взаимодействуете, должно напоминать физический объект. Поэтому, когда потребовалось перенести дизайн Праздника цветения, нам пришлось сделать кое-какие правки, чтобы стиль соответствовал LoR. Изменения коснулись всего интерфейса, но самый заметный пример – облака.

logo transformation

Когда Riot MrParkinson дал нам руководство по визуальному дизайну, я заметил, что одним из элементов вдохновения стали облака. Они выполнены в восточноазиатском стиле, что отлично вписывается в LoR – там используется ярко выраженная стилизация. В облаках было много завитков и плавных форм. Но чтобы перенести их в наш клиент, нужно было добавить текстуру и сделать их более металлическими – для соответствия общему стилю LoR.

Я открыл Adobe Illustrator, скопировал туда визуальные материалы от Riot MrParkinson и приступил к рисованию. Мне нужно было сделать облака более металлическими и тяжелыми, поэтому я не перенес готовые модели, а рисовал их сам.

Я предпочитаю начинать работу в Illustrator, потому что на выходе получаю чистый вектор. Затем я могу добавить обводку, сделав линии тоньше или толще. После этого я переношу фигуру в Photoshop.

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

clouds

Я добавил тень, потому что хотел поместить облако на передний план и создать ощущение, будто оно парит над фоном.

Я начал рисовать.

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

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

Client

Я надеюсь, что каждый игрок, который зайдет сначала в Лигу, а затем в LoR (или наоборот), сразу поймет, что участвует в одном и том же событии. Это будет значить, что мы справились с задачей, создав целостную картину в обеих играх.