Експортувати розміри значків iOS у конструктор прихильності

Хоча дизайнер Affinity має надзвичайно корисний експорт @ 1x, @ 2x та @ 3x, мені цікаво, чи існує спосіб експорту в різних розмірах, необхідних для значка iOS?

Я знайшов стислу сітку необхідних розмірів тут , що я буду відтворювати в форматі списку:

• 1024x1024
• 180х180
• 152х152
• 120х120
• 87х87
• 80х80
• 76х76
• 58х58
• 57х57
• 40х40
• 29х29

Це 11 різних розмірів значків!

Я виявив, що весь експорт Persona з концепцією конфігурації фрагментів є відмінним, тим більше, що ви можете застосовувати фрагменти до окремих шарів (скажімо, для звичайної та натиснутої версії кнопки). Чи є якийсь спосіб використовувати цей самий інструмент, можливо, для здійснення конкретних розмірів експорту?

Оскільки вимоги час від часу змінюються, завжди корисно звернутися до вказівок Apple. На моєму веб-сайті є шаблон «Дизайнер прихильності», який я розробив, що експортує 18 розмірів, які зараз потрібні для універсальних програм.

Це схоже на величезний складний перелік, але насправді потрібно створити лише 5 розмірів:

• 29пт
• 49пт
• 60пт
• 76pt
• 1024 пікселів

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

Деякі з розмірів, які ви побачите в мережі та на веб-сайті Apple, стосуються iOS 6 та нижче (57 × 57 тощо). Вони не потрібні, якщо ви орієнтуєтесь на iOS 7 і вище.

Ось шаблон, який я створив Photoshop:

У мене створені фрагменти для експорту кожної піктограми та дії щодо зміни розміру та повторного експорту, тому я закінчую:

• icon-29.png
• icon-29@2x.png
• icon-29@3x.png
• icon-40.png
• icon-40@2x.png
• icon-40@3x.png
• icon-60.png
• icon-60@2x.png
• icon-60@3x.png
• icon-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. Створіть новий документ, встановіть одиницю на "Окуляри", розмір сторінки до 29х29 та встановіть прапорець "Створити дошку" у діалоговому вікні
2. Вставте і розмістіть свої твори в області мистецтва
3. Перейменуйте область обкладинки на "29pt" на панелі "Шари" (необов'язково)
4. Клацніть правою клавішею миші та виберіть "Скопіювати"
5. Перетягніть нову обкладинку (щоб ви могли бачити обидві сторони), а потім перейменуйте її на "40pt" (знову ж, цей крок не є обов'язковим)
6. Змініть розмір нового шару до 40x40pt за допомогою панелі Transform - ваші ілюстрації будуть автоматично розширені
7. Повторіть кроки 4-6, щоб створити також 60-кратну артборду (плюс 76пт і 83,5пт для iPad, якщо потрібно)
8. Перейдіть до експорту Persona, перейдіть на панель «Зрізи» та виберіть роздільну здатність 2x та 3x (плюс 1x для iPad)
9. Виберіть усі шари аркушів у списку ("29pt", "40pt" тощо) та натисніть "Експорт вибраних" у нижній частині панелі.

Спорідненість створить усі розміри значків у кожній вибраній роздільній здатності, тому ви можете отримати більше значків, ніж вам потрібно. Але вони чітко названі "29pt@2x.png" тощо, тому їх дуже просто призначити у своєму каталозі активів Xcode.

Одне застереження: Коли ви переходите до експорту Persona, Affinity автоматично створює фрагмент експорту для кожного аркуша (це синя рамка з розміткою на розмірі). Я виявив, що іноді розмір цих фрагментів вимикається на кілька пікселів. Схоже, помилка в AD. Ви можете легко це виправити, перетягнувши куточки скибочок.

Марк Едвардс отримав чудову відповідь щодо того, які розміри значків потрібно створити, використання фрагментів для цього та хороші посилання на ресурси Photoshop для цього. Однак я все ще шукаю рішення, як експортувати кілька розмірів у програмі Affinity Designer .

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

Недоліком тут є те, що кожен шар потрібно створити і вказати на ваш файл значків, так що здається, що це було б нудно. Однак колись це було на місці, після будь-яких редагувань у базовий файл ви зможете легко реекспортувати все.