Ikony aplikacji na iPhone'a - dokładny promień?

313

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?

Frank Barson
źródło
2
Dlaczego uważasz, że musisz?
Nick Veys,
@NickVeys Bez względu na to, ile lat, martwi mnie pytanie, na które nie udzielono odpowiedzi. Nie jestem pewien, czy taki jest zamiar plakatu, ale może to być aplikacja Jailbreak lub grafika poza samym iOS.
tkbx
9
Potem pojawił się iOS 7, zwiększył domyślny promień ikony i sprawił, że to pytanie stało się nieaktualne.
marzapower
1
Ikon nie należy już zaokrąglać. Apple wymaga teraz kwadratowej grafiki bez zaokrąglania narożników .
Mark Whitaker
1
Potrzebujesz tylko kwadratowej ikony 1024 * 1024, użyj jakiejś aplikacji, takiej jak Prepo, aby wygenerować cały potrzebny rozmiar. Urządzenie zrobi resztę za Ciebie.
NSDeveloper

Odpowiedzi:

340

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 [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.

Bron Davies
źródło
9
Pamiętaj, że ikona na iPhonie 4 to nie 72x72, ale 114x114 o promieniu 18 . ;)
Pascal
1
@Pascal @stinkbutt: Naprawiono i daje +1.
BoltClock
98
512/80 == 114/18 == 72/11 == 57/9 == 6.4 Możesz wziąć kwadratową długość ikony i podzielić ją przez 6,4, aby uzyskać taki sam współczynnik jak jabłko. Tak więc dla ikony 19 x 19, promień obramowania 19 / 6,4 ~ 3px
Devin G Rhode
8
Promień 80px dla iTunesArtwork jest zdecydowanie błędny. Obraz maski używany w iTunes znajduje się w pakiecie iTunes. Ma 90 pikseli. Czy można to ostatnio zmienić?
zmippie
6
Promień Retina iPad (ikona 144 x 144) to 23 piksele, FYI. A ikony 1024 x 1024 powinny mieć promień 160 pikseli. Jednak dość łatwo je policzyć.
Andrew R.
283

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. [email protected] - 114px - 20
  5. Icon-72.png - 72px - 12,632
  6. [email protected] - 144px - 25,263
  7. Icon-Small.png - 29px - 5.088
  8. [email protected] - 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.

drbarnard
źródło
Świetna odpowiedź. Osobiście zawsze używałem 512px z promieniem 90px jako punktem początkowym, a następnie zmniejszałem w razie potrzeby. Działa idealnie.
Aleksandar Vacić
1
Aleksandar, choć może wyglądać dobrze w większości przypadków, począwszy od 90, nie będzie działać idealnie we wszystkich okolicznościach. Zobacz moją aktualizację powyżej.
drbarnard
2
Świetny post z dużą ilością szczegółów. Bardzo się cieszę, że zadzwoniłeś do Louiego o dokładną odpowiedź. Moje wszystkie były oparte na 57px, a następnie powiększone, ale to był przypadek. Wspaniale jest mieć potwierdzenie, że to właśnie robi Apple.
Marc Edwards,
Czy to oznacza, że ​​jeśli ikona aplikacji nie jest kwadratowa, powinniśmy użyć programu Illustrator do narysowania ikony? ponieważ Photoshop nie obsługuje promienia z przecinkiem dziesiętnym .....
flypig
Głosuj na tę odpowiedź, ponieważ pierwsza odpowiedź nie jest już dokładna. Odkryłem, że moja ikona 1024px z promieniem 160 wydaje się nie pasować. Więc po ponownym przeczytaniu ten post jest dokładniejszy, promień ikony 1024px musi wynosić 180.
Quan Nguyen
34

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%

bitwit
źródło
W przypadku ikony 1024x1024 (tworzę grafikę z zestawu prasowego) daje to promień naroża 160, który jest moim zdaniem za mały.
Chris Prince
3
Dla mnie ponownie, jeśli chodzi o grafikę zestawu prasowego, a nie oficjalne zgłoszenie Apple'a, 22,37% wygląda bardziej całkiem blisko zaokrąglenia iOS8. Np. Promień 229 pikseli w Photoshopie dla 1024x1024.
Chris Prince
@ChrisPrince Ta odpowiedź zdecydowanie wymaga aktualizacji dla iOS8, dzięki za wejście
bitwit
W rzeczywistości odsetek ten wynosi 22,5%.
saagarjha
28

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?

marcepapower
źródło
Tak, zaraz. Do tego właśnie doszłam; chyba że ma się czas zapłacić projektantowi za wykonanie ORAZ TESTOWANIE każdego rozmiaru ikony indywidualnie dla każdego urządzenia.
Dogweather
Twoje ikony będą wyglądać bardzo źle po zmniejszeniu skali.
ryyst
Nie są one zmniejszane. Musisz ustawić prawidłowy rozmiar ikony dla każdego urządzenia, ale zamiast rysować rogi, pozostawiasz ikony w zwykłym kwadratowym formacie. Apple wykona resztę pracy za Ciebie. Nie wymaga skalowania. Po prostu daj mi znać!
marzapower
Marzapower, masz rację, o ile jesteś zadowolony z efektu świetlnego Apple. Nie możesz mieć jednego bez drugiego, chyba że wykonasz wstępne renderowanie
Gordon Dove
Efekt świetlny Apple nie ma nic wspólnego z zaokrąglonymi narożnikami. Nawiasem mówiąc, możesz zmienić efekt nakładki w ikonach za pomocą kwadratowej ikony, a wszystko będzie działać dobrze.
marzapower
20

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 .

wprowadź opis zdjęcia tutaj

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:

wprowadź opis zdjęcia tutaj

Onur Yıldırım
źródło
2
Ikony iPhone'a nie są już kwadratami z zaokrąglonymi rogami od iOS 7. To powinna być zaakceptowana odpowiedź (nawet jeśli formuła nie jest jednoznaczną odpowiedzią na rozmiar zakrzywionych rogów) .
Crazyrems,
1
@Crazyrems dzięki, ale nie ma wielkości promienia, aby dać bec. rogi są zakrzywione (nie zaokrąglone) zgodnie z rozmiarem kwadratu z określoną „formułą”.
Onur Yıldırım
16

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)

Agos
źródło
1
Ta ścieżka zmienia się w każdej wersji zestawu SDK. Bieżącą ścieżkę możesz zlokalizować za pomocą tego poleceniafind /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
Bruno Bronosky,
8

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

willc2
źródło
2
Willc2, masz rację - ale jeśli Frank prawidłowo projektuje ikony iPhone'a, pracowałby z obrazem 512x512, a promień obramowania na tym poziomie wynosi 80 pikseli, co zaokrągla się do 9px przy zmniejszeniu do 57x57.
Jessedc,
6

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:

AppIconMask@3x~iphone.png

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.

Bruno Bronosky
źródło
6

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/

Mark Whitaker
źródło
1
Link powinien zostać zaktualizowany w tej odpowiedzi
Jeremy Wiebe
5

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

Otrzymuję te informacje z iconreference .

Khomsan
źródło
1
Zgadzam się z tym. Użycie promienia 9px nie wygląda dobrze, jeśli kadrujesz ikonę aplikacji za pomocą wewnętrznego obrysu, aby uzyskać efekt podobny do aplikacji Ustawienia. 10 pikseli dla ikony 57 x 57 pikseli i 20 pikseli dla ikony @ 2x wygląda dla mnie znacznie lepiej.
Alex Robinson
4

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.

ryyst
źródło
Zobacz odpowiedź @Ago, użyj masek png w folderze, o którym wspomina.
Gustav
3

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

Daniel
źródło
4
W przypadku oficjalnych aplikacji jest to prawda (no cóż, rodzaj. 57x57 to z pewnością nie jedyny potrzebny rozmiar). Ale w przypadku aplikacji jailbreak to zaokrąglenie NIE jest dla ciebie zrobione. Musisz samodzielnie zaokrąglić grafikę PNG. To może mieć znaczenie.
Nate
3

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.

kształt o promieniu 160 pikseliwprowadź opis zdjęcia tutaj

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.
Tibidabo
źródło
co jeśli zmienisz rozmiar obrazu, ale utrzymasz tę samą szarą linię? odpowiedź: ostatecznie dopasuje się do szarej linii. więc to nie promień graniczny jest zły, ale rozmiar ikony dla tego promienia granicznego ...
MoralCode
2

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

Rubin
źródło
y powinniśmy zastosować radia ?, bez radia kwadratowe ikony będą działać idealnie.
Vinayak
2

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ą.

agirault
źródło
Tak, utworzyłem kwadratową ikonę bez zaokrąglonych rogów, a dzięki „Icon Set Create” (w App Store) wszystkie ikony są generowane automatycznie.
J. Fdez,
1

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

Vinayak
źródło