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

В оформлении заявки главная задача — не усложнять жизнь HR’у, который эти заявки обрабатывает. Большая часть кандидатов справились с этой задачей отлично). До куратора BootCamp’а, который смотрит ваши тестовые задания, допускаются только заявки со всей необходимой информацией о кандидате. Но многие не прикладывали в письмо ссылки на резюме и портфолио, хотя это требование четко прописано в ТЗ, или не прикладывали даже само тестовое задание.

Еще один момент, который мешает оперативно обработать заявку — это использование псевдонимов в информации об отправителе письма и фейковых аккаунтов в соц. сетях. Например, если наш ответ по заявке угодил в папку “Спам”, а у кандидата нет привычки её проверять, он оставляет комментарий в группе ВК о том, что ему не пришел ответ. Начинается долгий процесс поиска заявки, и в итоге оказывается, что Катя Петрова написала в ВК с фейка “Иван Иванов”, а заявка пришла от отправителя Artist777. Чем сложнее вы делаете жизнь HR’у, тем проще вашей заявке потеряться.

Также и с входящими письмами, часть ваших заявок попадает в папку “Спам”. С этим сложно что-то сделать, и мы стараемся регулярно проверять папку на предмет оказавшихся там по ошибке сообщений. По нашему опыту, чаще всего в спам попадают письма с ящиков @inbox.ru. Мы бы рекомендовали завести отдельный почтовый ящик (например, на @gmail.com), с которого вы будете откликаться на вакансии, отправлять заявки в BootCamp’ы, и не смешивать эти письма с личными сообщениями. В этом специальном ящике стоит указать настоящие ФИО в данных отправителя письма.

Надеемся теперь вы поняли, как надо будет подать заявку на следующий BootCamp. Теперь, давайте поговорим о том, какие ошибки совершали многие кандидаты во время выполнения тестовых заданий.

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

Разберем каждую составляющую отдельно. Первым пойдёт “ракурс”. При выборе ракурса мы должны показать объект так, чтобы было видно как можно большей его деталей. При этом предмет стоит слегка повернуть, чтобы он казался объемнее, и заполнял как можно больше пространства в воображаемом квадрате.

Что за “воображаемый квадрат” спросите вы? Иконки делаются для разных целей. Для игр, для сайтов, приложений и т.д. И там они не “парят в пространстве”. В играх, к примеру, они часто бывают вписаны в квадрат/круг/овал, или другую геометрическую фигуру. В примерах из ТЗ, если присмотреться, они все по силуэту вписываются в некий “квадрат”. Именно эту фигуру мы и должны попытаться заполнить.

Какие ошибки бывают у кандидатов на этом шаге работы?

Рассмотрим эти три тестовых задания.

Картинка 1. Ракурс сильно акцентирует внимание на крышке фляги. Но акцент скорее должен быть на “животе” фляги, где будет изображён узор. Плюс, здесь плохо заполняется воображаемый квадрат. Остаётся очень много пустого пространства.

Картинка 2. Очень хорошая иконка. Хорошо просматривается объект и заполняется наш квадрат, но акцент направлен на угол крышки, а не на циферблат, который является главной частью этого объекта.

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

Давайте теперь попробуем исправить ракурс, чтобы работы смотрелись выгоднее.

Здесь мы постарались показать более подходящий ракурс для данных иконок.

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

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

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

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

Возьмем референсы из нашего ТЗ и вставим вместо одного из них работу кандидата (нижний ряд, правая иконка). Работа получилась интересная, но слегка проседает цепочка и циферблат из-за их размера. Как это можно исправить?

Мы слегка увеличили размер цепочки и элементов циферблата. Теперь объект по детализации смотрится лучше. Естественно, исправления только детализации недостаточно. Нужно править еще и ракурс и цвета.

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

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

Слева мы видим саму работу, а справа:

2. Как он сейчас выглядит.

План правок:

Результат показываем вам в форме Gif файла.

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

План правок:

С геометрией поработали, теперь давайте перейдем к цвету.

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

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

Давайте рассмотрим работы кандидатов.

Как в первой работе, так и во второй, подобраны не совсем подходящие цвета.

Возьмем 1-ые часы.

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

Сделаем то же самое и для 2-ых часов.

Автор работы: Валентина Пискунова.

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

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

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

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

Она смотрится хорошо, но что можно улучшить:

- Слегка поправить ракурс предмета и построение, чтобы он больше смотрел в сторону света, и показать его нижнюю и боковую сторону;

- Поправить изгиб лямки, чтобы фляжка лучше вписывалась в квадрат;

- Сильнее показать разницу в материалах между кожей и металлом;

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

Начнем! Чтобы не тратить время и силы на построение мы “считерим” и поиграемся с 3D.

Наш куратор создал очень простую 3д модель в Blender, близкую по пропорциях к исходной иконке, и выставил в ракурс. Что можно здесь исправить:

- Слегка наклонить модель вправо, чтобы направление у него было как у иконки карты;

- Чуть увеличить толщину крышки, чтобы сильнее стилизовать под референсы;

- Повернуть лицом чуть на нас.

И вот, что мы получаем, оставив место под будущую лямку.

Теперь, поработав немного с лайном и композицией мы получили такую заготовку:

Давайте перейдем к цвету. Попробуем использовать цвета из оригинальной иконки.

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

Добавим окклюзию и уберем лайн.

Теперь пришло время добавить на кожу изображение волка и сопутствующие детали. Также мы слегка поправим лямку, так как на изгибах у нас образовался неестественный “прямой” угол.

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

На этом всё. Надеемся, эта статья поможет вам в следующий раз успешно пройти тестовое задание к нам на BootCamp.

P.S. В нашем ТЗ, которое выдавалось участникам BootCamp'а, в качестве примера иконок взяты работы из свободного доступа за авторством Евгении Обуховой.

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

В тестовом прописано следующее:

Примеры стилистики:

Дополнительные уточнения по заданию:

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

Помимо работы кандидаты забывают прикладывать процесс поиска идеи, разработки цветовых решений, мудбордов и т.д.

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

На всякий случай стоит проговорить что такое “стилизация” и “концепт”.

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

Стилизация - это процесс придания творческому произведению черт другого стиля. Это как если бы вы рисовали человека под стиль симпсонов или в стиле аниме. Так и здесь нужно нарисовать здание под приведенный стиль (примеры качества).

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

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

Хорошо, мы определились с объектом отрисовки. Перед тем как начать делать первые “почеркушки”, нужно изучить стилистику рисунка. Ведь в каждом проекте могут быть свои правила.

Для примера взяты 2 сундука из 2 разных казуальных игр (слева “Gardenscapes”, справа “Toon Blast”). Оба стиля являются казуальными, но посмотрите, как отличаются сундуки. Как отрисовываются материалы, какие используются формы, как происходит работа с дизайном.

Поэтому первым шагом нужно изучить домики, которые были прикреплены к тестовому заданию как примеры. (См. первое изображение в статье)

Здесь, судя по предоставленным референсам можно выяснить точно 2 вещи:

Их мы и будем придерживаться при создании наших скетчей.

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

К примеру, из пиратской темы это может быть штурвал, парус, обломки корабля или сам корабль, пушки, якорь, пиратская символика (череп с перекрещенными мечами), лодка/шлюпка. Из темы “ресторана”: вывеска ресторана, столы со стульями, реклама, сервировка на столе, световой антураж.

Где брать референсы?

Мы воспользуемся самым простым первым способом. И вот что мы смогли собрать:

Давайте разберем зачем мы добавили те или иные референсы в нашу коллекцию!

Примерно такие мысли были при сборе референсов. Но, нужно понимать, что это не все референсы, что у нас есть. Мы выложили сюда самое необходимое, иначе всё бы не влезло. Теперь у нас всё готово к работе. Фотошоп включен, планшет подключен, стилус в руках, поехали!

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

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

Вот как это происходило с одним из скетчей.

Вот таким образом было создано 4 версии будущего корабля. Мы постарались попробовать разные формы корабля. После рассмотрения всех вариантов, решили взять в работу №4.

Почему?

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

“- предоставление нескольких вариантов скетчей, показывающих поиск решения поставленного задания, рефлиста, а также использование 3д болванок для блокинга и упрощения построения будет плюсом.”

Для многих казуальных 2д проектов использование художником 3д становится нормой. Поэтому давайте сделаем 3д модель и на основе него сделаем чистый лайн.

Чтобы сделать подобную модель, вам нужно знать только основы почти любой 3д программы (Blender, 3ds Max, Maya, Cinema 4d и т.д.). Необязательно становиться 3д моделлером.

Помните: не нужно создавать супер точные и сглаженные формы. Можно обойтись грубой моделью, которая покажет пропорции, положение и размер объектов, а также правильное раскрытие эллипсов для цилиндров. Такая 3д модель позволит вам сэкономить много времени при чистовом построении, и поможет в случае чего легко поменять форму и геометрию объектов. Теперь мы экспортируем этот скриншот в Photoshop или любой другой 2д софт и начнем обводить картинку.

При помощи обводок и дальнейшей разработки композиции в Photoshop мы получили чистый лайн.

Что мы добавили:

Помимо новых деталей, на наш чистый лайн мы разместили “аутлайн”. Что это такое? “Аутлайн” - это линии, предназначенные для разделения масс друг от друга. Так работа, где присутствует множество объектов, станет намного читабельнее в глазах зрителя.

Посмотрите на 2 примера.

То же самое касается и нашей работы. Без “аутлайна” корабль со всеми деталями превращается в кашу. “Аутлайн” вносит ясность в картину!

Лайн завершен. Во второй части статьи мы будем работать над подбором цветового решения для нашего ресторана.

Всем привет) Вот вам серия видео, как в целом происходит у меня процесс покраса.

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

Всех люблю!