Natasha Che
Люблю сноуборд и крипту

Как создать крутую GIF

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

Как создать крутую GIF

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

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

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

Мы расскажем о правилах и инструментах, которые помогут вам освоить искусство создания GIF.

Научитесь привлекать внимание

GIF для Олимпийских игр в Рио-2016 ©  Fiasko Design
GIF для Олимпийских игр в Рио-2016 © Fiasko Design

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

Том Грант, дизайнер Fiasco Design из Бристоля, говорит:

Использование GIF в социальном контенте несет мощнейший потенциал. И главное здесь — создать качественное и подходящее изображение.

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

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

Учитывайте ограничения социальных сетей

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

Говорит глава компании Partizan Джеймс Карран:

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

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

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

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

Оптимизируйте файлы для мобильных устройств

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

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

Рассел Этеридж из команды Animade выступает за проектирование GIF в форме квадрата:

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

Зациклите анимацию

Парижский дизайнер Валентин Адам, который работает в Playground Paris, утверждает, что вместо того, чтобы продумывать сюжет GIF, гораздо более эффектно просто зациклить анимацию:

Очень круто и эффектно выглядит двухсекундная анимация, которая проигрывается в бесконечном цикле. При этом создается впечатление, что в каждом цикле вы видите разную анимацию.
Зацикленная GIF © James Curran
Зацикленная GIF © James Curran

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

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

Используйте хорошие программы

Умение хорошо работать в Photoshop чрезвычайно важно для создания собственных GIF. Хорошим источником советов и уроков по дизайну являются онлайн уроки в YouTube. С их помощью можно научиться не только принципам работы в специальных приложениях, но и почерпнуть информацию по созданию собственного стиля.

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

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

Как создать анимационные GIF © Adobe Creative Cloud

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

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

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

Австралийский иллюстратор Эллен Портес дает совет начинающим дизайнерам:

Будьте проще. Начните с нескольких элементов, чтобы понять, как все движется, и постепенно усложняйте анимацию. Я сама начинала работу с создания простых проектов, например, различных прыгающих мячиков.
Валентин Адам создавал каждый день по одной GIF  ©  Valentin Adam
Валентин Адам создавал каждый день по одной GIF © Valentin Adam

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

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

Преобразовывайте видео в GIF

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

Рассел Этеридж делится своим опытом:

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

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

Учитывайте особенности аудитории

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

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

Пример простой анимации ©  Fiasco Design
Пример простой анимации © Fiasco Design

Соучредитель компании Animade Джеймс Чемберс согласен с тем, что необходимо постоянно думать о доступности контента для разных групп аудитории. В частности, использование встроенного языка разметки SVG может значительно улучшить доступность векторной анимации, а также явно выигрывает по сравнению с пустым описанием, а следовательно и лучше интерпретируются браузерами.

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

Пробуйте что-то новое

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

Пример яркой зацикленной анимации  ©  Ellen Porteus
Пример яркой зацикленной анимации © Ellen Porteus

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

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

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

По материалам creativebloq.com