iOS App Icon кажется простым объектом, пока не наступает релиз: неверные пиксели, случайная прозрачность у маркетингового слота 1024 px или «заранее скруглённый» PNG, который конфликтует с автоматической маской Xcode. Ниже — матрица решений для дизайнеров и смежных с фронтендом владельцев ассетов, которым нужно сдать целую папку AppIcon.appiconset: таблица соответствия размеров (роль → пункты → пиксели), правила Contents.json, приёмка экспорта sRGB, политика прозрачного канала, правила передачи под системную суперэллипсу, именование и пакетная проверка на Mac с чипом M‑серии — в том числе на выделенном удалённом Mac для ночных прогонов и проверок в духе CI.
① Матрица ролей и размеров (целевые пиксели PNG)
Отдавайте квадратные PNG строго заданной ширины и высоты. Xcode сопоставляет файлы через Contents.json; не рассчитывайте, что каталог ассетов «дотянет» неправильный мастер за счёт Retina. Держите один векторный или высокоразрешающий мастер (например сетка 1024 px), затем получайте производные — на Apple Silicon пакетные ресайзы обычно проходят быстро за счёт пропускной способности памяти и эффективных путей экспорта в нативных инструментах.
| Платформа / роль | Пункты (pt) | Масштаб | PNG (px) | Типичный фрагмент имени |
|---|---|---|---|---|
| iPhone, уведомления | 20 | 2× / 3× | 40 × 40 / 60 × 60 | [email protected], @3x |
| iPhone, настройки | 29 | 2× / 3× | 58 × 58 / 87 × 87 | [email protected], @3x |
| iPhone, Spotlight | 40 | 2× / 3× | 80 × 80 / 120 × 120 | [email protected], @3x |
| iPhone, приложение | 60 | 2× / 3× | 120 × 120 / 180 × 180 | [email protected], @3x |
| iPad, уведомления | 20 | 1× / 2× | 20 × 20 / 40 × 40 | [email protected], @2x |
| iPad, настройки | 29 | 1× / 2× | 29 × 29 / 58 × 58 | [email protected], @2x |
| iPad, Spotlight | 40 | 1× / 2× | 40 × 40 / 80 × 80 | [email protected], @2x |
| iPad, приложение | 76 | 1× / 2× | 76 × 76 / 152 × 152 | [email protected], @2x |
| iPad Pro, приложение | 83.5 | 2× | 167 × 167 | [email protected] |
| App Store / маркетинг | 1024 | 1× | 1024 × 1024 | [email protected] или [email protected] (как у генератора) |
Согласуйте преобразование цвета с общей политикой PNG в материале Mac PNG: sRGB и Display P3 — управление цветом, чтобы партии иконок не расходились с маркетинговыми кадрами.
② Договор Contents.json
AppIcon.appiconset/Contents.json — контракт между дизайном и Xcode. Каждый элемент массива images задаёт idiom (iphone, ipad, ios-marketing), size (строка в пунктах, например "60x60"), scale ("1x", "2x", "3x") и filename. Маркетинговый слот 1024 использует idiom: "ios-marketing", size: "1024x1024" и scale: "1x".
- Единый источник истины: после того как дизайнеры положили PNG, на удалённом Mac выполните
plutil -lint Contents.json, чтобы отсечь хвостовые запятые и опечатки до CI. - Нет сирот: каждый PNG в папке должен быть упомянут в JSON; каждый
filenameдолжен существовать на диске. - Закрепление версии: коммитьте JSON вместе с PNG, чтобы вопрос «какая схема каталога?» всегда решался диффом.
③ Системная маска, альфа и «плоская» отдача
iOS накладывает маску со скруглённым прямоугольником (суперэллипса) при отрисовке. Сдавайте квадратные PNG с графикой до краёв, если внутри команды нет иного шаблона; для продакшн-иконок не запекайте радиус углов iOS в растр. Держите логотипы и важные детали в центральной безопасной зоне, чтобы маска не обрезала смысл.
Альфа-канал: у маркетинговой иконки 1024×1024 для App Store не должно быть прозрачности — Apple отклоняет альфу в этом слоте. Для остальных слотов по умолчанию предпочитайте полностью непрозрачные иконки, если спецификация не оговаривает иное; полупрозрачные пиксели часто появляются из антиалиасинга «скруглённого» экспорта или фона в клетку. Считайте неожиданную альфу блокером релиза и включите её в чеклист ниже. Общие правила PNG и прозрачности — в OpenClaw: пакетная проверка PNG и альфы на удалённом Mac.
④ Исполняемые параметры экспорта (sRGB)
Зафиксируйте эти параметры в Figma, Sketch, Affinity и Photoshop, чтобы все производные были сопоставимы:
| Параметр | Рекомендуемое значение | Заметки |
|---|---|---|
| Цветовое пространство | sRGB (явное преобразование при экспорте, не «угадывание без тега») | Согласуйте встраивание ICC с веб-иконками; те же пресеты, что для UI-слайсов в Figma, Sketch или Affinity. |
| Битность | 8-бит RGB(A) | 16-битные промежутки допустимы до финального даунскейла; в доставке — 8-битный PNG. |
| Ядро ресайза | Bicubic / Lanczos («высокое качество» в инструменте) | При необходимости слегка подострите линии после уменьшения. |
| Мастер 1024 | Без альфы; непрозрачный фон по бренду | Проверяйте скриптами из раздела ⑥. |
⑤ Чеклист приёмки (дизайн + фронтенд)
| Проверка | Метод | Критерий «принято» |
|---|---|---|
| Размеры | Автоматизация (sips -g pixelWidth -g pixelHeight или ImageMagick identify) |
Каждый PNG совпадает с матрицей (±0 px). |
| Квадратный холст | Визуально + скрипт | Ширина равна высоте для каждого файла. |
| Альфа (маркетинг) | identify -format '%[channels]' или разбор PNG chunk |
1024×1024 — без альфы, только RGB. |
| Альфа (прочие слоты) | Гистограмма / выборочные пиксели | Нет случайной прозрачности, если спека не разрешает; нет каймы «шахматки». |
| Политика маски | Дизайн-ревью | Квадратная отдача; без предварительно скруглённых продакшн-растров; критичная графика в safe area. |
Contents.json |
plutil -lint + сверка имён |
Валидный JSON; каждый filename существует; нет лишних PNG без ссылок. |
| Намерение sRGB | Точечная проверка в Preview + задокументированный пресет | Встроенный ICC или явное преобразование по политике команды. |
| Именование | Регулярное выражение в CI | Стабильный шаблон: Icon-App-<WxH>@<scale>.png, согласованный с JSON. |
⑥ Пакетная валидация на M‑серии и удалённом Mac
На Apple Silicon обход ~15–20 небольших PNG тривиален; выигрыш — в повторяемости и в том, что проверки крутятся, пока основной ноутбук закрыт. Удалённый Mac может держать те же скрипты при фиксированных версиях macOS и утилит, как студии закрепляют пакетную QA по PNG.
Шаг A — обход размеров (папка):
for f in *.png; do
echo -n "$f "
sips -g pixelWidth -g pixelHeight "$f" 2>/dev/null | paste -sd ' ' -
done
Шаг B — маркировка альфы у маркетинговой иконки: ImageMagick identify -verbose для [email protected] (или вашего файла 1024) — убедитесь, что канала альфы нет; падайте сборкой, если появляется rgba.
Шаг C — манифест: сформируйте icons_manifest.csv с колонками path,w,h,bytes,has_alpha,colorIntent и приложите к тикету релиза. Для тяжёлых экспортных задач вокруг иконок см. пакетный экспорт 4K PNG на удалённом Mac M4 — там дисциплина очереди для больших дропов ассетов.
Параллелизм: при генерации из одного мастера 1024 запускайте независимые ресайзы параллельно (xargs -P) — машины M‑серии спокойно выдерживают несколько одновременных sips или CLI-ресайзеров на коротких всплесках в пределах нормальной термики.
Кратко
Используйте пиксельную матрицу как единый договор по размерам, держите Contents.json проверенным и согласованным с именами файлов, выровняйте параметры sRGB между инструментами и считайте альфу на маркетинговой 1024 жёстким провалом. Сочетайте дизайн-ревью (маска, safe zone) со скриптовой пакетной проверкой на Mac с M‑серией — лучше на выделенном удалённом Mac, чтобы дропы иконок оставались скучными и готовыми к релизу.
Дальнейшие шаги: удалённый Mac для доставки дизайна
Ознакомьтесь с предложениями на главной MacPng, затем откройте страницу аренды и тарифы и конфигурации узлов, чтобы добавить удалённый Mac под пакеты иконок, QA PNG и длительную валидацию без блокировки основной рабочей станции. В центре помощи описан онбординг по SSH/VNC для распределённых команд.
iOS-иконки и наборы PNG с удалённого Mac
Закрепите версии macOS и CLI, гоняйте ночной пакетный экспорт и проверки, сдавайте бандлы AppIcon.appiconset с манифестами — удобно студиям с частыми сборками TestFlight.