Градиент на лайне 🙂

Да, я немного тормоз, но лучше поздно, чем никогда, верно?🚰

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

Для тех, кто не знал — на картинке вас ждёт мини-инструкция, как пользоваться этим волшебством. А кто знал — просто напоминалочка: так можно, ребята. И это круто 👊

#иллюстрация

Эволюция Супчика

Супчик — наш самый первый персонаж, любимец студии и немного звезда. Аня его придумала в наше первое путешествие на Бали, потом мы заанимировали его для конкурса стикеров во ВКонтакте — и стали одними из победителей! 🏆

С этого и началось наше стикерное помешательство.

Изначально его звали Soupchick — “суповой цыплёнок”, если по-честному. Но на русском это просто милый Супчик. Никаких загадок, всё по-домашнему.

Краткая история Супчика в четырех томах:

📘 Том 1: Первая анимация, с которой мы выиграли конкурс. Наивная и милая. С таким сейчас разве что устроишься в дворники стекол машин аниматоров, и то - по знакомству.

📗 Том 2: Затем — полноценный стикерпак во ВКонтакте. Кто-то ел суп под эти стикеры — факт. Смотреть тут

📙 Том 3: Супчик тихо пробрался в наш другой пак с Мичико в виде пасхалки. Вот он, хитрец

📕 Том 4: И вот совсем недавно — новый формат поп-ап стикеров во ВКонтакте. Мы обновили лук Супчика и дали ему второе дыхание: заглянуть

Супчик уже живёт своей жизнью — и это прекрасно.

Нам бы очень хотелось когда-нибудь вернуться к нему… и выпустить том пятый, шестой и режиссёрскую версию с комментариями авторов. Пусть варится дальше! 🍳

#анимация

Что случилось с дедлайнами? 🥵

Все шутки про “дедлайн завтра” стали реальностью — и я не преувеличиваю. Только у нас ощущение, что сроки у проектов в последнее время так сократились, что стало нормой требовать любую работу уже на завтра? Часто это даже не настоящие сроки. 😞

И вот я хочу понять, это какие-то новые бизнес-методики? Тренинги для менеджеров «как выжать максимум из исполнителя»?
Что думаете? Замечаете похожее или это только нам так «везёт»?

#накипело

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

Сегодня хочу поговорить об одной из таких — неправильной работе с векторными точками.😳

❕На картинке выше я кратко объяснила суть, но чуть подробнее расскажу здесь ❕

Иллюстраторы часто не придают значения тому, в каком положении остаются управляющие ручки у векторных точек.
Да, понимаю — мы обычно спешим, и смотреть, куда там направлены усики, бывает лень.
Но поверьте, куда сложнее потом найти эту точку и всё исправить. 🚰

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

#иллюстрация

Преувеличение в анимации 😛

Частая проблема новичков - боязнь сделать выразительную анимацию.

Происходит это из-за неуверенности в своих действиях. Еще не знаешь, что хорошо сработает, глаз не наметан, анимационная мозоль только натирается.

Поэтому движения получаются скромные, аккуратные, почти незаметные.

А между тем, хорошая анимация часто держится именно на безумных преувеличениях. Реалистичные движения оставьте для фотореализма.

Мне анимация как раз и интересна тем, что можно сделать невозможное в реальном мире 💪

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

Непрошеный совет:

Когда сделали анимацию — остановитесь и задайте себе вопрос:

- А как еще усилить эмоцию?
- А можно ли движение сделать в два раза амплитуднее?
- Какую добавить деталь, усиливающую действие?

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

А если выйдет уродство - удалите и никогда никому не рассказывайте, что занимались подобным 😌

#анимация

Как честно делить оплату за стикер между иллюстратором и аниматором? 💵

Многие считают, что делить оплату поровну — справедливо. Но на мой взгляд, это не всегда так. Объясню почему 👇

Главная причина - разная затрата времени. Анимация просто требует больше времени. Даже если иллюстратор придумывает персонажа с нуля.

Навыки иллюстратора:
• знание Illustrator’а хотя бы на среднем уровне
• навык рисования
• знание принципов композиции, цвета, анатомии, пространственное мышление
• умение придумать персонажа и идеи для стикеров

Навыки аниматора:
• знание After Effects на среднем уровне
• понимание принципов анимации, тайминга и композиции в движении
• базовое знание Illustrator’а
• хотя бы базовые навыки рисования
• развитое пространственное мышление

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

Если оба работают на среднем уровне, то выходит, что нагрузка у аниматора выше. Делить оплату поровну — уже не так честно.

Чтобы оправдать свой статус «душнила», я всё посчитала: ❓

В среднем на один анимированный стикер уходит 5 часов.
Из них 1,5 часа на иллюстрацию и 3,5 часа на анимацию.

Получается, что 30% времени — иллюстратор, 70% — аниматор.
По такой логике и делить оплату стоит пропорционально.

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

Да откроется срач! 🌸🌸🌸

#накипело

Как отрендерить статичный SVG из After Effects 😑

Хотелось бы, чтобы это решалось простым рендером в After Effect. Но мы-то с вами давно знакомы с Adobe — поэтому сразу готовимся, что путь будет замысловат.

1. Сначала экспортируете анимацию в формате JSON с помощью плагина Bodymovin.
2. Затем открываете Figma, находите там плагин LottieFiles.
3. В плагине импортируете JSON-анимацию, выбираете нужный кадр и экспортируете его как SVG в фигму.
4. Сохраняете SVG из фигмы — и снова чувствуете себя прекрасным ❤️

Нашёл ещё один способ на YouTube — тут используется только Bodymovin и сайт-ковектор, но выбрать конкретный кадр не получится:
https://www.youtube.com/watch?v=GhuqEj-PNOA

P.S. В комментариях накидали еще разных вариантов 👏

#анимация

Как стать востребованным иллюстратором? 🙂

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

Решила поделиться с вами своими наблюдениями о том, какие действия мне помогли 🙂

⚡️Старайся быть универсалом.
Что это значит? Это значит, что вы не боитесь новых для себя задач. Ну ладно, боитесь, конечно — но всё равно пробуете и делаете.
Многие иллюстраторы избегают проектов, которые выходят за рамки их привычной зоны, и просто не берут такие заказы. С одной стороны, это может быть разумно — не браться за то, что не умеешь. Но с другой — это стоп для роста. Так легко застрять в зоне комфорта и жаловаться на отсутствие проектов. А мне, как заказчику, бывает просто нечего дать в работу: один не умеет рисовать людей, другой — не владеет дизайном, третий работает только в растре.

⚡️Хорошо, ты взял новый для себя проект. Что дальше? Как не облажаться?
Если ты понимаешь, что в этой задаче твоей компетенции пока не хватает, делай следующее:

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

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

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

У многих есть когнитивное искажение: кажется, что поиск референсов отнимает кучу времени. Но по факту вы больше времени потратите потом — на правки. Кривая фигня не пройдёт. А если и пройдёт, заказы вы больше не получите.
Когда человек делает работу на отвали — это всегда видно.

#накипело

Полезный пост мы отложили на потом - потому что пришли правки 🙂
#накипело

В одном посте собраны почти все векторные лотти супергерои, спасибо Саше Pototsky! ⭕️

(классная обложка к посту, кстати)

Навигация по каналу 👍

Мы студия анимации и иллюстрации Оно и Видно. Специализируемся на стикерах, эмоджи, персонажах и lottie анимации.

Портфолио: https://www.behance.net/onoividnostudio
Сайт: https://onoividno.ru/
YouTube: https://youtube.com/@onoividno

Полезные посты:
• Особенности при работе с Bodymovin для стикеров Телеграм
• Как запечь экспрешены и зачем это нужно
• Как сделать анимацию роста дерева в стикерах
• Когда можно отделять обводку от заливки
• Иллюзия маски для стикеров
• Мини-курс по подготовке векторного персонажа, стикеров и emoji к анимации
• Бесплатный экспресс-курс по дизайну персонажа для стикеров
• Плагины и скрипты для анимации стикеров
• Частые ошибки при подготовке персонажа к анимации в After Effects
• Пример анимации 1 стикера в Телеграм
• Процесс создания персонажа в векторе
• Гайд для начинающих фрилансеров
• Толщина лайна и как она влияет на дизайн персонажа
• Как сделать персонажа милым?
• Как сделать классный дизайн персонажа?
• Как лучше рисовать два ключевых кадра для анимации стикера?

Хэштеги:
#анимация
#иллюстрация
#портфолио
#интервью
#накипело
#дизайнперсонажа

А вы так же «обожаете» созвоны, как мы? 😂

#накипело

Проигрышная стратегия на фрилансе🚰

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

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

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

Конечно, я понимаю, что бывают разные ситуации, и к каждой нужно подходить с умом. Не стоит полностью избегать всего, что связано со словом “постоянно”. Но приберечь пару клиентов на фрилансе всё-таки стоит. 🏃‍♂️

Жду ваших мыслей по этому поводу 👇

#накипело

Пассивная агрессия от заказчиков - как отдельный вид искусства 😱

Ждём ваши истории — давайте посмеёмся над этим вместе 👇

#накипело

Как уместить в 64 КБ больше анимации 🤯

Нам известно, что лимит стикера для Telegram это 64 КБ

С ростом качества и детализации мы всё чаще упираемся в лимит: приходится оптимизировать, убирать детали и резать анимацию.

В рабочем чате нашли способ, как выйти за эти лимиты на 10–20%, спасибо талантливым коллегам 👊

Способ 1
1. Рендерим обычным Bodymovin в json
2. Закидываем файл в ChatGPT, и просим его "Оптимизируй файл, снизив точность чисел до одного знака после запятой, но не трогай цвета"
3. Скачиваем оптимизированный json и конвертируем его в tgs через этот сайт
4. Радуемся сэкономленному времени

Важно: перед оптимизацией проверьте json в любом lottie проигрывателе. У меня были поломанные градиенты — итоговый tgs не работал в Telegram. С рабочими градиентами все получилось.

Мои тесты:
• Стикер был 68.9 КБ и не рендерился TG Bodymovin
• После оптимизации стикер стал 53 КБ и загрузился в Телеграм

Способ 2
В процессе мне пришло в голову, что можно использовать любой lottie оптимизатор, например этот, сжать json и экспортировать в tgs.

Способ сработал, но конечный tgs того же файла получился больше - 61 КБ, вместо 53 КБ.

Способ 3
Я подумал, а почему бы не объединить два способа?
Сначала прогнал через сайт и потом попросил ChatGPT оптимизировать.

Конечный файл вышел в 48 КБ

Это самый эффективный способ ... но страшно, что если мы продолжим, то стикер будет весить минус 10 КБ и начнёт отжимать место у других стикеров в чате 💀

#анимация