Иконки интерфейса
Начните с одной формы и одного действия. Проверьте символ в маленьком размере: мелкие вырезы и близко стоящие линии могут слиться. Для набора задайте одинаковую толщину штриха.
Векторная графика
с Recraft
От простой формы до выразительной иллюстрации. Создавайте графику, которую можно масштабировать и адаптировать к разным носителям.
Попробовать
Форма, которую
можно развивать.
Вектор нужен там, где изображение должно оставаться чётким при изменении размера: в интерфейсе, на упаковке, в презентации или на большом носителе. Recraft помогает начать с описания и получить основу для дальнейшей работы с графикой.
Думайте не только о сюжете, но и о конструкции. Толщина линии, число цветов, характер углов и количество деталей влияют на то, насколько легко элемент будет встроить в существующую систему. Примеры выше показывают визуальные направления; на странице они представлены растровыми превью.
Подбирайте сложность
под масштаб.
Иллюстрации для продукта
Определите геометрию, палитру и плотность деталей. Оставьте акцент на главном объекте, чтобы иллюстрация читалась рядом с текстом и не спорила с интерфейсом.
Элементы айдентики
Исследуйте силуэты и композиции, затем доработайте выбранную концепцию. Для знака отдельно проверяйте узнаваемость, использование в одном цвете и различимость на разных фонах.
От маленького знака
до большой истории.
У набора иконок и продуктовой иллюстрации разные задачи. Сравните, как количество деталей, цвет и толщина линии меняют характер графики.
Система простых символов
Одинаковая толщина линий и один акцентный цвет объединяют разные предметы.
Иллюстрация для продукта
Крупные цветовые плоскости связывают персонажа и элементы интерфейса в одну композицию.
Примеры Recraft показаны в растровом превью. Редактируемость контуров проверяйте в экспортированном векторном файле.
Вектор или растр?
| Задача | Векторная графика | Растровое изображение |
|---|---|---|
| Изменение размера | Контуры сохраняют чёткость. | Результат зависит от исходного разрешения. |
| Редактирование | Работа с формами, заливками и линиями. | Работа с пикселями и локальными участками. |
| Типичная задача | Иконки, знаки, плоские иллюстрации. | Фотографии, сложные фактуры, живописные сцены. |
Если главную роль играют фотографический свет и текстура, начните с генератора изображений. Если важны контуры и масштабирование — выбирайте вектор.
Проверка, которая
экономит переделки.
До генерации
Опишите объект, число цветов, наличие обводки и желаемую детализацию. Укажите, нужен ли изолированный элемент или завершённая композиция. Для иконки лучше сразу задать простой фон и крупный силуэт.
После генерации
Откройте результат в редакторе и проверьте контуры, лишние элементы и пересечения. Посмотрите графику на светлом и тёмном фоне. Важные надписи и логотипные формы требуют отдельной ручной проверки.
Чек-лист для SVG
- Изображение читается в минимальном размере.
- Палитра соответствует вашему проекту.
- Нет случайных мелких объектов за пределами композиции.
- Поля и пропорции согласованы с соседними элементами.
- Экспорт проверен в том приложении, где будет использоваться.
От запроса к SVG:
что важно сохранить
Опишите правила формы
В запросе для векторной графики полезно указывать не только предмет, но и способ его изображения. «Велосипед» допускает десятки трактовок. «Боковой силуэт велосипеда, два цвета, равномерная обводка, без градиентов и теней» задаёт более понятную конструкцию. Для серии повторяйте эти правила и меняйте только объект.
Не пытайтесь получить одинаково подробную иллюстрацию для всех размеров. Знак на упаковке и маленькая иконка могут происходить из одной идеи, но нуждаются в разном количестве деталей. Проверка в целевом масштабе важнее впечатления от большого превью.
Пример запроса для набора
«Набор простых линейных иконок для сервиса доставки: посылка, маршрут, склад и получатель. Одинаковая толщина линий, скруглённые окончания, спокойная двухцветная палитра, изолированные объекты, без текста».
После генерации сравните размеры силуэтов и внутренние поля. Геометрически одинаковая рамка ещё не означает, что все элементы выглядят одинаково крупными.
Как собрать набор иконок,
а не случайную коллекцию
Одна оптическая сетка
Поставьте иконки рядом на одинаковых фонах. Круглый предмет, вытянутая стрелка маршрута и квадратная коробка воспринимаются по-разному даже при одинаковых числовых размерах. Корректируйте визуальный вес и расстояния, чтобы набор выглядел сбалансированно.
Проверка в интерфейсе
Посмотрите элементы в фактическом размере кнопки или карточки. Например, для макета с иконками 24 px оцените именно такой размер, а не только увеличенное изображение. Узкие просветы, двойные контуры и мелкая штриховка должны оставаться различимыми.
Единая логика цвета
Определите основной цвет, акцент и правила заливки. Если один элемент выполнен контуром, а другой — плотным пятном, различие должно помогать пользователю, а не возникать случайно. Проверьте набор в монохроме и на обоих рабочих фонах.
Передача векторного файла
в работу
Проверьте сам файл
Откройте SVG в редакторе, где его будут дорабатывать. Убедитесь, что графика состоит из редактируемых форм, а не из встроенного растрового изображения. Проверьте обрезку, расположение элементов и отсутствие случайных объектов далеко за границей композиции. Такие объекты могут менять видимый размер при импорте.
Если рисунок содержит текст, согласуйте, должен ли он оставаться редактируемым. Текстовые объекты могут зависеть от наличия шрифта на другом компьютере; контуры сохраняют форму букв, но усложняют изменение надписи. Это решение лучше принять до передачи файла.
Приложите понятное превью
Подготовьте изображение с ожидаемым видом графики и укажите назначение: интерфейс, упаковка, печатная иллюстрация или презентация. Названия файлов должны помогать найти нужный элемент. Отдельно обозначьте версии для светлого и тёмного фона, если они различаются.
Для печати уточните требования подрядчика к формату и цвету. Сам факт наличия SVG не гарантирует готовность к производству. Если нужно сначала показать, как графика будет выглядеть на предмете, используйте мокап Recraft, сохранив отдельный исходник дизайна.
Вопросы и ответы
Что полезно знать перед началом работы.
Создавайте
с Recraft
Ваша следующая идея заслуживает хорошего изображения.
Попробовать