что такое слот в рисовании
Что такое слот в рисовании
Комишка, традишка, коллаб: терминология современного художника
«Возьму комишки на хеды, халфы и фуллы. В традишке и дидж, лайн, безлайн», – такие объявления можно обнаружить в группах начинающих художников. «Не могу разобрать слова, это на эльфийском?», – подумаете вы.
Всё течёт, все изменяется, и вместо привычных нам «графика, гризайль, акварель» в среде художников можно услышать вот такую абракадабру. Чаще всего эти термины используют подростки-самоучки и фрилансеры, но они всё прочнее входят в лексикон и далеких от сферы людей.
С развитием всемирной сети Интернет художники из разных стран объединились на тематических площадках для продвижения, поиска работы и обмена опытом. А так как универсальным языком для общения во всем мире признан английский, не удивительно, что именно оттуда вышло большинство современных профессиональных жаргонизмов. Давайте пройдёмся по самым основным из них.
Начнём с того, что собственно сам художник это артер (arter), а рисунок – арт (art).
Разделение по техникам:
На смену деления работ на живопись, графику и так далее, пришли более обобщённые категории: диджитал и традиционный рисунок.
Традишка (традиционный рисунок, traditional art) – работа, выполненная с помощью традиционных материалов и инструментов: гуашью на бумаге, маслом на холсте и т.д. Оцифрованное (скан, фото) и залитое в интернет традиционное изображение всё равно будет традишкой.
О процессе:
Туториал (tutorial) – пошаговый урок, показывающий, как что-либо нарисовать.
Скетч (sketch) – набросок, эскиз, намётка рисунка со вспомогательными линиями, тренировка поз и мимики персонажей, набивка руки перед чистовым рисунком. Соответственно, скетчбук – альбом или блокнот для набросков.
Драфт (draft) – быстрый, неряшливый набросок.
Линия движения (line of action) – линия, которая задаёт движение при рисовании персонажей.
Линии построения – вспомогательная линия, используемая для графического построения характерных точек, фигур, проекций и т.п., не входящая в состав окончательного изображения.
Лайн (line) – аккуратный чистовой (либо черновой) рисунок, но без цвета и свето-теней.
Шейдинг (shading) – наложение теней.
Хайлайты (highlights) – световые эффекты: блики, отражения, рефлексы.
Колоринг, покрас (coloring, flat coloring) – заливка цветом без теней и света.
Детализация – тщательная проработка деталей изображения.
Монохром (греч. «mono» – один и «chroma» – цвет) – одноцветность (но не обязательно ч/б) работы.
Бэк, бэкграунд (background) – фон.
Текстура – изображение, воспроизводящее визуальные свойства каких-либо поверхностей или объектов.
Палитра (palette) – цветовая гамма конкретного рисунка (можно подобрать, можно взять уже готовую).
Коллаб (collaboration) – совместная работа нескольких художников над одним артом.
Реквест (request) – работа, выполненная на заказ бесплатно или в обмен на спасибо, лайки, репосты, рекламу.
Редизайн (redesign) – изменение/улучшение персонажа или какого-то стиля.
Редрав (redraw) – когда автор перерисовывает свою же старую работу, чтобы показать, насколько за этот период улучшился навык рисования.
Челендж (challenge) – соревнования, вызов, вид активности в среде художников. Наиболее популярные: Inktober, Drawlloween, Mermay, Draw in your stile.
Випка (WIP, W.I.P., work in progress) – работа, выкладываемая в процессе её создания, с целью показать сам процесс или попросить совета.
Трейд (trade) – обмен рисунками: ты рисуешь – тебе рисуют в ответ.
ACEO-трейд (art cards, editions and originals) – обмен по почте небольшими карточками примерно 6,3 × 8,9 см. Как правило, рисованные, но могут быть фотографией или коллажем, как в одном экземпляре, так и тиражированные.
Кирибан (kiriban, от яп. 切りのいい番– kiri no ii ban) – дословно: хорошее число, чтобы остановиться. Суть явления сводится к тому, что участник сообщества-подписчик фиксирует круглое, красивое число (количество постов, подписчиков), и за это получает награду, например, рисунок от артера.
О рисунках:
Чар (character), перс – персонажи с собственной биографией, палитрой цветов, именем, характеристиками.
ОС (original character) – оригинальный персонаж художника, тот, которого он сам себе придумал.
Адопт (adoptable, adopt) – способ создания персонажей. Художник придумывает персонажа и выставляет на продажу. Как только покупатель его приобретает, адопт и права на него полностью оказываются в распоряжении купившего.
Комишка, комишн (commission) – рисунок на заказ за деньги.
Гифт (gift) – рисунок в подарок.
Хэдшот, хэд ( headshot ) – «летающая» голова, рисунок головы без туловища.
Халфбоди, халф (halfbody) – «половина» тела, рисунок «по пояс».
Фулбоди, фул ( fullbody ) – персонаж в полный рост.
Полноценка – работа, выполненная в цвете, с фоном и деталями.
Безлайн – рисунок, созданный без ободочного контура, в котором объем передан только свето-тенями и цветом.
Антро (antro) – антропоморфные животные, похожие на человека практически во всём.
Фурри (furry) – животные, как правило, обладающие мехом, которым присваиваются человеческие качества в той или иной степени. Кто-то разделяет фурри и антро, кто-то считает, что это одно и то же.
Юч/YCH (your character here) – набросок персонажа, который можно купить или забронировать. Выбранный набросок будет покрашен под вашего персонажа.
Ватермарка (watermark) – сигнатура, клеймо, логотип, подпись художника.
Оверпэйнт или редлайн – изображение, выполненное поверх работы другого человека для подсказок или указания ошибок. Иногда оверпэйнтом называют обводку, обмазку, обмазон – когда автор размазал, заблюрил (blur – вид обработки в графическом редакторе), исказил фильтрами готовую фотографию и выдаёт за свой рисунок.
И еще много-много странных слов. Как можно заметить, многие из них имеют отношения к продажам или продвижению работ, налаживанию социальных связей между художниками и их поклонниками, зрителями, получению обратной связи. Это также новые веяния в среде художников, дизайнеров и иллюстраторов, подробнее об этом можно прочесть в другой нашей статье.
Добавить комментарий
Комментарии
Ну что ж – о практической пользе этой статьи немного упомянуто по касательной в самой статье.
Так вот, миллионы художников со всего мира сидят на англоязычных площадках (так как российских адекватных аналогов практически нет), и общаются. Общение – это способ их учебы. Продвинутые матера выкладывают пресловутые туториалы и випки, делают уроки на ютуб-каналах – зачастую, на английском языке, с использованием этих терминов. Они, рассказывают о приемах, которые используют, делятся со своими подписчиками бесплатными авторскими наработками: кистями, текстурами, шрифтами, распространяя знания. Эти слова, как и многие другие – лишь условное общепринятое средство передачи информации и знаний от людей с разными языками и культурными традициями.
И так было всегда. Достаточно знать историю искусств, чтобы понимать, что подавляющая часть художественных терминов, а также техник и приемов – пришли в нашу культуру извне. В Х-ХІІ веках на художественные традиции Руси сильно влияла Византия, оттуда пришла иконопись. XVII век – засилье европейской культуры. Все слова, которым учат в художественных школах, все эти колориты, палитры, композиции – слова немецкого и французского происхождения. Помогают ли они научиться лучше рисовать, имеют ли практическую пользу? Ну, наверное, да, раз их учат. Перед погружением в какую-то сферу как правило учат базовый категорийный аппарат. И все это было перенесено в русскую культуру в процессе расширения культурных и политических связей, грубо говоря – общения между странами, и затем переработано в некий самобытный продукт русской культуры. Ну а те, кто отрицает очевидное – в России еще предостаточно невырубленной тайги. Можно уйти в лес и там в землянке баловаться лубком, или берестой ))
YCH / Как создавать иллюстрации из чужих артов
Пока консерваторы считают ниже своего достоинства связываться с чужими работами и даже фото, мир давно захвачен YCH. Если вы только за рисование по старинке, то даже не открывайте или ведите себя прилично )))
Что же это за зверь такой ЮЧ и с чем его едят?
О, вам понравится, господа иллюстраторы-непрофессионалы, новички в искусстве и ленивые художники! Последние кстати как успешно продают такие штуки, так и используют в своих работах. Думаю, что даже из первого примера будет понятно, что это за ЮЧ такой )))
Смотрите, какие попадаются арты для Обьюза)))
Еще немного примеров автора Lonary (в час ночи влом искать других)))
На готовых работах указывают ‘adopt’:
Можно найти даже самые упоротые штуки (клубничку выкладывать не буду, но такого там тоже полно))))
Так гораздо легче вылепить желанную обложку или иллюстрацию даже новичку. В этом будет больше толку, чем в постоянном колажировании или чужих артах, которые брать не разрешено.
Что такое слот в рисовании
Продавать можно только тех персонажей, на которых Вы лично имеете права- либо созданных Вами же, либо так же самостоятельно купленных ранее у автора/прежнего владельца (если с персонажем не шло запрета на перепродажу).
Нельзя продавать рандомные рисунки и изображения из интернета, сплагиаченных (полностью или частично) либо ворованных персонажей. Аналогично Вы не имеете права и продавать один и тот же концепт персонажа разным людям.
｡.:*･ﾟ☆.｡.:*･ﾟﾞ｡.:*･ﾟ☆.｡.:*･ﾟ
Q: Зачем нужны персонажи? Зачем люди их покупают?
Помимо самого изображения персонажа, как выше было указано, Вы приобретаете его концепт и исключительные права на него – права, позволяющие Вам распоряжаться персонажем. Персонаж может стать героем Вашего произведения (книги, комикса); Вы можете распоряжаться его судьбой так, как Вам будет угодно. Помимо этого, для участников нашего сообщества покупка и развитие персонажей, их коллекционирование – своеобразный досуг. Некоторые люди сферы годами ждут возможности заполучить в свои руки персонажа, который им симпатизирует.
Важно упомянуть, что скачивание изображения и затирание вотермарки не дает Вам прав на обладание ни самим изображением, ни нарисованным на нем персонажем. Вы можете поставить себе на рабочий стол изображение, рисовать фанарты и пр., однако это не даст Вам никаких исключительных прав на персонажа – Вы не можете его продавать, обменивать и в целом каким-либо образом позиционировать персонажа как свою собственность.
Также приобретение и развитие адопта дает возможность участникам нашего сообщества строить связи с другими людьми на основе связей между персонажами: некоторые участники комьюнити знакомятся друг с другом, когда ищут персонажам связи. В конце концов, сами персонажи являются для своих владельцев чем-то вроде семьи.
｡.:*･ﾟ☆.｡.:*･ﾟﾞ｡.:*･ﾟ☆.｡.:*･ﾟ
Q: Но ведь можно самому нарисовать персонажа, зачем его покупать?
Создание дизайна, как и само рисование, – отдельный навык, который требуется развивать. Помимо того, что Вы создаете рисунок, Вам также необходимо создать интересный концепт, гармоничный дизайн и в итоге получить целостный образ, с которым можно будет дальше работать. Не все художники могут создавать концепт-арты; а хороший дизайн может быть плохо исполнен, однако хуже сам дизайн от этого не станет.
Более того, некоторые люди не способны создать персонажа для самого себя, и им приятнее приобрести уже готовый концепт. К тому же, создание персонажа для себя – определенный риск, поскольку итоговый результат может разительно отличаться от изначального представления. Имея перед глазами готовый концепт адопта, можно понять, в твоем ли он вкусе, будешь ли ты развивать его.
Ниже будут разобраны термины, которые встречаются в адопт-сфере чаще всего:
Способы получения и продажи персонажа:
Некоторые художественные термины:
О правах художника на его работу.
✎ Согласно ГК РФ, автору произведения принадлежат следующие права (п. 2 ст. 1255 ГК РФ):
1) исключительное право на произведение;
2) право авторства;
3) право автора на имя;
4) право на неприкосновенность произведения;
5) право на обнародование произведения
✎ Художник имеет право на подпись в своих работах. Покупатель, заказчик не имеет права замазывать ее, либо вообще как бы то ни было изменять работу без разрешения на то автора.
✎ Художник имеет право на использование работы для своего портфолио. Художник может договориться с заказчиком о не публикации арта в общем доступе, однако он все равно будет иметь право использовать арт для закрытого портфолио.
✎ Рекомендация для художников насчет патента Ваших работ: указывайте помимо подписи ссылку на себя (Ваш аккаунт), Вашу творческую группу, дату создания.
Юч коммишенс — что это? Как продать юч?
Юч (Ych) — «Your character here» — «Ваш персонаж здесь» — термин у художников, используемый при продаже. Человек рисует свой макет, незаконченную версию рисунка, скетч и предлагает нарисовать чьего-либо персонажа в данной позе и окружении.
К примеру, художник нарисовал определенный рисунок подобного вида без конкретного героя и выставляет Юч на продажу за 1 доллар. Кто-то интересуется этим и покупает его, предлагая своего персонажа. Тогда исполнитель вместо «манекена» рисует то, что ему предложили.
Подобное довольно распространено в интернете и неплохо помогает заработать, тем более если продажа происходит среди англоговорящих людей: там больше ценят подобный труд.
Для продажи ючей обычно используют несколько ресурсов:
-ДА (ДевиантАрт)
-Инстаграмм
-Группы в Вк (их можно найти, введя в строку поиска групп «Ych»
Их можно продать как и за фиксированную цену (хочешь продать за 50 рублей — купят за 50, а не за цену выше или ниже), так и используя аукционы.
Аукцион обычно состоит из трех ставок: Начальная (нач), Минимальная (мин), и Автоматическая (Авто).
Начальная ставка — ставка, которая является самой малой и стартовой в аукционе.
Минимальная — то, насколько вы можете минимально повысить ставку.
Авто — максимальная и конечная ставка.
Все, применимое в статье об адоптах, касается и Ючей, поэтому советую заглянуть и туда — там больше информации.
Создание интерфейса для игры
Я Михаил Кравченко, дизайнер игровых интерфейсов. В этой статье опишу процесс создания интерфейса для игры. Статья будет полезна начинающим дизайнерам, художникам, которых просят рисовать интерфейсы, геймдизайнерам и менеджерам игровых проектов.
Ниже вы видите результат, который у меня получился.
Описание проблемы
Работа над интерфейсом игры начинается с описания проблемы. Обычно такое описание готовит геймдизайнер, он придумывает новую механику для игры и просит поддержать её интерфейсом, или видит какие-то проблемы в игре и просит помочь разобраться с ними.
Когда мы получили описание проблемы, нельзя сразу бросаться решать её. Сперва нужно удостовериться в том, что она описана достаточно полно и точно, а также в том, что мы с геймдизайнером понимаем задачу одинаково. В противном случае мы скорее всего сделаем не то, что нужно и потратим время впустую.
Поэтому перед тем как бросаться в бой, коротко опишем суть проблемы, причины, по которым эту проблему нужно решать и результат, который нужен в итоге, после чего согласуем описание с геймдизайнером.
Если мы не будем понимать, зачем нужно решать проблему, то с большим шансом сделаем неподходящий дизайн, а без описания нужного нам результата не получится оценить качество проделанной работы.
Пример описания проблемы
У нас в игре есть 200 костюмов, в которые игроки могут одевать своих героев. Мы продаем эти костюмы только в составе наборов с другими игровыми предметами. У игрока нет возможности купить только костюм, не покупая предметы.
Зачем нужно решать эту проблему:
У нас есть игроки, которые хотят получить костюмы для своих героев, но не готовы покупать наборы предметов только ради костюмов. Если мы дадим им возможность купить костюм, они обрадуются и занесут денег.
Какой результат нужен:
Магазин, в котором люди смогут легко и непринужденно покупать костюмы для своих героев.
Когда мы покажем описание проблемы геймдизайнеру, он скорее всего попросит внести какие-то коррективы. После согласования можно будет перейти к работе с референсами.
Работа с референсами
Допустим что раньше мы ни разу не делали дизайн магазина костюмов и не знаем как сделать его хорошо. В этом случае нам нужно посмотреть магазины, которые делали другие люди и изучить их опыт.
Выберем несколько игр, в которых есть магазины, сделаем скриншоты интерфейсов и изучим их. Найдем удачные решения, которые можно использовать в нашем проекте и неудачные решения, которых лучше избегать. Лучше взять магазины из популярных и успешных проектов, так как у них много возможностей для работы над своими интерфейсами, и у нас больше шансов найти хорошие решения у них.
Если раньше мы уже сделали несколько магазинов костюмов и чувствуем себя довольно уверенно, нам все равно не помешает изучить решения. которые используются в популярных проектах. Возможно, мы почерпнем что-то новое для себя.
Референсы игровых магазинов. Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.
После изучения референсов можно переходить к пользовательскому сценарию.
Пользовательский сценарий
Сценарий поможет понять, какую информацию нужно показать человеку и какие возможности стоит ему дать. Чтобы получить сценарий, нужно кратко описать поведение, которого мы хотим добиться от человека, а также ситуации, в которых он может оказаться, работая с нашим интерфейсом.
Пример сценария
Человек открывает магазин костюмов. Просматривает разные предложения, кликает на них и видит костюмы на своем герое, выбирает один из костюмов, жмет на кнопку “Купить”. Если у игрока достаточно валюты, костюм покупается и появляется в интерфейсе выбора костюмов. Игрок видит соответствующую нотификацию. Если валюты не хватает, появляется предложение купить еще валюты.
Имея перед глазами сценарий, можно подробно расписать вещи, которые нужно показать игроку и возможности, которые стоит ему дать. Получится своего рода чек-лист, по которому можно будет проверять, не забыли ли мы чего.
Согласование с командой
Согласуем описание с командой. Для этого можно сделать чат с названием фичи и закинуть описание в него, или встретиться в переговорной. Коллеги подскажут нам что какие-то вещи невозможно сделать по техническим причинам, какие-то вещи делать очень дорого, а какие-то вещи мы не учли когда описывали проблему.
Если мы начнем работу, не зная подобных нюансов, то скорее всего спроектируем и нарисуем не то, что нужно. Потом к нам прибежит взволнованный коллега, который только сейчас посмотрел дизайн и понял, что мы не можем его реализовать по каким-то причинам. Возможно, он расскажет что в дизайн нужно добавить вещи, которые мы не учли на стадии описания проблемы. Может попросит что-то убрать.
А в этот момент у нас уже будет готова часть работы, которую совсем не хочется переделывать. Мы будем вынуждены искать какие-то варианты, спорить с коллегой или доказывать что текущий вариант подходит, а в самом неудачном случае таки придется все переделать с нуля. Чтобы избежать подобных проблем, соберем обратную связь с коллег и добавим ее к нашему описанию.
Пример обратной связи от коллег
Мы не можем приближать и отдалять модельку героя, сейчас нет такого функционала. Его можно запилить, но на это уйдет месяц.
В некоторых играх купленные предметы не исчезают из магазина, а остаются в нем с пометкой “Куплено”. Люди начинают как бы собирать коллекцию и получают позитивные эмоции, глядя на собранные ими предметы. Давайте добавим такой маркер для купленных вещей и не будем убирать их из магазина после покупки.
У нас 200 костюмов, проскроллить их все будет довольно сложно, а еще сложнее будет найти какой-то конкретный костюм. Давайте добавим категории костюмов, чтобы облегчить подобный поиск.
Когда описание согласовано с командой, можно переходить к наброскам.
Набросок структуры интерфейса
Набросок нужен чтобы показать структуру интерфейса со всеми его элементами и их состояниями. Наброски на бумаге позволяют быстро попробовать несколько вариантов решения проблемы и выбрать самый подходящий. При создании наброска лучше держать перед глазами описание проблемы, так у нас будет меньше шансов о чем-то забыть. Ниже вы видите пример бумажного наброска.
Для презентации команде бумажный набросок не годится, так как его можно интерпретировать по-разному, и разные люди могут увидеть в нём разные вещи. Поэтому откроем графический редактор и превратим бумажный набросок в понятную схему. На этом этапе не нужно заниматься оформлением — подбором цветов, шрифтов и прочих атрибутов визуального стиля. Здесь нужно только показать из каких элементов состоит интерфейс и как он будет работать.
Ниже вы видите пример наброска интерфейса, сделанного в графическом редакторе.
К сожалению, вся схема не влезает в одну картинку, но зато здесь есть полная схема со всеми состояниями и переходами.. Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.
Получившуюся схему нужно согласовать с командой, после этого можно делать прототип.
Прототип
Прототип нужен для того чтобы «пощупать» набросок интерфейса и понять насколько удобно им пользоваться. Для создания прототипов можно использовать фигму или другой подобный редактор. Сперва нужно “пощупать” прототип самостоятельно, потом дать “пощупать” другим членам команды и собрать с них обратную связь.
Если есть возможность, прототип стоит протестировать на коллеге, ничего не знающем о проблеме, которую мы решаем. Товарищи, читавшие описание проблемы, годятся для тестирования куда меньше потому, что слишком много знают.
Посадим коллегу за устройство с прототипом и попросим выполнить несколько задач, параллельно озвучивая свои мысли и действия. Это поможет найти места, в которых человек будет ошибаться, или понимать происходящее не так как нам нужно.
К сожалению, на создание и тестирование прототипа часто нет времени, но если оно у вас есть, лучше создайте и протестируйте. Когда прототип и набросок структуры готов и согласован с командой, можно переходить к оформлению интерфейса.
Оформление интерфейса
Если проект уже запущен, у дизайнера есть UI KIT — набор элементов, из которых собраны все интерфейсы игры. Обычно к нему прилагается руководство по сборке, в котором есть требования к размеру элементов интерфейса, отступам между ними, модульной сетке, по которой эти элементы выравниваются и так далее.
В этом случае не нужно ничего рисовать, достаточно найти подходящие элементы и собрать из них новый макет. В данной статье я хочу показать весь процесс создания интерфейса, поэтому представим что UI KIT’а у нас нет и нужно разработать визуальный стиль интерфейса с нуля.
Визуальный стиль интерфейса и сеттинг игры
Визуальный стиль интерфейса должен соответствовать сеттингу игры. К примеру, если у нас игра про волшебное средневековье, то при оформлении интерфейса стоит использовать материалы из этой вселенной: грубо обработанный металл и дерево, свитки пергамента, сургучные печати, каменные декоративные элементы и так далее.
В интерфейсе игры с таким сеттингом не должно быть плазменных панелей, электрических проводов и светящихся экранов. Ниже вы видите пример интерфейса игры в средневековом фентезийном сеттинге — Warhammer Vermentide 2.
Хороший пример соответствия оформления интерфейса сеттингу игры можно увидеть в StarCraft 2. Когда играем за людей, интерфейс состоит из металлических панелей, пластин, проводов и заклепок. Когда играем за зергов, интерфейс представляет собой аморфную биомассу с прожилками из когтей, хитиновых пластин и других подобных элементов. Ниже вы видите пример.
Допустим что у нас игра в стиле Sci-fi, значит нам нужно найти примеры оформления интерфейсов в этом стиле, переходим к работе с референсами.
Работа с референсами визуального стиля
Работа над визуальным стилем начинается с поиска референсов, в нашем случае это будут примеры игровых интерфейсов, оформленных в стиле sci-fi.
Референсы помогают нам расширить свой кругозор, изучить приемы и решения, которые можно использовать в нашем проекте, а также решения, которые не подходят нам по каким-то причинам.
Оформить интерфейс игры с sci-fi сеттингом можно очень по-разному. Например, мы можем сделать оформление в минималистичном стиле, как в Destiny 2, или нарисовать интерфейс c большим количеством декоративных элементов, как в Starcraft 2. Можно сделать темный интерфейс, как в Doom 4, или светлый, как Apex.
Рефборды со скриншотами интерфейсов из перечисленных выше игр.
Таскать холст можно с зажатым пробелом, зумить колесиком мышки с зажатым Ctrl.
Как вы понимаете, слыша словосочетание “интерфейс в стиле sci-fi ”, разные люди представляют себе разные вещи. Поэтому перед тем как переходить к наброску, нужно согласовать с командой направление, в котором мы будем двигаться при поиске визуального стиля интерфейса. Соберём несколько наборов референсов и покажем их команде, а затем выберем из них тот, что подходит нам больше всего.
Допустим, мы с командой договорились сделать темный интерфейс в минималистичном стиле. Только после этого можно переходить к наброскам.
Наброски визуального стиля интерфейса
Наброски нужны для того, чтобы быстро и дешево попробовать несколько вариантов оформления интерфейса и выбрать самый подходящий. Во время рисования нужно держать перед глазами набросок структуры интерфейса, чтобы показать все элементы и ничего не забыть.
На этом этапе нам важно показать идею оформления в общих чертах, поэтому можно рисовать довольно небрежно, не углубляясь в прорабатывание мелких деталей. Также совсем не обязательно точно выверять размеры всех элементов и отступы между ними. Всем этим мы займемся на этапе чистовой отрисовки интерфейса. Ниже вы видите наброски элементов интерфейса.
Когда набросок будет готов, нужно показать его коллегам и собрать с них обратную связь. С вероятностью 99% нас попросят что-то поменять, или попробовать какой-то другой вариант.
Поэтому ни в коем случае нельзя сразу рисовать начисто. Так мы потратим кучу времени на чистовую отрисовку, а потом нас попросят что-то поменять, и мы еще раз потратим кучу времени на чистовую отрисовку. Лучше сделать несколько быстрых и дешевых набросков, утвердить один из них, и только после этого переходить к чистовой отрисовке макета.
Вот мы утвердили один из набросков и можем переходить к следующему этапу.
Чистовая отрисовка интерфейса
Подготовим модульную сетку. Это полезный инструмент, который помогает расставлять элементы интерфейса, а также выверять их размеры и отступы между ними. Будем использовать сетку с размером ячейки в 4px так как она дает довольно большой простор для маневра. Соответственно, размеры всех элементов и отступов между ними будут кратны четырём пикселям. Обозначим места расположения и размеры всех элементов интерфейса с помощью серых блоков.
Когда структура макета готова, можно переходить к отрисовке всех его элементов. Реалистичные декоративные элементы лучше рисовать в 400% от размера, который понадобится нам в итоге. При рисовании в таком размере можно работать довольно небрежно, так как после уменьшения до 100% картинка будет выглядеть аккуратно. Ниже вы видите отрисованные начисто макеты.
Подробнее про отрисовку элементов интерфейса можете прочитать в моей статье.
Отрисованный начисто макет нужно показать команде и собрать с нее обратную связь. Мы уже утвердили все основные моменты на прошлых этапах, поэтому скорее всего новых пожеланий от команды не будет. Когда команда утвердит макет, мы сможем собрать UI kit, который облегчит нам создание других интерфейсов для игры.
Сборка Ui kit’a
Ui kit это набор элементов, из которых собирается интерфейс, он включает в себя графические элементы с их состояниями и все типы надписей. Ниже вы видите UI KIT, получившийся из чистового макета нашего магазина.
Помимо UI KIT’a стоит сделать инструкцию по сборке интерфейсов. В ней нужно показать примеры собранных интерфейсов со всеми размерами и отступами. Если у нас не будет такой инструкции, придется постоянно вспоминать, как собирать те или иные элементы и блоки. От этого понизится скорость работы и повысится вероятность совершить ошибку при сборке.
Когда Ui kit готов, можно переходить к подготовке материалов для программистов.
Материалы для программистов
В идеальном случае мы сами соберём все интерфейсы в фигме и отдадим их программисту, он внедрит макеты в игру и заставит интерфейс работать как надо. К сожалению, это возможно не на всех проектах, как минимум, Unreal Engine никак нельзя подружить с фигмой. Так что представим что сами мы не можем собрать все макеты и вынуждены обратиться за помощью.
Чтобы программист собрал наш дизайн правильно и заставил его работать как надо, нужно подготовить соответствующие материалы и инструкции. Нам понадобится схема переходов между экранами, макет с габаритными размерами всех элементов и отступами между ними, описание цветов и размеров используемых надписей, а также нарезка всей графики, необходимой для сборки. Если нам хватило времени на создание прототипа, не забудем добавить ссылку на него.
Ниже вы видите пример разметки макета, который поможет программисту собрать интерфейс правильно.
В процессе сборки интерфейса периодически обнаруживаются технические проблемы, не позволяющие собрать интерфейс точно как в макете. В таких случаях приходится придумывать какие-то варианты, и лучше не предлагать решение сразу, а взять паузу и обдумать несколько доступных опций. Так у нас будет меньше шансов внедрить плохое решение.
Контроль качества сборки
Когда интерфейс будет готов, программист попросит нас оценить качество сборки. Здесь нужно проверить сборку интерфейса, сравнив его с нашим макетом. Для этого достаточно сделать скриншот игры в том же разрешении, что и макет, а затем положить его поверх макета в слое с прозрачностью в 50%. Так станет понятно, все ли элементы находятся на своих местах, точны ли размеры и отступы.
Помимо визуальной составляющей нужно проверить логику работы интерфейса, всё ли работает так как было задумано. Вполне вероятно что мы найдём какие-то проблемы в интерфейсе, их нужно будет описать и передать программисту.
Тестирование на игроках
К сожалению, далеко не всегда у разработчиков игр есть время и возможности для тестирования интерфейса на игроках. Но зато почти всегда у нас есть возможность поймать коллегу, не причастного к нашему проекту, посадить его за интерфейс и попросить им попользоваться, параллельно озвучивая свои мысли и действия. Так можно отловить некоторые грубые ошибки. Например, у меня был случай когда коллега не понимал, как забрать лут после боя и скипал его, так как кнопка скипа лута была намного заметнее самого лута.
Если вам интересна тема UX исследований, рекомендую ознакомиться с творчеством Ксении Стерниной, в некоторых своих выступлениях и статьях она довольно подробно рассказывает о тестированиях игровых интерфейсов.
Заключение
Я в общих чертах показал процесс создания игрового интерфейса. Надеюсь что статья оказалась для вас полезной. Желаю всем удачи и творческих успехов. Буду рад вопросам, комментариям и предложениям.