Как найти иллюстрацию и превратить её в гифку. Storyset

Storyset — англоязычный сервис. Он бесплатный и работает без VPN, не требует регистрации. Прежде чем открывать сайт, составьте список английских ключевых слов, по которым будете искать иллюстрации, и выпишите HEX-коды цветов вашего бренда.

Как сделать гифку из иллюстрации

Откройте сайт. В строке поиска введите ключевое слово на английском языке, например, «design». По мере ввода сервис будет показывать подсказки для уточнения поиска.

Результаты поиска показаны в виде сетки. Слева находится панель фильтров и настроек. С её помощью можно выбрать иллюстрации только в определённом стиле:

— синим цветом (Rafiki) обозначены плоские иллюстрации с простой композицией,

— зелёным цветом (Bro) отмечены иллюстрации в стиле комикса или мультфильма с чёрными контурами объектов,

— фиолетовым цветом (Amico) выделены изометрические иллюстрации, показывающие сцены под углом,

— оранжевым цветом (Pana) обозначен плоский стиль, где часть линий нарисована от руки,

— жёлтым цветом (Cuate) отмечены изображения с искажёнными пропорциями персонажей.

В разделе «Background» на левой панели есть три кнопки, отвечающие за задний фон иллюстрации.

«Hidden» — полностью убирает задний фон.

«Simple» — упрощает фон до геометрической фигуры.

«Detailed» — показывает максимум возможных деталей.

Не у всех стилей изображения заданы три варианта фона, например, детализацию невозможно включить у Bro и Amico.

Найдя подходящую анимацию, наведите курсор на неё и в правом верхнем углу нажмите на иконку волшебной палочки. Откроется окно анимации.

По его центру находится поле предварительного просмотра, слева — панель слоёв, справа — панель анимации. Для начала настройте цвет иллюстрации. Нажмите на кнопку «Change color» и выберите оттенок или введите HEX-код цвета.

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

Выберите нужный слой на панели слева, справа откроются настройки анимации. В разделе «Entrance» выберите способ появления элемента. После этого станут доступны следующие настройки:

— стиль движения (toon — маятник, linear — равномерный, easy-in и easy-out — с замедление в начале и конце движения соответственно),

— скорость появления, от 0,5 до 15 секунд,

— задержка анимации, помогает выстроить порядок появления.

Поставьте галочку напротив «Animate children», если хотите, чтобы элементы слоя появлялись по отдельности, а не единым изображением.

Ниже находится раздел «Looping». Он отвечает за постоянные эффекты анимации, которые включатся после появления слоя. Выберите один из пяти вариантов и настройте его скорость (duration). Настройка delay отвечает за задержку анимации и не будет применяться к гифкам или видеофайлам.

В правом верхнем углу есть три кнопки: «Reset», «Randomize!» и «Play». Первая позволяет сбросить все настройки, кроме цвета, и вернуться к исходной иллюстрации. «Randomize!» настраивает анимацию всех слоёв случайным образом. Кнопка «Play» включает предпросмотр.

Когда настройка закончена, нажмите кнопку «Export», чтобы скачать готовую анимацию. Здесь можно изменить цвет фона, чтобы иллюстрация бесшовно слилась с веб-страницей. Поменять размер гифки, максимальный — 800×800 пикселей. Анимацию можно скачать в формате gif или mp4. Файл получит то же название, что и выбранная вами иллюстрация.

После скачивания откроется окно с информацией об атрибуции. Иллюстрациями сервиса можно пользоваться бесплатно при условии, что вы размещаете ссылку на сайт.

Вот такая гифка у нас получилась.