Икони на приложения: алфа канали и размери за двата магазина

Имате едно лого и два магазина за приложения, а файлът, който удовлетворява Apple, не е файлът, който Google иска. Проблемът изниква в най-лошия момент: билдът е готов, а качването продължава да се проваля заради алфа канал.

Apple иска квадратна икона 1024x1024 с непрозрачен фон. Play иска 512x512 32-битов PNG, който технически поддържа алфа, но според собствената дизайн спецификация на Google не бива да го използва. И нито един от магазините не иска файл със завършен вид — и двата прилагат свои ъгли и ефекти след качването. Ето какво изисква всеки от тях и как да получите двата файла от едно лого.

Apple: 1024 пиксела, квадрат, нищо прозрачно

Насоките за човешки интерфейс (Human Interface Guidelines) на Apple посочват размера на иконата за iOS, iPadOS и macOS като 1024x1024 px, квадрат, в sRGB, Gray Gamma 2.2 или Display P3. Предпочитаният от Apple път вече е Icon Composer, където импортирате слоеве за преден план и дефинирате фона в инструмента, но сплеснато изображение все още е позволено: слоевете дават повече контрол, но не са задължителни.

Тези, които качват за първи път, се спъват във фона. Указанието на Apple за импортиран фонов слой е категорично: направете го изцяло запълнен и непрозрачен. PNG от 1024px с прозрачен фон не е валидна икона за App Store — качите ли такъв, App Store Connect връща ITMS-90717: иконата за App Store не може да е прозрачна или да съдържа алфа канал. Вариантът за тъмен режим е единственото изключение: Apple иска да го подадете с прозрачен фон, за да прозира системният фон. Навсякъде другаде решете какъв цвят стои зад вашия знак и го вградете във файла.

Другите платформи на Apple променят размера: watchOS 1088x1088 и visionOS 1024x1024, и двете с кръгла маска, а tvOS — пейзажен 800x480. Променят и метода: иконите за tvOS и visionOS се сглобяват като многослойни стекове от изображения в Xcode, а не в Icon Composer.

Google Play: 512 пиксела, алфа е позволен, прозрачността все пак е грешка

Иконата за страницата в магазина на Play е 32-битов PNG с алфа, 512x512 px, sRGB, максимум 1024KB. Прочетете само това и прозрачно изрязаният обект, който вече имате, изглежда подходящ.

Дизайн спецификацията на Google затваря тази врата: прозрачните файлове показват фоновия цвят на интерфейса на Google Play. Тогава знакът ви „плува" върху каквато повърхност рендира Play, а тъмно лого изчезва в тъмен режим. Съветът на Google: изберете фонов цвят, подходящ за вашата марка.

Още две правила на Play: без значки или текст, внушаващи класиране, цена или категории в Play, а иконата за страницата в магазина е отделна от иконата на стартера на устройството. Тази адаптивна икона използва слоеве от 108x108 dp, при които само вътрешните 66x66 dp са гарантирано защитени от изрязване от маска на производителя.

Как да получите двата файла от едно лого

И двата файла тръгват от едно и също: вашият знак, чисто отделен от онова, върху което е стоял. Ако логото ви съществува само като JPEG от доставчик или снимка на печатни материали, първо го изрежете, така че формата да е изолирана с истински алфа канал. remover.bg отделя знака от фона му и ви позволява да го поставите върху плътен или собствен фирмен цвят в редактора — стъпката на сплескване, която Apple изисква.

Редът, който работи:

1. Премахнете фона, така че логото да остане само. Проверете ръбовете върху тъмен цвят, а не върху бял — тънките линии и серифите крият дефектите си на бял преглед.
2. Задайте фона във фирмения си цвят и експортирайте PNG. Запазете и прозрачната версия — за прес комплекти и favicon-и.
3. Във вашия дизайн инструмент поставете този PNG върху квадратно платно и експортирайте в 1024x1024 за Apple и 512x512 за Play. Оразмеряването се прави там, а не в инструмента за премахване на фон.

За сканирано или заснето лого статията за премахване на фона от лого покрива граничните случаи, а ръководството за прозрачен PNG обяснява защо си струва да пазите този мастер файл.

Оставете магазините да нарисуват ъглите и сянката

Play е конкретен по въпроса: закръгля ъглите сам с радиус 30% от размера на иконата, добавя своя сянка след качването и ви моли да пропуснете и двете. Apple маскира вашия квадрат в системния заоблен правоъгълник и прилага свои отблясъци, пречупване и полупрозрачност, като предупреждава, че предварително маскираните слоеве вредят на тези ефекти и правят ръбовете назъбени.

И така: без предварително заоблени ъгли, без сянка, без релеф, без сияние. Тази сдържаност важи само за иконите — при продуктова снимка именно реалистичната контактна сянка е това, което спира предмета да изглежда като залепен.

Тъй като и двата магазина маскират, дръжте важната част от знака центрирана. Насоката на Apple е основното съдържание да е в центъра, за да не може маскирането да го отреже. Мрежата с ключови линии на Play работи различно от очакваното: тя е ориентир за позициониране, а не граница. Указанието на Google е да запълните целия файл с графика, когато можете, и да прибегнете до ключовите линии само когато формата около логото е съществена за марката. Оставите ли отстъп от предпазливост, иконата ви ще се рендира видимо по-малка от всяка съседна в списъка.

Това, което 30-процентовият радиус реално „изяжда", са ъглите, така че словесен знак, избутан в тях, губи краищата си. При кръглите маски на watchOS и visionOS словесен знак от ръб до ръб губи първата и последната си буква изцяло.

Преди качването

• Apple: 1024x1024 PNG, квадрат, напълно непрозрачен, с остри ъгли.
• Play: 512x512 32-битов PNG, максимум 1024KB, фон във фирмен цвят вместо прозрачност, с остри ъгли.
• Една и съща графика и цветове в двата магазина: потребителите трябва да разпознават едно приложение, а не две.
• Прегледайте и двете в размер на миниатюра. Детайл, който се чете при 1024, изчезва при 40 пиксела.

Оправете иконата веднъж и тя остава оправена за всяко следващо издание.