Magic Canvas: создавайте графику в браузере вручную или просто скажите, что нужно

Стартовый экран состоит из трёх частей. Опишите, и aiKit всё сделает: напишите или продиктуйте, что нужно (для кого, что должно быть сказано, настроение), выберите размер из списка и нажмите «Создать мой дизайн». Редактор откроется, а макет будет собран из настоящих слоёв, которые можно менять; всё, что aiKit не смог сделать, сначала перечисляется в разделе «Пока не выполнено». Такие данные, как телефоны, цены и адреса, используются только если вы их ввели; иначе вы увидите заполнитель в квадратных скобках, например [Телефон], который нужно заменить.

Или начните с пустого размера: вкладки Соцсети, Печать, Веб и Email показывают размеры с маленьким рисунком их формы (пост в Instagram 1080 × 1350, Сторис 1080 × 1920, листовка 8.5 × 11 дюймов, визитка 3.5 × 2 дюйма, плакат 18 × 24 дюйма, веб-баннер 1920 × 800, а также стандартные размеры писем шириной 600: шапка 600 × 200, главный баннер 600 × 300, картинка 600 × 400 и две колонки 300 × 300, которые по умолчанию скачиваются в 2× для чёткости на телефонах). Свой размер принимает любую ширину и высоту в пикселях или дюймах и назначение; дюймы означают печать. Изменить фото открывает изображение с вашего компьютера в его исходном размере.

Мои дизайны показывает сохранённые дизайны (сначала новые, с картинкой каждого), с поиском по названию. Нажмите на один, чтобы открыть его снова со всеми редактируемыми слоями. У каждого дизайна есть свой адрес, так что его можно добавить в закладки или отправить ссылку коллеге в вашем аккаунте.

Вверху: Дизайны (назад к стартовому экрану), название дизайна (нажмите, чтобы переименовать), его размер, Отменить и Повторить, масштаб (минус, процент, плюс; нажмите на процент, чтобы вписать страницу), переключатель Pro, Сохранить дизайн и Скачать. На тачпаде или колесе мыши прокрутка перемещает страницу, а щипок (или Ctrl/⌘ + прокрутка) меняет масштаб.

Слева находится панель: Ресурсы, Текст, Фигуры, Фото, Бренд, Слои и История. Каждая открывает свою панель рядом с панелью; нажмите ещё раз, чтобы закрыть панель и дать странице больше места. В центре находится страница на сером столе. Справа — настройки выделенного объекта или самой страницы, если ничего не выделено. Под страницей находится панель ИИ.

Печатные размеры показывают две направляющие, которые никогда не печатаются: сплошная красная линия — это место обрезки бумаги (обрез), а пунктирная синяя линия внутри неё — безопасная зона. Держите текст и логотипы внутри пунктирной линии. Цвета и фото, которые должны доходить до края бумаги, нужно вести за красную линию до внешнего края страницы (эти дополнительные 1/8 дюйма — это вылет под обрез).

Простой режим включён по умолчанию. Включите Pro, чтобы видеть точные числа положения и размера (X, Y, W, H и поворот в градусах) и режимы наложения (Multiply, Screen, Overlay и другие) для любого слоя. Ваш выбор запоминается в этом браузере.

Текст: добавьте заголовок, подзаголовок или основной текст, затем дважды щёлкните по нему на странице, чтобы ввести текст. Когда текст выбран, справа доступны шрифт (31 шрифт в группах: Clean, Bold, Condensed, Serif, Script, Handwritten, Fun, Retro), размер, жирный, курсив, подчёркивание, Aa (переключение между ВЕРХНИМ и обычным регистром), выравнивание, цвет (цвета вашего бренда идут первыми), межбуквенный интервал, межстрочный интервал, Curve (изгиб строки в дугу или улыбку) и эффекты: Outline (с цветом и толщиной) и Shadow.

Фигуры: прямоугольник, прямоугольник со скруглёнными углами, круг, треугольник, звезда, линия, стрелка и сердце. Для выбранной фигуры доступны заливка (или No fill), цвет и толщина границы, а для прямоугольников — скругление углов. Прямоугольник под текстом создаёт цветную полосу или подпись.

Фото: загрузите с компьютера (сразу несколько), AI-картинка (опишите её и нажмите Make the picture; это занимает от 20 до 40 секунд и расходует токены) или выберите из Graphics Library (поиск прямо в панели). Brand показывает цвета и логотипы из наборов брендинга, сохранённых в Logo Kit: нажмите на цвет, чтобы окрасить выбранное (или фон, если ничего не выбрано), нажмите на логотип, чтобы добавить его.

Вкладка Color — полноценный палитра цветов: перетаскивайте в квадрате для насыщенности и яркости и на полоске для оттенка либо введите значения HEX, RGB, HSB или CMYK; переключайтесь между основным и фоновым цветом вверху; цвета бренда, недавние цвета и образцы выбираются одним нажатием, а системный выбор включает пипетку экрана. Нажатие на цветные квадраты внизу панели инструментов тоже открывает её.

Выберите фото, чтобы увидеть его инструменты. Быстрые исправления: Remove background и Enlarge 2× работают бесплатно на вашем устройстве (при первом использовании бесплатная модель загружается один раз). Эффекты Magic, тоже бесплатные на вашем устройстве: Auto-enhance измеряет освещение и цвет фото, подбирает яркость, контраст, цвет и немного резкости, а затем сообщает, что изменила; Brighten colors делает цвета ярче, не делая тона кожи похожими на рисунок.

Color look меняет цветовой профиль фото: Natural, Teal & orange, Golden hour, Film, Matte, Cinematic, Pastel, Noir и Pop. Duotone раскрашивает фото в два цвета (тёмные части в первый, светлые — во второй); при наличии цветов бренда он начинается с них. Эффекты для объекта находят объект на вашем устройстве: Portrait blur размывает фон за ним, Color splash делает фон чёрно-белым, а объект сохраняет свой цвет, а Sticker вырезает объект с белым краем и мягкой тенью.

Ползунки: Vibrance, Sharpen, Film grain и Pixel art, затем Brightness, Contrast, Saturation, Warmth и Blur, а также фильтры в одно нажатие (B&W, Sepia, Vintage, Vivid, Cool, Warm, Faded). Reset adjustments возвращает ползунки и фильтры к исходным значениям. Crop показывает пунктирную рамку: перетащите и измените её размер, затем нажмите Crop (или Cancel). Shapes помещает фото внутрь круга, прямоугольника со скруглёнными углами, звезды или сердца. Flip отражает его.

Для любого выбранного слоя: See-through (степень прозрачности), Position on the page (слева, по центру, справа, сверху, посередине, снизу; для печатных размеров привязка к безопасной зоне), Bring to front, Send to back, Duplicate, Lock и Delete. При перетаскивании красная линия показывает, когда слой выровнен по центру страницы, и он прилипает к этому положению.

Панель Layers показывает все элементы, сверху самый верхний. Значок обозначает текст, фото или фигуру. Нажмите на название, чтобы выбрать слой, дважды нажмите, чтобы переименовать его (AI тоже использует эти названия), и используйте стрелки, чтобы переместить слой вверх или вниз, глаз, чтобы скрыть или показать его, и замок, чтобы заблокировать слой и случайно не сдвинуть его.

Клавиатура: Delete или Backspace удаляют выбранное, ⌘Z отменяет, ⇧⌘Z повторяет, ⌘D дублирует, ⌘C и ⌘V копируют и вставляют, стрелки сдвигают (с Shift — крупнее шаг), Escape снимает выделение. В Windows вместо ⌘ используйте Ctrl.

Assets — первая кнопка в левой панели, а на стартовом экране такой же блок находится под Describe it (Add your logo, photos, or a design to match). Добавьте до 6 изображений: перетащите их в блок, вставьте одно (⌘V или Ctrl+V в любом месте страницы), нажмите Upload или откройте Graphics Library, чтобы выбрать уже имеющиеся (нажмите на изображение, чтобы добавить его, и ещё раз, чтобы убрать). Каждая загрузка сохраняется в Graphics Library, в папку Magic Canvas/Assets, поэтому её можно использовать в любом инструменте позже.

У каждого материала есть название, которое можно изменить, и тип: Logo (размещается на дизайне), Photo (используется в дизайне), Product (показывается крупно) или Style to match (никогда не размещается; aiKit копирует его стиль: цвета, характер шрифтов, макет и настроение). aiKit действительно учитывает каждый материал в каждом вашем запросе, поэтому фразы «use my logo», «put the product photo on the left» или «make it look like the flyer I added» работают простыми словами. Знак + рядом с материалом размещает его на странице; × убирает из списка (он останется в Graphics Library).

Под страницей небольшая строка показывает, что aiKit использует для вашего следующего запроса: Sees 3 assets (нажмите, чтобы открыть Assets), а также используемый стиль, если он есть. Когда вы меняете дизайн, aiKit также получает снимок того, как страница выглядит сейчас, поэтому фразы «the photo looks too dark» или «the words are hard to read» понимаются так, как видите их вы. Перетаскивание изображения прямо на страницу размещает его там.

История — это последняя кнопка на левой панели. В разделе «История версий» перечислено каждое действие с дизайном, сначала новые: каждый запрос к ИИ («Создано с ИИ», «Изменено с ИИ»), каждый раунд ручных правок («Изменено вручную»), каждый раз, когда вы что-то возвращаете, и каждая созданная версия. Раунд ручных правок становится отдельным шагом примерно через 20 секунд после того, как вы закончили, а сохранённый дизайн сохраняет себя в то же время, поэтому ничего не теряется, даже если вы закроете вкладку. Каждый шаг хранится вместе с дизайном (до 500 на дизайн; именованные версии сохраняются всегда), поэтому, открыв дизайн из «Моих дизайнов» или по его ссылке на другом компьютере, вы увидите всю его историю.

Каждый шаг показывает небольшую картинку дизайна в тот момент, время и стоимость ИИ, ваши собственные слова в кавычках, а для ручных правок короткую строку с описанием изменений (например, 2 изменения: «Summer Sale» текст · цвет круга). «Подробнее» открывает, что сделал aiKit, что он не сделал, стиль (цветные точки и шрифты), размер, метку версии, использованные материалы и раздел «Точно что было запрошено»: запрос в том виде, в каком его получил aiKit (размер, ваши слова, материалы и их типы, стиль, который ему велели использовать).

«Назвать эту версию» вверху даёт текущему дизайну название и необязательную заметку, например «Отправлено клиенту, до смены цвета». Именованные версии отмечены закладкой и цветным краем, а «Назвать» (или «Переименовать») у любого шага присваивает имя этому шагу. Фильтры над списком: «Все», «Названные», «ИИ» или «Вручную». «Убрать название» (в разделе «Подробнее») превращает именованную версию обратно в обычный шаг.

Кнопки на каждом шаге: «Вернуть» (дизайн возвращается к этому моменту как новый шаг, а ⌘Z отменяет это), «Сравнить с текущим», «Назвать» и «Начать с этого» (открывает новый, отдельный дизайн из этого момента, поэтому тот, над которым вы работаете, остаётся без изменений). В разделе «Подробнее»: «Использовать этот стиль» (ваш следующий запрос к ИИ будет использовать эти шрифты и цвета) и «Сохранить стиль» (дайте ему имя, чтобы сохранить).

«Сравнить» показывает две версии рядом или с ползунком, а под картинками список «Что изменилось»: одна строка на каждый слой — «Добавлено», «Удалено» или «Изменено» — с описанием словами: старый и новый текст, перемещение, размер, поворот, цвет, шрифт, размер шрифта, прозрачность, скрытость, контур, тень, фотоэффект, обрезка, перенос вперёд или назад, фон. При сравнении шага с текущим у каждой строки есть кнопка «Вернуть эту часть» (слой возвращается таким, каким был тогда, или возвращается удалённый слой) или «Убрать» (для слоя, добавленного позже), а остальной дизайн остаётся как сейчас; ⌘Z отменяет это. «Вернуть всё» возвращает весь дизайн к этому моменту.

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

Сохранённые стили находятся вверху раздела «История». «Сохранить оформление этого дизайна как стиль» считывает со страницы шрифты, основные цвета и фон и просит назвать стиль. «Использовать» применяет стиль к вашим следующим запросам к ИИ (он отображается под страницей как «Стиль: название», с × для отмены); на стартовом экране тоже есть список стилей, поэтому новый дизайн сразу будет в вашем оформлении. Стили принадлежат вашему рабочему пространству, так что ими может пользоваться вся команда.

«Версии» в верхней панели открывает три варианта. «Дублировать» создаёт копию дизайна (вместе с историей) и открывает её, чтобы вы могли развить идею в собственном направлении, а первый дизайн остаётся без изменений. «Создать версии…» просит aiKit подготовить от 2 до 6 версий. «Сравнить все» показывает все версии рядом. «Дублировать» и «Создать версии» также есть под каждым результатом ИИ, рядом с «Отменить это изменение ИИ».

В «Создать версии» выберите количество (2–6) и опишите, чем они должны отличаться, любыми словами: «3 листовки для разных аудиторий: пенсионеры, студенты и семьи», «попробовать другие заголовки», «квадратный пост, сторис и баннер», «одну в виде короткого видео». Фишки под полем добавляют распространённые варианты. Если оставить поле пустым, aiKit будет менять макет, заголовок и цвета. Если что-то на странице выделено, «Менять только выделенное» сохраняет всё остальное без изменений (например, три варианта заголовка). Ваши факты (имена, даты, цены, предложения) остаются одинаковыми во всех версиях; всё, что aiKit не знал, отмечено как [placeholder].

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

Когда у дизайна есть версии, над ним появляется полоса «Версии»: нажмите на одну, чтобы её открыть (у каждой своя ссылка), «Сравнить все», чтобы увидеть их вместе, и «Открыть эту», чтобы продолжить работу над ней. Каждая версия стоит около 1–2 ¢ ИИ; изображения ИИ добавляют по 5 ¢ каждое.

Введите или продиктуйте любое изменение в строке под страницей и нажмите «Сделать»: «сделай фон темнее», «перемести логотип в правый верхний угол», «изогни заголовок и сделай его золотым», «фото теплее, с эффектом плёнки», «размой фон за человеком», «добавь красный значок SALE в углу». На пустой странице та же строка создаёт целый дизайн. aiKit читает ваши слои (их названия, тексты, размеры и положение) и меняет их; ничего не перерисовывается с нуля.

Каждый запрос воспринимается как чек-лист. Всё, что не было сделано, сначала показывается в разделе «Пока не сделано» с причиной (например, удалить человека из фотографии здесь нельзя), а остальное отмечено галочкой. «Отменить это изменение ИИ» возвращает дизайн точно в прежнее состояние; обычная отмена тоже работает. Под каждым результатом можно оценить его большим пальцем вверх или вниз и написать, что пошло не так; «Отправить и исправить» просит aiKit попробовать ещё раз с учётом вашего комментария.

Сохранить дизайн сохраняет весь дизайн со всеми слоями, поэтому вы можете снова открыть его в разделе «Мои дизайны» и продолжить редактирование. Фото, которые вы загрузили или создали с помощью ИИ, при первом сохранении помещаются в вашу Библиотеку графики (папка Designs/Photos), поэтому дизайн занимает мало места и открывается на любом компьютере.

«Открыть в Pro Designer» (рядом с кнопкой «Скачать») помещает готовый дизайн в вашу Библиотеку графики и открывает его в Pro Designer, где его можно доработать вручную с помощью инструментов в стиле Photoshop.

«Скачать» открывает одно окно. Тип файла: PNG (самый четкий, сохраняет прозрачные участки), JPG (меньше по размеру; выберите «Лучшее», «Высокое» или «Меньший файл»), PDF (для печатных форматов: 300 dpi с вылетом 1/8 дюйма, обрезными метками по выбору и размером обрезки в файле, чтобы типография его увидела; для других размеров — одна страница в размере дизайна) или SVG (текст и фигуры остаются векторными; шрифты подключаются по ссылке). Для экранных размеров выберите 0,5×, 1×, 2× или 3×. Куда сохранить: «Скачать на этот компьютер» или «Сохранить в Библиотеку графики» с указанием названия, категории, тегов, клиента и проекта; сохраненный файл ведет прямо к его месту в библиотеке.