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 формате преподавателей Школы дизайна для проекта «Слон в боа»
Медиаресурс об иллюстрации «Слон в боа», созданный художницами Ксенией Копаловой и Евгенией Бариновой, запустил спецпроект о том, как GIF меняет наше восприятие статичных изображений.
Татьяна Фадеева:
«Многих иллюстраторов сподвигает обратиться к формату GIF то, что он короткий, динамичный, и в нем можно без долгих подводок выразить самую суть. С одной стороны, это может быть какой-то информативный фрагмент, а с другой — медитативная и гипнотизирующая история, которая сообразна видеоарту».
Часть III
Третья часть пройдет в формате GIF-баттла и расскажет о том, как стикеры и эмодзи стали «новой нормальностью» в работах художников, как GIF меняет монументальное искусство, как работают гифки, не сделанные художниками и иллюстраторами, и зачем нам нужны 10-секундные нарезки из Наруто.
Юлия Блюхер, Татьяна Фадеева и Александра Старусева-Першеева также покажут свои самые любимые гифки и обсудят лучших авторов этого жанра.
Александра Старусева-Першеева:
«Я — за выведение GIF на более серьезные уровни. Если ранее мы обсуждали, что гифка может использоваться как иллюстрация к учебнику истории, то я легко могу представить такое будущее , в котором GIF может заменить даже витраж в храме или фреску. Pourquoi pas? Я не вижу проблем в том, чтобы такие весьма возвышенные образы трансформировать через этот формат, делая их для нас эмоционально еще более значимыми и вписывая их в новые контексты».
О проекте «Слон в боа»
По словам одной из создательниц проекта, преподавательницы программы ДПО «Иллюстрация. Базовый курс» Ксении Копаловой, «Слон в боа» расчитан на широкую аудиторию. Он создан для всех, кому интересны процессы, которые происходят в современной визуальной культуре. Но, конечно, прежде всего он будет полезен иллюстраторам, рисующим людям и тем, кто хочет рисовать.
«Мы начали работать в марте, буквально за несколько дней до начала карантина, и открыли сайт в середине лета. У Евгении Бариновой до этого был свой проект о бизнес-стороне иллюстрации, illustratorsunion.ru, а у меня свой блог на русском о современной японской графике — Medium, и на японском о русской — note. У нас обеих уже назревала потребность в одном более полновесном ресурсе об иллюстрации как таковой, на русском языке и для русскоязычной аудитории. Мне лично интересно было сделать так, чтобы появился ресурс, где можно найти не только прикладную информацию об иллюстрации (как и что рисовать, как сделать из рисования профессию, как организовать работу), но и материалы, которые бы помещали иллюстрацию в более широкий контекст и видели её как часть общих процессов в культуре», — рассказывает Ксения.
По мнению Ксении, в иллюстрации, как на русском, так и на английском языках, на данный момент очень мало материалов, которые представляли бы критический анализ и осмысление этой практики.
«Слон в боа» появился из желания понять причины таких пробелов и выяснить, какую часть культуры занимает иллюстрация.
Сейчас на сайте есть и очень прикладной раздел «дело», где лежат, например, образцы смет и договоров для иллюстраторов, и в большей степени теоретический раздел «контекст», где размещены беседы о политике визуального или границах между тем, что мы называем «иллюстрацией» и «искусством». Кроме того, создатели открыты к коллаборациям и всевозможному сотрудничеству. Со временем Ксения и Евгения хотели бы сделать этот сайт не только информационным ресурсом, но и платформой для взаимодействия. Например, уже сейчас на сайте есть раздел «спецпроекты», где планируется публиковать визуальные исследования, делать онлайн-выставки и в целом всячески изучать вместе с читателями и студентами, что такое «иллюстрация», и какой она может быть.
Программа ДПО «Иллюстрация. Базовый курс»
Студенты программы учатся работать с книжными и журнальными иллюстрациями, айдентикой брендов и фирменным стилем, иллюстрациями для цифровых продуктов.
Анимация и иллюстрация Современное искусство Дополнительное образование Комикс
Направление
Анимация и иллюстрация
Область применения анимации и иллюстрации необычайно широка: это захватывающие спецэффекты в блокбастерах, самобытные миры видеоигр, графическое оформление печатных изданий, рекламные баннеры, экспериментальная мультипликация. Если вы хотите учиться на художника-аниматора, иллюстратора, комикс-артиста или специалиста по CGI, Школа дизайна НИУ ВШЭ предлагает вам сделать это в одном из лучших вузов Москвы и России.
В рамках направления открыты профили бакалавриата, магистратуры и программы дополнительного образования.
Как поступить
Направление обучения
Современное искусство
Образовательное направление «Современное искусство» в НИУ ВШЭ создано для подготовки художников и кураторов, фотографов и видеоартистов, теоретиков и практиков во всех областях современного искусства.
В бакалавриате можно выбрать из образовательных профилей: Художник и куратор, Медиа-арт, Экранные искусства, Саунд-арт и саунд-дизайн. Со II курса бакалавры могут выбрать специализацию Фигуративное искусство и развиваться в современном переосмыслении и работе со станковыми жанрами: картина, рисунок, графическая серия, скульптура и др.
Абитуриентам магистратуры, которые четко определились с направлением своего развития, мы предлагаем профили «Современная живопись» (куратор — Владимир Дубосарский), «Театр и перформанс» (куратор — Ольга Рогинская), Sound Art & Sound Studies (куратор — Евгений Былина). Также мы разработали трек мастерских — для тех, кто хочет совмещать занятия в узкоспециализированных мастерских с работой над комплексными арт-проектами. Абитуриенты магистратуры могут выбрать одну из авторских мастерских: «Видеоарт», «Фотография», «Печатная графика», «Керамика и текстиль», Art & Science и параллельно заниматься в общих группах, создавая произведения выставочного уровня, объединяя свои скиллы с компетенциями студентов из других мастерских.
Как поступить
Дополнительное образование
Школа дизайна НИУ ВШЭ предлагает слушателям широкую линейку образовательных курсов. Вы можете ознакомиться с полным списком и выбрать одно из образовательных направлений и уровень обучения, чтобы найти курс, который подходит именно вам.
Подробнее
Направление
Комикс
Студенты направления «Комикс» в Школе дизайна с нуля осваивают компьютерные дизайн-программы и технику рисунка, изучают историю искусств, основы режиссуры и сценария. С первого года учёбы начинающие комиксисты и иллюстраторы занимаются собственными творческими проектами. Школа дизайна готовит профессиональных художников комикса, которые не только готовы работать в полиграфии, анимации, веб-иллюстрации, но и способны встроиться в смежные специальности — сценарное дело, анимацию, прикладную графику.
Как поступить
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
Мы живем в мире, где общение все чаще происходит в Интернете, а 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-файл для размещения в социальной сети, такой как 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 евро
У вас уже есть аккаунт? Войдите здесь
Зарегистрируйтесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!
Свяжитесь со мной, чтобы сообщить новости и предложения от других брендов FutureПолучайте электронные письма от нас от имени наших надежных партнеров или спонсоров Основатель и директор Inkygoodness, Лиза является публикуемым писателем и арт-журналистом, специализирующимся на творческом бизнесе, графическом искусстве, иллюстрации и дизайнерском образовании.
