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

Хотя Affinity Designer имеет чрезвычайно полезный экспорт @ 1x, @ 2x и @ 3x, мне интересно, есть ли способ экспорта в различных размерах, которые требуются для иконки iOS?

Я нашел сжатую сетку необходимых размеров здесь , что я буду воспроизводить в формате списка:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40х40
• 29x29

Это 11 разных размеров иконок!

Я считаю, что концепция Export Persona с концепцией конфигурации слайсов превосходна, тем более что вы можете применять фрагменты к отдельным слоям (скажем, для обычной и нажатой версий кнопки). Есть ли какой-нибудь способ использовать этот же инструмент, возможно, для выполнения определенных размеров экспорта?

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

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

• 29PT
• 49pt
• 60pt
• 76pt
• 1024px

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

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

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

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

• Значок-29.png
• icon-29@2x.png
• icon-29@3x.png
• Значок-40.png
• icon-40@2x.png
• icon-40@3x.png
• Значок-60.png
• icon-60@2x.png
• icon-60@3x.png
• Значок-76.png
• icon-76@2x.png
• icon-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, используя панель Transform - ваши иллюстрации будут автоматически увеличены
7. Повторите шаги 4-6, чтобы создать артборд 60pt (плюс 76pt и 83.5pt для iPad, если необходимо)
8. Перейдите к Export Persona, переключитесь на панель Slices и выберите разрешение 2x и 3x (плюс 1x для iPad)
9. Выберите все слои артборда в списке («29pt», «40pt» и т. Д.) И нажмите «Экспортировать выделенные» в нижней части панели.

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

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

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

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

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