Подбор иллюстраций для дизайна. Где искать

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

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

В этом уроке разбираем, где искать иллюстрации для дизайна и как адаптировать их под свои проекты. Рассмотрим основные источники векторной графики, особенности работы с форматами AI, EPS и SVG, а также процесс подготовки иллюстраций для использования в Фигма.

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

Материалы урока:

• Freepik (ныне Magnific) - magnific.com
• UnDraw - undraw.co/illustrations
• DrawKit - www.drawkit.com/free-illustrations
• StorySet - storyset.com/search
• Конвертор - convertio.co/ru/cdr-converter

Для начала разберёмся, чем иллюстрации отличаются от обычных изображений или фотографий.

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

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

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

Кроме этого, векторные изображения можно редактировать: изменять цвета, отдельные элементы, форму и адаптировать под конкретный проект.

На этом сервисе можно найти большое количество разных материалов:

• фотографии;
• растровые изображения;
• векторную графику;
• иллюстрации.

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

Чтобы поиск был точнее и легче, можно использовать фильтры:

• выбрать формат векторной графики;
• оставить только бесплатные материалы;
• выбрать подходящий тип изображения.

unDraw — можно найти простые векторные иллюстрации. Особенность сервиса — возможность сразу менять основной цвет иллюстраций и адаптировать их под цветовую палитру проекта.

DrawKit предлагает более нестандартные иллюстрации.На сервисе есть как бесплатные, так и платные материалы. Для скачивания может потребоваться регистрация.

Storyset — здесь также можно найти готовые SVG-иллюстрации. Материалы можно скачивать и использовать в проектах, предварительно адаптируя их под нужную стилистику.

При скачивании иллюстраций можно столкнуться с тем, что файлы имеют форматы AI или EPS. Это форматы Adobe Illustrator, которые предназначены для работы в одноимённом редакторе. Фигма напрямую не всегда умеет работать с такими файлами.

Чтобы использовать такие иллюстрации можно воспользоваться конвертацией. Например, файл можно преобразовать в формат SVG. Это тоже формат векторной графики, но который корректно поддерживается Фигмой. Для этого можно использовать онлайн-конвертеры. Загружаем файл, выбираем формат SVG, запускаем конвертацию и скачиваем готовый файл, который теперь можно открыть в Фигме.

После загрузки SVG в Фигму изображение становится редактируемым объектом. Можно:

• менять размеры без потери качества;
• изменять цвета;
• удалять ненужные элементы;
• редактировать отдельные части изображения.

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

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

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

Например, это могут быть:

• объёмные предметы;
• 3D-иконки;
• объёмные композиции;
• стилизованные объекты.

Такие элементы удобно использовать для создания акцентов в дизайне.Не стоит строить весь сайт только на 3D-иллюстрациях, но они хорошо подходят для отдельных блоков, декоративных элементов и иконок. Главное правило — 3D-объекты должны соответствовать: тематике проекта, смыслу блока, общей атмосфере дизайна.

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

Чтобы сделать иллюстрацию частью своего проекта, её стоит адаптировать, например:

• поменять цветовую гамму;
• убрать лишние элементы;
• добавить новые детали;
• объединить несколько элементов из разных наборов;
• привести стиль к своей концепции сайта.

Задача дизайнера — не просто найти готовый элемент, а встроить его в визуальную систему проекта.

Перейти к следующему уроку