Как вставить gif на behance
Как сделать gif-анимацию для Behance и Dribbble?
Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.
Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.
Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Ограничения
Рассмотрим, какие требования предъявляют эти площадки.
Dribbble
Только gif-анимация, разрешение – 800 × 600. Размер – до 8 мб.
Behance
Gif-анимация / Embed-видео / Видео на хостинге Adobe. 50 мб для gif/картинок и 1 гб для видео/аудио. Максимальное разрешение для gif – 1400, для видео – 1200 в ширину.
Подробнее о подготовке анимации
Dribbble
Для формата шота плохо подходят длинные ролики. Лучше всего показывать короткий зацикленный фрагмент.
Наш воркфлоу такой:
Как сделать gif в Exgif
Выбрать время анимации, размер, количество кадров в секунду и метод сжатия.
Готово. Можно еще сжать gif по кнопке «Optimize», если он много весит.
Behance
Анимацию на Behance можно загрузить слудующими способами: видео с Adobe Cloud, Embed-видео с YouTube/Vimeo и gif-анимацией.
Пользуемся всеми способами в зависимости от того, что надо получить.
Рассмотрим плюсы и минусы каждого из подходов.
Видео с Adobe
+ Можно загрузить какой угодно объём
+ Относительно без потери качества
+ Можно посмотреть в fullscreen
+ Звук
– Нет автоплея в мобильной версии
Embed-видео
+ Все плюсы из видео с Adobe
– Логотип YouTube / Vimeo
– Особенности настроек для loop видео
– Нет автоплея в мобильной версии
Gif-анимация
+ Можно сделать на всю ширину экрана
+ Есть автоплей
– Нельзя промотать во время просмотра
– Много весят и дольше загружаются
Как сделать gif в GifBrewery
Стартовый экран, выбрать Open Video.
По дефолту GifBrewery делает нормальные гифки. Но если что-то пошло не так, то есть настройки по иконке справа. Обычно играемся только с алгоритмом выбора цвета.
В этой статье я рассказал про те способы, которыми пользуемся мы, и они точно работают. Если у вас есть свои варианты, пишите в комментариях.
Что получается у нас, можно посмотреть в профилях на Behance, Dribbble.
Как сделать gif-анимацию для Behance и Dribbble?
Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.
Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.
Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Ограничения
Рассмотрим, какие требования предъявляют эти площадки.
Dribbble
Только gif-анимация, разрешение – 800 × 600. Размер – до 8 мб.
Behance
Gif-анимация / Embed-видео / Видео на хостинге Adobe. 50 мб для gif/картинок и 1 гб для видео/аудио. Максимальное разрешение для gif – 1400, для видео – 1200 в ширину.
Подробнее о подготовке анимации
Dribbble
Для формата шота плохо подходят длинные ролики. Лучше всего показывать короткий зацикленный фрагмент.
Наш воркфлоу такой:
Как выбрать кодек при рендере в After Effects
Путь до выбора кодека: Output Module / Format Options / Video Codec
3. Полученный файл mov. переводим gif и оптимизируем, если он выходит за рамки 8 мб.
Проще всего переводить видео маленького размера в gif с помощью ezgif.
Как сделать gif в Exgif
Выбрать время анимации, размер, количество кадров в секунду и метод сжатия.
Готово. Можно еще сжать gif по кнопке «Optimize», если он много весит.
Behance
Анимацию на Behance можно загрузить слудующими способами: видео с Adobe Cloud, Embed-видео с YouTube/Vimeo и gif-анимацией.
Пользуемся всеми способами в зависимости от того, что надо получить.
Рассмотрим плюсы и минусы каждого из подходов.
Видео с Adobe
+ Можно загрузить какой угодно объём
+ Относительно без потери качества
+ Можно посмотреть в fullscreen
+ Звук
– Нет автоплея в мобильной версии
Embed-видео
+ Все плюсы из видео с Adobe
– Логотип YouTube / Vimeo
– Особенности настроек для loop видео
– Нет автоплея в мобильной версии
Gif-анимация
+ Можно сделать на всю ширину экрана
+ Есть автоплей
– Нельзя промотать во время просмотра
– Много весят и дольше загружаются
Наш воркфлоу такой:
По дефолту GifBrewery делает нормальные гифки. Но если что-то пошло не так, то есть настройки по иконке справа. Обычно играемся только с алгоритмом выбора цвета.
Как сделать gif-анимацию для Behance и Dribbble?
Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.
Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.
Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Ограничения
Рассмотрим, какие требования предъявляют эти площадки.
Dribbble
Только gif-анимация, разрешение – 800 × 600. Размер – до 8 мб.
Behance
Gif-анимация / Embed-видео / Видео на хостинге Adobe. 50 мб для gif/картинок и 1 гб для видео/аудио. Максимальное разрешение для gif – 1400, для видео – 1200 в ширину.
Подробнее о подготовке анимации
Dribbble
Для формата шота плохо подходят длинные ролики. Лучше всего показывать короткий зацикленный фрагмент.
Наш воркфлоу такой:
Как сделать gif в Exgif
Выбрать время анимации, размер, количество кадров в секунду и метод сжатия.
Готово. Можно еще сжать gif по кнопке «Optimize», если он много весит.
Behance
Анимацию на Behance можно загрузить слудующими способами: видео с Adobe Cloud, Embed-видео с YouTube/Vimeo и gif-анимацией.
Пользуемся всеми способами в зависимости от того, что надо получить.
Рассмотрим плюсы и минусы каждого из подходов.
Видео с Adobe
+ Можно загрузить какой угодно объём
+ Относительно без потери качества
+ Можно посмотреть в fullscreen
+ Звук
– Нет автоплея в мобильной версии
Embed-видео
+ Все плюсы из видео с Adobe
– Логотип YouTube / Vimeo
– Особенности настроек для loop видео
– Нет автоплея в мобильной версии
Gif-анимация
+ Можно сделать на всю ширину экрана
+ Есть автоплей
– Нельзя промотать во время просмотра
– Много весят и дольше загружаются
Наш воркфлоу такой:
Как сделать gif в GifBrewery
Стартовый экран, выбрать Open Video.
По дефолту GifBrewery делает нормальные гифки. Но если что-то пошло не так, то есть настройки по иконке справа. Обычно играемся только с алгоритмом выбора цвета.
В этой статье я рассказал про те способы, которыми пользуемся мы, и они точно работают. Если у вас есть свои варианты, пишите в комментариях.
Что получается у нас, можно посмотреть в профилях на Behance, Dribbble.
Как загрузить анимацию на behance
Как опубликовать кейс на Behance с анимациейПодробнее
Видео для Behance. Как добавить видео в проект Behance? Улучшить портфолио. Анимация в Behance.Подробнее
Как опубликовать кейс на BehanceПодробнее
Прототипирование и анимация в Figma для Dribbble & BehanceПодробнее
Анимация в Photoshop | Как вставить на Behance?Подробнее
Как сделать gif в ширину проекта на Behance?Подробнее
Пошаговая инструкция, как создать кейс для Behance и получить много тысяч просмотровПодробнее
#7🔹 Как встраивать видео на Behance с помощью embed кода — добавление файлов и анимации на BehanceПодробнее
Конвертируем видео в плавную GIF-анимацию для BehanceПодробнее
Как встроить видео на behance. Веб дизайн.Подробнее
Оживляем наше порфтфолио Behance при помощи анимаций CSS
Russian (Pусский) translation by AlexBioJS (you can also view the original English article)
Добавление эффектов модального окна и анимаций
В наши дни на многих веб-сайтах с портфолио используется что-то типа модального окна для изображений их портфолио. В этом руководстве мы реализуем нечто подобное и для нашего веб-сайта. При нажатии пользователем по изображению с эскизом оно будет увеличиваться в масштабе, как и остальные изображения выбранного проекта, так что пользователи смогут рассмотреть все содержащиеся в нем изображения более детально.
Ниже приведены инструменты, необходимые нам для реализации вышеуказанного:
Magnific Popup
Мы воспользуемся плагином jQuery под названием Magnific Popup, разработанным Дмитрием Семеновым. Он небольшого размера, быстро работает и соответствует требованиям отзывчивого веб-дизайна – как раз то, что нам необходимо.
Animate.css
Также мы добавим анимации CSS, что поможет нам оживить наш веб-сайт. Мы воспользуемся несколькими фрагментами библиотеки Animate.css, которая предоставляет огромную коллекцию анимаций CSS3, которыми вы можете воспользоваться путем добавления определенных классов для немедленного применения анимаций.
Добавляем Magnific Popup
Затем мы добавим скрипты в самом низу страницы, благодаря чему у DOM (* Document Object Model – объектная модель документа) будет время загрузиться до загрузки скриптов, меняющих поведение элементов.
Обновите страницу и проинспектируйте веб-сайт при помощи Chrome DevTools или Firebug. Вы должны будете обнаружить, что data-project-id содержит ID проекта портфолио, как показано ниже:
Атрибут data-project-id элемента figure с ID
Мы воспользуемся атрибутом data для получения контента выбранного проекта портфолио с присвоенным ему ID позже.
После этого нам также нужно будет изменить вид курсора на курсор в виде линзы с плюсиком следующим образом:
Благодаря нему пользователю будет дана подсказка, что для изображения имеется возможность увеличения; пользователи должны полагать, что могут нажать по изображению. Однако согласно MDN (* Mozilla Developer Network) значение zoom-in еще не поддерживается ни в какой версии Internet Explorer.Mozilla Developer Network Поэтому мы также указали в качестве значения cursor значение pointer (* курсор-рука – используется для сообщения пользователю, что под ним находится гиперссылка) перед cursor: zoom-in в качестве запасного варианта для Internet Explorer и других браузеров, в которых, возможно, нет поддержки cursor: zoom-in.
Запускаем Magnific Popup
Далее мы определим следующие переменные:
Проверяем, что пришедший контент – изображения
Здесь следует отметить, что в качестве поступающего через API контента может быть видео, встроенное видео или текст, которые нам не подходят; нам нужны только изображения. Поэтому перед отправлением данных в localStorage нам необходимо добавить следующий фрагмент кода для фильтрации контента:
Ниже приводится финальный код всего скрипта:
Если вы теперь нажмете изображение, то его масштаб должен будет увеличиться и оно должно будет быть отображено в стиле модального окна:
Если вы проинспектируете веб-сайт при помощи Chrome DevTools, вы должны будете обнаружить, что контент хранится в localStorage.
К тому же вы можете просмотреть все изображения контента проекта при помощи стрелок. Однако переход между изображениями сейчас происходит довольно неудобно (верно?); мы переходим от одного изображения к другому мгновенно. Так что давайте сделаем его более плавным при помощи анимаций, хорошо?
Добавляем Animate.css
Для начала нам необходимо будет добавить mainClass: ‘animated’ и removalDelay: 350 в нашу функцию magnificPopup.
Подгоняем стилевое оформление для ключевых кадров
Далее мы настроим несколько ключевых кадров (* кадр, создаваемый при изменении атрибута, чтобы зафиксировать его новое состояние, например, начало или конец нужной траектории перемещения, смену материала и т. п.) CSS, переходов и трансформаций, за счет которых создается эффект анимации при помощи Animate.css. Мы сконвертируем их код CSS в формат LESS, используя LESSHat.
Давайте начнем с ключевых кадров.
В модальном окне имеется несколько частей, которые мы будем анимировать, а именно: верхний слой фона, который покрывает все окно просмотра (* видимая для пользователя область веб-страницы), контент модального окна (изображение) и стрелки для просмотра изображений.
Анимацию верхнего слоя фона довольно легко выполнить. Для ее реализации вовсе не нужны указанные выше ключевые кадры, фон просто будет постепенно проявляться при появлении модального окна и постепенно пропадать при его исчезновении. Ниже представлены все стилевые правила для реализации этой анимации.
Ниже приводятся стилевые правила для реализации анимации контента модального окна.
Анимация стрелок для перехода между изображениями
Наконец, мы добавим анимацию для стрелок
Этот код довольно подобен фрагменту, при помощи которого реализуется анимация для контента. Согласно нему при показе левая стрелка будет постепенно появляться и выходить справа, затем уходить влево и постепенно пропадать. С правой стрелкой будет происходить обратное.
Заключение
Это была очень длинная серия руководств! Мы успешно создали рабочий вебсайт с персональным портфолио с нуля, используя в качестве источника данных API Behance. Для того чтобы его создать, мы также воспользовались рядом современных инструментов вроде LESS, HandlebarsJS и Animate.css. Этот веб-сайт довольно легко закачать на сервер, поскольку он состоит всего лишь из одной статической HTML-страницы – и вправду, демоверсия нашего сайта располагается на сервере GitHub в качестве статической страницы. Также вы можете закачать ее на веб-сервер при помощи FTP.
Если вы хотите усовершенствовать этот проект, то вы можете добавить например «фильтр», благодаря которому проекты порфолио будут отсортированы в соответствии с выбранной областью творческой деятельности. Также вы могли бы добавить изящные эффекты, возникающие при наведении курсора поврех элементов. Как бы там ни было, надеюсь, что вам понравилась эта серия и вы овладели несколькими приемами, которыми сможете воспользоваться при создании вашего собственного веб-сайта.