7 советов по созданию крутых gif-анимаций
Вы читаете перевод статьи “7 tips for designing awesome animated GIFs”. Над переводом работали: Ольга Жолудова и Анастасия Свеженцева. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.
У нас в InVision, гифки — это не просто способ повалять дурака, они играют важную роль в нашей системе маркетинга и обучения. Черт, да мы даже пробовали использовать gif-анимации на нашем сайте, вместо модных анимаций на базе кода.
В конце концов нас стали спрашивать “Как вы делаете эти гифки?”. И мы решили, что пришло время открыть секрет.
Создание gif-анимаций
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 года.
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
