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