Единый набор иконок с ИИ: одна мастер-иконка, одиннадцать родственных, один стиль

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

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

Запишите правила до первого промпта

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

1. 01Сетка. Квадратный холст, например 24 на 24 единицы, с отступом 2 единицы, за который ничто не выходит, кроме как намеренно. Каждая иконка рисуется на этой сетке и масштабируется только в конце.
2. 02Линия. Одна толщина, например 2 единицы, со скруглёнными концами и скруглёнными соединениями. Контурные и залитые иконки в одном наборе не смешиваются; выберите что-то одно.
3. 03Радиус углов. Один радиус для всех прямоугольников, например 3 единицы на внешних углах. Календарь с мягкими углами рядом с иконкой почты с острыми - самая частая улика.
4. 04Ключевые фигуры. Круг, квадрат и широкий прямоугольник, которые занимают примерно одинаковую площадь, чтобы круглая и квадратная иконки казались глазу одного размера.
5. 05Палитра. Один цвет линий на весь набор и не больше одного акцента для активного состояния. Без градиентов, без теней, без второго цвета линий для украшения.
6. 06Перспектива. Плоско и анфас. Без видов в три четверти, без изометрического наклона.

Сгенерируйте одну мастер-иконку, и только одну

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

Для этого подходят модели двух видов из каталога. Recraft 20B SVG описана как модель, создающая векторные SVG-изображения для масштабируемой графики и иконок, а Recraft V4.1 Text to Vector - как создающая редактируемые изображения в векторном стиле по промпту. Если вам удобнее начать с растрового рисунка с чистым вырезом, Ideogram V3 Generate Transparent возвращает изображения с прозрачным фоном. Запустите промпт много раз и оценивайте результаты по карточке, а не по вкусу. Оставьте ту мастер-иконку, которая лучше всего следует правилам, даже если другой вариант симпатичнее.

Выведите родственные иконки из мастера

Именно здесь разваливается большинство наборов: одиннадцать новых промптов дают одиннадцать новых трактовок. Вместо этого сделайте мастер образцом для всего, что дальше. В каталоге для этого есть прямой путь. Recraft V4 Create Style превращает референсы в многоразовый ID стиля, а Recraft V4 Style Text to Vector рисует векторную графику по промпту и этому ID стиля или прямо по референсам. Дайте ей мастер-иконку, а когда появятся две-три удачные родственные, добавьте и их как референсы, чтобы стиль учился на маленькой семье, а не на одном рисунке.

Делайте каждый промпт для родственной иконки скучным. То же предложение, что и для мастера, меняется только предмет: колокольчик, лупа, замок. Не добавляйте прилагательные, которые уводят стиль в сторону, вроде милый, детальный или реалистичный. Описывайте предмет через простейшие фигуры: замок - это скруглённый прямоугольник под дужкой-полукругом, с короткой линией вместо замочной скважины.

• Сначала сложные предметы. У камеры, фильтров и календаря больше всего деталей, и они уходят от стиля сильнее всего. Если они держатся, удержится и остальное.
• Метафоры остаются простыми. Уведомления - колокольчик, избранное - сердце, удаление - корзина. Хитрая метафора - отдельное дизайнерское решение, а не эксперимент с промптом.
• Один предмет на иконку. Папка со звездой - это две иконки. Добавьте значок позже в векторе, одинаково для каждой иконки, которой он нужен.
• Мелкие правки вместо новых генераций. Если у удачной иконки одна неверная деталь, например острый угол у в остальном правильной камеры, Ideogram V4.5 Edit принимает маску, и можно изменить только эту часть.

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

Выстройте их в ряд и проверьте в малом размере

Разместите все двенадцать на одном листе сеткой 4 на 3, на одном фоне, в одном размере. Затем уменьшайте лист, пока каждая иконка не станет примерно такой, какой будет в приложении: 24 пикселя для панели инструментов, 16 для меню или плотного списка. Смотрите на настоящем телефоне, а не только на большом мониторе. Пройдите по списку:

• Тест прищура. Прищурьтесь. У всех двенадцати должен быть одинаковый серый вес. Та, что выглядит темнее, имеет более толстую линию или слишком много штрихов.
• Тест размера. Круглые и квадратные иконки должны казаться одного размера. Если иконка поиска выглядит меньше иконки почты, растяните её до ключевого круга.
• Тест деталей. При 16 пикселях любой зазор уже линии закрывается. Обычные жертвы - замочная скважина и кольцо объектива камеры; уберите их или раскройте.
• Тест угадывания. Покажите маленький лист тому, кто его не видел, и спросите, что значит каждая иконка. Всё, над чем человек задумался, требует более простой формы или подписи рядом в приложении.
• Тест состояния. Попробуйте каждую иконку в акцентном цвете на активной вкладке. Если залитый вариант входит в вашу систему, у всех двенадцати он должен быть залит одинаково.

Чистовой вектор

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

Особенность иконок - общая конструкция. Задайте толщину линии и радиус углов один раз как стиль в редакторе и примените его ко всем двенадцати, чтобы последующее изменение линии меняло весь набор. Привязывайте точки к сетке, чтобы линии в основном размере ложились на целые пиксели. Храните мастер-файл, где каждая иконка лежит на своём артборде и названа по смыслу, например icon-search, а не magnifier, и экспортируйте оттуда в форматах, которые просят разработчики.

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

Что остаётся вашей работой

Модель даёт черновики и направление. Готовый набор - это перерисовка: единые линии, настоящая сетка, проверка в реальных размерах. Убедитесь, что ни одна иконка не почти копия известного символа другой компании, и следуйте рекомендациям платформ там, где магазин приложений или операционная система задают свои правила для иконок. Когда двенадцать держатся, добавить тринадцатую легко: карточка, мастер и ID стиля уже есть. Посмотрите векторные и дизайнерские модели на /models и начните свою мастер-иконку в студии.