Чтобы добавить внешнюю обводку, не меняя размеры PNG игрового ресурса, зарезервируйте для неё место внутри монтажной области фиксированного размера. В Affinity на Mac впишите всю графику с обводкой в эти границы, а затем экспортируйте именованную монтажную область с нужным размером в пикселях.

Этот рабочий процесс предназначен для подготовки небольшого векторного игрового ресурса, например геометрической иконки размером 32 × 32 px. В нём используются элементы управления из актуальной Справки Affinity для настольных компьютеров. В Affinity Designer 2 есть отдельная рабочая среда экспорта Export Persona; в актуальной документации Affinity она называется Slice Studio. В основном рабочем процессе ниже используется текущее диалоговое окно экспорта для настольной версии. Актуальная документация Affinity по экспорту, документация Export Persona для Designer 2.

Что можно оставить без изменений при добавлении внешней обводки?

Перед редактированием разделите три параметра: размеры фигуры, видимую графику вместе с обводкой и размеры экспортируемого изображения в пикселях. Панель «Обводка» в Affinity позволяет разместить обводку по центру, внутри или снаружи края объекта. Выбор выравнивания определяет, какое пространство займёт контур. Панель «Обводка».

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

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

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

Требование Подходящий способ Что изменится
Сохранить внешнюю обводку и точные размеры PNG Вписать фигуру в монтажную область фиксированного размера Размер фигуры или доступные отступы
Сохранить границу исходной фигуры как видимую внешнюю границу Использовать внутреннее выравнивание обводки, если оно подходит Положение контура и видимая площадь заливки
Сохранить пропорции всей композиции и задать размер результата Изменить размер экспортируемого изображения Масштаб графики в экспортируемых пикселях
Сохранить всю графику в исходном масштабе, если места не хватает Увеличить область экспорта Размеры экспорта; фиксированный размер при этом не сохраняется

Как вписать внешнюю обводку в экспорт размером 32 × 32 px?

В следующем примере используется условный квадрат с горизонтальными и вертикальными сторонами и равномерной внешней обводкой толщиной 2 px. Для наглядного расчёта пространства здесь не используются эффекты, обводки переменной ширины и выступающие угловые детали.

Для этого квадрата видимая ширина равна ширине фигуры плюс ширина обводки с каждой стороны. Значит, в области экспорта размером 32 px ширина фигуры может составлять 32 − 2 − 2 = 28 px. Такой же расчёт даёт высоту 28 px. Если расположить фигуру по центру, между её исходными краями и каждым краем монтажной области останется по 2 px; это пространство займёт внешняя обводка.

1. Задайте фиксированную область экспорта

В Vector Studio выберите Файл > Создать. Установите для параметра Единицы документа значение «Пиксели», задайте для параметров Ширина страницы и Высота страницы значение 32 px и включите Монтажные области. Если вокруг ресурса нужен прозрачный фон, включите параметр Прозрачный фон. В этом примере используйте разрешение 72 DPI, затем нажмите Создать документ. Эти параметры документа описаны в справке Affinity по созданию новых документов. Создание новых документов.

Если вы добавляете отдельную монтажную область для экспорта в существующий документ, инструмент Монтажная область предоставляет параметры Ш и В для новой области, а затем кнопку Вставить монтажную область. Введите требуемые размеры в пикселях вручную, а не подгоняйте область под выделенную графику. Инструмент «Монтажная область».

2. Задайте размер фигуры и настройте обводку

Создайте или выделите квадрат. Откройте Окно > Общие > Трансформирование и введите Ш: 28 px и В: 28 px. Панель позволяет задавать точные размеры и опорную точку для трансформаций. Расположите квадрат по центру так, чтобы его исходные края отстояли от краёв монтажной области на 2 px. Панель «Трансформирование».

Откройте Окно > Вектор > Обводка. Выберите сплошную обводку, задайте Ширина: 2 px и выберите Выровнять обводку снаружи. Для этого простого примера используйте скруглённое соединение. В документации Affinity описаны настройки выравнивания, ширины и соединений на панели «Обводка». Панель «Обводка».

При изменении размера существующей графики проверьте, масштабируется ли вместе с ней обводка. Параметр Масштабировать вместе с объектом определяет, меняется ли толщина обводки при масштабировании замкнутой фигуры. На панели «Трансформирование» также есть параметр Переопределение масштаба, который может принудительно масштабировать свойства, в том числе толщину обводки. После изменения размера снова проверьте, равна ли толщина обводки нужным 2 px, а не считайте, что она не изменилась. Настройки масштабирования обводки, переопределение масштаба в панели «Трансформирование».

3. Проверьте полный видимый размер

Квадрат размером 28 px вместе с внешней обводкой теперь занимает 32 px в каждом направлении. Это геометрический расчёт для указанного примера, а не результат измерения экспортированного изображения. Если вокруг контура нужен прозрачный отступ, зарезервируйте и его: отступ 1 px со всех сторон уменьшает допустимый размер квадрата до 26 × 26 px.

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

Как экспортировать монтажную область, не меняя её размеры?

Выберите Файл > Экспорт > Экспорт, затем выберите предустановку PNG. Для параметра Область укажите именованную монтажную область. Affinity отличает её от вариантов Область выделения, которая включает перекрывающиеся слои, и Только выделенное, при котором перекрывающиеся невыделенные слои не учитываются. Выбрав именованную монтажную область, вы явно задаёте нужную область экспорта. Диалоговое окно экспорта.

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

Перед сохранением изучите предварительный просмотр экспорта. На Mac сочетание ⌘1 показывает изображение в масштабе 100%, а ⌘2 — в масштабе 200%. Проверьте все четыре края на наличие обрезанных участков контура и убедитесь, что прозрачные отступы соответствуют замыслу. Затем выберите Запросить местоположение, нажмите Экспорт, укажите имя файла и папку назначения, затем нажмите Сохранить. Диалоговое окно экспорта и сочетания клавиш предварительного просмотра на Mac.

В качестве последней практической проверки откройте сохранённый PNG и проверьте его размеры в пикселях и полный силуэт. Правильная ширина и высота сами по себе не означают, что обводка поместилась: у обрезанного изображения тоже могут быть точные размеры 32 × 32 px.

Можно ли добиться того же фиксированного размера с помощью срезов?

Да, если тщательно задать область экспорта. В Affinity описаны два разных способа создания срезов: срез, созданный для элемента панели «Слои экспорта», автоматически подгоняется под размеры этого элемента и экспортирует содержимое его слоя; срез, нарисованный вручную, включает содержимое всех видимых слоёв в пределах своей области. Экспорт с помощью Slice Studio.

Чтобы задать фиксированную область экспорта, выберите Инструмент «Срез» в Slice Studio и обведите подготовленную графику. С помощью панели Трансформирование задайте точные размеры и положение среза. В настройках экспорта среза выберите PNG и экспортируйте нужный срез. Поместите всю обводку внутри прямоугольника среза, как и в случае с монтажной областью. Экспорт срезов.

Проверяйте отображаемое разрешение экспорта, а не считайте, что 1x всегда соответствует размерам документа в пикселях. Affinity описывает связь между масштабированием среза и разрешением документа: в примере срез размером 64 × 64 px экспортируется как изображение 64 × 64 px при 1x и 72 DPI, но как изображение 32 × 32 px при 1x и 144 DPI. Это отдельная настройка размера, не связанная с размещением обводки. Размеры среза и DPI.

Что изменить, если результат всё ещё не подходит?

Выберите, что изменить дальше, исходя из симптома:

  • Размеры PNG правильные, но контур обрезан: переместите или уменьшите графику, чтобы вся обводка поместилась в монтажную область или срез.
  • Размеры PNG меняются при изменении графики: проверьте, не экспортируете ли вы область выделения или срез объекта, размер которого подгоняется автоматически. Для фиксированных границ используйте именованную монтажную область или точно заданный срез, нарисованный вручную.
  • Толщина контура меняется после изменения размера: проверьте параметры «Масштабировать вместе с объектом» и «Переопределение масштаба» в панели «Трансформирование», затем восстановите нужную толщину обводки.
  • Обводка помещается, но ресурс выглядит меньше: проверьте, не использовались ли ширина и высота экспорта для масштабирования более крупной композиции до целевого размера.
  • Обрезаются только острые углы: прежде чем менять размер всей композиции, проверьте стиль соединения и выступ скоса.

Эти проверки основаны на описанных в документации различиях между обрезкой по границам монтажной области, размерами среза, масштабированием обводки и изменением размера экспорта. Они выявляют разные причины; одно лишь изменение выравнивания обводки не устранит все проблемы с размером экспорта. Границы монтажной области, поведение среза, настройки обводки, размеры экспорта.

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

Источники