6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы
В жизни каждого дизайнера наступает момент, когда он набирается смелости показать результат своей деятельности всему миру. Кто-то собирает на сайте портфолио и загружает шоты на Dribbble, но сложно найти дизайнера, который ничего не слышал о Behance. Для многих Behance является портфолио-платформой по умолчанию, несмотря на ее ограничения и нюансы. Более того, ему даже удалось стать именем нарицательным. Ошибки платформы существуют так долго, что пользователи к ним привыкли, и теперь они воспринимаются как должное и сразу учитываются при разработке кейса. Но за последние пару лет Adobe внесла в платформу столько изменений и функций, сколько не было за предыдущие 10 лет. Давайте разберемся с самыми впечатляющими обновлениями.
Интеграция интерактивных прототипов
Раньше можно было встраивать прототипы из InVision или Marvel, в этой функции нет ничего инновационного, но после обновления функциональности прототипа в Figma кейсы можно украсить макетами с анимацией и эффектом наведения курсора. Это лучше, чем просто JPEG, не так ли? Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.
Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk. Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp, Cincopa, Codepen, Creddle, Dailymotion, Dartfish, Eko, видео посты Facebook, Figma, Flixel, Flowvella, Genial.ly, Gfycat, Giphy, Google Maps, Google VR, Imgur, Interlude, Itch.io, InVision App, Issuu, JotForm, Knightlab, Kuula 360, Mailjet, Marvel, Matterport, Mixcloud, Prezi, ProttApp, Scribd, Shapeways, Sketchfab, Sirv.com, SlideShare, SoundCloud, Soundgine, Spotify, Tableau, Twitch, Twitframe, Verold, Vimeo, Vizor, Wirewax, Wufoo, Youtube, Juxtapose. Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля. Если вы добавляете файл с помощью этого параметра, в окне предварительного просмотра вашей работы появится иконка скрепки, что приведет к загрузке файла.
Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов
Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams. Проводить трансляции через Zoom удобно, но для подключения к платформе вам необходимо привязать свою учетную запись Zoom к вашему профилю Behance. Пошаговая инструкция по ссылке.
Платные подписки на авторов
Дизайнеры и художники теперь имеют возможность монетизировать свой контент с помощью Behance. Вы можете пометить файлы для загрузки или видео-уроки с помощью кнопки «Premium Content». Такой контент можно скачать по подписке; размер ежемесячной подписки зависит от вас. На момент написания этой статьи данная функция доступна не всем пользователям, но ее можно получить, подав заявку на участие в бета-тестировании. Вы можете найти этот раздел, перейдя по ссылке.
Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены. Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку. На карточке токена отображается название, описание, ID токена и адрес контракта, а также ссылки, по которым эту работу можно купить. Когда мы изучаем обновления на платформе, становится ясно, что Adobe возлагает большие надежды на Behance. Соответственно, у нас, как у пользователей этой платформы, появляется все больше и больше инструментов, которые дают возможность вдохновляться и делиться своим творчеством с аудиторией. Делитесь своей работой, вдохновляйтесь и подписывайтесь на аккаунты автора на Behance, Instagram или Facebook. Перевод статьи uxplanet.org
Как вставить прототип в Behance
Не все знают что можно вставить прототип на Биханс. Правда не всем это и нужно 🙂
Прототипы, показывают объемы детализации работы. Это очень удобно и наглядно. Лучше прототипов лишь видео презентация или анимация.
А еще лучше работающее приложение или проект.
Тем не менее, если остались лишь силы на вставку рабочего прототипа из InVision или Marvel, то во втором случае это реально сделать. Как сделать подобное из инвижион я не разобрался, но думаю что это тоже реально.
Инструкция
Заходим в прототип, находим кнопку Share и после клика копируем код из таба Embed
А затем уже вставляем полученный код в Behance
p.s.: Хочется заметить, что прототип, конечно же круто, но пожалуй, он должен не заменять, а дополнять проделанную презентацию в виде анимаций и видео. Сугубо для людей, желающих потыкать и поглядеть все досканально. Все таки люди любят посмотреть все глазами и по-быстрому, а не сидеть и разбираться что где можно сделать, а что просто картинка.
Анимация в Figma от 0 до постинга на Behance
Новичок в веб-дизайне? Восхищаешься красивыми анимированными кейсами на Behance, но не знаешь, как сделать анимацию и добавить видео в свою презентацию? Тогда эта статья специально для тебя: я пошагово расскажу, что надо делать!
Проблемы
При подготовке презентации своего нового проекта для Behance я столкнулась с такими проблемами:
- Идея моей анимации слишком сложная, и ни один тьюториал не смог мне подсказать, как воплотить её в реальность;
- Видеохостинг Vimeo изменился и перестал делать, как я хочу;
- На Behance видео постится с дефолтным плеером и выглядит некрасиво.
Моя анимация
Я делала лендинг в рамках учебного проекта Логомашины. Тема «мужская парфюмерная вода Feromon 47». На Behance уже, как минимум, больше сотни концептов на эту тему! Поэтому мне необходимо было сделать что-то необычное и, конечно же, создать качественную интересную анимацию. Вот самая сложная из них:
Как сделать
Конечно, мне проще было сделать её в After Effects, но у меня была идея-фикс научиться, наконец, анимации именно в Figma!
Шаг 1. Придумываем крутую идею для нашей анимации. Если в голову ничего крутого не приходит, то смотрим референсы на https://www.awwwards.com/, например. Я подсмотрела там идею для анимации заголовков, но, в итоге, от неё отказалась.
Моя идея была такова: пользователь видит, что это блок с описанием нот аромата, наводит мышку на любую из картинок, и видит гифку в треугольнике по центру, и более-менее понимает, что это за растения, и как может пахнуть Feromon 47, т.е. идея сделать визуализацию аромата.
Шаг 2. Делаем макет будущей анимации в Figma.
Шаг 3. Далее смотрим на Youtube тьюториалы по анимации в Figma в зависимости от того, что и как именно хотим заанимировать, например:
Шаг 4. Получаем просветление и понимание того, как нам надо дорисовать макет для анимации, чтобы он работал, и делаем это.
Шаг 5. Заходим в режим прототипа и проводим стрелочки для соединения нужных фреймов и настраиваем параметры нашей анимации. Я очень долго тыкалась в настройках, пробуя различные варианты, потому что результаты получались очень неожиданными, а тьюториалы я не смотрела.
Шаг 6. Добиваемся того, чтобы наша основная анимация работала, как было задумано. Например, в своей анимации я выбрала мгновенную (instant) анимацию по наведению (while hovering), чтобы при наведении мышки на каждую из фотографий гифка в треугольнике сменялась мгновенно. Приятным и неожиданным сюрпризом для меня стало то, что гифки реально проигрываются.
Шаг 7. Ни в коем случае не пытаемся проделать то же самое с заголовками — ничего не получится, проверено! Если у вас такая же многоуровневая анимация, как в моём проекте, то для заголовков необходимо использовать уже другой вид анимации в Figma — анимацию через компоненты. Спасибо кураторам Логомашины за то, что подсказали мне поискать тьюториалы именно на эту тему:
Шаг 8. Получаем новое просветление, в моём случае готовим 2 варианта заголовков: невидимые (0% непрозрачности) и видимые (100% непрозрачности), потому что заголовки должны мягко проявляться. Выделяем их вместе и оборачиваем в компоненты (create multiple components). Затем создаём наши варианты (create as variants). Я назвала варианты «Default» и «Normal» соответственно.
Шаг 9. Настраиваем несложную анимацию в режиме прототипа.
Шаг 10. Кликаем на варианты «Default» и с зажатым Alt дублируем их в нужные места нашего макета с основной анимацией. Лично я сперва продублировала их на отдельный фрейм для удобства и потом уже с него перетащила эти невидимые заголовки на места макета, где должна была проявиться моя анимация заголовков. Фото не прикладываю, потому что они, всё равно, невидимые.
Шаг 11. Готово! Вы прекрасны! В режиме прототипа проигрываем нашу анимацию, наслаждаемся и пожинаем лавры.
Подготовка видео
Шаг 1. В режиме full screen делаем запись экрана, например, с помощью Loom (расширение для Google) и загружаем видео на компьютер.
Шаг 2. Далее в Photoshop обрезаем наше видео, а также кадрируем. Это можно сделать и в онлайн-редакторах, но не все они кадрируют или показывают изображение покадрово, поэтому теперь я делаю это в Photoshop.
Шаг3. Лично у меня в моей анимации возник неприятный момент: при переносе курсора мыши с одной фотографии на другую при попадании курсора на пустую область экрана в треугольнике стало на миг появляться дефолтное изображение треугольника. Поэтому я вырезала эти кадры из видео, и проблема решилась!
Шаг 4. Также я ускорила своё видео до 250% и экспортировала в mp4.
Выгрузка видео на видеохостинг
В этот раз именно выгрузка на видеохостинг затормозила мой процесс и повергла в уныние, потому что всё на Vimeo изменилось, и на бесплатном тарифе у меня ничего не получалось. Перед сном я почитала «Размышления» Марка Аврелия и смирилась с тем, что в моей презентации не будет анимации, ведь, всё равно, «все мы скоро распадёмся на первостихии, и память о нас сотрётся». Однако наутро всё волшебным образом получилось!
Для того, чтобы на Behance наше видео было нужного размера и стало зацикленным, необходимо сперва выгрузить его на какой-нибудь видеохостинг. Я использую Vimeo, потому что там можно бесплатно выставить свои опции для видео.
Хочу предупредить, что интерфейс Vimeo изменился плюс теперь из России им можно полноценно пользоваться только с VPN!
Для того, чтобы выставить нужные опции, заходим справа в расширенные настройки (advanced settings).
Далее, слева, в разделе General убираем галочку «People can add to collections».
Идём в раздел Embed и убираем галочки «Like», «Watch later», «Share». Там же убираем галочки с «Profile picture», «Title», «Byline».
Это нужно для того, чтобы на Behance мы не видели дефолтный плеер с нашей аватаркой, названием видео, нашим именем, т.е., чтобы было красиво. Сохраняемся. Если найдём кнопку Save. Потому что, лично у меня, она постоянно куда-то мигрирует. Например, она может проявиться в разделе General. Главное, без паники, как учит нас Марк Аврелий!
Выгрузка видео на Behance
Шаг 1. Копируем ID нашего видео (номер видео виден в ссылке прямо над видео). Вставляем ID в следующий embed-код перед знаком вопроса:
Шаг 2. Шагаем на Behance и в нашей презентации выбираем Embed и вставляем туда наш код.
Готово! Вы восхитительны! Любуемся нашим зацикленным видео без разноцветного плеера, аватарки ит.д. и пожинаем лавры!
Мою итоговую презентацию со всеми анимациями можно посмотреть здесь.
Благодарю за внимание и желаю вдохновения и качественных анимашек!
- Figma
- анимация
- анимация в Figma
- обработка видео
- выгрузить видео
- загрузить видео на Behance
- embed
- презентация проекта
- презентация проекта на Behance
- Behance
6 важных обновлений Behance, которые сделают ваше портфолио интересней
В жизни каждого дизайнера наступает момент, когда он набирается смелости, чтобы показать труды своей деятельности миру. Кто-то собирает сайт-портфолио, кто-то выкладывает шоты на dribbble, но сложно найти дизайнера, который ничего бы не слышал про Behance. Для многих Behance является дефолтной площадкой для портфолио, несмотря на все свои ограничения. Более того, Беханс даже успел стать именем нарицательным. Костыли площадки существовали на протяжении долгого времени, к ним привыкли. Они воспринимаются чем-то само собой разумеющимся и сразу учитываются при разработке кейса. Но за последние пару лет Adobe внёс столько изменений и фич в площадку, сколько не было за предыдущие 10 лет. Давайте разбираться с самыми интересными обновлениями.
Интеграция кликабельных прототипов
Встраивать прототипы из InVision или Marvel можно было и раньше, ничего новаторского в этой фиче нет, но с обновлением функционала прототипов в Figma, кейсы можно украшать макетами с анимацией и ховерами. Уже лучше, чем просто джипеги, не правда ли?
Чтобы добавить прототип в кейс, вам необходимо залинковать макеты в Figma, поколдовать с анимацией переходов, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Встроить мультимедиа» или «Встроить прототип». Аналогичный алгоритм присутствует и у Adobe XD, но лично мне привычнее работать с Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, поскольку доступ к исходнику можно получить через инспектор кода. Во избежание этого, макеты можно перенести в новый документ, запретить копирование объектов либо растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалочку в исходнике.
Встраивание 3D-объектов
Этот функционал поможет дизайнерам интерьера показать комнату изнутри, дав возможность зрителю прогуляться с помощью 3D -тура. Данная функция также подойдёт, если нужно вставить 3D — объект. Например, если необходимо показать дизайн предмета, который вы задизайнили. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.
Алгоритм действий тот же, что у прототипов. К тому же список источников для импорта достаточно обширный:
Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp, Cincopa, Codepen, Creddle, Dailymotion, Dartfish, Eko, Facebook video posts, Figma, Flixel, Flowvella, Genial.ly, Gfycat, Giphy, Google Maps, Google VR, Imgur, Interlude, Itch.io, InVision App, Issuu, JotForm, Knightlab, Kuula 360, Mailjet, Marvel, Matterport, Mixcloud, Prezi, ProttApp, Scribd, Shapeways, Sketchfab, Sirv.com, SlideShare, SoundCloud, Soundgine, Spotify, Tableau, Twitch, Twitframe, Verold, Vimeo, Vizor, Wirewax, Wufoo, Youtube, Juxtapose.
Приятным сюрпризом было увидеть в этом списке Figma. Несмотря на то, что это прямой конкурент Adobe XD, который захватил значительную часть рынка, Adobe допускает, что многим дизайнерам удобней работать именно с Figma.
Возможность вложить файл в кейс
При создании кейса вы можете дать ссылку на скачивание файла. У вас есть возможность указать ссылку для покупки шрифта, который использовался в кейсе или ui-kit, который вам не жалко отдать джунам для экспериментов. Если вы добавите файл при помощи этого способа, на превью вашей работы появится иконка скрепки, которая ведёт на скачивание файла.