разработка, эскизы, анимация и выводы — Дизайн на vc.ru

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

4458
просмотров

Первоначальная задача звучала так:

Создать персонажа для строительной компании – кота-строителя на основе уже готовой мягкой игрушки. Кота также хотели использовать на сайте и в наружке, а потом — анимировать. Клиенту понравился наш студийный маскот — Соловей, и Кота предполагалось сделать в том же стиле.

Стикерпак “Соловей” на Behance:

https://www.behance.net/gallery/73701005/Solovey-Sticker-Pack

По результатам брифинга дополнительно выяснили, что:

1. кот был выбран потому, что символизирует уют, дом и тепло;
2. персонаж должен быть добрым, исключительно позитивным и положительным;
3. возможно использование “строительных” элементов — каски, валика и тд.;
4. использовать персонажа планировали на официальном сайте, в наружной рекламе, в соцсетях, а также сделать с ним стикерпак для Телеграма и ВК, в том числе — анимированный;

Глава 1 — Концепция

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

С настроением нашего Кота было всё понятно — добрый, позитивный, вызывающий исключительно положительные эмоции. Теперь стоял вопрос: кто он такой? Что умеет, какие у него “фишки”, способности, атрибуты? Мы подготовили большую презентацию с вариантами “профессий” Кота, описанием будущей внешности, примерными референсами и развитием персонажа в роликах, соцсетях и других каналах.

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

Здесь мы встретились с первой проблемой, которая стала серьезным уроком на будущее. Разрабатывая концепции, мы приложили примеры-референсы, чтобы обозначить характер будущего героя. Но заказчик счёл их образцами будущих иллюстраций, выбрав очень детальный растровый вариант, плохо подходящий для полноценной 2D анимации:

Но нам только предстояло об этом узнать…

Глава 2 — Эскизы

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

Клиента не устроил ни один вариант.

Нам посоветовали взять за образец мультфильм “Тайная жизнь домашних животных” и ранее показанный пример отрисовки персонажей. В этот момент мы поняли, что заказчик, скорее всего, не видит разницы между 2D и 3D анимацией. Это вполне нормально, заказчик и не должен разбираться в деталях работы. Поэтому мы провели краткий ликбез, составили целую презентацию, чтобы пояснить, как они различаются, и что мы можем реализовать в рамках имеющегося бюджета (спойлер — 3D модели и 3D анимация туда не вписывались никак).

Клиент разобрался, мы вместе решили, что двигаемся в сторону детальных иллюстраций с минимальной 2D анимацией.

Так как согласование шло не совсем гладко, мы предложили максимальное количество самых разных простых эскизов:

В том числе — совсем простых и контурных, мало ли что:

В итоге, из всего вышеперечисленного выбран был вот этот красавец:

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

Такой кот, пусть и простой, вполне подходил для бодрой анимации. Это нас обрадовало. Как оказалось, преждевременно.

Глава 3 — Проработка персонажа

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

После этапа взаимного недоумения, мы объяснили, что 3D, как бы нам ни хотелось, никак не вписывается в бюджет. Что нам придется остаться у варианта “детальный растр” для основного персонажа + создать отдельные векторные версии для стикеров и других анимационных кейсов. Такой вариант, к счастью, всех устроил.

Пройдя несколько серий правок, базовый Кот превратился вот в такого пушистого карьериста:

А также векторный вариант для стикеров:

Глава 4 — Анимированные стикеры

Для первого небольшого набора стикеров заказчик выбрал следующие действия/эмоции:

• Едет на машине/паркуется
• Влюблен/удивлен
• Строит (у нас все-таки строительный Кот)
• Звонит

Начали, как и всегда, с эскизов, которые в этот раз рисовала наша хорошая знакомая, иллюстратор Анастасия Киселёва (Cathvader). Выбрали именно её потому, что Коту, которого назвали Квартирыч, нужны были яркие, выразительные эмоции, а Настя работает с комиксами и знает в этом толк.

Утвержденные эскизы:

Векторные иллюстрации в цвете:

После нескольких правок анимированные стикеры были успешно утверждены, и Квартирыч обрёл полноценную телеграмную жизнь:

Главные выводы, которые мы сделали из этой истории:

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

Автор: Екатерина Попова

Менеджер проектов Соловей MEDIA.

Создание анимированных стикеров для Telegram: наш первый опыт

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

Этап 1. Составляем список первых эмоций

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

Итого с пятью определились, но до уровня пака этого количества маловато.

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

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

Этап 2. Выбираем образ

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

Какие подзадачи мы ставили, чтобы найти образ героя:

а) Выбрать характер героя.

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

• Открытость персонаж должен быть позитивным, эмоциональным и много всего пробовать.

• Амбициозность — делаем героя смелым, даже дерзким.

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

б) Выбрать эстетику иллюстрации.

Здесь мы шли от принципа «такого мы не видели». Провели небольшое изучение, текущих стилей в ТГ. Что выделили:

• насыщенные и яркие цвета

• милота доминирует

• мультяшный дутый стиль

• образы редко детализированы

Чтобы быть понятными массовой аудитории, мы остались в рамках мультяшек, но в визуле пошли против системы: выбрали своей эстетикой американские мультфильмы 30–50х годов от Fleischer Studios, Disney и недавнего Cuphead. Где атмосфера странности и даже безумия пропитывала каждый кадр.

в) Определить пластику и детализацию персонажа.

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

г) Определить узнаваемый элемент в образе.

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

Этап 3. Разрабатываем сюжеты для эмоций

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

Начали со сбора референсов, чтобы синхронизироваться по мимике и позам.

После генерации идей начали отбирать их по следующим принципам:

1. иногда должна появляться одежда;

2. внедрить разные позы: сидение, лежание, стояние;

3. внедрить разные ракурсы: профиль, анфас, ¾ и пр.;

4. комбинировать простые сюжеты с неожиданными;

5. сюжеты, где герой не ключевой объект;

6. комбинировать малоподвижные ситуации с интенсивными;

7. вся анимация должна быть зациклена без заметных склеек;

8. помещается в 3 сек, заложенные техническими требования сервиса.

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

Этап 4.

Оживляем нашего героя

На продакшене сначала отрисовали все позы и состояния в Illustrator, а потом долго и упорно анимировали в After Effects.

Какие тут советы можно дать:

1. Все телодвижения героя и одежды мы построили на перемещении точек кривых (Path), а движения объектов вокруг на простейших функциях Position, Scale, Rotate. Отсюда рекомендация: когда создаете объект типа щупальца/лента/веревка, создавайте минимальное количество точек в кривой, иначе вы устанете перемещать их при простейшем изгибании.

2. При организации слоев в Иллюстраторе не нужно все элементы до мельчайших разносить на разные слои. Разбивка нужна, но логически верная. Например, глаз состоящий из века, белка и зрачка, можно поместить на один слой «Глаз». В After Effects есть возможность контролировать форму каждого из трех объектов.

3. Некоторые переходы могут выглядеть неточными в деталях, но тестируйте анимацию на той скорости, на которой ее будут видеть зрители. И если огрех незаметен, и непонятно, как это быстро исправить, то смысла в такой детализации нет. Когда анимации готовы, переводим их с помощью специального плагина для After Effects в формат для Telegram, настраиваем бота и готово!

Стикерпак в студию

Возможно, кто-то скажет «это же обычный стикерпак в телегу, камон! зачем целая статья?». Но оказывается такого контента нет в вебе, и мы очень хотели бы такой гайд, чтобы понимать, насколько это трудозатратный и технически сложный путь. Оказалось, все реально даже в первый раз.

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

Наклейки с персонажами — Etsy.de

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Найдите что-нибудь памятное,
присоединяйтесь к сообществу, делающему добро.

(
1000+ релевантных результатов,

с рекламой

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

)