![]()
Что может быть проще, чем просто поменять у приложения иконку, да? Дизайнеры рисуют с запасом какую-нибудь 1024x1024 иконку, мы понимаем, что для адаптивных иконок нам нужны бэкграунд и фореграунд отдельно, нам рисуют и это, мы начинаем готовить иконку в проекте.
Идём в New → Image Asset в студии, добавляем их, смотрим на превьюшку. И всё не так, конечно же. Прикрепил скриншот для сравнения того, что получилось на этом этапе с тем, что должно быть.
Почему? У иконок есть safe zone. По документации – для иконки 108x108 это 72x72. Лаунчеры и система гарантируют, что эти две трети останутся на месте несмотря ни на что, а с оставшейся третью может произойти что угодно: обрезаться, растягиваться, делать всякие параллаксы, анимации и так далее.
Это всё хоть и логично, но немного контринтуитивно в производстве. Дизайнер должен был изначально нарисовать макет таким образом, чтобы 66.6% от неё было желаемой иконкой. И само лого на фореграунде и фон. Когда я жил почти всю жизнь с иконками на каком-то одноцветном или тайловом фоне, то даже не задумывался об этом. 🎲
Крутить ползунок масштабирования в Asset Studio дело неблагодарное. Не попадёте в то, что хотели дизайнеры. Да и не поможет. По Full Bleed Layers будет видно, что снаружи фона пустота и наверняка найдётся хитрый сценарий, в котором эту пустоту когда-нибудь юзер увидит.
Итого: иконки надо было рисовать не на 1024x1024 канвасе, а на 1536x1536. Но скейлиться там от исходной иконки должна исключительно обрезающая контент маска, всё остальное остаётся в этом 1024x1024 квадрате посередине. И только так итоговая иконка после обрезания будет соответствовать первоначальному макету.
![]()