Добавляем GIF в портфолио Freelance.ru

Для меня это стал самый популярный вопрос в личку на сайте freelance.ru, я не жадный, но скажу честно - я устал отвечать всем и решил сделать статью.

Как же добавить анимацию в портфолио на freelance? Ответ на самом деле на поверхности сайта и доступен был всегда, но для внимательных.

Давайте начнем с того, зачем вообще нужна анимация?

1. Анимированное портфолио привлекает больше внимания.

2. В анимированном изображении можно донести больше информации.

3. Можно использовать как рекламу.

4. Думаю что ест и другие варианты.

Пример использования анимированного портфолио можно посмотреть у меня в аккаутне: freelance.ru/trunovtom

Я сделал все достаточно просто - разработал анимацию с эффектом пролистывания каждой работы, то есть клиент может просмотреть сверху вниз весь сайт (страницу конечно же), не заходя в работу.

Так же есть пример использования анимации с моим небольшим развлечением:

Выглядит эффектно и неожиданно, когда ты просто листаешь портфолио, а тут мужик или девушка выходит прям в картинке :)

GIF анимацию я создавал в Photoshop из различных кадров, снимали на телефон, разбивали по кадрам, ускоряли в фотошоп и создавали GIF, НО нам так такой GIF не нужен, нам нужен формат APNG (animation PNG), он не воспроизводится на компьютере, а работает только в браузерах и о возможности его загрузить написано на самом же сайте Freelance.ru:

1. Переходим в редактирование портфолио

2. Выбираем нужную работу:

3. Читаем внимательно и загружаем изображение APNG

Теперь все готово. Изображение APNG можно загрузить только к превью работы, сама же работа не может быть анимированной. Для тех, кто дочитал до конца, небольшой лайфхак: APNG можно загружать не только к портфолио: но и в. превью профиля (большое изображение сверху в вашем профиле), отлично подходит для рекламы, есть возможность передать больше информации.