Дизайн gif: Редактор GIF анимации онлайн | Создать анимацию

129 просмотров

• дизайн
• векторная графика
• дизайн логотипов

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

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

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

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

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

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

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

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

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-файл для публикации в социальных сетях, таких как Twitter, вам не о чем беспокоиться, поскольку встроенные функции воспроизводят GIF-файлы только тогда, когда они находятся в поле зрения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основная иллюстрация: Yukai Du

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

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

• Создание и анимация многоугольников SVG
• 30 инструментов веб-дизайна для ускорения рабочего процесса
• 30 лучших руководств по векторной графике

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

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

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

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

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

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