Origami и Affinity Designer

Хотя Origami поставляется с удобным плагином для Adobe Illustrator, его можно использовать с любым другим векторным редактором, способным загружать и сохранять SVG-файлы. Учебник основан на Affinity Designer, но то же самое можно делать в любом другом редакторе.

Перед началом

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

Начнём с создания коробки для пиццы в Origami, которая будет использоваться в этом уроке:

Теперь, когда у нас есть развёртка в Origami, мы готовы отправить её в Affinity Designer.

Экспорт в формат файлового пакета

Следующий шаг — экспортировать развёртку, чтобы Affinity Designer (или любой другой векторный редактор) мог её прочитать. Для этого нажмите кнопку Send и выберите цель File Package во всплывающем окне:

Вас попросят выбрать папку назначения, после чего Origami экспортирует в неё развёртку. Вы можете открыть её в Finder или Explorer, в зависимости от вашей операционной системы. Вот как это выглядит на Mac:

В папке несколько файлов:

• readme.txt — содержит краткое описание всех остальных файлов и помогает, если вы что-то забудете;
• layout.svg — сама развёртка в формате SVG. Вы загрузите её в свой векторный редактор, а затем сохраните обратно для загрузки в Origami;
• front-rgb.png — изображение лицевой стороны фигуры. Это то, что Origami показывает поверх вашей коробки;
• front-template.png — растровая версия развёртки, может использоваться как шаблон для изображения;
• params.json — различные параметры развёртки, которые не особо важны для этого урока.

Могут быть и другие файлы, если вы включите обратную сторону или будете использовать маски фольги, но перечисленные выше — основные. Просмотрите их, прочитайте файл readme.txt, и мы перейдём к следующему шагу.

Загрузка развёртки в Affinity Designer

Мы только что экспортировали развёртку как набор растровых и векторных файлов. Теперь загрузим их в программу для редактирования, чтобы внести изменения. Начнём с развёртки: запустите Affinity Designer, выберите File → Open и укажите файл layout.svg, который вы только что экспортировали:

Развёртка загружена в Affinity Designer, и все элементы доступны в слое “Origami” редактора. Теперь можно вносить нужные изменения. В этом уроке мы добавим квадратное окно на крышку коробки и изменим угол открытия крышки. Начнём с окна:

Я просто создал новый прямоугольник в слое “Origami” и изменил его стиль, чтобы он соответствовал остальным элементам. Очень важно, чтобы элементы реза развёртки имели сплошную обводку, что я и сделал.

Теперь найдём линию сгиба, управляющую углом крышки, и изменим её значение на 90, чтобы закрыть коробку:

Мы внесли все изменения, и теперь пора сохранить изменённую развёртку обратно в файл layout.svg. Ключевой момент: используйте File → Export в Affinity Designer, так как Save сохранит развёртку как проект Affinity Designer, а не как SVG-файл.

В окне экспорта выберите формат SVG, пресет SVG (for export), убедитесь, что экспортируете весь документ, и нажмите Export. Вас попросят указать имя файла — выберите layout.svg, экспортированный Origami, и подтвердите перезапись.

Готово, переключитесь обратно в Origami.

Загрузка развёртки обратно

Теперь, когда развёртка изменена, пора загрузить её обратно в Origami. Для этого просто нажмите кнопку Refresh. Origami помнит последний использованный вариант экспорта, поэтому он прочитает развёртку оттуда же. Или можно щёлкнуть правой кнопкой мыши по кнопке Refresh и выбрать источник вручную:

В обоих случаях вы получите обновлённую коробку в Origami. Крышка закрыта (мы установили угол 90°), и в ней появилось квадратное окно.

Добавление изображения

Изображение добавляется похожим образом. Давайте снова экспортируем коробку как файловый пакет в ту же папку и на этот раз откроем файл front-template.png в Affinity Designer:

Шаблон содержит окно, которое мы недавно добавили. Если нет — убедитесь, что вы повторно экспортировали развёртку после загрузки обратно в Origami. Поскольку шаблон — простой растровый файл, он имеет всего 72 dpi, и вы можете изменить это по желанию. Главное правило: сохраняйте пропорции изображения точно такими же, как в SVG-файле развёртки. Вам даже не нужен растровый шаблон — вместо него можно использовать векторную развёртку как шаблон.

Добавим немного графики на крышку коробки:

Я создал новый слой и разместил полупрозрачный шаблон поверх него как ориентир. Затем добавил несколько простых элементов оформления, и теперь пора экспортировать обратно в Origami. Идея вам уже понятна: нужно заменить файл front-rgb.png новым изображением. Скройте шаблон и используйте File → Export → PNG, чтобы экспортировать новое изображение в PNG-файл, изначально созданный Origami.

Готово, вернитесь в Origami и нажмите Refresh, чтобы увидеть обновлённое изображение:

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

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

Изображение обратной стороны

Сначала ознакомьтесь с нашим учебником по обратной стороне.

Если вы включите изображение обратной стороны в свойствах фигуры Origami и экспортируете развёртку в файловый пакет, вы увидите два дополнительных файла: back-rgb.png и back-template.png в папке экспорта. Эти файлы делают то же самое, что и front-xxx, но для обратной стороны. Вы можете редактировать их так же, и Origami прочитает их обратно при нажатии Refresh.

Фольга

Если в используемом проекте Origami нет маски фольги (обычно её нет), маска не будет экспортирована вместе с файлами изображения и развёртки. Однако если вы посмотрите на файл readme.txt в папке экспорта, вы заметите имя: front-foil.png. Как только вы создадите такой файл в папке экспорта и загрузите его обратно в Origami, маска фольги будет загружена и применена. Давайте сделаем, например, чтобы надпись “PIZZA BOX” выглядела как красная фольга:

Я скопировал слой изображения, удалил ненужные элементы, скрыл остальные слои и изменил цвета так, чтобы коробка стала чёрной, а текст “PIZZA BOX” — белым. Поскольку это маска фольги, белые пиксели означают “фольгу”, а чёрные — “без фольги”. Можно также использовать серый цвет для указания нужной степени отражения фольги.

Обратите внимание: здесь задаётся не цвет фольги, а только маска.

Теперь экспортируйте маску в файл front-foil.png в папку экспорта развёртки рядом с другими PNG- и SVG-файлами и нажмите Refresh в Origami:

Поверните камеру и убедитесь, что слой фольги виден, а текст “PIZZA BOX” отражает свет. Последнее, что нужно сделать — изменить цвет фольги. Хотя это можно сделать, отредактировав файл params.json в папке экспорта, проще сделать это в пользовательском интерфейсе:

Не забудьте повторно экспортировать развёртку с цветной фольгой в файловый пакет, чтобы JSON-файл там обновился. Иначе при следующем обновлении развёртки из файлового пакета цвет фольги вернётся к серебристому.

Что если у меня уже есть развёртка?

Если вы не можете самостоятельно воссоздать все перечисленные выше файлы, лучше начать с простой тестовой развёртки в Origami. Для этого есть образец под названием “Flat Sheet”. Создайте тестовую развёртку, экспортируйте её в файловый пакет, затем полностью замените SVG-развёртку своей и загрузите обратно в Origami. После этого экспортируйте снова, чтобы получить правильный шаблон изображения, и работайте дальше.

Вот и всё

Единственный вопрос, который у вас может возникнуть: почему это сложнее по сравнению с рабочим процессом Illustrator? Есть две причины:

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

Хороший пример первого случая — программы Corel, а Affinity Designer попадает во второй случай. Как только они начнут поддерживать плагины, мы, скорее всего, сделаем для них плагин.

Другие учебники можно найти здесь.

Adobe и Adobe Illustrator являются зарегистрированными товарными знаками или товарными знаками компании Adobe Systems Incorporated в Соединённых Штатах и/или других странах.