Эта статья о новом взгляде на GIF анимацию, ее использование для продвижения в соц.сетях на наглядных примерах для американского клиента. Возможно, это кого-то заставит по-новому взглянуть на такой формат и использовать его для себя.
Меня зовут Егор Фаизов, я основатель, креативный директор и моушен-дизайнер в Videocase Production. В этом году, работая с американским T-Mobile, я сделал множество проектов для них в формате гифок и хочу поделиться опытом.
GIF это?
Казалось бы, это формат из прошлого, но в виду некоторых особенностей с ним можно делать интересные вещи.
Простым языком, GIF – это картинка, содержащая в себе зацикленную анимацию или видео.
Плюсы:
- интереснее смотрится в ленте, чем просто картинка;
- быстро доносит сообщение;
- проигрывается автоматически и бесконечно;
- принимается всеми популярными соц.сетями и мессенджерами;
- можно даже встраивать в email, разнообразив переписку/рассылку (но есть риск, что почтовому клиенту или файерволу это не понравится).
Минусы:
- нет звука;
- вес сильно увеличивается при увеличении длительности, соответственно дольше становится загрузка. А GIF не проигрывается нормально, пока полностью не загрузится;
- вес сильно увеличивается при увеличении количества используемых цветов (таким образом видео для использования в GIF не очень подходит, а рисованная анимация очень).
Я делаю что-то среднее, используя в анимации изображения и иногда видео.
Размещение
T-Mobile размещает эти гифки в LinkedIn, Twitter, Facebook, Instagram от лица своих сотрудников. Поэтому еще одна задача – это делать все более нативно и не рекламно, насколько это возможно. По их тех. требованиям всю анимацию необходимо уместить в 4,9 МБ. Это в среднем 3-5 секунд. Поэтому сообщение нужно доносить быстро.
Что по креативу?
В виду всех вышеуказанных ограничений формируется некое пространство, в котором и нужно творить. На самом деле ограничения нужны, чтобы у креативного потока было свое русло. И их важно учитывать, чтобы не приехать туда, куда нам не нужно было.
Мне очень повезло с клиентом, они очень смелые, открытые и сами просят делать что-нибудь необычное, цепляющее, интересное. В рамках брифа конечно.
По тому, какие идеи им заходят, могу сказать, что наиболее вероятно будет иметь успех в этом формате. Итак, рекомендации с примерами.
1. Делать сюр
Или то, чего не может быть в реальной жизни. Тут, как и в первом примере с головой зверя, собранной из колонок, свой мир, который запомнится или как минимум остановит прокрутку ленты.
2. Делать абстракцию
Здесь, помимо прочего, была задача показать новый айфон, не показывая новый айфон, потому что гифка выходила за несколько дней до презентации Apple, и светить внешний вид нельзя было даже намеком. Поэтому представил его в виде портала. Очень хотелось сделать более узнаваемую форму и линиями обозначить фронтальные камеры, но клиент не разрешил даже скруглить края этого портала.
3. Использовать цикл в идее
Тут все просто, бесконечный зум, бесконечного интернета, смс, звонков и вдобавок все это смотрится бесконечным за счет цикличности GIF.
4. Делать сочный визуал
И считать, что он такой :) Если разобрать по частям, то этого можно добиться насыщением анимации, мелкими деталями, нестандартными переходами, обилием цветов. Немного переживал, что небрендовые цвета не примут, но в итоге комментариев не было.
5. Использовать контраст
Для визуального представления свойства продукта здорово работает контраст. В этом брифе продукт – это вторники от Т-Мобайл, когда пользователям раздаются какие-то бонусы. Т.е. вторники особенные дни недели. Чтобы показать это, я и использовал контраст – трон среди обычных стульев.
6. Делать то, что не стыдно выкладывать у себя в ленте
А так же, держать эту мысль при разработке и периодически возвращаться к ней.
Этот пример с Samsung наушниками, дался мне непросто. Тут сразу 3 сообщения, довольно длинные по тексту, но клиенту важно было все показать. Эта гифка выше – лишь начальный вариант. Хоть там визуально все сообщения удалось показать, но в целом продукт плохо виден и гора текста воспринималась плохо. Комментариями эта гифка упростилась до варианта, который даже показывать не буду, там были просто наушники с текстом и все. В целом, клиент даже готов был это принять. Но я вернулся к описанной в подзаголовке мысли, понял, что выкладывать у себя такое я бы не стал. Решил рискнуть, предложил клиенту, что придумаю и сделаю новую идею с нуля, не описывая ее перед этим, потому что сроки поджимали, и не было времени на эти промежуточные прелюдии. Они доверились, за что опять же им большая благодарность.
Я разнес сообщения на три разных кадра, визуально показал их смысл, сделал модный моушен, и клиент принял без единого комментария и тоже был рад тому что получилось.
Вот финальный вариант:
Итоги
В процессе работы над этими проектами я понял, что при всех (немногочисленных) ограничениях GIF очень интересный формат, с которым можно работать, а его особенности можно использовать в плюс.
Комментарий недоступен
Спасибо!!!
Только я вижу на гифке айфона 14 заставку Санты Барбары ?)) Только арочный вид придать верхней части и точь в точь ))
о, нееет) теперь и я это вижу))
...для наших самых юных зрителей :)
Па-пара-паааа…
Ловите олдфага!)
Да, тоже сразу об этом подумал, и даже музыка зазвучала)
Интересный пост, спасибо!
Технические вопросы:
1) какую программу используете для экспорта gif?
2) сколько кадров в итоге получается? Сама собираю покадровую анимацию в Фотошопе, он ненавидит когда больше 100 кадров на большой картинке. Большая - это от 1200 пикселей.
3) до какого веса ужимаете, чтоб комфортно было на сайтах использовать?
Спасибо!
1) Вся сборка в AE, экспорт с помощью GifGun (это прямо необходимы плагин для Gif)
2) Суммарно кадры никогда не считаю. Если по процессу оптимизации идти, то начинаю с размера кадра в 1080x1080 пикселей, и 25 fps. Далее уменьшаю размер кадра до терпимого (пока текст читаем и субъективно графика не сильно страдает). Потом уменьшаю количество fps. Если и это не помогает, то ускоряю анимацию а АЕ, при этом еще сильнее понижая fps (таким образом анимация не смотрится тормозной, хоть и кадры пропускаются, но вес снизить это помогает). Если и это не помогает, то уже приходится делать паузы в анимации на кадрах с текстом, и эти кадры с текстом уже удлинять ручками в фотошопе. Т.е. чтобы показать текст и дать зрителю его прочитать можно сделать не 25 кадров на одну секунду, а 1 кадр длительностью в 1 секунду. А на переходы уже выделить больше кадров.
3) От клиента требование по весу 4,9 Мб.
Не извращайтесь, поберегите свое время, делайте анимацию в AE
Делать анимацию в фотошопе - это мощно.
Цветокоррекцию и обработку фото наверное в Paint делаете?
Очень порадовала история из последнего шестого пункта. Когда ты делаешь по ТЗ заказчика и ему не оч, но он, стиснув зубы, принимает, а ты потом предлагаешь свое видение, и ему так заходит, что он ни одной правки не дает и просто радуется. Это замечательно!
Да. Это правда было рискованно, сделать с нуля вообще без промежуточных согласований. И я бы не советовал такое практиковать на начальных этапах работы с клиентом. Лучше после наработки кредита доверия. И все равно, даже с таким кредитом нужно оценивать ситуацию, взвешивая за и против. Потому что можно легко не попасть в ожидания.
"ты потом предлагаешь свое видение, и ему так заходит, что он ни одной правки не дает и просто радуется" - что-то из разряда фантастики, таких ситуаций - одна на триллион )
Прикольная статья с хорошим визуальным наполнением) автору спасибо за статью
Рад, что понравилось
Сцук, залипательно!
Желаю приятно провести ближайший час )
Еееее!
вот что мне нравится, крутая статья с крутыми примерами)
Ура!
обилие розового удивляет
У T-Mobile это основной цвет бренда )
Кстати, те же самые слова я слышал про VC :)
Наконец-то нашел хоть что-то полезное для себя на VC :) Спасибо, что поделились
Пожалуйста! Рад, что было полезно)
вот бы в 2022-м году объяснять, что такое гифки.
Как будто и не было тумблера, как будто фейсбук не покупал giphy, как будто во все мессенджеры гифки не встроены по дефолту. Как будто не было нескольких волн попыток переделать гифки в более пригодные для веба форматы, как будто не было всех этих сотен модных и не очень сервисов по созданию гифок из чего угодно. Черт, да даже в эпоху флеш-баннеров тысячу лет назад вы были обязаны выкатить гиф-версию, чтобы «у всех работало». Гиф был здесь всегда. В рекламе тоже. Егор, а где вы были все это время, что вдруг открыли для себя этот формат?
(П.с: гифки нравятся, автор молодец. Но удивляет вот это вот «а вы знали, что гиф это не мемы, а инструмент. Открыл для себя вау»)
Чтобы оставить такой комментарий нужно прочитать только заголовок и полностью проигнорировать статью.
Нигде в тексте статьи нет посыла «вау, только что открыл для себя гифки». По крайней мере я вместо этого увидел как автор делится опытом создания крутых рекламных проектов для крупного клиента в формате gif, а не то что вы описали.
"Все это время" я работал в диджитале на разных должностях в различных агентствах, включая сетевые, выигрывал международные фестивали рекламы, а на одном из первых этапов карьеры работал 2 года в BBDO Interactive (Digital BBDO), когда они были №1 в российском интернете по рейтингу АКАР. И там помимо остальных задач мы делали даже игры в баннерах на 25 Кб. И гиф тоже делали, но нечего интересного в таком формате гиф тогда не представлял. В лучшем случае это была смена кадров. Она тогда так и называлась – заглушка для баннера.
Как формат гиф очень давно существует, и об этом я сразу сказал. Но время идет, тех требования позволяют делать более интересные вещи.
И если ваша насмотренность позволяет привести примеры того, как сейчас гиф кто-то использует в рекламных целях как основной формат и делает из этого что-то интересное, то мы бы все тут были рады увидеть от вас эти примеры.
Очень крутой уровень! Огромное спасибо за статью и ответы на комментарии.
Огромное пожалуйста)
Никогда не думал что гифки в качестве рекламного носителя могут быть востребованы в двадцать втором году XXI века.
Автор статьи классно придумал их использовать.
Спасибо конечно, но придумал так использовать гиф не я, и скорее всего даже не клиент. Я просто делаю чуть больше, чем могло бы быть в заданных рамках.
Могут конечно! Есть даже гифки с проном
Автор крут)
Согласен
🔥🔥🔥🔥🔥
🤘😎🤘
Какая примерно цена на разработку одной такой гифки?
Больнее всего оптимизировать GIF 🥹
Это точно. У нас же как, чем нам больнее, тем мы сильнее )
Егор, спасибо за статью.
Пожалуйста, Александра
Почему не делать в .WEBP?
Теперь его уже кажется все поддерживают.
Вообще обсуждалась возможность использования webp?
Не обсуждалось. Запросы были на гифки.
Если нужно будет делать webp, то будем смотреть, как с этим быть и адаптироваться)
Сафари только в новых системах поддеживает
Пост настоящая вкуснятина!
Приятного аппетита)
Не совсем понятно по размещению. Говорим про мобильный трафик. Разве не надо сначала нажимать условный PLAY, чтобы гифка загрузилась или запустилась? То есть гифка сама не проигрывается довольно часто, только по команде пользователя.
Нажимать не надо. С мобильного все тоже автоматически играет.
А чем сжимать Gif кто подскажет
Повторное сжатие GIF сделает качество только хуже, чем бы не сжимали. Поэтому оптимально экспортировать один раз.
Еще, есть фишка такая (описал это в ответе на первый коммент по поводу оптимизации): можно докрутить в фотошопе, увеличивая длительность кадров с сообщениями и экономя на этом вес. Т.е. в финальном гифе кадры будут разной длительности.
T-Mobile это немцы, автор проснись ))
Основатели немцы, но я работаю с американским офисом и описываю опыт именно с ними.
Прочитал и купил подписку на «ЭдГард»)
Gif - действительно старо :) не пробовали сравнивать с apng?
Попробую, как будет время. Надеюсь, что вскоре под apng подтянут техническую базу. Пока вижу сложности.
Круто, что то из ваших работ точно попадалось. Если не ошибаюсь на фейсбуке.
Гифки красивые. :) а от цветовой палитры и характерного эффекта, который дает ограниченное количество используемых цветов - олдскулы сводит. :) Напоминает web из 2000х.
Ностальгия это нормально ))
Гифки крутые!
спасиб!
Отличная статья!
Вспомнил молодость, но видно действительно актуально до сих пор. Главное не сильно адариться в многоцветие и уж сильное мельтешение.
спасибо за материал.
Клевая тема!
Круто!
А расскажите подробнее технические моменты, касаемо такой рекламы.
▪️Сколько делается по времени ролик?
▪️Сколько стоит?
А это точно технические моменты?)
- по времени 1-2 дня идеи, анимация день, правки до победного. +могут быть промежуточные обсуждения.
- стоит чуть дороже обычной анимации такого вида. Из-за оптимизации.
ой, как вы порадовали с утра!
маджента - в самое сердечко
💓
Напишите кто-нибудь статью, с какой радости и до каких пор MP4 будут называть гифками.
Отлично👍
Ненавижу GIF в 2022.
1. Я не понимаю почему, но за столько лет существования формата с ним по прежнему куча проблем.
- то не стартуют
- то зацикливается только часть анимации
- то дико тормозят (смотрится дико на фоне "летающего" 2-4к видео онлайн)
2. Надеюсь есть отдельный котел, для тех, кто делает гифки длиннее 2 секунд из полноценных видео, которые
- ни на паузу не поставить,
- ни ускорить (я иногда даже кино смотрю на х1.25, а уж всякие ютубы минимум на х1.5),
- ни перемотать (и приходится ключевого момента "видео" дожидаться, если хочешь пересмотреть/кому то показать итп)
Сказать "круто!" - ничего не сказать! Огромное спасибо за свежий взгляд и глоток вдохновения, которого теперь хватит надолго!!!
Ого! Рад, что так. Спасибо
Очень интересно
Очень интересно
Спасибо, Никита
Класс!
Комментарий недоступен
никакой джинсы, только кожа, только хардкор!)
Красивый моушн Егор, вы молодец
крутые анимации!
Спасибо
А под Я.Директ делаете с учётом их требований (120 кб итд)?
Нет, последние несколько лет у меня только иностранные клиенты и их требования.
Но для российских площадок во времена расцвета флэш-баннеров мы в BBDO Interactive делали в баннерах не только полноценные анимации, но и игры. И все это приходилось умещать в 25 кб. Вот там была реальная боль на оптимизации. Но и интересно было очень.
Спасибо за материал. Хотел задать пару вопросов, если можно.
1. Как происходит согласование? Сначала рисуются скетчи? Или говорят "ну чо нить там накидай, а мы посмотрим"?
2. MP4 формат не любят ваши заказчики? Или есть и такие, кто любит?
3. Можно узнать диапазон стоимости одного GIF? Или заказывают пакетами исходя из потраченных часов?
Спасибо еще раз
Конечно можно.
1) Бриф (дают тексты и/или изображения продуктов, которые хотят показать) —> подбираю несколько идей/концепций, показываю их на скечах, рефах —> клиент выбирает —> сборка —> комментарии, правки. Ничего особенного. Бывают забавные отклонения от плана, но это скорее исключения.
2) Так в основном-то вся работа в обычных видео форматах. Гифки только этот клиент просит. Обычные анимации с ними тоже бывают.
3) Цена за анимацию. Но я не думаю, что могу ее называть тут. Мне бы на месте клиента это не понравилось.
Почему в тексте этой статьи нет ни одного GIF-файла тут одни mp4 ? Непонятно!
vc.ru автоматом конвертит в mp4
Сам процесс бы хоть немного описать
Какой именно процесс интересует? Креатив / анимация / оптимизация?
Красиво, рекламно. Теперь я знаю, что блочит мой адгард
Сделали б уже проигрывание видео мп4 или webp без звука автоматом. Сжатие намного эффективнее гифа.
Эти жуткие шумы - отстой.
Есть такое. Да сделали бы уже новый формат с доставкой в мозг, но чтобы можно было фильтровать под себя выдачу и качество креативов. Чтобы только подумал например о PS5 и тебе сразу два сочных и лучших предложения по цене и сроку доставки.
И качество рекламы будет расти, чтобы попасть в выдачу.