Экспорт размеров значков iOS в Affinity Designer

Поскольку требования время от времени меняются, всегда полезно обращаться к рекомендациям Apple. На моем веб-сайте есть шаблон Affinity Designer , который я разработал и который экспортирует 18 размеров, которые в настоящее время требуются для универсальных приложений.

Это выглядит как огромный и сложный список, но на самом деле вам нужно построить только 5 размеров:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024 пикселей

Для первых четырех размеров (перечисленных в баллах) нужны версии 1×, 2× и 3× (если вы рассчитываете на будущее, а также покрываете iPhone 6 Plus).

Некоторые из размеров, которые вы увидите в сети и на сайте Apple, предназначены для iOS 6 и ниже (57×57 и т. д.). Они не нужны, если вы ориентируетесь на iOS 7 и выше.

Вот шаблон Photoshop, который я создал:

У меня есть фрагменты, настроенные для экспорта каждого значка и действия для изменения размера и повторного экспорта, поэтому я получаю:

• значок-29.png
• значок-29@2x.png
• значок-29@3x.png
• значок-40.png
• значок-40@2x.png
• icon-40@3x.png
• значок-60.png
• icon-60@2x.png
• значок-60@3x.png
• значок-76.png
• значок-76@2x.png
• значок-76@3x.png

Пока не все эти размеры нужны, но, вероятно, будут в будущем. Начиная с 4 базовых размеров, создание иконок становится намного проще.

Я использую фрагменты в Photoshop для экспорта различных областей, необходимых для каждой иконки. Обратите внимание, что значки, которые вы предоставляете, не должны иметь прозрачных областей — цвет должен доходить до углов. iOS замаскирует значок, поэтому вам не нужно об этом беспокоиться.

Вы могли бы сделать то же самое, используя функцию среза Affinity?

Обновление: я создал несколько шаблонов значков приложений с открытым исходным кодом для Affinity Designer, Sketch, Photoshop и Illustrator . Возможно, их стоит рассмотреть.

Вы можете сделать это в Affinity Designer, фрагменты могут масштабировать свой вывод, используя суффиксы, вот экспорт значков iOS с использованием суффикса «w»:

Я только что нашел хороший способ сделать это в Affinity Designer. Хотя он не полностью автоматизирован. Я объясню, как получить три размера значков, необходимых в настоящее время для iPhone (29pt, 40pt, 60pt), каждый с разрешением 2x и 3x:

1. Создайте новый документ, установите единицу измерения «Точки», размер страницы 29x29 и установите флажок «Создать монтажную область» в диалоговом окне.
2. Вставьте и расположите свою работу на монтажной области.
3. Переименуйте монтажную область в «29pt» на панели «Слои» (необязательно).
4. Щелкните правой кнопкой мыши монтажную область и выберите «Дублировать».
5. Перетащите новый артборд (чтобы вы могли видеть оба рядом), а затем переименуйте его в «40pt» (опять же, этот шаг не является обязательным).
6. Измените размер нового слоя на 40x40pt с помощью панели «Трансформация» — ваша работа будет автоматически увеличена.
7. Повторите шаги 4-6, чтобы также создать монтажную область 60pt (плюс 76pt и 83,5pt для iPad, если необходимо)
8. Перейдите в режим «Экспорт», переключитесь на панель «Фрагменты» и выберите разрешение 2x и 3x (плюс 1x для iPad).
9. Выберите все слои монтажной области в списке («29pt», «40pt» и т. д.) и нажмите «Экспортировать выбранное» внизу панели.

Affinity создаст все размеры значков в каждом выбранном разрешении, поэтому вы можете получить больше значков, чем вам действительно нужно. Но они аккуратно названы «29pt@2x.png» и т. д., поэтому их очень легко назначить в вашем каталоге активов Xcode.

Одно предостережение: когда вы переходите к режиму «Экспорт», Affinity автоматически создает фрагмент экспорта для каждой монтажной области (это синяя рамка с меткой размера на ней). Я обнаружил, что иногда размер этих фрагментов отличается на несколько пикселей. Похоже на ошибку в AD. Вы можете легко исправить это, перетащив углы фрагментов.

У Марка Эдвардса был отличный ответ с точки зрения того, какие размеры значков необходимо создать, как использовать для этого фрагменты, а также хорошие ссылки на ресурсы Photoshop для этого. Тем не менее, я все еще ищу решение для экспорта в нескольких размерах в Affinity Designer .

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

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