Это третья статья по Bēhance из четырех. Если вы пропустили вторую - рекомендую вернуться и только после продолжить чтение этой части.
В этой статье я расскажу подробно про технические детали и как избежать ошибок, которые могут погубить даже качественный проект. Погнали.
Технические детали
Определяем оптимальные размеры для публикации кейса, чтобы он смотрелся красиво на всех устройствах.
Обложка
Обложка кейса отображаются в размере 202×158 пикселей, но разрешение картинки, должно быть не меньше 808×632 пикселей. Чтобы всё было красиво и четко.
Ширина
Максимальная видимая ширина кейса — 1400 пикселей. Даже если вы загрузите макет шириной 1920 или 2800 пикселей, Behance всё равно будет отображать его по умолчанию в 1400. НО если на изображение кликнуть, то оно откроется в максимальном разрешении. Так что лучше экспортировать картинки из Figma в двойном размере. Они так еще лучше смотрятся на ретина-дисплеях.
Длина кейса
Хорошая длина кейса 20-30 000 пикселей. Количество блоков обычно зависит от размера проекта. В среднем от пяти до 15. Не нужно раздувать кейс, чтобы создать ощущение большой проделанной работы — больше не значит лучше.
Ни в коем случае не загружайте весь кейс одной картинкой, даже если он не большой. В Figma есть инструмент Slice tool — он помогает нарезать макет на блоки. Каждый такой блок экспортируйте отдельным изображением.
А для того, чтобы кейс прогружался быстрее нарезанные картинки ОБЯЗАТЕЛЬНО нужно прогнать через компрессор. Мы используем сервис tinypng.com. Он ужимает JPG и PNG изображения на 70-80% практически без потери качества. Благодаря этому ваш кейс будет загружаться гораздо быстрее даже на мобильном интернете.
Тексты
Много текста в кейсе убьет интерес читателя, даже если ты будешь заваливать его крупными планами в перерывах. Любую простыню текста можно представить в виде инфографики или коротких фактов. Текст в кейсе должен быть по существу, с краткими заголовками, и в виде мелких подсказок и примечаний.
Если текстовые блоки достаточно большие, то лучше делать их текстом и добавлять через админку Behance, а не заливать картинкой. Тогда всё будет красиво и адаптивно на любом устройстве, потому что многие смотрят Behance через приложение на телефоне. Вот отличный пример, как это работает.
Анимация и видео
Если ваш проект состоит из 10-12 блоков, например, то несколько из них желательно сделать анимированными. Так вы разбавите статичные изображения и кейс будет смотреться динамичнее. Если ролик короткий (до 10 сек), то делаем GIF-ку. Вот, например, анимация иконок. Она легкая короткая и быстро прогружается.
Гифки в кейсах получаются хуже по качеству, чем видео, но у них есть и плюсы: их проще создавать и легко загружать в кейс, как и обычные картинки. Размер изображений максимум 30 МБт.
Для анимаций интерфейсов используем After Effect, потому что он позволяет делать классные анимации и выгружать их небольшого размера и нужного разрешения. Результат заливаем с помощью Vimeo — классный сервис, заточенный под коммерческие задачи. В бесплатном тарифе можно загружать до 500 МБт в неделю и общий объем хранилища 5 ГБт. Этого на кейсы обычно хватает с головой.
Как встроить видео с Vimeo?
Чтобы встроить ролик с Vimeo, нужно:
- На странице видео в админке нажать на кнопку «Поделиться» и выбрать опцию — Embed / Share.
- Открываем видео в новом окне, нажимаем еще раз Share выбираем Fixed size, ставим размер оригинала, например, 1920х1080. Ставим галочки на Autoplay и loop и отключаем галочки в поле Intro – Portrait / Title / Byline.
- Копируем кусок кода в блокнот или заметку.
- И можем добавить в этот код разные ключи, чтобы включить или отключить дополнительные настройки.
Например, ключ autoplay=1 поможет сделать так, чтобы видео воспроизводилось автоматически. Важно, что в некоторых браузерах и после обновления Хром оно все равно не будет автоматически запускаться, если только в плеере не отключен звук. Эту задачу решит ключ muted=1: muted=1&autopause=0&
Во многих кейсах бывает несколько встроенных видео, и хочется чтобы они играли все вместе и были зациклены. В некоторых браузерах запуск одного ролика может прервать работу другого. С помощью ключа autopause=0 можно это починить.
Ключей очень много, но некоторые будут работать только с платным тарифом Vimeo. Например, полное отключение интерфейса плеера.
Потом копируем всё что накодили и вставляем через окно Embed media на Behance. Если что-то криво работает, то код можно отредактировать — иконка в левом углу блока. В этом же меню можно изменить порядок блоков, если что.
Необычные вставки
Если тебе нужно добавить музыку, можно встроить трек с сервиса SoundCloud. И зритель получит полноценное погружение в атмосферу проекта.
3D модель тоже можно добавить в кейс и читатель сможет ее прям тут покрутить. Сервис называется SketchFab. Вот хороший пример как это выглядит.
Свежая фича — добавлять кликабельные прототипы Figma. Для начала надо настроить прототип в макете. Потом скопировать код и вставить его в админку Behance, так же, как видео с Vimeo.
Итак, делаем обложку и макет в 1400 и сохраняем в х2. Нарезаем кейс на части с помощью Slice tool (желательно чтобы кусок получился не больше 3000px). Прогоняем через компрессор tinypng.com. Делаем gif из коротких анимаций, если есть, чтобы разбавить статичные изображения. В результате у вас должна получиться папка с обложкой и пронумерованными по порядку и готовыми к публикации файлами.
Читайте другие статьи про Behance
