Próbuję utworzyć ikonę dla mojej aplikacji na iPhone'a, ale nie wiem, jak uzyskać dokładny promień, z którego korzystają ikony iPhone'a. Szukałem samouczka lub szablonu, ale nie mogę go znaleźć.
Jestem pewien, że jestem tylko debilem, ale jak uzyskać zaokrąglone rogi dokładnie dzięki ikonie z programu Illustrator lub Photoshop?
Edytować:
Jaki jest promień iPada Retina?
Odpowiedzi:
Możesz utworzyć cztery ikony (na dzień dzisiejszy) dla swojej aplikacji i wszystkie mogą mieć inny wygląd - niekoniecznie w oparciu o obraz 512x512.
Jeśli utworzysz zestaw niestandardowych ikon, możesz ustawić
UIPrerenderedIcon
opcję true w pliku info.plist i nie doda to efektu połysku, ale umieści pod nim czarne tło i będzie nadal zaokrąglać rogi obrazu za pomocą tych promieni narożnych więc jeśli promień narożnika jednej z ikon jest większy, będzie on pokazywał czerń wokół krawędzi / narożników.Edycja: Zobacz komentarz @ devin-g-rhode i możesz zobaczyć, że wszelkie przyszłe rozmiary ikon powinny mieć
1:6.4
stosunek promienia narożnika do rozmiaru ikony. Istnieje również bardzo dobra odpowiedź od https://stackoverflow.com/a/29550364/396005, która ma lokalizację plików masek obrazu używanych w SDK do zaokrąglania rogów ikonAby dodać plik zgodny z siatkówką, użyj tej samej nazwy pliku i dodaj „@ 2x”. Więc gdybym miał plik mojej ikony 72x72 o nazwie icon.png, dodałbym również plik PNG 114x114 o nazwie [email protected] do projektu / celu, a Xcode automatycznie użyłby go jako ikony na wyświetlaczu siatkówki. Możesz to zobaczyć w akcji na stronie Podsumowanie celu aplikacji, jeśli zrobiłeś to dobrze. To samo działa z obrazami uruchamiania. Użyj launch.png przy 320x480 i [email protected] przy 640x960.
źródło
Po wypróbowaniu niektórych odpowiedzi w tym poście skonsultowałem się z Louie Mantią (były projektant Apple, Square i Iconfactory) i wszystkie dotychczasowe odpowiedzi w tym poście są błędne (lub przynajmniej niepełne). Apple zaczyna od ikony 57px i promienia 10, a następnie skaluje się w górę lub w dół od tego miejsca. W ten sposób możesz obliczyć promień dla dowolnej wielkości ikony za pomocą
10/57 x new size
(na przykład10/57 x 114
daje 20, co jest odpowiednim promieniem dla ikony 114px). Oto lista najczęściej używanych ikon, odpowiednich konwencji nazewnictwa, wymiarów pikseli i promieni narożnych.Ponadto, jak wspomniano w innych odpowiedziach, tak naprawdę nie chcesz przycinać żadnych obrazów używanych w pliku binarnym lub przesyłanych do Apple. Wszystkie powinny być kwadratowe i nie mieć żadnej przejrzystości. Apple automatycznie zamaskuje każdą ikonę w odpowiednim kontekście.
Znajomość powyższego jest jednak ważna w przypadku używania ikon w interfejsie aplikacji, w którym należy zastosować maskę w kodzie lub wstępnie renderować w Photoshopie. Jest to również pomocne przy tworzeniu grafiki do stron internetowych i innych materiałów promocyjnych.
Dodatkowe czytanie:
Neven Mrgan o dodatkowych rozmiarach ikon i innych względach projektowych: rozmiary ikon aplikacji iOS
Marc Edwards z Bjango o różnych opcjach tworzenia roundrects w Photoshopie i dlaczego to ma znaczenie: roundrect
Oficjalne dokumenty Apple na temat rozmiaru ikon i względów projektowych: ikony i obrazy
Aktualizacja:
Zrobiłem kilka testów w Photoshopie CS6 i wydaje się, że 3 cyfry po przecinku są wystarczająco precyzyjne, aby uzyskać dokładnie ten sam wektor (przynajmniej taki, jaki wyświetla Photoshop przy powiększeniu 3200%). Narzędzie Round Rect czasami zaokrągla dane wejściowe do najbliższej liczby całkowitej, ale widać znaczącą różnicę między 90 a 89,825. I kilkakrotnie narzędzie Okrągły prostokąt nie zaokrąglało w górę i faktycznie wyświetlało wiele cyfr po przecinku. Nie jestem pewien, co się tam dzieje, ale zdecydowanie używa i przechowuje dokładniejszą wprowadzoną liczbę.
W każdym razie zaktualizowałem powyższą listę, aby zawierała zaledwie 3 cyfry po przecinku (zanim pojawiło się 13!). W większości sytuacji prawdopodobnie trudno byłoby stwierdzić różnicę między przezroczystą ikoną 512px zamaskowaną w promieniu 90px a maskowaną w 89,825, ale antyaliasing zaokrąglonego rogu na pewno skończyłby się nieco inaczej i prawdopodobnie byłby widoczny w pewnych okolicznościach, szczególnie jeśli Apple zastosuje drugą, bardziej precyzyjną maskę, w kodzie lub w inny sposób.
źródło
Widzę dużo dyskusji na temat „px”, ale nikt nie mówi w procentach, które są stałą liczbą, którą chcesz obliczyć.
Kluczowym odsetkiem jest tutaj 22,37% . Pomnóż dowolny z wyżej wymienionych rozmiarów obrazu przez 0,2237, a otrzymasz właściwy promień piksela dla tego rozmiaru.
Przed iOS 8 Apple używało mniej zaokrągleń, używając 15,625%.
EDYCJA : Dzięki @Chris Prince za komentowanie z iOS 8/9/10 procent promienia: 22,37%
źródło
Ważne: równanie ikony iOS 7
Wraz z nadchodzącą wersją iOS 7 zauważysz, że „standardowy” promień ikony został zwiększony. Spróbuj więc zrobić to, co ja i Apple zaproponowaliśmy z tą odpowiedzią.
Wygląda na to, że dla ikony o rozmiarze 120 pikseli formuła, która najlepiej reprezentuje jej kształt w systemie iOS 7, to następująca superellipsa:
Oczywiście można zmienić
120
liczbę o żądanym rozmiarze ikony, aby uzyskać odpowiednią funkcję.Oryginalny
Najlepszym rozwiązaniem nie jest wcale zaokrąglanie rogów ikon. Jeśli ustawisz ikonę jako kwadratową, iOS automatycznie nałoży ją na ikonę z predefiniowaną maską, która ustawi odpowiednie zaokrąglone rogi.
Jeśli ręcznie ustawisz zaokrąglone rogi ikon, prawdopodobnie będą wyglądały na zepsute na tym lub innym urządzeniu, ponieważ maska zaokrąglania zmienia się nieznacznie z wersji iOS na inną. Czasami twoje ikony będą nieco większe, a czasem (westchnienie) nieco mniejsze. Użycie kwadratowej ikony uwolni Cię od tego obciążenia i na pewno będziesz mieć zawsze aktualną i ładną ikonę swojej aplikacji.
To podejście obowiązuje dla każdego rozmiaru ikony (iPhone / iPod / iPad / retina), a także dla okładek iTunes. Podjąłem to podejście kilka razy i jeśli chcesz, mogę opublikować link do aplikacji, która używa natywnych kwadratowych ikon.
Edytować
Aby lepiej zrozumieć tę odpowiedź, zapoznaj się z oficjalną dokumentacją Apple na temat ikon iOS . Na tej stronie wyraźnie stwierdzono, że kwadratowa ikona automatycznie otrzyma te rzeczy, gdy zostanie wyświetlona na urządzeniu z systemem iOS:
Możesz więc osiągnąć dowolny efekt, rysując zwykłą kwadratową ikonę i wypełniając w niej zawartość. Ostateczny promień narożnika będzie podobny do tego, co mówią inne odpowiedzi tutaj, ale nigdy nie będzie to zagwarantowane, ponieważ te liczby nie są częścią oficjalnej dokumentacji Apple na iOS. Proszą o narysowanie kwadratowych ikon, więc ... dlaczego nie?
źródło
Ludzie kłócą się o nieznaczny wzrost promienia narożnika, ale tak nie jest.
Z tego bloga :
Nie musisz stosować promienia narożnika do ikon na iOS. Wystarczy podać kwadratowe ikony. Ale jeśli nadal chcesz wiedzieć, jak to zrobić, faktyczny kształt nazywa się Squircle, a poniżej znajduje się wzór:
źródło
Odpowiedź dbarnarda zawiera wzór do obliczenia prawidłowego promienia, ale ponieważ szukałeś szablonów, wszystkie maski i nakładki można znaleźć w tym katalogu:
(ścieżka dotyczy najnowszych wersji XCode. W przypadku starszych wersji prawdopodobnie będzie to ścieżka wewnątrz / Developer /).
Jak zauważyli inni, NIE powinieneś ich maskować samodzielnie, ale możesz ich użyć, aby sprawdzić, jak będą wyglądać ikony po zamaskowaniu.
(kredyty za to odkrycie należą do Nevena Mrgana IIRC)
źródło
find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
Promień narożny ikony 57 x 57 pikseli wynosi 9 pikseli.
źródło
Jak powiedzieli inni, nie chcesz zaokrąglać swoich zakrętów. Chcesz wysłać płaską (bez warstw lub alfa) grafikę kwadratową. Apple zmieniło maskę, której używają do zaokrąglania rogów w iOS7, a następnie ponownie w iOS8. Te maski można znaleźć w pakiecie aplikacji Xcode. Ścieżka zmienia się wraz z każdą nową wersją zestawu SDK. Więc pokażę ci, jak zawsze możesz to znaleźć.
W tej chwili ścieżka znaleziona przez to polecenie to
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework
ale nie ufaj temu. Użyj polecenia, aby znaleźć go sam.Ta ścieżka wskazuje katalog z tymi plikami (ponownie, w momencie tego posta)
Jak widać, istnieje wiele różnych masek, ale są one dość wyraźnie nazwane. Oto
AppIconMask@3x~iphone.png
zdjęcie:Możesz go użyć do przetestowania ikony, aby sprawdzić, czy po maskowaniu będzie wyglądać dobrze. Ale nie rób za rogów . Jeśli to zrobisz, gdy Apple ponownie zmieni te maski, będziesz mieć artefakty.
źródło
Wszystkie poprzednie odpowiedzi na to pytanie są teraz nieaktualne. Od co najmniej maja 2015 r. Apple wymaga dostarczania kwadratowych ikon bez zaokrąglania:
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
źródło
Jeśli nie bierzesz pod uwagę obrysu, dokładny promień w przypadku ikony 57x57 wynosi 10 pikseli.
Otrzymuję te informacje z iconreference .
źródło
Podczas projektowania ikon aplikacji w Photoshopie odkryłem, że żaden całkowity promień narożnika nie pasuje dokładnie do maski urządzenia .
Teraz tworzę pusty projekt za pomocą Xcode, ustawiam całkowicie biały plik PNG jako ikonę i wyłączam ustawione fazowanie i połysk. Następnie uruchamiam aplikację i robię zrzut ekranu z ekranu głównego. Teraz możesz łatwo utworzyć maskę z tego obrazu, której możesz użyć w Photoshopie. Dzięki temu uzyskasz idealnie zaokrąglone rogi.
źródło
IPhone zaokrągla rogi, wszystko czego potrzebujesz to kwadratowa ikona png 57 x 57, a ty powinieneś być dobry
źródło
Istnieją dwie całkowicie sprzeczne odpowiedzi z dużą liczbą głosów, jedna to 160px @ 1024, a druga to 180px @ 1024. Więc wiedźma?
Przeprowadziłem kilka eksperymentów i myślę, że to 180px @ 1024, więc drbarnard ma rację.
Pobrałem ikonę iTunes U ze sklepu App Store o wymiarach 175x175px. Przeskalowałem ją w Photoshopie do 1024px i umieściłem na niej dwa kształty, jeden o promieniu 160 pikseli, a drugi 180 pikseli.
Jak widać poniżej, kształt (cienka szara linia) z 160px (pierwszy) jest nieco odbiegający, podczas gdy ten z 180px wygląda dobrze.
Oto co robię teraz w PhotoShop:
źródło
Wypróbowałem promień 228px dla 1024x1024 i zadziałało :)
źródło
Zaktualizuj (od stycznia 2018) wymagania dotyczące ikony aplikacji:
https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
źródło
Nie musisz stosować promienia narożnika do ikony aplikacji, możesz po prostu zastosować kwadratowe ikony. Urządzenie automatycznie stosuje promień naroża.
źródło