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

Оформление заявки

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

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

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

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

Тестовые задания

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

Часть 1. Работа над геометрией.

Ракурс и заполнение пространства

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

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

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

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

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

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

Автор работы: Любовь Колодезникова.
Ссылка на портфолио

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

Автор работы: Анастасия Ефремова.

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

Автор работы: Яна Хоружева

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

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

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

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

Размеры деталей

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

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

Автор работы: Мария Кузнецова.
Ссылка на портфолио

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

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

Построение

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

Слева: Анжелика Ефименко

Справа: Ирина Михайлова

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

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

1.  То, как этот объект условно должен выглядеть;
2. Как он сейчас выглядит.

План правок:

• Показываем направление цилиндра;
• Отрисовываем эллипсы;
• Правим флягу;
• Слегка исправляем лямку (чтобы объект вписывался в квадрат).

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

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

План правок:

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

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

Часть 2. Цвет

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

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

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

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

Возьмем 1-ые часы.
Автор работы: Дарья Кудрина.

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

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

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

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

Часть 3. Рендер материалов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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