Projektowanie / Android / iOS / WWW
Jedna grafika, różne platformy: jak przygotować ikony aplikacji?
Logo w pliku PNG nie jest jeszcze kompletem ikon do aplikacji. Każda platforma inaczej składa obraz, nadaje mu kształt i odwołuje się do zasobów. W tym poradniku przechodzimy przez przygotowanie jednego znaku do kilku zastosowań, korzystając z eksportów dostępnych w Icons byFox.
1. Zacznij od znaku czytelnego w małej skali
Na początek wybierz prosty symbol albo inicjał. Obejrzyj go w rozmiarze zbliżonym do rzeczywistej ikony, a nie tylko na dużym płótnie. Jeśli po zmniejszeniu znika środek litery albo drobne linie zlewają się ze sobą, uprość źródło przed przygotowaniem kolejnych plików.
Do ćwiczenia wystarczy przezroczysty PNG lub SVG z wyraźnym znakiem. W generatorze ustaw tło i wielkość grafiki, a następnie dodaj formaty docelowe. Zostaw margines wokół symbolu; rozciągnięcie go do samych krawędzi utrudnia wykorzystanie tej samej kompozycji w różnych maskach.
Przykładem narzędzia do tego etapu jest Icons byFox. Jego podglądy pomagają porównać kompozycję, a eksport przygotowuje strukturę plików dla wybranej platformy. Link do edytora i instrukcje instalacji znajdziesz w źródłach pod artykułem.
2. Android: warstwy zamiast gotowego zaokrąglenia
Ikona adaptive składa się z pierwszego planu i tła. Launcher nakłada na nie własną maskę, dlatego nie wystarczy wyeksportować jednego obrazka z zaokrąglonymi rogami. Ważna część znaku powinna przetrwać zmianę kształtu z kwadratu na okrąg.
Eksport Androida w Icons zawiera katalog res, obrazy dla różnych gęstości oraz pliki XML dla warstw adaptive. Po rozpakowaniu scal zasoby z katalogiem aplikacji i sprawdź odwołania android:icon oraz android:roundIcon w manifeście. Nie zastępuj całego istniejącego res: zawiera też inne zasoby Twojego projektu.
3. Powiadomienia potrzebują innego symbolu
Kolorowe logo aplikacji i mała ikona powiadomienia pełnią różne funkcje. W formacie powiadomień Icons przygotowuje biały znak na przezroczystym tle. Android korzysta z jego przezroczystości do wyświetlenia symbolu; kolorowe zdjęcie na pełnym tle nie jest dobrym materiałem wejściowym.
Jeśli w pasku stanu widzisz biały kwadrat, sprawdź przede wszystkim przezroczystość źródła i zasób wskazany w setSmallIcon(). Wybranie poprawnej ikony launchera w manifeście nie ustawia automatycznie symbolu powiadomienia. W generatorze dodaj osobny format powiadomień i zacznij od prostego, czytelnego obrysu.
4. iOS: uporządkuj katalog ikon w Xcode
W eksporcie iOS otrzymujesz AppIcon.appiconset z obrazami oraz plikiem Contents.json, który opisuje ich zastosowanie. Ten zestaw można przenieść do Assets.xcassets w Xcode i wskazać jako ikonę aplikacji. Sama obecność obrazów w repozytorium nie wystarczy: sprawdź ustawienia konkretnego targetu i konfiguracji kompilacji.
Generator zapisuje w tym formacie nieprzezroczyste, kwadratowe obrazy. To system nadaje ikonie docelową maskę, więc nie dodawaj wcześniej przezroczystych, zaokrąglonych narożników. Katalog PNG to konkretny sposób integracji; przy innym procesie projektowym, na przykład z Icon Composer, sprawdź wymagania używanej wersji narzędzi Apple.
5. WWW: podłącz eksport do strony
Paczka WWW zawiera faviconę ICO, obrazy PNG, ikonę Apple touch i manifest z wariantami zwykłymi oraz maskable. Samo skopiowanie ZIP-a na serwer niczego nie zmieni. Rozpakuj pliki, ustaw właściwe ścieżki w HTML i podepnij manifest witryny.
Zwróć uwagę na katalog, w którym publikujesz stronę. Ścieżka działająca w katalogu głównym domeny może nie pasować do aplikacji uruchomionej pod prefiksem. Sprawdź w narzędziach przeglądarki, czy obrazy i manifest zwracają HTTP 200. Jeśli nadal widzisz starą faviconę, sprawdź pamięć podręczną przed ponownym generowaniem plików.
6. Zapisz źródło i wykonaj test na urządzeniu
W Icons wybierz Tylko ten projekt, aby pobrać wybrany format, albo Wszystkie projekty, aby zebrać dodane formaty. Zachowaj README.txt i strukturę katalogów. Wersję do dalszej edycji zapisz przez Zapisz projekt; nie traktuj pojedynczego PNG jako kopii całego projektu.
Na koniec obejrzyj ikonę w aplikacji zainstalowanej na urządzeniu, w powiadomieniu i na rzeczywistej stronie. Podgląd edytora pomaga ocenić wygląd, ale nie wykryje błędnego targetu Xcode, innego wariantu Androida czy złej ścieżki do manifestu.
Te czynności warto uwzględnić przy przygotowaniu aplikacji mobilnej Flutter do wydania. Flutter współdzieli znaczną część kodu, lecz zasoby i konfiguracja platform nadal wymagają osobnego sprawdzenia.
Dokumentacja do dalszej pracy
Instrukcje wdrożeniowe dobierz do wersji używanej w swoim projekcie. Poniższe źródła rozwijają opisane zagadnienia.