Загрузчик IconScout: иконки, 3D и файлы Lottie

Загрузчик IconScout даёт иконки, 3D-иллюстрации и анимации Lottie по ссылке на материал, так что вы можете собрать аккуратный интерфейс или презентацию, не покупая полный тариф ради нескольких файлов. В этом руководстве – о каждом типе файлов, о том, какой формат выбрать для какой задачи, и о том, как сохранить визуальное единство всего проекта.

Что можно получить на IconScout?

IconScout – маркетплейс и библиотека дизайнерских материалов. Три категории, которые интересуют большинство людей:

• Иконки: отдельные иконки и наборы в разных стилях, например линейном, залитом, дуотоне и плоском цветном.
• 3D-иллюстрации: отрендеренные объекты и сцены, которые добавляют лендингам и презентациям глубину.
• Анимации Lottie: небольшие анимированные файлы для приложений, сайтов и презентаций: индикаторы загрузки, онбординг, пустые состояния и микроанимации.

Есть и иллюстрации, стикеры и другие материалы, но иконки, 3D и Lottie составляют основу большинства запросов.

Какой формат файла выбрать?

Именно на форматах новички теряют больше всего времени. Вот краткая версия.

SVG для иконок и плоских иллюстраций

SVG – векторный формат. Он масштабируется до любого размера без размытия, весит совсем немного, а цвета можно менять в коде или в дизайнерской программе. Используйте SVG для иконок на сайтах, интерфейсов приложений, логотипов на макетах и подготовки к печати.

PNG для быстрой вставки

PNG – растровое изображение с прозрачностью. Он подходит для слайдов, постов в соцсетях и писем, где не нужно редактировать форму. Экспортируйте в размере минимум вдвое больше отображаемого, чтобы изображение оставалось чётким на экранах с высокой плотностью пикселей.

JSON для анимаций Lottie

Анимация Lottie – это файл JSON, описывающий движение. Веб-страница или приложение проигрывает его с помощью небольшой библиотеки-плеера. Он гораздо легче GIF и остаётся чётким при любом размере. В некоторых библиотеках есть и версия dotLottie – сжатый пакет.

Выбор для 3D

3D-иллюстрации обычно поставляются в PNG с прозрачным фоном, иногда с дополнительными ракурсами или цветовыми вариантами. Они тяжелее иконок, поэтому сожмите их перед использованием на веб-странице.

Как пользоваться загрузчиком IconScout

1. Найдите материал на IconScout. Сначала используйте фильтр по типу: иконки, 3D, Lottie или иллюстрации. Затем добавьте ключевое слово, например payment, shopping cart или success.
2. Откройте страницу материала и проверьте стиль, название набора и доступные форматы.
3. Скопируйте ссылку из адресной строки.
4. Откройте загрузчик IconScout, вставьте ссылку и отправьте.
5. Скачайте файл и распакуйте его, если он пришёл набором.
6. Проверьте его в своём дизайне, прежде чем скачивать ещё. Одна иконка нужного стиля ценнее двадцати неподходящих.

Если вы предпочитаете свободно изучать всю библиотеку, есть также доступ к IconScout через аккаунт, который открывается с помощью расширения, защищённого браузера или облачной версии.

Как сохранить единство набора иконок

Ошибка, из-за которой интерфейсы выглядят любительскими, – смешение стилей. Следуйте этим правилам.

• Одно семейство на проект. Выберите набор и скачивайте из него. Если нужной иконки в наборе нет, ищите тот же тег стиля, а не просто тот же предмет.
• Одинаковая толщина линии. Сравнивайте линейные иконки 2 px с линейными иконками 2 px. Не смешивайте тонкие и жирные линии.
• Одинаковый стиль углов. Скруглённые со скруглёнными, острые с острыми.
• Одинаковый размер сетки. Размещайте все иконки на сетке 24 px или 32 px, чтобы упростить выравнивание.
• Одна цветовая логика. Используйте один цвет или заданную двухцветную палитру, связанную с брендом.

Как правильно использовать анимации Lottie

Lottie легко использовать чрезмерно. Несколько небольших анимаций оживляют интерфейс; десять одновременно создают шум.

• Используйте анимацию, чтобы объяснять: галочка после оплаты, индикатор загрузки, пока поступают данные, мягкое движение в пустом состоянии.
• Делайте циклы короткими и спокойными. Стремитесь к движению, которое поддерживает содержание, а не конкурирует с ним.
• Учитывайте пользователей, предпочитающих уменьшенное движение. Предусмотрите статичную версию или ставьте анимацию на паузу для них.
• Проверяйте размер файла. Простой файл Lottie занимает несколько килобайт; сложный, со множеством слоёв, может быть намного больше.
• Подгоните цвета анимации под свой бренд, прежде чем выпускать её.

Если вы работаете с анимацией для видео, наше руководство по шаблонам Motion Array описывает другой подход к анимационным материалам.

3D-иллюстрации в реальных макетах

3D-графика привлекает внимание, но может выглядеть шаблонно, если использовать её только как украшение. Применяйте её там, где она помогает донести мысль: в первом экране с одним сильным объектом, в карточке функции с узнаваемым образом или на титульном слайде презентации.

Сохраняйте мягкую тень, единое направление света и ограниченную палитру. Если на странице уже есть фотографии, не добавляйте поверх них 3D. Выбирайте один визуальный язык на страницу.

Лицензия и указание авторства

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

Подробнее об основных условиях можно прочитать в материале стоковые материалы и лицензии: объяснение.

Практические примеры

Страница с ценами: используйте набор линейных иконок для пунктов списка функций, одну 3D-иллюстрацию для первого экрана и крошечную галочку Lottie для состояния подтверждения.

Питч-дек: используйте иконки PNG из одного набора на каждом слайде и 3D-объект на обложке. Анимации не нужны, так что Lottie пропустите.

Онбординг мобильного приложения: три файла Lottie, по одному на экран, с одинаковой палитрой и одинаковой скоростью движения.

Частые вопросы

Можно ли скачивать анимации Lottie в виде файлов JSON?

Да, материалы Lottie предоставляются в формате JSON, а иногда и в сжатом формате dotLottie. Их проигрывают с помощью библиотеки-плеера Lottie на веб-странице или в приложении.

Что использовать для иконок: SVG или PNG?

Используйте SVG, если иконку будут менять в размере или цвете, как на сайтах и в приложениях. Используйте PNG для быстрой вставки в слайды, документы и посты, где нужно только изображение.

Можно ли менять цвета скачанной иконки?

В SVG можно, в любом векторном редакторе или в коде. В PNG возможности смены цвета ограничены. Цвета Lottie можно менять в инструментах для редактирования Lottie.

Нужно ли указывать авторство?

Это зависит от лицензии на материал. Проверьте на странице материала требования об указании авторства и сохраните название набора, чтобы при необходимости сослаться на него.

Подходят ли 3D-иллюстрации для печати?

Могут подойти, если скачать версию в высоком разрешении. Сравните размер в пикселях с размером печати и перед отправкой в типографию посмотрите наше руководство о файлах для печати и для веба.