Ikona aplikacji: kanał alfa i rozmiary w obu sklepach

Masz jedno logo i dwa sklepy z aplikacjami, a plik, który zadowala Apple, to nie ten sam plik, którego chce Google. Wychodzi to w najgorszym możliwym momencie: build jest gotowy, a wysyłka raz po raz nie przechodzi przez kanał alfa.

Apple chce kwadratowej ikony 1024x1024 z nieprzezroczystym tłem. Play chce 32-bitowego PNG 512x512, który technicznie obsługuje alfę, ale — zgodnie z własną specyfikacją projektową Google — nie powinien z niej korzystać. I żaden ze sklepów nie chce pliku wyglądającego na wykończony — oba nakładają własne zaokrąglenia i efekty już po przesłaniu. Oto czego wymaga każdy z nich i jak wyciągnąć oba pliki z jednego logo.

Apple: 1024 piksele, kwadrat, nic prześwitującego

Human Interface Guidelines Apple'a podają rozmiar ikony aplikacji dla iOS, iPadOS i macOS jako 1024x1024 px, kwadrat, w sRGB, Gray Gamma 2.2 albo Display P3. Preferowaną drogą Apple'a jest dziś Icon Composer, w którym importujesz warstwy pierwszego planu i definiujesz tło w samym narzędziu, ale spłaszczony obraz nadal jest dozwolony: warstwy dają większą kontrolę, nie są obowiązkiem.

Przy pierwszej wysyłce potyka się o tło niemal każdy. Instrukcja Apple'a dla importowanej warstwy tła nie zostawia miejsca na dyskusję: ma wypełniać całą powierzchnię i być nieprzezroczysta. PNG 1024 px z przezroczystym tłem nie jest prawidłową ikoną App Store — prześlij taki, a App Store Connect zwróci ITMS-90717: ikona App Store nie może być przezroczysta ani zawierać kanału alfa. Jedyny wyjątek to wariant ciemny ikony: ten Apple każe dostarczyć z przezroczystym tłem, żeby prześwitywało przez niego tło zapewniane przez system. Wszędzie indziej zdecyduj, jaki kolor siedzi za Twoim znakiem, i wypal go w pliku.

Inne platformy Apple'a zmieniają rozmiar ikony: watchOS 1088x1088 i visionOS 1024x1024, obie maskowane do koła, a tvOS poziome 800x480. Zmieniają też metodę: ikony tvOS i visionOS składa się jako warstwowe stosy obrazów w Xcode, a nie w Icon Composer.

Google Play: 512 pikseli, alfa dozwolona, przezroczystość i tak błędem

Ikona na karcie sklepu Play to 32-bitowy PNG z kanałem alfa, 512x512 px, sRGB, maksymalnie 1024 KB. Przeczytaj samo to zdanie, a przezroczysty wycinek, który już masz, wygląda na gotowy.

Specyfikacja projektowa ikon Google zamyka te drzwi: przezroczyste zasoby pokazują kolor tła interfejsu Google Play. Twój znak unosi się wtedy na dowolnej powierzchni, jaką akurat wyrenderuje Play, a ciemne logo znika w trybie ciemnym. Rada Google: wybierz kolor tła odpowiedni dla swojej marki.

Dwie kolejne zasady Play: żadnych plakietek ani tekstu sugerującego ranking, cenę czy kategorie Play, a ikona na karcie sklepu to co innego niż ikona launchera na urządzeniu. Ta ikona adaptacyjna korzysta z warstw 108x108 dp, w których tylko wnętrze 66x66 dp ma gwarancję, że nie utnie go maska producenta urządzenia.

Jak wyciągnąć oba pliki z jednego logo

Oba pliki zaczynają się od tego samego: od Twojego znaku, czysto oddzielonego od tego, na czym siedział. Jeśli Twoje logo istnieje wyłącznie jako JPEG od dostawcy albo zdjęcie wydrukowanej papeterii, najpierw je wytnij, żeby kształt był wyizolowany z prawdziwym kanałem alfa. remover.bg odrywa znak od tła i pozwala położyć go w edytorze na jednolitym albo własnym kolorze marki — czyli wykonać spłaszczenie, którego wymaga Apple.

Kolejność, która działa:

1. Usuń tło, żeby logo stało samo. Sprawdź krawędzie na ciemnym kolorze, nie na białym — cienkie kreski i szeryfy ukrywają swoje wady na białym podglądzie.
2. Ustaw tło w kolorze marki i wyeksportuj PNG. Zachowaj też wersję przezroczystą, do pakietów prasowych i faviconów.
3. We własnym narzędziu do projektowania umieść ten PNG na kwadratowym płótnie i wyeksportuj w 1024x1024 dla Apple'a oraz 512x512 dla Play. Ustalanie rozmiaru należy do tego etapu, a nie do narzędzia usuwającego tło.

Przy zeskanowanym albo sfotografowanym logo usuwanie tła z logo omawia przypadki brzegowe, a poradnik o przezroczystym PNG wyjaśnia, dlaczego taki plik master warto trzymać.

Zaokrąglenia i cień zostaw sklepom

Play mówi o tym wprost: sam zaokrągla rogi promieniem 30% boku ikony, po przesłaniu dokłada własny cień i prosi, żebyś pominął jedno i drugie. Apple maskuje Twój kwadrat do systemowego zaokrąglonego prostokąta i nakłada własne rozjaśnienia, refrakcję i półprzezroczystość, ostrzegając, że warstwy z nałożoną z góry maską psują te efekty i sprawiają, że krawędzie wyglądają na postrzępione.

Czyli: żadnych wcześniej zaokrąglonych rogów, żadnego cienia, żadnej fazy, żadnej poświaty. Ta wstrzemięźliwość dotyczy wyłącznie ikon — na zdjęciu produktu to właśnie realistyczny cień kontaktowy sprawia, że przedmiot nie wygląda na doklejony.

Skoro oba sklepy maskują, trzymaj ważną część znaku na środku. Apple radzi wyśrodkować główną treść, żeby maska nie mogła jej uciąć. Siatka keyline w Play działa inaczej, niż wszyscy zakładają: to wskazówka pozycjonowania, a nie granica. Google każe wypełnić grafiką całą powierzchnię zasobu, kiedy tylko się da, a po linie pomocnicze sięgać dopiero wtedy, gdy kształt wokół logo jest istotny dla marki. Dołóż marginesu na wszelki wypadek, a Twoja ikona wyrenderuje się widocznie mniejsza niż każda inna obok niej na liście.

To, co promień 30% naprawdę zjada, to rogi — więc logotyp wepchnięty w nie traci swoje końcówki. Na kolistych maskach watchOS i visionOS logotyp ciągnący się od krawędzi do krawędzi bezpowrotnie traci pierwszą i ostatnią literę.

Zanim prześlesz

• Apple: PNG 1024x1024, kwadrat, w pełni nieprzezroczysty, rogi zostawione ostre.
• Play: 32-bitowy PNG 512x512, maksymalnie 1024 KB, tło w kolorze marki zamiast przezroczystości, rogi zostawione ostre.
• Ta sama grafika i te same kolory w obu sklepach: użytkownik ma rozpoznać jedną aplikację, a nie dwie.
• Obejrzyj obie w rozmiarze miniatury. Detal, który czyta się przy 1024, znika przy 40 pikselach.

Napraw ikonę raz, a zostanie naprawiona na każde kolejne wydanie.