Иван Марьев: Включаем голову и “делаем” интерфейс. Часть II

Art Director компании G5 Games® поделился секретами мастерства и рассказал об одном из способов создания UI элементов.

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

Вот такое незамысловатое окошко получится в результате:

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

Предположим что вводные следующие:

Необходимо создать UI для “казуальной”, мультяшной игры в соответствующей стилистике.
Это означает, что требуемый UI должен быть мультяшным, цвета должны быть чистыми, тени легкими, а силуэты мягкими и округлыми. Так как скевоморфизм нынче не в моде, да и Pinterest завален интерфейсами с использованием текстур дерева, кожаными подложками со строчкой и так далее и тому подобное, необходимо упростить задачу и выбрать путь создания абстрактного UI. Но при этом, так как подразумевается, что интерфейс создается для казуальной, мультяшной игры, оставляем себе один из приемов скевоморфизма - объем.
И вот, когда понимание того, что необходимо сделать сформировалось, можно перейти непосредственно к созданию UI.

Скетч

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

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

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

Основа для UI элементов (Shapes)

Теперь самое интересное - создание финального изображения! При помощи инструмента Pen необходимо создать три шейпа, как на примере. Это очень просто! Для того, чтобы окно не вышло кособоким, стоит заранее расставить guides/направляющие или включить grid/сетка. В любом случае, если элементы не будут стопроцентно симметричны, ничего страшного в этом нет. Легкая ассиметрия приятна глазу.

Styles

Далее на шейпы необходимо “навесить” стили для придания объема.

И, на самом деле, никаких секретов или тонкостей мастерства в работе со стилями нет. Обводка добавляет обводку, тень добавляет тень и так далее. Главное делать это аккуратно и не переставать экспериментировать с тем или иным стилем и отслеживать результат. Например, стиль Inner shadow/внутренняя тень, внезапно может выполнять роль рефлекса если выставить ей режим наложения Add. Фактически инструмент Styles в Photoshop, - это мощный и гибкий инструмент с огромным количеством настроек, которым, к сожалению, очень часто пренебрегают.

Маленькие хитрости в дополнение к стилям

Конечно, не всегда возможно добиться желаемого результата только стилями слоя. Рассмотрим пример со звездочкой:

На стадии 1 мы видим достаточно скучную и недостаточно объемную звездочку. Это происходит потому, что стили отлично придают объем плашкам, окнам и т.д. В общем чему-то относительно плоскому, но плохо работают с действительно объемными сущностями, такими как наша звездочка. Поправить это очень просто.
На стадии 2 необходимо добавить размытый кружок с режимом наложения Add и он моментально придаст изображению объем полусферы.
Ну и как вишенка на торте - маленький блик на стадии 3.

Hint

В работе с шейпами есть еще один приятный нюанс: шейпам можно настраивать блюр. Это очень удобно и чтобы не быть голословным, рассмотрим пример.

В данном случае кнопка состоит из двух шейпов: шейп формирующий общее очертание кнопки и шейп меньший по размеру, создающий эффект фаски. Соответственно, настраивая параметр Feather меньшего по размеру шейпа, можно регулировать сглаженность этой фаски. В данной ситуации используется именно такой прием вместо стиля слоя Bevel & Emboss потому, что Bevel формирует всегда одинаковую по толщине фаску, а используя второй шейп есть возможность “играться” с ее толщиной и создать более “живой” элемент. Обратите внимание, нижняя фаска кнопки чуть шире, чем верхняя.
Также, еще раз хотелось бы напомнить о пластичности линии/силуэта. Более подробно об этом было рассказано в первой части - Включаем голову и “делаем” интерфейс. Сейчас же просто в качестве примера:

Слева, на варианте А можно увидеть “живую”, слегка асимметричную, но при этом пластичную кнопку.
Справа, на варианте Б - абсолютно геометрически правильную.На мой взгляд очевидно, что кнопка А смотрится намного привлекательнее и лучше подходит для решения задач по разработке UI для “казуальной” игры.

Чем оправдан подобный пайплайн?

Это быстро! Если на глаз прикинуть сколько у меня ушло времени на создание этого окна-примера, то набегает примерно часа три. Текст я писал значительно дольше.
Картинка в результате получается очень аккуратной. А для UI это скорее плюс. Живописность и жирный мазок кистью пусть достанутся фоновым изображениям.
Легко и просто масштабировать UI элементы! Достаточно скопировать стиль слоя и перенести его на новый, интерфейсный элемент.

Заключение

В данном примере было рассмотрено достаточно простое окно, состоящее из базовых элементов. Само собой, UI со временем обрастает более сложными сущностями, такими как иконки бустеров, декор и прочие подобные вещи. И вот тогда-то и понадобится полный арсенал навыков UI художника: и 3D, и кисти, и текстуры, и анимации. Но не сегодня!

P.S. При создании этого гипотетического интерфейсного окна не было использовано ничего кроме шейпов и стилей.

Спасибо за внимание!