Дизайн gif: GIF-баннеры на сайт компании «ПРИН»

Если все эти советы кажутся вам трудоемкими, попробуйте эти инструменты.

GIPHY GIF Maker (бесплатно) — Вы можете оставить свою GIF-ку приватной, если у вас есть аккаунт. В противном случае, все они будут доступны посетителям GIPHY.

EZGIF (бесплатно) — это конечно не такой простой инструмент, как GIPHY, но у него есть больше возможностей.

GifBrewery 3 ($4.99) — Это, пожалуй, единственный инструмент, который стоит купить, чтобы делать GIF-анимации.

The Studio — GiF Design Studio

Наши услуги

• Печать
• Брендинг
• Редакция
• Иллюстрация
• Упаковка
• Винные этикетки

• Цифровой
• Веб-дизайн
• Развитие
• Моушн-дизайнер
• Социальные сети

Наши основатели

Жоана Гальван и Хосе Фрейтас встретились в Кингстонском университете в Лондоне, Англия. Джоана изучала графический дизайн и фотографию, а Хосе (уже со степенью в области управления бизнесом) получал степень магистра в области управления маркетингом.

Перенесемся на 3 года вперед — пара решила стать фрилансером…

Благодаря сочетанию опыта Джоаны в различных отмеченных наградами дизайнерских агентствах и навыков Хосе в области разработки веб-сайтов и маркетинга — вскоре им пришлось ждать 4 месяца. список. Прежде чем они узнали об этом, они уехали из Лондона в Порту, Португалия, чтобы осуществить свою совместную мечту о собственном цифровом агентстве.

Сегодня в Gif Design Studios работают 8 штатных сотрудников, которые помогают воплощать в жизнь большие мечты и замыслы других предпринимателей.

«Я архитектор, Хосе — инженер», — говорит Джоана. «У меня есть видение нашей компании, и он помогает воплотить его в жизнь».

Команда

Жоана Гальвао

Основатель / CD

Хосе Фрейташ

Основатель / DD

Жоана Араужо

Менеджер проекта / студии 3 3

Графический дизайнер / иллюстратор

Даниэла Мейрелеш

Графический дизайнер

Ана Оливейра

Младший графический дизайнер

Энрике Бертье

Старший графический дизайнер

Хотите стать частью команды?

Наши ценности

Мы заботимся о вашем бизнесе так же, как и о своем, — с долгосрочным видением.

Многие компании инвестируют в дизайн бренда или веб-сайта… а затем перерастают этот дизайн практически за одну ночь.

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

Наша работа — облегчить жизнь нашим клиентам.

Мы не просто даем вам дизайн, а затем оставляем вас искать разработчика, копирайтера, фотографа и т. д.

если не знаешь с чего начать! Мы делаем все за вас, поэтому вам не нужно обмениваться электронными письмами с 7 разными людьми, чтобы воплотить ваш проект в жизнь.

Мы создаем конвертирующие дизайны.

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

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

Мы делаем то, что любим.

Здесь всем нравится приходить на работу и каждый день решать новый проект. Нас волнуют такие вопросы, как «Как мы можем вывести этот проект на новый уровень?»

Поскольку нам посчастливилось работать с клиентами, которых мы абсолютно любим, мы очень много вкладываем в работу — вплоть до того, что выдумываем новые, инновационные идеи, которых раньше не видели. (вставьте конверт)

Команда решает все.

Говорят, две головы лучше, чем одна… а как насчет 8?

Разнообразные навыки нашей команды делают Gif Designs такой мощной студией. (Поэтому мы хорошо относимся к нашей команде и даем им возможность раскрыть свой творческий потенциал.) У нас есть настоящие специалисты: кто-то занимается электронными книгами, кто-то занимается только веб-дизайном, кто-то занимается иллюстрациями и т. д.

И поскольку у нас есть внутренняя (читай: не виртуальная) команда, мы проводим мозговой штурм и работаем вместе так, как многие современные дизайн-студии просто не могут.

Мы любим детали.

Легко сказать: «Мы уделяем внимание деталям», но что это значит на самом деле? В нашем случае это означает, что мы пытаемся сделать все творчески — от цветов, которые привлекут вашу идеальную аудиторию, до того, как логотип точно передает то, что вы делаете, с тонкостью и элегантностью.

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

Мы — друзья окружающей среды.

Мы перерабатываем как профессионалы! Абсолютно все здесь, в офисе, сортируется и перерабатывается, и мы почти не используем бумагу… разве что для печати визитных карточек наших клиентов. 😉

(У нас в команде даже есть диплом инженера-эколога. Наш талантливый менеджер проекта Жоана Араужо всегда придумывает новые способы уменьшить выбросы углекислого газа. )

И мы упомянули 50% наших командных прогулок? работать? Не очень обычно для такого города, как Порту.

Мы заботимся о вашем бизнесе так же, как и о своем, – с долгосрочным видением.

Многие компании инвестируют в дизайн бренда или веб-сайта… а затем перерастают этот дизайн практически за одну ночь.

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

Наша работа — облегчить жизнь нашим клиентам.

Мы не просто даем вам дизайн, а затем оставляем вас искать разработчика, копирайтера, фотографа и т. д.

если не знаешь с чего начать! Мы делаем все за вас, поэтому вам не нужно обмениваться электронными письмами с 7 разными людьми, чтобы воплотить ваш проект в жизнь.

Мы создаем конвертирующие дизайны.

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

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

Мы делаем то, что любим.

Здесь всем нравится приходить на работу и каждый день решать новый проект. Нас волнуют такие вопросы, как «Как мы можем вывести этот проект на новый уровень?»

Так как нам посчастливилось работать с клиентами, которых мы очень любим, мы очень увлечены работой – вплоть до того, что выдумываем новые, новаторские идеи, которых раньше не видели. (вставьте конверт)

Команда решает все.

Говорят, две головы лучше, чем одна… а как насчет 8?

Разнообразные навыки нашей команды делают Gif Designs такой мощной студией. (Поэтому мы хорошо относимся к нашей команде и даем им возможность раскрыть свой творческий потенциал.) У нас есть настоящие специалисты: кто-то занимается электронными книгами, кто-то занимается только веб-дизайном, кто-то занимается иллюстрациями и т. д.

Мы любим детали.

Легко сказать: «Мы уделяем внимание деталям», но что это значит на самом деле? В нашем случае это означает, что мы пытаемся сделать все творчески — от цветов, которые привлекут вашу идеальную аудиторию, до того, как логотип точно передает то, что вы делаете, с тонкостью и элегантностью.

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

Мы — друзья окружающей среды.

Мы перерабатываем как профессионалы! Абсолютно все здесь, в офисе, сортируется и перерабатывается, и мы почти не используем бумагу… разве что для печати визитных карточек наших клиентов. 😉

(У нас в команде даже есть диплом инженера-эколога. Наш талантливый руководитель проектов Жоана Араужо всегда придумывает новые способы сокращения выбросов углекислого газа.) ? Не очень обычно для такого города, как Порту.

Используйте стрелки, чтобы увидеть больше фотографий

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

Мы живем в мире, где общение все чаще происходит в Интернете, а 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-файла может занять в два раза больше времени, чем обычно», — говорит иллюстратор из Мельбурна Эллен Портеус (открывается в новая вкладка).

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

Целый месяц он проводил челлендж, публикуя гифки на своей странице в 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 лет работы над анимацией!»

Основная иллюстрация: Юкай Ду (открывается в новой вкладке)

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

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

• Создание и анимация полигонов SVG (открывается в новой вкладке)
• 30 инструментов веб-дизайна для ускорения рабочего процесса (открывается в новой вкладке) вкладка)

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

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

У вас уже есть аккаунт? Войдите здесь

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

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

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

У вас уже есть аккаунт? Войдите здесь

Зарегистрируйтесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

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