Перейти к содержимому
Источник Глава три. Шрифты

Глава четыре. Иконки приложения

Глава четыре. Иконки приложения

Что может быть проще, чем просто поменять у приложения иконку, да? Дизайнеры рисуют с запасом какую-нибудь 1024x1024 иконку, мы понимаем, что для адаптивных иконок нам нужны бэкграунд и фореграунд отдельно, нам рисуют и это, мы начинаем готовить иконку в проекте.

Идём в New → Image Asset в студии, добавляем их, смотрим на превьюшку. И всё не так, конечно же. Прикрепил скриншот для сравнения того, что получилось на этом этапе с тем, что должно быть.

Почему? У иконок есть safe zone. По документации – для иконки 108x108 это 72x72. Лаунчеры и система гарантируют, что эти две трети останутся на месте несмотря ни на что, а с оставшейся третью может произойти что угодно: обрезаться, растягиваться, делать всякие параллаксы, анимации и так далее.

Это всё хоть и логично, но немного контринтуитивно в производстве. Дизайнер должен был изначально нарисовать макет таким образом, чтобы 66.6% от неё было желаемой иконкой. И само лого на фореграунде и фон. Когда я жил почти всю жизнь с иконками на каком-то одноцветном или тайловом фоне, то даже не задумывался об этом. 🎲

Крутить ползунок масштабирования в Asset Studio дело неблагодарное. Не попадёте в то, что хотели дизайнеры. Да и не поможет. По Full Bleed Layers будет видно, что снаружи фона пустота и наверняка найдётся хитрый сценарий, в котором эту пустоту когда-нибудь юзер увидит.

Итого: иконки надо было рисовать не на 1024x1024 канвасе, а на 1536x1536. Но скейлиться там от исходной иконки должна исключительно обрезающая контент маска, всё остальное остаётся в этом 1024x1024 квадрате посередине. И только так итоговая иконка после обрезания будет соответствовать первоначальному макету.

Image 2