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?

Możesz utworzyć cztery ikony (na dzień dzisiejszy) dla swojej aplikacji i wszystkie mogą mieć inny wygląd - niekoniecznie w oparciu o obraz 512x512.

• promień narożnika dla ikony 512x512 = 80 (iTunesArtwork)
• promień rogu ikony 1024x1024 = 180 (iTunesArtwork Retina )
• promień narożnika dla ikony 57x57 = 9 (iPhone / iPod Touch)
• promień naroża dla ikony 114x114 = 18 (iPhone / iPod Touch Retina )
• promień narożnika dla ikony 72x72 = 11 (iPad)
• promień narożnika dla ikony 144 x 144 = 23 (iPad Retina )

Jeśli utworzysz zestaw niestandardowych ikon, możesz ustawić UIPrerenderedIconopcję 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.4stosunek 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 ikon

Aby 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 icon@2x.png 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 launch@2x.png przy 640x960.

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ład 10/57 x 114daje 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.

1. Icon1024.png - 1024px - 179,649
2. Icon512.png - 512px - 89,825
3. Icon.png - 57px - 10
4. Icon@2x.png - 114px - 20
5. Icon-72.png - 72px - 12,632
6. Icon-72@2x.png - 144px - 25,263
7. Icon-Small.png - 29px - 5.088
8. Icon-Small@2x.png - 58px - 10.175

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.

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%

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:

|x/120|^5 + |y/120|^5 = 1

Oczywiście można zmienić 120liczbę o żądanym rozmiarze ikony, aby uzyskać odpowiednią funkcję.

Oryginalny

Powinieneś dostarczyć obraz, który ma narożniki 90 ° (ważne jest, aby unikać przycinania rogów ikony - iOS robi to za Ciebie, gdy stosuje maskę zaokrąglającą narożnik) ( Dokumentacja Apple )

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:

1. Zaokrąglone rogi
2. Upuść cień
3. Odblaskowy połysk (chyba że zapobiegniesz efektowi połysku)

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?

Ludzie kłócą się o nieznaczny wzrost promienia narożnika, ale tak nie jest.

Z tego bloga :

„Sekretem” fizycznych produktów Apple jest to, że unikają styczności (gdzie promień styka się z linią w jednym punkcie) i wytwarzają swoje powierzchnie z tak zwaną ciągłością krzywizny .

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:

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:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(ś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)

Promień narożny ikony 57 x 57 pikseli wynosi 9 pikseli.

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źć.

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

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)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft@2x.png
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

Jak widać, istnieje wiele różnych masek, ale są one dość wyraźnie nazwane. Oto AppIconMask@3x~iphone.pngzdję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.

Wszystkie poprzednie odpowiedzi na to pytanie są teraz nieaktualne. Od co najmniej maja 2015 r. Apple wymaga dostarczania kwadratowych ikon bez zaokrąglania:

Rogi ikony powinny być kwadratowe. System stosuje maskę, która automatycznie zaokrągla rogi ikon.

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

Jeśli nie bierzesz pod uwagę obrysu, dokładny promień w przypadku ikony 57x57 wynosi 10 pikseli.

Otrzymuję te informacje z iconreference .

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.

IPhone zaokrągla rogi, wszystko czego potrzebujesz to kwadratowa ikona png 57 x 57, a ty powinieneś być dobry

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:

1. Tworzę płótno o wymiarach 1026x1026px z maską 180px dla głównego projektu Smart Object .
2. Główny obiekt inteligentny powielam 5 razy i zmieniam rozmiar na 1024px, 144px, 114px, 72px i 57px.
3. Na każdym inteligentnym obiekcie umieszczam „Nowy warstwowy wycinek” i zmieniam nazwy plasterków zgodnie z ich rozmiarem (np. Icon-72px).
4. Kiedy zapisuję grafikę, wybieram „Wszystkie plastry użytkownika” i BANG! Mam wszystkie ikony potrzebne do mojej aplikacji.

Wypróbowałem promień 228px dla 1024x1024 i zadziałało :)

Zaktualizuj (od stycznia 2018) wymagania dotyczące ikony aplikacji:

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Zachowaj kwadratowe rogi ikon . System stosuje maskę, która automatycznie zaokrągla rogi ikon.

Zachowaj prostotę tła i unikaj przezroczystości . Upewnij się, że ikona jest nieprzezroczysta i nie zagracaj tła. Daj mu proste tło, aby nie przytłoczyło innych ikon aplikacji w pobliżu. Nie musisz wypełniać całej ikony treścią.

Nie musisz stosować promienia narożnika do ikony aplikacji, możesz po prostu zastosować kwadratowe ikony. Urządzenie automatycznie stosuje promień naroża.