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 года.
Создание GIF-анимации в Photoshop
НАЧАЛЬНЫЙ УРОВЕНЬ, СРЕДНИЙ УРОВЕНЬ, ВЫСОКИЙ УРОВЕНЬ · 1 MIN
Узнайте, как экспортировать изображения из слоев Adobe Photoshop, чтобы создать GIF-анимацию.
Вам потребуется
Скачать материалы к уроку
Скачать Photoshop бесплатно
Теперь попробуйте сами
1. Скачайте готовые тренировочные файлы с 10 вариантами рисунка черепа.
Или практикуйтесь на своих собственных файлах: с помощью инструмента Кисть в Photoshop создайте 10 вариантов рисунка на отдельных слоях. Добавьте небольшие изменения в каждый рисунок, чтобы показать «движение».
Следующие инструкции предназначены для тех, кто использует готовые файлы с 10 вариантами рисунка черепа.
2.
Откройте первый рисунок черепа (skull_Layer 1.jpg) в Photoshop. Перетащите остальные 9 рисунков черепа на открытый документ Photoshop. Подтверждайте импорт каждого рисунка, нажимая клавишу Enter, чтобы отключить режим Свободное трансформирование, который автоматически предлагается при перетаскивании нового изображения в рабочую среду.
Создание анимации
3. Откройте панель шкалы времени (Окно > Шкала времени).
4. В раскрывающемся списке на панели Шкала времени выберите Создать анимацию кадра. Первое изображение появится на шкале времени.
5. В меню в правой части панели Шкала времени выберите Создать кадры из слоев.
6. Удерживая клавишу Shift, нажмите сначала на первый, а затем — на последний кадр на Шкале времени, чтобы выделить все кадры.
7. Нажмите стрелку вниз на любом кадре и установите интервал 0,1 с.
8. В раскрывающемся списке под Шкалой времени выберите Постоянно, чтобы анимация повторялась непрерывно.
9. Нажмите кнопку Воспроизведение, чтобы посмотреть созданную анимацию.
Экспорт GIF-анимации
10. Выберите Файл > Экспортировать > Сохранить для Web (старая версия).
11. В раскрывающемся меню в правой верхней части диалогового окна Сохранить для Web выберите GIF 128 с дизерингом. Убедитесь, что для опции Параметры повторов установлено значение Постоянно. Нажмите Сохранить и сохраните файл в нужной папке.
Вот и всё! Теперь ваша очередь. Создайте анимированное GIF-изображение за минуту в Photoshop. Скачайте наши материалы или используйте собственные. Опубликуйте готовую работу в Facebook, Twitter или Instagram с хештегом #MadewithPhotoshop.
Получайте отзывы и общайтесь с другими творческими людьми.
Скачать материалы к уроку
ПРИСОЕДИНЯЙТЕСЬ
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud
YouTube: https://www.youtube.com/channel/UCL0iAkpqV5YaIVG7xkDtS4Q
Behance: https://www.behance.net/live. Реальные профессионалы. Реальные проекты. Смотрите наши трансляции в прямом эфире и вдохновляйтесь.
Анимированных Gif-дизайнов, тем, шаблонов и загружаемых графических элементов на Dribbble
Посмотреть сеансы Zoom #20Gifsfor2020
Сеансы Zoom #20Gifsfor2020
Посмотреть случайный проект Gif #3
Проект случайных гифок #3
Посмотреть анимированные картинки для G2i
Анимированные картинки для G2i
Посмотреть пустые улицы #20Gifsfor2020
Пустые улицы #20Gifsfor2020
Гифки Google
Посмотреть случайные гифки 2020
Случайные гифки 2020
Посмотреть Motioncue
Сигнал движения
-
Просмотреть GIF-файлы пищи для размышлений
Пища для размышлений GIF
Просмотреть GIF-стикеры Нью-Йорка 🗽 для GIPHY
Нью-Йорк GIF стикеры 🗽 для GIPHY
Просмотр GIF-файлов Google
Гифки Google
Посмотреть петлю конфетти
Петля конфетти
Просмотр класса 101 — Создание анимированных GIF-файлов
Класс 101 — Создание анимированных картинок
Просмотреть стикеры / гифки Illustrated Giphy — анимацию в социальных сетях
Иллюстрированные стикеры Giphy/gif — анимация для социальных сетей
Посмотреть гифки навсегда
Гифки навсегда
Посмотреть JB Hamburger Joint: анимация в социальных сетях
JB Hamburger Joint: анимация в социальных сетях
Просмотр случайных GIF-файлов Behance Project #3
Случайные GIF-файлы Behance Project #3
Посмотреть обложку проекта Behance «Различные GIF-файлы и стикеры».
‘Различные GIF-файлы и стикеры’ Обложка проекта Behance.
-
Просмотр класса 101 — Создание анимированных GIF-файлов
Класс 101 — Создание анимированных картинок
Посмотреть невидимые ритмы
Невидимые ритмы
Посмотреть жизнь до короны
Жизнь до коронавируса
Посмотреть GIF-наклейки на Хэллоуин 👻 для GIPHY
Хэллоуин GIF наклейки 👻 для GIPHY
Вид на значок линии горизонта Гонконга GIF
Значок линии горизонта Гонконга GIF
-
Посмотреть круг
Круг
Посмотреть праздничные GIF-файлы для GIPHY
Праздничные GIF-файлы для GIPHY
Зарегистрируйтесь, чтобы продолжить или войдите
Идет загрузка еще…
Gif-дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть анимацию логотипа для Skategram
Анимация логотипа для Skategram
Просмотр Visvim — кинетический тип
Visvim — кинетический тип
View Userlane — анимация логотипа
Userlane — анимация логотипа
Посмотреть секреты движения
Секреты движения
Посмотреть Радужную дорогу
Радужная дорога
Посмотреть фонарь
Фонарь
View Dharma — зацикленная анимация значка
Дхарма — зацикленная анимация значка
Просмотр анимации логотипа для AccelerList
Анимация логотипа для AccelerList
Посмотреть Евровидение — Lottie Animation
Евровидение — Лотти Анимация
Посмотреть медузу
Медуза
Задержка просмотра — 03
Задержка — 03
Посмотреть Без обуви.
