BraveCLКак создать многослойную иконку приложения на Mac
Создайте четыре редактируемые группы глубины, настройте стеклянный материал, проверьте активные цели и сохраните проект в Assets for Xcode.
- Результат
- Сохранённый проект MyIcon содержит четыре редактируемые группы: Orange Plate, Purple Plate, Blue Plate и Paper Plane.
- Что понадобится
- Установите Assets for Xcode на Mac.
- Подготовьте графику для четырёх групп глубины: основу, две цветные пластины и символ переднего плана.
- Выберите место, куда можно записать редактируемый проект MyIcon.
Создайте многослойную иконку приложения, не сводя рисунок в одну плоскую картинку слишком рано. В этой инструкции мы повторим бумажный самолётик из четырёх групп глубины, показанный на первом скриншоте Assets for Xcode в App Store: добавим исходные изображения, настроим стеклянные материалы, выберем цели экспорта, проверим иконку и сохраним редактируемый документ.
1.Начните с графики для иконки
Откройте Assets for Xcode и перетащите первое исходное изображение в стартовое окно. Там также есть Open Project и Create New Project; в этом примере перетащите рисунок основы в начальную область, чтобы создать редактируемый документ.
Стартовое окно Assets for Xcode с кнопками Open Project и Create New Project. 2.Импортируйте и назовите нижнюю пластину
После импорта первого изображения выберите новую группу в Layers и назовите её Orange Plate. В предварительном просмотре иконки появится оранжево-розовая основа в отдельной редактируемой группе глубины.
Редактируемая иконка с группой глубины Orange Plate и оранжево-розовым рисунком. 3.Добавьте фиолетовую пластину
Выберите корневой объект холста, импортируйте второе исходное изображение как ещё одну группу глубины и назовите её Purple Plate. Группы Purple Plate и Orange Plate остаются раздельными в Layers.
Purple Plate над Orange Plate в списке Layers и в предварительном просмотре иконки. 4.Расположите синюю пластину сверху
Снова выберите корневой объект холста, импортируйте третье исходное изображение и назовите группу Blue Plate. Убедитесь в предварительном просмотре, что синее изображение расположено над фиолетовой и оранжевой пластинами.
Blue Plate как третья редактируемая группа глубины над фиолетовой и оранжевой пластинами. 5.Завершите иконку с самолётиком
Импортируйте три SVG-компонента бумажного самолётика вместе как одну группу глубины, назовите группу Paper Plane, а документ — MyIcon. Теперь в Layers есть четыре группы, каждую из которых можно редактировать отдельно.
Paper Plane над тремя цветными пластинами; в MyIcon видно четыре именованные группы глубины. 6.Сделайте самолётик непрозрачным
Выберите Paper Plane, откройте инспектор материалов и отключите Glass в разделе Material (Glass). Передний самолётик станет чёткой непрозрачной белой фигурой вместо полупрозрачного стекла.
Инспектор материалов с отключённым параметром Glass у выбранной группы Paper Plane. 7.Примените Clear Glass к синей группе
Выберите Blue Plate, переключитесь на Elevation и установите для Recipe значение Clear Glass в инспекторе материалов. Проверьте, что Glass включён, и рассмотрите порядок групп по глубине.
Предварительный просмотр Elevation с четырьмя группами глубины, Clear Glass включён для Blue Plate. 8.Включите нужные платформы
Включите Apple Watch и добавьте Android Adaptive Icon, Windows App Icon и Icon Composer к существующим целям Apple. Убедитесь, что боковая панель и полоса предварительного просмотра показывают нужные цели проверки.
Список целей с Apple Watch, Android Adaptive Icon, Windows App Icon и Icon Composer. 9.Проверьте включённые цели
Запустите проверку иконки и посмотрите на нижнюю строку состояния. В примере показаны Apple ready, Android ready и Windows ready; все необходимые размеры созданы. Исправьте проблемы с целями до сохранения.
Статусы проверки Apple ready, Android ready и Windows ready для включённых целей. 10.Сохраните и проверьте проект
Вернитесь в Design, выберите корневой объект документа, чтобы убрать рамки выделения, и сохраните проект как MyIcon.braveicon. Заголовок MyIcon, четыре названные группы и индикатор Saved подтверждают сохранение. Окончательные файлы платформ экспортируются отдельно.
Готовая иконка MyIcon в режиме Design с четырьмя редактируемыми группами и статусом Saved.
После последнего шага
Самолётик остаётся непрозрачным, синий слой использует Clear Glass, а активные цели Apple, Android и Windows проходят проверку. Сохранение проекта не экспортирует окончательные файлы для платформ.
Советы
Храните каждую пластину в отдельной группе Layers, чтобы менять её без объединения изображения.
Проверьте порядок глубины в Elevation, прежде чем выбирать вариант стеклянного материала.
Перед сохранением документа с иконкой проверьте состояние каждой активной цели.
ВниманиеЭта инструкция сохраняет редактируемый проект иконки, но не экспортирует AppIcon.appiconset или другие окончательные файлы платформ.
ВниманиеЕсли после проверки цель не готова, исправьте проблему до экспорта.
