Загрузчик фото Icons8: единый стиль для интерфейсов и рекламы

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

Что такое Icons8 и в чём он силён?

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

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

Как работает загрузчик фото Icons8?

1. Просмотрите библиотеку на Icons8. Используйте вкладки по типам: иконки, иллюстрации, фото.
2. Выберите стиль и придерживайтесь его на протяжении всего проекта.
3. Откройте страницу материала и скопируйте ссылку из адресной строки.
4. Откройте загрузчик фото Icons8 на ZTOOLZ, вставьте ссылку и отправьте.
5. Скачайте и проверьте файл. Посмотрите размер, прозрачность и формат.
6. Добавьте его в папку материалов, указав в имени файла название стиля и ID.

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

Спланируйте набор стилей до загрузки

Набор стилей – это короткий список правил, который сохраняет единообразие материалов. Он занимает десять минут и экономит часы.

• Название стиля. Например, плоский красочный стиль иллюстраций плюс подходящий стиль линейных иконок.
• Цветовая палитра. Перечислите три-четыре цвета бренда. Проверьте, позволяют ли материалы менять цвета.
• Сетка размеров иконок. Выберите 24, 32 или 48 пикселей и используйте только её.
• Применение иллюстраций. Иллюстрации – для первых экранов и пустых состояний; иконки – для кнопок и меню.
• Обработка фото. Если добавляете фото, везде применяйте одну цветокоррекцию, одинаковое скругление углов и оверлей.

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

Материалы Icons8 в UI-дизайне

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

Иконки

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

Иллюстрации

Используйте их в точках, где пользователь делает паузу: онбординг, пустые списки, сообщения об успехе и страницы ошибок. Не размещайте их на плотных экранах вроде таблиц и дашбордов.

Фото

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

Что касается цвета и шрифтов в UI, хорошим дополнением будет наше руководство по основам цвета и типографики для дизайнеров.

Материалы Icons8 в маркетинге

В маркетинге единообразие превращается в узнаваемость. Аудитория должна узнавать ваш бренд по одному только стилю.

• Посты в соцсетях: создайте шаблон с фиксированным местом для иллюстрации и короткого заголовка. Чередуйте иллюстрации из одного семейства стиля.
• Презентации: используйте иконки, чтобы превращать маркированные списки в наглядные ряды. Три-четыре иконки лучше стены текста.
• Шапки писем: одна лёгкая иллюстрация загружается быстрее тяжёлого фото.
• Лендинги: сопровождайте преимущества подходящими иконками, а сам продукт показывайте на настоящем скриншоте.
• Реклама: оставьте один чёткий образ и короткую строку текста. Иллюстрация может выделяться в лентах, полных фотографий.

Идеи по компоновке рекламы читайте в нашем руководстве как создавать рекламные креативы.

Форматы файлов и советы по качеству

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

• Скачивайте PNG в размере минимум вдвое больше отображаемого, чтобы изображение было чётким на современных экранах.
• Проверяйте прозрачные PNG на однотонном фоне, чтобы заметить ореолы по краям.
• При использовании SVG в вебе оптимизируйте его и задавайте ширину и высоту, чтобы макет не прыгал.
• Храните оригиналы без изменений и работайте с копиями.

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

Материалы Icons8 поставляются с конкретными условиями, и для некоторых способов использования может требоваться указание авторства, а другие могут быть запрещены, например распространение материалов в виде набора или использование их как главного элемента продаваемого продукта.

Основные условия простым языком смотрите в материале стоковые материалы и лицензии: объяснение.

Частые ошибки

• Смешивать линейные и залитые иконки в одном меню.
• Использовать три разных стиля иллюстраций в одной презентации.
• Растягивать иконку под размер блока.
• Выбирать модный стиль, который через год будет выглядеть устаревшим.
• Забывать проверять требования об указании авторства.

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

Можно ли скачивать иллюстрации и иконки, а не только фото?

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

Почему выбирать Icons8, а не смешивать библиотеки?

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

Можно ли перекрашивать скачанные материалы?

Файлы SVG можно перекрашивать в векторном редакторе или в коде. У PNG и JPG возможности редактирования цвета ограничены, поэтому выбирайте SVG, когда цвета важны.

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

Это зависит от материала и условий лицензии. Проверьте страницу материала и добавьте указание авторства, если оно требуется.

Подходит ли Icons8 для печати?

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