UI Art. Как попадать в стиль при отрисовке декоративных элементов игрового интерфейса

Всем привет!   Я Михаил Кравченко, дизайнер игровых интерфейсов.

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

bdc27df9036392ed2e055bb02bbddb24.png

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

Допустим, мы нашли шикарную рубашку карты из Hearthstone. Смотрим на неё и думаем: «Господь всемогущий, какая красота, хотим чтобы похожие элементы были в нашем проекте!»

bef403ae02a2e86eb1b22103662bc210.png

Чтобы попасть в этот стиль, нужно выделить характерные особенности референса и применить их к объекту, который мы будем рисовать.

Форма объекта

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

На декоративном элементе из Hearthstone есть острые, угловатые формы — торчащие в разные стороны шипы и заострённые части якоря.

8d3b42978ff0dbda05bd60900c4e1af7.png

На плоских деталях референса присутствуют фаски, края центрального круглого элемента тоже имеют скосы.

ba353e6df43b31ffa1e4e7b4d5496098.png

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

2583281be89cead52eedd7848aa457db.png

Также на референсе много сколов, щербинок, царапин и прочих дефектов. Эту особенность тоже нужно будет применить к объекту, который мы будем рисовать.

ed26748a9f3b9c0e55a01179473cd4c6.png

Ниже показан лист, на котором собраны особенности форм референса

4da7cd9d8765a26e68b3577d6469704a.png

Цвета

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

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

b530d6a9847343a191f52a5e9d4fdb30.png

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

d7fa22ccd957ce3d70e86e69bb8bb485.png61863ca40eb79c4cec5753b4af341e62.png

Текстуры

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

3b6a979eb2d8cad69af9ccbb5585582e.png

Подготовка закончена

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

68f48de8c471fa07dc08cbb836dc1e08.png

Маленькие наброски

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

f8f2405471426f344accb3ef3c05c0a3.png

Лайнарт

Дальше нужно выбрать один из набросков и проработать его детали.

a5150ebbcc59a8c1eadd05cd91a09c84.png

Здесь очень помогает кисточка, меняющая прозрачность штриха в зависимости от силы, с которой мы давим на перо. Для неё лучше установить параметры  Opacity и Flow в районе 30%. Такие настройки дают довольно много контроля над линией, позволяют постепенно находить подходящую форму.

1d2a2b2e1248bfe3a72bc435b4a9d8ea.png

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

44a88ceebd7c43b9e77fa0752e64105c.png

Когда лайнарт готов, можно переходить к покраске объекта.

Покраска

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

2df940858f8398cbca59a7db48d382a9.png

Дальше нужно добавить основной цвет, тени, свет, блики и рефлексы от окружающей среды.

8fe2a335f72909ae3ed75f8846ea1312.pngfe8b0ba039c99d00f4ff777bb42a3e98.png

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

c11234be370f4b9e3fb4f485e990ecdc.png

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

62d005164e1ed009865c5a8d1b08429b.png

Добавление текстур

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

Текстуры на референсе в основном нарисованы вручную, поэтому покажу здесь как их можно накладывать, но в финальной версии рисунка их не будет. 

5f1dd50319976afeb506e3de5cf568c5.png

Мы также можем деформировать фотографии с помощью функции Warp и «натягивать» их на форму объекта.

5062c374c61a3787a23926b994cf0f0f.png

После текстур можно перейти к проработке деталей

Проработка деталей

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

c150566da3e4f962dca589cd882a11af.png

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

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

608c7c668600d2284939a3aa1462cbc7.png

Заключение

Мы рассмотрели тех. процесс попадания в референс. Чтобы попасть, нам нужно  изучить его особенности — форму, материалы, цвета, текстуры. Когда изучим, нужно перенести эти особенности на объект, который мы будем рисовать. В итоге должен получиться близкий к референсу результат. =) 

53819a5ee5fb44b1407c068655bf9b2d.png

Вот .PSD исходник с результатом, при желании его можно скачать и изучить. Вот кисточка для лайнарта и деталей, возможно кому-то пригодится.

Если у вас будут какие-то вопросы, пожалуйста, пишите, постараюсь ответить в силу своих возможностей. Со мной можно связаться через: Вконтакт, Беханс

Желаю всем удачи и творческих успехов =^_____^=

© Habrahabr.ru