Дизайн

Гифка дизайн: Дизайн АНИМАЦИИ (.gif, .flash, .html)

11.12.1981

Содержание

UI-анимация: 7 советов по созданию крутых gif-анимаций


Вы читаете перевод статьи “7 tips for designing awesome animated GIFs”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

У нас в InVision, гифки — это не просто способ повалять дурака, они играют важную роль в нашей системе маркетинга и обучения. Черт, да мы даже пробовали использовать gif-анимации на нашем сайте, вместо модных анимаций на базе кода.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

В конце концов нас стали спрашивать “Как вы делаете эти гифки?”. И мы решили, что пришло время открыть секрет.

1. Секретный ингредиент

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

Я экспортирую анимацию как видео файл, и импортирую этот файл в Photoshop: Файл > Импортировать > Кадры видео в слои (File > Import > Video Frames As Layers).

Проф. совет: Если вам не по карману ScreenFlow или After Effects, создавайте анимацию в Keynote и экспортируйте как видео. Ага, наконец-то эта функция хоть кому-то пригодится.

2. Меньше цветов = больше веселья

Если вы хотите создавать невероятные гифки, вам нужно становиться очень разборчивым при выборе цветов. Цвет существенно влияет на размер файла; к тому же чем меньше цветов вы используете, тем длиннее и насыщеннее могут быть ваши гифки, при том же относительно небольшом размере файла. (Относительно небольшим я считаю размер до 1 мегабайта).

3. Пользуйтесь размытым движением, когда это возможно

Программы типа ScreenFlow и After Effects позволяют вам экспортрировать видео с размытым движением (motion blur). Благодаря этому эффекту анимация будет выглядеть более профессионально, а вы сможете безболезненно снизить качество гифки в Photoshop, чтобы уменьшить размер файла.

4. Будьте (немного) ленивыми

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

Экспорт gif-анимаций

Прежде чем переживать обо всем, что сказано ниже, попробуйте экспортировать свою гифку. Если размер файла вас устраивает — хорошая работа! Продолжайте в том же духе. А если гифка слишком большая, попробуйте вот что:

5.
Удалите дублирующиеся кадры

Ваша анимация скорее всего в какие-то моменты останавливается. Присмотритесь, и вы увидите, что каждый их этих моментов содержит по несколько дублирующихся кадров, продолжительностью в 0,03 секунды. Если найдете 10 дублирующихся кадров — удалите 9 из них и установите продолжительность одного оставшегося кадра, скажем, в 1 секунду.

Если это не поможет, попробуйте повторно импортировать ваше видео, но на этот раз выберите опцию “ограничить до 2 кадров” (Limit to Every 2 Frames). Это должно существенно уменьшить размер вашего файла.

Проф.совет: Это, конечно, не железобетонное правило, но если в вашей гифке более 150 кадров, уменьшить размер файла будет сложновато.

6. Уменьшите количество цветов

Когда будете сохранять свою гифку в Photoshop, увидите выпадающий список Цвета (Colors) справа. Поиграйте со значениями. Установите минимальное допустимое значение этой опции, но следите, чтобы гифка при этом не превратилась в кучу мусора.

7. Настройте параметр lossy

Признаться честно, я даже не знаю, что такое lossy. Но я знаю, что если установить его значение где-то между 1 и 10, вы сбросите килобайты лишнего и не испортите качество гифки.

(Пс, Энди, вот что такое lossy.)

Ничего не сработало! Помогите!

Если вы уже испробовали все вышеизложенное, но так и не смогли достаточно сжать вашу гифку, пора сделать шаг назад. Может вы пытаетесь сделать слишком многое? Есть ли другой способ достижения вашей цели? Может, разбить текущий файл на две отдельные гифки? Как и большинство творческих продуктов, гифка сработает лучше, если будет сфокусирована на чем-то одном.

Бонусное видео: Супер-быстрый способ

Налетайте: качайте видео файл, на базе которого я создал гифку из этой статьи! (Чтобы открыть файл, вам понадобится ScreenFlow 5).

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

Что я пропустил?

У вас есть какой-то супер-совет, который стоит добавить в эту статью? Хотите еще поговорить о гифках? Найдите меня в Twitter @andyorsow или читайте @invisionapp.

Статья изначально опубликована на blog.invisionapp.com 10 декабря 2014 года.

Как сделать стильное письмо при помощи гиф для email-рассылки

Инструкции

Блестящие примеры гиф-анимации в рассылках

Анимированные гиф-картинки появились на заре интернета в 1987 году. С тех пор они не потеряли актуальность, а в последние 3-5 лет переживают бум. Все дело в динамике и простоте формата. На странице сайта или в письме — гифки привлекают больше, чем статичные иллюстрации. Контент оживает на глазах.

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

О чём пойдёт речь:

Удачные примеры GIF в письмах

Создаём GIF для рассылки

Вставляем GIF в письмо картинкой

Вставляем GIF в качестве фона письма

Кому стоит попробовать GIF

Одного-двух анимированных элементов в письме достаточно. Помните, что гиф — не самоцель. Анимация обогащает содержание письма, а не живет сама по себе.

Некоторые почтовые программы (например, Outlook) по умолчанию не отображают картинки. Значит, не отобразят и гиф.

Теперь вставим гиф в письмо. Покажем, как это сделать, на примере UniSender.

Гиф — как видео, только лучше

Мы уже писали в блоге, почему гифки так популярны среди email-маркетологов. Если делать с умом и вкусом, то они:

  • привлекают внимание;
  • оживляют текст;
  • наглядно иллюстрируют идею;
  • выглядят красиво.

Гиф — отличная альтернатива видео.

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

Например, GAP собрали такую анимацию из 8 фотографий:

Еще гифки могут быть ну очень красивыми. Смотрите сами.

Удачные примеры гиф в рассылках

Интернет-магазины используют гифки больше всех. Вот несколько примеров.

American Eagle:

Pich shop:

Beautybay:

Free People:

Kate Spade:

Гифки хороши для туториалов и обучающих материалов. Живой пример от Google Analytics:

Часто GIF используют и в других сферах, чтобы просто привлечь внимание к рассылке.

Нетология:

Aviasales:

Теперь разберёмся, как вставить гифку в письмо.

Создаём GIF для рассылки

Для начала создайте гиф-файл. Это можно сделать четырьмя способами:

  1. Загрузите видео в сервисы для создания гиф, например: Giphy, Videotogiflab, Ezgif или Imgflip.
  2. Сделайте несколько фото и соберите их в гиф-файл (как у GAP). Помогут специальные сервисы: Gif Camera (Android), ImgPlay (iOS), Гифовина, Gifius, Toolson.
  3. Скачайте готовые гиф-файлы в интернете. Проверьте их на наличие лицензии (например, лицензии Creative Commons), чтобы использовать в коммерческих целях. Искать можно на специальных сервисах, например, Giphy.
  4. Если работаете с графическими редакторами, создайте GIF-анимацию самостоятельно в Adobe Photoshop или Adobe After Effects.

Вставляем GIF в письмо картинкой

Создаём рассылку. Переходим в «Рассылки» → «Email».

Выбираем способ создания письма: «Блочный редактор» или «Шаблоны».

В блочном редакторе добавляем блок «Изображение».

После этого просто переносим GIF в наше письмо:

Вставляем GIF в письмо фоном

Вставьте в письмо текстовый блок:

Переходим в параметры текстового блока. Находим поле «Фоновое изображение блока», вставляем туда GIF. Следите, чтобы размер файла не превышал 500 кб.

Готово. Сохраняйте и отправляйте.

Если закончились идеи для гифок, зайдите, например, на Chibird. Вы найдете много милых гифок, которыми легко украсить письмо.

Кому попробовать гиф

Мы советуем использовать гиф всем, но, в первую очередь, этим компаниям:

  • Интернет-магазины. Покажите товар лицом и в движении. Особенно, если продаёте одежду и аксессуары.
  • Медиа. Гиф всегда кстати, письма не исключение.
  • Обучение и инфобизнес. Как и видео, гиф наглядны. Они отлично иллюстрируют простые действия.
  • B2B. Разрывайте шаблон — в меру используйте гиф, чтобы быть стильными и нескучными.
  • Все. Независимо от отрасли, вашим рассылкам нужен сильный визуал. Хорошие иллюстрации, фото и гифки — ваше оружие.

Итог

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

Другие материалы по теме

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Спасибо, ждите письмо.

Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно).

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Тренды веб дизайна в 2018

Это 2018 год — год новых идей и новых возможностей в веб дизайне.

Вы дизайнер, который ищет новых вдохновений? Тогда вы попали туда, куда нужно.

Ниже вы найдете 15 новых трендов в веб дизайне 2018 года.Поехали!


1. SVG анимация

В последнее время SVG (масштабируемая векторная графика) приобрела огромную популярность. Ее основными преимуществами являются масштабируемость и способность реагировать на предопределенное событие, например, загрузку страницы, изменение ее параметров, события мыши и т. д. Другими словами, эти анимации реагируют на действия пользователя. Такие классные интерактивные элементы привлекают внимание посетителей сайта и увеличивают коэффициент взаимодействия. Обязательно воспользуйтесь этим преимуществом, если вы хотите улучшить работу пользователя.


2. Минимализм и юзабилити.

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

Вы же помните — встречают по одежке!

3. Футуристические проекты

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

Согласно исследованию, время пребывания на сайте увеличивается на 100 % на страницах с хотя бы одним изображением или видео на них.

Еще более впечатляюще то, что покупатели на 85% чаще покупают продукт после просмотра его демоверсии.

Если вам нужен пример, проверьте канал youtube Invision. Они загружают новое демо-видео с их новейшим продуктом в дизайнерском пространстве — «Invision Studio».

4. Пользовательские фото и видео

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

5. Тени для дополнительной глубины

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

Чтобы сделать «Призыв к действию» более выделенным, чтобы создавалась иллюзия клика.
Чтобы установить визуальную иерархию между элементами.
Внимание: Не используйте тени слишком сильно.

6. Адаптивный веб дизайн

Мир мобильных устройст развивается очень быстро, поэтому наличие адаптивного веб дизайна уже «must have».

В 2018 году для веб-сайтов и логотипов необходимо, чтобы бренды сохраняли свое присутствие перед целевой аудиторией независимо от их устройства.

7. Минимализм на фото

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

Этот трюк широко используется в электронной коммерции. 

8. Анимация и Gifs

Анимация привлекает внимание пользователя быстрее, чем что-либо еще. Пользователям больше нравится что то смотреть, нежели читать. Посмотрите на успех Instagram.

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

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

9. Микро-взаимодействия

Они повсюду. Они отличаются от анимаций. Мне трудно объяснить разницу, вы можете увидеть пример ниже.

Микро-взаимодействия используются для создания высокодинамичных пользовательских интерфейсов. Пользователю не нужно посещать и прокручивать страницы.


10. Яркие градиенты и яркие цвета

Градиенты вернулись После долгого времени вернулись в Интернет. Градиенты 2.0 с различимыми цветами становятся популярными.

11. Большая двусмысленная и креативная типография

Веб-дизайнеры превращают Typography в инструмент для создания захватывающих инновационных работ. В 2018 году веб-дизайн не вращается вокруг нескольких шрифтов. Используется комбинация 5-6 шрифтов.

Помните: огромные смелые шрифты заменяют изображения.  

12. Фон из частиц

Ваш веб-сайт должен загружать в течение 2-4 секунд, иначе пользователь уйдет. Об этом говорят все популярные блоги SEO. Какова связь между скоростью загрузки сайта и фоном?

Ответ прост. Фоны, которые состоят из частиц загружаются быстрее, имеют меньшее отвлечение и более привлекательны.

13. Создание большего пространства с раздельным дизайном страницы

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

14. Одноцветные иконки

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

15. Сделайте свой контент готовым к печати

Независимо от того, как нас поглощает цифровой мир, печать — это то, что вы не должны игнорировать. Я сам печатаю контент, который кажется полезным.

Режим чтения в браузерах использует ваш CSS для печати содержимого. Лучше добавьте его в свой список удобств использования.

01.04.2018

Читайте еще статьи

Компания Depositphotos запускает проект Lightfield — фотостудия площадью 2500 кв. м Подробнее 13.04.2017

О хорошем тоне в сопровождении корпоративной почты и использовании почты домена Подробнее 20.02.2017

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

Мало кто в наше время еще не слышал о супер популярном видео хостинге YouTube, и практически каждый, кто пользуется интернетом, просматривает видео ролики самых разных тематик и направлений. Подробнее 18.07.2016

IPtv – это телевидение нового поколения, построенное на основе протокола IP (Internet Protocol). Подробнее 20.05.2016

Все статьи

Фактчекинг, графический дизайн, контент-план – многоточие поставлено в работе медиашколы

Да! Трехдневный медиаинтенсив Псковского государственного университета #Proдвигай свой край завершен. Задачка в получении контента для продвижения проекта в виде семи постов, фоторепортажа, видеороликов и (о, боже!) инфографики решена.

Только не подумайте, что за ее решение ставили оценки – ни в коем случае! Просто все три дня с раннего утра – и не спрашивайте до какого часа –ученики медиашколы, а они же бакалавры, магистранты и учащиеся колледжа ПсковГУ при помощи и поддержке  организаторов, экспертов, спикеров пытались проникнуться высоким духом, который несут объекты Всемирного наследия ЮНЕСКО – «Храмы псковской архитектурной школы».

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

Создавать медиаконтент о памятниках ЮНЕСКО в течение всех трех дней работы интенсива ребятам помогали опытные наставники: специалист по работе со СМИ и SMM Зоя Павлова и педагог квантума виртуальной и дополненной реальности псковского Кванториума Виктория Зарецкая, а также начальник управления информационной политики и связей с общественностью ПсковГУ Ольга Лосская.

 

 «Какими же насыщенными были эти три дня, – наконец выдохнула  Ольга Лосская, начальник управления информационной политики и связей с общественностью ПсковГУ, обратившись к ребятам. – Все сейчас улыбаются, все довольны. Мы с вами говорили, что такое новые медиа, фактчекинг, работали над текстами, учились делать контент-план, осваивали графический дизайн, участвовали в мастер-классе по публичным выступлениям. Но, главное, выезжали на место, где распределяли роли и на месте формировали свой контент. Понятно, что за три дня можно было только прикоснуться к великому наследию храмов. Это была больше схема, чтобы с ее помощью попробовать реализовать проект еще раз».

Свой контент создавали три команды, в каждую из которых входили по 16 – 17 человек.

Итак, команда №1 «Агенты», которая объектом своего изучения и продвижения выбрала Собор Иоанна Предтечи, памятник русской архитектуры домонгольского периода.

«В постах мы хотели напомнить людям, как вести себя в храме, как он вошел в список ЮНЕСКО и что это ему дает, а еще рассказать о его истории», –отметили они, презентуя свой проект, продемонстрировав два видеоклипа, лучшие из фотографий и инфографику, которая далась им очень не просто. Переделывали они ее шесть раз, потратив на это шесть часов. Зато рассказали историю храма в контексте истории страны.

Команда №2 «Скобари» назвала свой проект «Монастырь на Мирожке: от молодежи к молодежи», сразу обозначив свою целевую аудиторию.

«Мы хотим познакомить студентов с этим местом, где согласно легенде переписывали «Слово о полку Игореве».

А один из своих клипов они назвали «Маэстро в дендропарке», вдохновившись не только Византийскими фресками Спасо-Преображенского собора, но и уточками в прилегающем парке. Их явно привлекла тема братьев меньших – один из постов они посвятили монастырским кошечкам и собачкам. А в инфографике отметили, на их взгляд, очень немаловажное, как студентам доехать до Мирожского монастыря.

Несмотря на земноводное название команды №3 «Лягушки и жабы» (оказывается это дань цвету волос их капитана Александре) концептом подачи их проекта стал храм как искусство. О церкви Покрова и рождества от Пролома они также написали 6 постов, напоминая, что здесь снимались сцены культового фильма Тарковского «Андрей Рублев», а музыкальным сопровождением ролика ребята выбрали церковные песнопения.

«При посещении храма мы сами испытали гордость и уважение, а еще ощущение, насколько храм важен и ценен. Надеемся, что молодежь и жители будут с уважением относиться к нему».

Подытоживая результаты работы медиашколы, Светлана Воднева, проректор по работе с молодежью ПсковГУ заметила, что сделано главное – ребята подружились и поняли, что оказывается вместе  за три дня можно создавать проекты и пообещала, что теперь будет  «знать к кому обращаться, когда нужно создать креативное и молодежное», пожелала довести проект  до логического завершения и поучаствовать в грантовой поддержке».

Екатерина Гончарова, руководитель проекта, директор центра карьеры и трудоустройства ПсковГУ, пожелала ребятам не снижать темп, работать с ускорением в ежесекундно меняющемся мире, где новое появляется очень и очень быстро.

За эти три дня студенты получили столько информации, сколько не получают за годы. Все понимают, что этот интенсив – просто возможность прикоснуться к медиа и главная идея медиашколы Псковского государственного университета #Proдвигай свой край заключена в ее названии: свой край они продвигают и собираются делать это и дальше…

The Studio — GiF Design Studio

Наши услуги

  • Печать
  • Брендинг
  • Редакция
  • Иллюстрация
  • Упаковка
  • Винные этикетки
  • Цифровой
  • Веб-дизайн
  • Развитие
  • Моушн-дизайнер
  • Социальные сети

Наши основатели

Жоана Гальван и Хосе Фрейтас встретились в Кингстонском университете в Лондоне, Англия. Джоана изучала графический дизайн и фотографию, а Хосе (уже со степенью в области управления бизнесом) получал степень магистра в области управления маркетингом.

Перенесемся на 3 года вперед — пара решила стать фрилансером…

Благодаря сочетанию опыта Джоаны в различных отмеченных наградами дизайнерских агентствах и навыков Хосе в области разработки веб-сайтов и маркетинга — вскоре им пришлось ждать 4 месяца. список. Прежде чем они узнали об этом, они уехали из Лондона в Порту, Португалия, чтобы осуществить свою совместную мечту о собственном цифровом агентстве.

Сегодня в Gif Design Studios работают 8 штатных сотрудников, которые помогают воплощать в жизнь большие мечты и замыслы других предпринимателей.

«Я архитектор, Хосе — инженер», — говорит Джоана. «У меня есть видение нашей компании, и он помогает воплотить его в жизнь».

Команда

Жоана Гальвао

Основатель / CD

Хосе Фрейташ

Основатель / DD

Жоана Араужо

Менеджер проекта / студии 3 3

3 9 Санта 990 Санта 990 9 Санта 990 Санта 9033

Графический дизайнер / иллюстратор

Даниэла Мейрелеш

Графический дизайнер

Ана Оливейра

Младший графический дизайнер

Энрике Бертье

Старший графический дизайнер

Хотите стать частью команды?

Ну да!

Наши ценности

Мы заботимся о вашем бизнесе так же, как и о своем, — с долгосрочным видением.

Многие компании инвестируют в дизайн бренда или веб-сайта… а затем перерастают этот дизайн практически за одну ночь.

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

Наша работа — облегчить жизнь нашим клиентам.

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

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

Мы создаем конвертирующие дизайны.

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

Мы также учитываем поток пользователей на вашем веб-сайте — что должно быть в первую очередь, чтобы действительно привлечь пользователя? Как мы можем удержать их внимание с помощью эффективного бренда, ориентированного на вашего идеального клиента? В каком порядке пользователь должен ознакомиться с вашим сайтом, чтобы получить наилучшее представление о вашей работе?

Мы делаем то, что любим.

Здесь всем нравится приходить на работу и каждый день решать новый проект. Нас волнуют такие вопросы, как «Как мы можем вывести этот проект на новый уровень?»

Поскольку нам посчастливилось работать с клиентами, которых мы абсолютно любим, мы очень много вкладываем в работу — вплоть до того, что выдумываем новые, инновационные идеи, которых раньше не видели. (вставьте конверт)

Команда решает все.

Говорят, две головы лучше, чем одна… а как насчет 8?

Разнообразные навыки нашей команды делают Gif Designs такой мощной студией. (Поэтому мы хорошо относимся к нашей команде и даем им возможность раскрыть свой творческий потенциал.) У нас есть настоящие специалисты: кто-то занимается электронными книгами, кто-то занимается только веб-дизайном, кто-то занимается иллюстрациями и т. д.

И поскольку у нас есть внутренняя (читай: не виртуальная) команда, мы проводим мозговой штурм и работаем вместе так, как многие современные дизайн-студии просто не могут. Это означает, что ваш проект получает статус VIP, несмотря ни на что.

Мы любим детали.

Легко сказать: «Мы уделяем внимание деталям», но что это значит на самом деле? В нашем случае это означает, что мы пытаемся сделать все творчески — от цветов, которые привлекут вашу идеальную аудиторию, до того, как логотип точно передает то, что вы делаете, с тонкостью и элегантностью.

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

Мы — друзья окружающей среды.

Мы перерабатываем как профессионалы! Абсолютно все здесь, в офисе, сортируется и перерабатывается, и мы почти не используем бумагу… разве что для печати визитных карточек наших клиентов. 😉

(У нас в команде даже есть диплом инженера-эколога. Наш талантливый менеджер проекта Жоана Араужо всегда придумывает новые способы уменьшить выбросы углекислого газа. )

И мы упомянули 50% наших командных прогулок? работать? Не очень обычно для такого города, как Порту.

Мы заботимся о вашем бизнесе так же, как и о своем, – с долгосрочным видением.

Многие компании инвестируют в дизайн бренда или веб-сайта… а затем перерастают этот дизайн практически за одну ночь.

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

Наша работа — облегчить жизнь нашим клиентам.

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

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

Мы создаем конвертирующие дизайны.

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

Мы также учитываем поток пользователей на вашем веб-сайте — что должно быть в первую очередь, чтобы действительно привлечь пользователя? Как мы можем удержать их внимание с помощью эффективного бренда, ориентированного на вашего идеального клиента? В каком порядке пользователь должен ознакомиться с вашим сайтом, чтобы получить наилучшее представление о вашей работе?

Мы делаем то, что любим.

Здесь всем нравится приходить на работу и каждый день решать новый проект. Нас волнуют такие вопросы, как «Как мы можем вывести этот проект на новый уровень?»

Так как нам посчастливилось работать с клиентами, которых мы очень любим, мы очень увлечены работой – вплоть до того, что выдумываем новые, новаторские идеи, которых раньше не видели. (вставьте конверт)

Команда решает все.

Говорят, две головы лучше, чем одна… а как насчет 8?

Разнообразные навыки нашей команды делают Gif Designs такой мощной студией. (Поэтому мы хорошо относимся к нашей команде и даем им возможность раскрыть свой творческий потенциал.) У нас есть настоящие специалисты: кто-то занимается электронными книгами, кто-то занимается только веб-дизайном, кто-то занимается иллюстрациями и т. д.

А поскольку у нас есть внутренняя (читай: не виртуальная) команда, мы можем проводить мозговые штурмы и работать вместе так, как многие современные студии дизайна просто не могут. Это означает, что ваш проект получает статус VIP, несмотря ни на что.

Мы любим детали.

Легко сказать: «Мы уделяем внимание деталям», но что это значит на самом деле? В нашем случае это означает, что мы пытаемся сделать все творчески — от цветов, которые привлекут вашу идеальную аудиторию, до того, как логотип точно передает то, что вы делаете, с тонкостью и элегантностью.

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

Мы — друзья окружающей среды.

Мы перерабатываем как профессионалы! Абсолютно все здесь, в офисе, сортируется и перерабатывается, и мы почти не используем бумагу… разве что для печати визитных карточек наших клиентов. 😉

(У нас в команде даже есть диплом инженера-эколога. Наш талантливый руководитель проектов Жоана Араужо всегда придумывает новые способы сокращения выбросов углекислого газа.) ? Не очень обычно для такого города, как Порту.

Используйте стрелки, чтобы увидеть больше фотографий

Gif-дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble

  1. Посмотреть анимацию логотипа для Skategram

    Анимация логотипа для Skategram

  2. Просмотр Visvim — кинетический тип

    Visvim — кинетический тип

  3. View Userlane — анимация логотипа

    Полоса пользователя — анимация логотипа

  4. Посмотреть секреты движения

    Секреты движения

  5. View Dharma — зацикленная анимация значка

    Дхарма — зацикленная анимация значка

  6. Посмотреть Радужную дорогу

    Радужная дорога

  7. Посмотреть фонарь

    Фонарь

  8. Посмотреть медузу

    Медуза

  9. Просмотр анимации логотипа для AccelerList

    Анимация логотипа для AccelerList

  10. Посмотреть Евровидение — Lottie Animation

    Евровидение — Лотти Анимация

  11. Посмотреть добрый кот

    добрая кошка

  12. Задержка просмотра — 03

    Задержка — 03

  13. View Consultly — анимация иконок

    Consultly — анимация иконок

  14. Посмотреть Без обуви.

    Без обуви.

  15. Посмотреть Телефон или забронировать?

    Телефон или книга?

  16. Просмотр селфи

    делать селфи

  17. Просмотр фигур

    Формы

  18. Посмотреть анимацию логотипа для Engineerx

    Анимация логотипа для Engineerx

  19. Посмотреть критика — анимация логотипа

    Критик — анимация логотипа

  20. Просмотр расширенных переходов

    Дополнительные переходы

  21. Посмотреть 2020

  22. Посмотреть анимацию логотипа для Conegree

    Анимация логотипа для Conegree

  23. Посмотреть анимацию логотипа для Bodygym

    Анимация логотипа для Bodygym

  24. Посмотреть анимацию логотипа «uh!live»

    Анимация логотипа «uh!live»

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка еще…

Анимированные Gif-дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble

  1. Посмотреть сеансы Zoom #20Gifsfor2020

    Сеансы Zoom #20Gifsfor2020

  2. Посмотреть случайный проект Gif #3

    Проект случайных гифок #3

  3. Посмотреть анимированные картинки для G2i

    Анимированные картинки для G2i

  4. Посмотреть пустые улицы #20Gifsfor2020

    Пустые улицы #20Gifsfor2020

  5. Просмотр GIF-файлов Google

    Гифки Google

  6. Посмотреть Motioncue

    Motioncue

  7. Посмотреть случайные гифки 2020

    Случайные гифки 2020

  8. Просмотреть GIF-файлы пищи для размышлений

    Пища для размышлений GIF

  9. Просмотр GIF-файлов Google

    Гифки Google

  10. Посмотреть петлю конфетти

    Конфетти Петля

  11. Просмотр класса 101 — Создание анимированных GIF-файлов

    Класс 101 — Создание анимированных картинок

  12. Просмотреть стикеры / гифки Illustrated Giphy — анимацию в социальных сетях

    Иллюстрированные стикеры / гифки Giphy — анимация для социальных сетей

  13. Посмотреть гифки навсегда

    Гифки навсегда

  14. Посмотреть JB Hamburger Joint: анимация в социальных сетях

    JB Hamburger Joint: анимация в социальных сетях

  15. Просмотр случайных GIF-файлов Behance Project #3

    Случайные GIF-файлы Behance Project #3

  16. Посмотреть обложку проекта Behance «Различные GIF-файлы и стикеры».

    Обложка проекта Behance «Различные GIF-файлы и стикеры».

  17. Просмотр класса 101 — Создание анимированных GIF-файлов

    Класс 101 — Создание анимированных картинок

  18. Посмотреть невидимые ритмы

    Невидимые ритмы

  19. Посмотреть жизнь до короны

    Жизнь до коронавируса

  20. Посмотреть круг

    Круг

  21. Вид на значок линии горизонта Гонконга GIF

    Значок линии горизонта Гонконга GIF

  22. Посмотреть GIF-наклейки на Хэллоуин 👻 для GIPHY

    Хэллоуин GIF-наклейки 👻 для GIPHY

  23. Посмотреть праздничные GIF-файлы для GIPHY

    Праздничные GIF-файлы для GIPHY

  24. Посмотреть арбуз

    Арбуз

Зарегистрируйтесь, чтобы продолжить или войдите на

Идет загрузка…

Полное руководство по дизайну GIF

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

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

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

Создаете сайт для отображения ваших GIF-файлов? Вам может понадобиться конструктор сайтов. Если это сложный сайт, вам понадобится идеальный веб-хостинг, и после того, как вы его создадите, обязательно надежно спрячьте его в облачном хранилище.

01.

Привлекайте внимание

Поскольку социальные сети по-прежнему широко используются, неудивительно, что тенденция использования GIF в рекламе быстро растет. «Использование GIF-файлов в социальном контенте может быть очень эффективным, если правильно его использовать», — говорит Том Грант, дизайнер Fiasco Design в Бристоле.

Он считает, что GIF-файлы — это идеальное средство для привлечения внимания, позволяющее оживить плоскую статичную публикацию «привлекательным, увлекательным и информативным способом».

Компания Fiasco Design создала ряд энергичных GIF-файлов для Олимпийских игр 2016 года в Рио-де-Жанейро

(открывается в новой вкладке)

Fiasco Design создала ряд живых и энергичных GIF-файлов для Олимпийских игр в Рио-де-Жанейро, сочетая яркую цветовую палитру с быстрой, яркой рамкой скорости и экспериментировать со шрифтом, который будет разборчивым при разных размерах.

Для дизайнеров есть несколько правил создания эффективных GIF-файлов для социальных платформ. «Основная техническая задача состоит в том, чтобы удержать их на уровне ниже ограничений по размеру файлов для каждой платформы социальных сетей», — предполагает Джеймс Карран , старший директор международной производственной компании Partizan . «В частности, Tumblr всегда сложен, так как он имеет ограничение в 2 МБ [теперь 3 МБ], поэтому мне иногда приходится проявлять творческий подход, чтобы сократить циклы, чтобы уменьшить размер».

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

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

И стоит помнить, на каких устройствах будет просматриваться ваш GIF. Совет Каррана: проектируйте с учетом маленького экрана: «Делайте все простым и смелым, чтобы оно хорошо работало на любом устройстве».

Рассел Этеридж , член творческой группы Animade , выступает за дизайн в квадрате. «Многие из наших GIF-файлов начинаются с этой формы и при необходимости обрезаются. Кроме того, вы склонны прокручивать социальные сайты в портретной ориентации на своем телефоне, поэтому лучше иметь дизайн ближе к квадрату, поскольку более узкие изображения будут выглядеть меньше».

Для своего GIF-файла Olympops (вверху) Этеридж анимировал все в формате 4:3, который затем можно было обрезать до квадратного или стандартного видео 16:9.

04. Заставьте его работать как непрерывный цикл

Парижский дизайнер Валентин Адам, который работает в Playground Paris (открывается в новой вкладке), утверждает, что вместо того, чтобы думать конкретно о GIF, концепция формата «цикла» набирает темп: «Очень весело делать двухсекундную анимацию, которая проигрывается бесконечно и выглядит так, будто в каждом цикле она разная».

Курран соглашается и предлагает рассматривать GIF-файлы как нечто непрерывное, а не как имеющее определенную начальную и конечную точки. «Попробуйте рассказать историю, которая работает внутри цикла», — предлагает он. «Я думаю, что это помогает людям дольше смотреть GIF».

Игривые GIF-файлы Джеймса Каррана сделали его популярным в Фиаско Дизайн.

Однако, если вы разрабатываете GIF-файл для размещения в социальной сети, такой как Twitter, вам не о чем беспокоиться, поскольку встроенные функции воспроизводят GIF-файлы только тогда, когда они находятся в поле зрения.

Наконец, очень важно, чтобы петли были красивыми и гладкими, и есть одна ловушка, которую следует избегать. «Если последний кадр вашей анимации совпадает с вашим начальным, это приводит к небольшой задержке, когда вы видите один и тот же кадр дважды, что приводит к негладкому циклу», — отмечает Этеридж. «Убедитесь, что вы удалили это в конце, чтобы избежать этого».

05. Найдите подходящие инструменты

Для большинства дизайнеров освоение Photoshop (с помощью этих замечательных руководств по Photoshop (открывается в новой вкладке)) является ключевым моментом, когда дело доходит до создания собственных GIF-файлов. Карран рекомендует YouTube в качестве основного ресурса для онлайн-руководств по основам программного обеспечения: «После того, как вы хорошо разберетесь, вы сможете понять, как адаптировать эти принципы к стилю работы, которую вы хотите создать».

Грант предлагает поэкспериментировать с CodePen: «Он содержит отличные источники вдохновения и предлагает место для обучения и творчества с кодом, независимо от того, новичок вы или опытный профессионал».

Многие дизайнеры выбирают After Effects (открывается в новой вкладке) для более сложных GIF-файлов. «Существует гораздо больший контроль над функциями движения и времени, а также некоторые дополнительные инструменты для создания действительно мощных анимаций», — рассказывает Льюис.

Если вы хотите освежить свои навыки работы с After Effects, ознакомьтесь с учебным пособием Curran по созданию GIF (выше), нашим руководством «Начало работы с анимацией в After Effects» (открывается в новой вкладке) или нашей подборкой из 50 потрясающих учебных пособий по After Effects ( открывается в новой вкладке) доступны онлайн.

Дизайн можно экспортировать напрямую в формате GIF, но Льюис предлагает сначала экспортировать его в формате видео: «Кажется, так проще сжимать и уменьшать размер файла».

06. Начните с простого

Со всеми этими различными вариантами легко растеряться. «Поскольку необходимо учитывать множество переменных, требуется много испытаний и технических ноу-хау. Создание циклического GIF-файла может занять в два раза больше времени, чем обычно», — говорит иллюстратор из Мельбурна Эллен Портеус (открывается в новая вкладка).

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

Валентин Адам (он же Playground Paris) создал свое портфолио, создавая GIF каждый день в течение месяца. «Я хотел сделать огромное разноплановое движение с кучей глупых и безумных вещей, но для этого мне приходилось публиковать GIF каждый день — отчасти для того, чтобы не переусердствовать», — объясняет он.

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

07. Превратите видео в GIF

Создание GIF не обязательно должно быть прерогативой иллюстраторов — вы можете импортировать любое видео в Photoshop, чтобы преобразовать его в GIF. Тем, у кого нет навыков работы с Photoshop, Грант рекомендует поэкспериментировать с Giphy (откроется в новой вкладке), который предоставляет простой и бесплатный способ разбить видео на кадры.

«На самом деле я не использую систему покадровой анимации в Photoshop, поскольку видеослои гораздо более интуитивно понятны», — комментирует Этеридж. «Если я анимирую графику, я буду анимировать в After Effects и импортировать в Photoshop в виде обработанного видеофайла перед преобразованием».

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

08. Сделайте его доступным для всех

Чтобы контент мог привлечь более широкую аудиторию, разработчики должны помнить о доступности и веб-стандартах (откроется в новой вкладке). «Веб-анимация всегда должна использоваться для постепенного улучшения опыта», — утверждает Грант.

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

GIF от Fiasco Design для Larmer Tree Festival 9Соучредитель 0032 Animade Джеймс Чемберс соглашается с тем, что доступность должна быть встроена с самого начала: «Основы, такие как добавление тегов alt к изображениям — анимированному GIF или чему-либо другому — должны быть основой».

Он также отмечает, что для векторной анимации использование встроенных SVG (открывается в новой вкладке) может значительно улучшить доступность. Проще говоря, SVG – это формат векторного изображения на основе XML для двумерной графики, который поддерживает интерактивность и анимацию. «С точки зрения доступности встроенные SVG содержат больше информации по сравнению с пустыми , и, следовательно, может быть лучше интерпретирован браузером», — объясняет он. HTML, но добавление ARIA может предоставить пользователям программ чтения с экрана больше контекста и большую интерактивность с контентом. Тем не менее, ARIA не влияет на то, как элементы отображаются или ведут себя в браузерах — он предназначен только для того, чтобы действовать как дополнительный описательный слой. полезный инструмент для веб-разработчиков.

09. Откройте для себя что-то новое

Так почему же GIF-файлы стали такими популярными? Для многих дизайнеров они предлагают новый выход для творческого самовыражения. «Я думаю, это отчасти потому, что основная аудитория GIF-файлов моложе, [клиенты] больше заинтересованы в немного необычном контенте», — говорит Карран.

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

Эллен Портеус разработала этот зацикленный GIF-файл для Quantcast

(открывается в новой вкладке)

Портеус соглашается: «Все дело в том, чтобы максимально использовать гибкость цифровой среды. весело и умно. Для меня самые привлекательные GIF-файлы — это те, которые плавно и бесконечно повторяются, с большим количеством движения и игривости».

Что касается того, что делает GIF великолепным, то интуиция имеет к этому отношение. «Речь идет о понимании основных принципов анимации, чувстве ритма и способности придумать идею», — заключает Карран. «Я все еще учусь всему этому после более чем 10 лет работы над анимацией!»

Основная иллюстрация: Юкай Ду (открывается в новой вкладке)

Первоначально эта статья была опубликована в выпуске net (открывается в новой вкладке) за 2017 год. Подпишитесь на сетевой журнал здесь (откроется в новой вкладке) .

Статьи по теме:

  • Создание и анимация полигонов SVG (открывается в новой вкладке)
  • 30 инструментов веб-дизайна для ускорения рабочего процесса (открывается в новой вкладке) вкладка)

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Основатель и директор Inkygoodness, Лиза является публикуемым писателем и арт-журналистом, специализирующимся на творческом бизнесе, графическом искусстве, иллюстрации и дизайнерском образовании. Ее слова были опубликованы в журнале Computer Arts, Creative Bloq, Digital Arts и IdN.

GIF дизайн: Что делать и чего не делать?

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

Вот затруднительное положение; текст больше не подходит, фотоконтент недостаточно привлекателен, а заставить пользователей согласиться на просмотр видео может быть слишком многого!

Но подождите, есть секретный четвертый вариант, который не многие рассматривают, но который доказал свою высокую эффективность; гифки!  

Формат GIF или Graphics Interchange Format представляет собой цифровой медиафайл, который лучше всего описывается как нечто среднее между изображением и видео. GIF — это, положим, движущаяся картинка. Вы, наверное, видели, как некоторые из них плавают вокруг, возможно, с кошками.

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

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

К счастью для вас, у нас есть полное руководство по дизайну GIF прямо здесь. Начнем!

 

Содержание

Дизайн GIF: что делать и чего НЕ делать

Было бы полезно, если бы вы учитывали некоторые основы дизайна при разработке GIF. Давайте рассмотрим 8 лучших советов по дизайну GIF в 2022 году.

 

1.

Внимание!

Это самое очевидное: ваши GIF-файлы для веб-дизайна должны привлекать внимание. Это требует некоторых размышлений и исследований. Посмотрите на свою целевую аудиторию; каковы их интересы? На какой контент они подписаны и какое у них чувство юмора?

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

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

Также разумно решить, какая платформа может извлечь выгоду из контента GIF. Например, видеоконтент обычно довольно хорошо работает в Instagram. Тем не менее, он может работать не так хорошо в Twitter, где видео не нуждаются в автоматическом воспроизведении, если пользователь не имеет идеального Wi-Fi-соединения. Для Twitter хорошей идеей будет конвертировать ваши видео в GIF!

2. Небольшой размер

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

Это сделано для того, чтобы разные аудитории могли просматривать ваш контент с помощью различных интернет-соединений и устройств. GIF с высоким разрешением может не воспроизводиться для пользователя с посредственным подключением к Интернету, что ставит под угрозу ваше взаимодействие с пользователем. Многие платформы социальных сетей также имеют ограничения на размер файла, что означает, что вы не можете загрузить или поделиться файлом, превышающим этот предел.

Из-за этого дизайнерам сложно создавать совместно используемый контент на нескольких платформах. Ответ — исследование! Посмотрите ограничения на размер файла для всех платформ, на которых вы планируете отображать свой контент, и создайте соответствующие GIF-файлы.

Кроме того, если вы используете GIF-файлы на своем веб-сайте, файлы с высоким разрешением могут значительно повлиять на скорость вашего веб-сайта. И поверьте нам, медленный веб-сайт — одна из худших вещей, которые могут случиться с вашим присутствием в Интернете и SEO! Особенно, если вы создаете анимацию для веб-сайта, убедитесь, что она максимально сжата, чтобы она воспроизводилась без усилий, не снижая скорости вашего веб-сайта.

3. Адаптивный дизайн

Да, принципы адаптивного дизайна применимы и к анимированному GIF-дизайну. Ваша анимационная графика должна быть адаптирована для мобильных устройств. Это не так уж сложно. Вам нужно помнить о нескольких вещах.

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

4. Петля!

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

При создании GIF-файлов для ваших кампаний или социальных сетей в целом важно помнить о последних тенденциях при создании контента для социальных сетей. Цифровое пространство невероятно быстро меняется, и если вы не поспеваете за ним, вы останетесь позади!

При создании GIF-файлов с непрерывным циклом учитывайте чувство ритма. Установите несколько кадров, плавно перетекающих друг в друга, и установите их в постоянный цикл, и все готово!

5. Будьте проще

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

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

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

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

6. Видео в GIF

Это не совет по дизайну, а скорее лайфхак для контент-маркетинга. Мы кратко коснулись этого в предыдущем пункте, но это отличная идея; Превратите ваши видео в GIF. Это лучший способ перепрофилировать контент и эффективно поддерживать свое присутствие в Интернете.

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

Тот же принцип используется для GIF-файлов: превратите свой видеоконтент в GIF-файлы для таких платформ, как Twitter, чтобы ваш контент был виден на всех доступных вам платформах!

7. Доступность

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

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

 

8. Правильные инструменты

Используйте правильные инструменты! И что еще более важно, используйте правильные инструменты для вас. Мы рекомендуем начать с простого редактора GIF, прежде чем переходить к более сложным инструментам, таким как Photoshop.

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

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

Лучшие инструменты для создания GIF

Это наш лучший выбор лучших инструментов для создания GIF.

1. Adobe After Effects

Adobe After Effects — одно из лучших средств создания визуальных эффектов и анимированной графики на рынке. Это профессиональный дизайнерский инструмент, который создатели используют во всем мире для постпроизводственного редактирования и графического дизайна.

After Effects — один из самых популярных инструментов для создания движущейся графики и анимации. Программное обеспечение имеет широкий набор опций и инструментов редактирования для создания идеальных дизайнов и графики.

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

К счастью, как и большинство инструментов Adobe CC, After Effects поставляется с бесплатной пробной версией. Вы можете опробовать инструмент в течение семи дней без каких-либо обязательств, что более чем достаточно для того, чтобы поэкспериментировать и посмотреть, работает ли он на вас.

2. Adobe Photoshop

Adobe Photoshop является культовым фаворитом среди создателей во всем мире. Как и After Effects, Photoshop требует немного времени для освоения, но оно окупается! Пользователи могут создавать анимацию кадров и редактировать свой фото- и видеоконтент в одном и том же программном обеспечении.

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

3. Adobe Animate

Как следует из названия, Adobe Animate — еще один отличный инструмент для анимации и векторной графики. Пользователи могут легко создавать, редактировать и создавать GIF-файлы с помощью этого инструмента, что делает его идеальным дополнением к вашему набору инструментов для дизайна!

Этот сравнительно проще в использовании и быстрее, чем два предыдущих. Тем не менее, совет: просмотрите несколько руководств, чтобы ускорить процесс без необходимости тратить часы на изучение основ!

 

Проверьте свой дизайн GIF с помощью GoVisually!

Анимационная графика и анимация сегодня в моде. Это потому, что такие форматы, как GIF, делают общение эффективным и интересным одновременно!

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

Именно здесь использование GoVisually для проверки и утверждения действительно может соответствовать вашему контенту в игре.

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

Не верите? Закажите демонстрацию сегодня и убедитесь в этом сами. Могу поспорить, что вы будете приятно удивлены!

А пока удачного создания GIF.

 

Хотите отправлять большие файлы?


Нужен быстрый способ обмена большими файлами и творческими активами?

С GoVisually Share это абсолютно бесплатно! Попробуйте сегодня.

Анимированные GIF-файлы в электронной почте: примеры и способы их создания [Руководство]

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

Маркетологи электронной почты все чаще обращаются к анимированным GIF-файлам в электронной почте, чтобы обеспечить дополнительный визуальный интерес к своим сообщениям. Согласно нашим данным о состоянии электронной почты за 2020 год, 51,28% маркетологов заявили, что хотя бы иногда используют анимированные GIF-файлы в своих маркетинговых электронных письмах.

Итак, как вы можете принять участие в этом действии? В этом сообщении блога мы рассмотрим:

  • Что такое GIF
  • Преимущества (с вдохновляющими примерами)
  • Недостатки анимированных GIF
  • Как создавать анимированные GIF с помощью Adobe Animate
  • Рекомендации по созданию анимированных GIF
  • Поддержка почтового клиента и время загрузки

Что такое анимированный GIF?

GIF (сокращение от Graphics Interchange Format) — это формат изображения, разработанный CompuServe в 1919 году. 87. Благодаря широкой поддержке браузеров и почтовых клиентов GIF-файлы были популярным форматом изображений с первых дней существования Интернета.

Что еще более важно, GIF-файлы можно анимировать. Подобно тому, как работает флипбук, GIF-файлы быстро отображают серию изображений, создавая иллюзию движения. В первые годы существования Интернета GIF-файлы (а также теги выделения и мигания) были основным методом добавления движения на веб-страницу.

Многое изменилось с 1990-х годов. Анимированные GIF-файлы переживают ренессанс как в Интернете, так и в электронном маркетинге. Хотя до сих пор ведутся споры о том, как на самом деле произносится «GIF», большинство согласится с тем, что GIF-файлы могут быть отличным маркетинговым инструментом.

Каковы преимущества анимированных GIF-файлов в электронной почте?

Предпочитаете ли вы твердую «G» или любите рифмовать GIF с определенной маркой арахисового масла, давайте посмотрим, почему GIF так полезны в электронных письмах.

1. Привлеките внимание ваших подписчиков

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

Grammarly использует тонкую анимацию, чтобы привлечь внимание к своему предложению.

Источник: Really Good Emails

Xfinity размещает свои GIF дальше в письме, чтобы привлечь подписчиков и побудить их прокручивать страницу.

Источник: Really Good Emails

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

См. полный текст электронного письма в действии

2. Покажите свои продукты и услуги

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

ILIA Beauty демонстрирует свой продукт в действии с реальными людьми.

Источник: Really Good Emails

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

Источник: Really Good Emails

Magic Spoon демонстрирует разнообразие вкусов и потрясающий дизайн упаковки.

Источник: Really Good Emails

3. Упростите сложную идею

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

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

Источник: Really Good Emails

Headspace показывает вам, как обрести спокойствие с помощью GIF, лучше, чем кто-либо может объяснить словами.

Источник: Really Good Emails

4.

Расскажите о чем-то новом или о том, что скоро появится

У вас есть новый контент или продукт, который вы собираетесь выпустить? У вас скоро появится отличное предложение? Используйте анимированный GIF-файл, чтобы повысить осведомленность или интерес к вашему продукту, а подписчики будут ждать вашего следующего письма.

Apple дразнит расширенную распродажу в Черную пятницу и призывает подписчиков «сохранять даты» для покупок, чтобы не пропустить выгодные предложения.

Источник: Really Good Emails

Электровелосипед Линуса лишь намекается в тени этого письма. Подписчики должны будут щелкнуть, чтобы увидеть фактический продукт.

Источник: Really Good Emails

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

Источник: Really Good Emails

Недостатки анимированных GIF-файлов в электронном маркетинге

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

Недостаточная доступность

Анимированные GIF-файлы могут представлять проблему с точки зрения доступности по целому ряду причин.

Частота мигания контента от 2 Гц до 55 Гц может нанести вред пользователям, страдающим светочувствительной эпилепсией. Кроме того, у слабовидящих пользователей могут возникнуть трудности с чтением или просмотром контента в формате GIF до изменения анимации. Поэтому убедитесь, что ваши анимированные GIF-файлы имеют плавные переходы или не анимируются от одного кадра к другому с высокой скоростью.

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

Создавайте доступные, инклюзивные электронные письма для всех ваших подписчиков

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

Узнайте, как →

 

Плохая прозрачность фона

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

GIF-файлы некрасивы, когда речь идет о прозрачном фоне. Но вы можете предоставить анимированную альтернативу электронной почте в виде анимированного PNG (APNG). Обязательно обратите внимание на те же советы и рекомендации по сжатию, которыми мы поделимся далее, поскольку APNG также любят накапливать килобайты (КБ).

И если вы ищете еще одну альтернативу анимированным GIF-файлам, вы можете изучить анимацию CSS.

Создание анимированных GIF-файлов для кампаний по электронной почте с помощью Adobe Animate

Вы можете создавать GIF-файлы несколькими способами. Онлайн-конструкторы позволяют вам анимировать выбранные фотографии или превращать видео в анимированный GIF, или вы можете использовать программное обеспечение, такое как Adobe Photoshop или Adobe Animate, для перемещения пользовательских дизайнов.

Вот обзор того, как сделать анимированный GIF в Adobe Animate.

Шаг 1: Создайте новый файл и введите размеры

Чтобы создать GIF в Adobe Animate, сначала создайте новый файл и введите желаемые размеры. Совет для профессионалов: создавайте анимацию в два раза больше для дисплея сетчатки, как и для статических изображений.

Шаг 2. Импорт графики для анимации

Вы можете создать анимацию прямо на холсте, используя инструменты формы и рисования в программном обеспечении, создавая слой для каждого элемента. Если вы создали дизайн для своей анимации в Adobe Illustrator, вы можете просто скопировать и вставить векторную графику на свой холст. В противном случае вы можете импортировать графику в Adobe Animate, выбрав «Файл» > «Импорт» > «Импортировать в рабочую область». Или, если вы импортируете графику, которая будет повторно использоваться несколько раз, вы можете «импортировать в библиотеку».

Шаг 3: Создайте анимацию

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

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

Символы

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

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

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

Анимация

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

Анимация формы может использоваться только с фигурами или элементами, которые вы нарисовали на холсте или векторах, импортированных с помощью настроек средства импорта AI (а не в виде растрового изображения). Это связано с тем, что анимация формы позволяет изменять форму объекта. Например: вы можете добавить круг к одному ключевому кадру на временной шкале, добавить квадрат к другому, а затем превратить свой круг в квадрат с помощью анимации формы.

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

Классическая анимация очень похожа на анимацию движения. Он был перенесен из Flash и сохранен в Animate в качестве дополнительной опции. Это мой предпочтительный способ применения анимации движения, так как методы смягчения (обсуждаемые ниже) немного проще в применении.

Замедление

Замедление идет рука об руку с анимацией. Если перемещение объекта из одного положения в другое с помощью временной шкалы — это торт, то замедление — это глазурь!

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

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

В этом примере мы применили плавность отскока к анимации движения.

Для получения информации о том, как применить смягчение, посмотрите это видео на YouTube.

Шаг 4. Экспортируйте анимированный GIF-файл

Сохранение анимации из Adobe Animate в формате GIF — это удобно и просто. Просто выберите «Файл» > «Экспорт» > «Экспорт анимированного GIF».

Как уменьшить размер GIF-файла

Независимо от того, используете ли вы Adobe Animate или что-то еще — сохранение небольшого размера GIF для электронной почты имеет решающее значение для электронной почты. Есть несколько вещей, которые стоит учитывать, чтобы сделать ваши анимации максимально легкими.

Сжатие

Такие инструменты, как Animate и Photoshop, имеют ограниченные параметры сжатия для файлов GIF; часто вместо сжатия лучше использовать внешнее программное обеспечение. Мы рекомендуем ImageOptim, который можно загрузить бесплатно, или EZgif, бесплатный онлайн-инструмент для оптимизации GIF, чтобы уменьшить размер файла до оптимального веса. Мы рекомендуем оставить размер меньше одного мегабайта (МБ), но оптимальный размер файла будет варьироваться и зависит от времени загрузки электронной почты.

Плоский цвет

Включение фотографии или градиентов в вашу анимацию добавляет веса из-за количества содержащихся в них цветов и оттенков. GIF может содержать только 256 цветов — по сравнению с JPEG, который может включать более 16 миллионов — что часто приводит к снижению качества. Главное, чтобы все было просто.

Ограниченное количество кадров

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

Если вы обнаружите, что ваш GIF-файл имеет слишком большой вес после сохранения и сжатия, вы можете удалить кадры с помощью Photoshop или EZgif.

Проверка вашего анимированного GIF-файла

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

Дружелюбное сообщение: доступно только в планах Litmus Enterprise.

Соедините GIF-файлы с CTA

Анимированные GIF-файлы можно использовать для привлечения подписчиков к определенному действию, которое вы от них хотите.

Pond5 использует анимированный GIF-файл, чтобы привлечь внимание к основному призыву к действию (CTA) электронного письма «Скачать бесплатный клип».

Источник: Really Good Emails

Думайте о малом

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

Вот пример от Adobe — они сохраняют анимацию в небольшой части электронного письма, но это имеет большое значение.

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

Используйте GIF-файлы, чтобы добавить индивидуальности

Подчеркните индивидуальность вашего бренда в электронной почте с помощью анимированных GIF-файлов, как это делает Рип Ван Вафелс с помощью этой игривой анимации ниже.

Внедрение анимированных GIF-файлов в электронную почту

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

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

Другие рекомендации по электронной почте с анимированными GIF-файлами

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

Поддержка

Анимированные GIF поддерживаются почти везде. В 2019 году Outlook расширил поддержку анимированных GIF-файлов, но это касается только Office365. Outlook 2007-2019 по-прежнему не поддерживает анимированные GIF-файлы.

Вот краткая таблица того, какие почтовые клиенты поддерживают и не поддерживают анимированные GIF-файлы:

Desktop Clients

Webmail Clients

Mobile Clients

Outlook 2000-2003 ✓

Gmail ✓

iOS Mail ✓

Outlook 2007-2019 ✘

G Suite ✓

Gmail ✓

Outlook для Mac ✓ 27

3 Yaho! Почта ✓

Gmail IMAP ✓

Apple Mail ✓

AOL ✓

Samsung Mail ✓

Windows 10 Mail ✓

Outlook. com ✓

Outlook ✓

Office365 ✓

Office365 ✓

Yahoo ✓

Comcast ✓

AOL ✓

Orange.fr ✓

SFR.fr ✓

GMX.de ✓

Web.de ✓

T-Online.de ✓

Freenet.de ✓

Mail.ru ✓

 

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

Вы также можете предоставить резервный вариант для Outlook, скрыв обычное изображение GIF и отобразив статическое изображение и/или другой контент внутри условий Outlook:

И последнее замечание: когда дело доходит до поддержки клиента электронной почты: полезно знать, какой адрес электронной почты клиенты пользуются популярностью у вашей аудитории. Если оутлук 2007-2019является основным клиентом с вашей базой подписчиков, найдите время, чтобы убедиться, что резервный вариант работает, как и планировалось. (Согласно нашим данным с Litmus Email Analytics, Outlook был самым популярным настольным клиентом на июнь 2022 года.)

Время загрузки

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

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

Мы протестировали файлы разных размеров, чтобы определить их среднюю скорость загрузки при разных подключениях. В среднем анимированный GIF-файл размером 4,4 МБ загружается в два раза дольше при подключении 4G LTE, чем при подключении Ethernet.

Вот некоторые средние скорости для разных размеров файлов при разных соединениях, основанные на нашем собственном эксперименте:

Средняя скорость загрузки контента (в секундах)

Размер файла

4G LTE

WiFi

Ethernet

180kB GIF

0.37

0.29

0. 22

1MB GIF

1.18

0.54

0.44

3.2MB GIF

2.87

1.44

1.04

4.4MB GIF

3.23

1.83

1.34

 

These times are the content download speed and don’t take into account the time to first байт (TTFB). TTFB — это способ измерения скорости отклика веб-сервера. Поэтому, если вы размещаете свои изображения на сервере, который медленно отвечает, время загрузки анимированных GIF-файлов для ваших подписчиков увеличится.

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

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

Проверьте свои анимированные GIF-файлы в электронной почте с помощью Litmus

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

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

Добавить комментарий

Ваш адрес email не будет опубликован.