icone dell'app iPhone - Raggio esatto?

Puoi fare quattro icone (a partire da oggi) per la tua app e tutte possono avere un aspetto diverso, non necessariamente basato sull'immagine 512x512.

• raggio dell'angolo per l'icona 512x512 = 80 (iTunesArtwork)
• raggio dell'angolo per l'icona 1024x1024 = 180 (iTunesArtwork Retina)
• raggio dell'angolo per l'icona 57x57 = 9 (iPhone/iPod Touch)
• raggio dell'angolo per l'icona 114x114 = 18 (iPhone/iPod Touch Retina)
• raggio dell'angolo per l'icona 72x72 = 11 (iPad)
• raggio dell'angolo per l'icona 144x144 = 23 (iPad Retina)

Se crei un set di icone personalizzate, puoi impostare l'opzione UIPrerenderedIcon su true nel tuo file info.plist e non aggiungerà l'effetto gloss, ma posizionerà uno sfondo nero sotto di esso e ancora attorno agli angoli dell'immagine con questi angoli raggio quindi se il raggio dell'angolo su una qualsiasi delle icone è maggiore allora mostrerà il nero attorno ai bordi/angoli.

Modifica: Vedi il commento di @ devin-g-rhode e puoi vedere che qualsiasi dimensione futura delle icone dovrebbe avere un 1:6.4 rapporto tra il raggio dell'angolo e la dimensione dell'icona. C'è anche un'ottima risposta da https://stackoverflow.com/a/29550364/396005 che ha la posizione dei file maschera immagine usati nell'SDK per arrotondare gli angoli delle icone

Per aggiungere un file compatibile con retina, utilizzare lo stesso nome file e aggiungere "@ 2x". Quindi, se avessi un file per la mia icona 72x72 denominata icon.png, aggiungerei anche un file PNG 114x114 denominato [email protected] al progetto/destinazione e Xcode lo userebbe automaticamente come icona su un display retina. Puoi vederlo in azione nella pagina Riepilogo della destinazione dell'applicazione se lo hai fatto correttamente. Lo stesso funziona per le tue immagini di lancio. Usa launch.png a 320x480 e [email protected] a 640x960. 

Dopo aver provato alcune delle risposte in questo post, mi sono consultato con Louie Mantia (ex designer di Apple, Square e Iconfactory) e tutte le risposte finora a questo post sono sbagliate (o almeno incomplete). Apple inizia con l'icona 57px e un raggio di 10 quindi aumenta o diminuisce da lì. Quindi puoi calcolare il raggio per qualsiasi dimensione dell'icona usando 10/57 x new size (ad esempio 10/57 x 114 restituisce 20, che è il raggio corretto per un'icona di 114px). Ecco un elenco delle icone più utilizzate, convenzioni di denominazione appropriate, dimensioni dei pixel e raggi degli angoli.

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

Inoltre, come menzionato in altre risposte, in realtà non vuoi ritagliare nessuna delle immagini che usi nel binario o invia ad Apple. Questi dovrebbero essere tutti quadrati e non avere alcuna trasparenza. Apple maschererà automaticamente ogni icona nel contesto appropriato.

La conoscenza di quanto sopra è tuttavia importante per l'utilizzo delle icone nell'interfaccia utente dell'app in cui è necessario applicare la maschera nel codice o pre-renderizzata in Photoshop. È anche utile quando si creano opere d'arte per siti Web e altro materiale promozionale.

Letture aggiuntive:

Neven Mrgan su ulteriori dimensioni dell'icona e altre considerazioni sulla progettazione: dimensioni dell'icona dell'app ios

Marc Edwards di Bjango sulle diverse opzioni per creare roundrect in Photoshop e perché è importante: roundrect

Documenti ufficiali di Apple su dimensioni dell'icona e considerazioni sul design: IconsImages

Aggiornare:

Ho fatto alcuni test in Photoshop CS6 e sembra che 3 cifre dopo il punto decimale siano abbastanza precise per finire con lo stesso vettore (almeno come mostrato da Photoshop al 3200% di zoom). Lo strumento Round Rect a volte arrotonda l'input al numero intero più vicino, ma puoi vedere una differenza significativa tra 90 e 89.825. E più volte lo strumento Rettangolo rotondo non si arrotondava e mostrava effettivamente più cifre dopo il punto decimale. Non sei sicuro di cosa stia succedendo, ma sicuramente sta usando e memorizzando il numero più preciso che è stato inserito.

Ad ogni modo, ho aggiornato la lista sopra per includere solo 3 cifre dopo il punto decimale (prima ce ne fossero 13!). Nella maggior parte delle situazioni sarebbe probabilmente difficile distinguere tra un'icona trasparente a 512 pixel mascherata con un raggio di 90 px e l'altra mascherata a 89.825, ma l'antialiasing dell'angolo arrotondato risulterebbe decisamente leggermente diverso e sarebbe probabilmente visibile in determinate circostanze, in particolare se una seconda maschera più precisa viene applicata da Apple, in codice o in altro modo.

Vedo un sacco di discussione "px", ma nessuno sta parlando di percentuali che è il numero fisso che si desidera calcolare

15,66% è la percentuale chiave qui. Moltiplicate qualsiasi dimensione dell'immagine menzionata sopra in 0.15625 e otterrete il raggio di pixel corretto per quella dimensione.

EDIT: Grazie a @Chris Prince per aver commentato la percentuale del raggio iOS 8/9/10: 22,37%

Importante: equazione dell'icona di iOS 7

Con la prossima versione di iOS 7 noterai che il raggio dell'icona "standard" è stato aumentato. Quindi prova a fare quello che Apple e io abbiamo suggerito con questa risposta.

Sembra che per un'icona a 120px la formula che meglio rappresenta la sua forma su iOS 7 sia la seguente superellisse:

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

Ovviamente è possibile modificare il numero 120 con la dimensione dell'icona desiderata per ottenere la funzione corrispondente.

Originale

Dovresti fornire un'immagine con angoli a 90 ° (è importante per Evitare di ritagliare gli angoli dell'icona - iOS lo fa per te quando applica La maschera per arrotondare gli angoli) ( Documentazione Apple )

L'approccio migliore non è affatto l'arrotondamento degli angoli delle icone. Se imposti l'icona come icona quadrata, iOS sovrapporrà automaticamente l'icona con una maschera predefinita che imposterà gli angoli arrotondati appropriati.

Se si impostano manualmente angoli arrotondati per le icone, probabilmente avranno un aspetto rotto in questo o quel dispositivo, poiché la maschera di arrotondamento si trasforma leggermente da una versione iOS a un'altra. A volte le tue icone saranno leggermente più grandi, a volte (sospiro) leggermente più piccole. L'utilizzo di un'icona quadrata ti libererà da questo onere e sarai sicuro di avere un'icona sempre aggiornata e di bell'aspetto per la tua app.

Questo approccio è valido per ogni dimensione di icona (iPhone/iPod/iPad/retina) e anche per la grafica di iTunes. Ho seguito questo approccio un paio di volte e, se lo desideri, posso pubblicare un link a un'app che utilizza icone quadrate native.

Modificare

Per capire meglio questa risposta, fai riferimento alla documentazione ufficiale Apple sulle icone di iOS . In questa pagina si afferma chiaramente che un'icona quadrata otterrà automaticamente queste cose quando visualizzate su un dispositivo iOS:

1. Angoli arrotondati
2. Ombra
3. Lucentezza riflessiva (a meno che non si prevenga l'effetto lucentezza)

Quindi, puoi ottenere qualunque effetto desideri semplicemente disegnando un'icona quadrata e riempendo il contenuto. Il raggio dell'angolo finale sarà qualcosa di simile a quello che dicono le altre risposte qui, ma questo non sarà mai garantito, dal momento che quei numeri non fanno parte della documentazione ufficiale di Apple su iOS. Ti chiedono di disegnare icone quadrate, quindi ... perché no?

La risposta di dbarnard ha la formula per calcolare il raggio corretto, ma dal momento che stavi cercando i modelli, tutte le maschere e gli overlay si possono trovare in questa directory:

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

(il percorso è per le versioni recenti di XCode. Per le versioni precedenti sarà probabilmente all'interno di/Developer /).

Come altri hanno notato, NON dovresti mascherarli da soli, ma puoi usarli per verificare come le tue icone appariranno mascherate.

(i crediti per questa scoperta vanno a Neven Mrgan IIRC)

Le persone che discutono sul raggio dell'angolo sono leggermente aumentate, ma in realtà non è così.

Da questo blog :

Un "segreto" dei prodotti fisici di Apple è che evitano la tangenza (dove un raggio incontra una linea in un singolo punto) e creano le loro superfici con quella che viene chiamata continuità di curvatura.

Tu non hai bisogno di per applicare il raggio dell'angolo alle icone per iOS. Basta fornire icone quadrate. Ma se vuoi ancora sapere come, la forma attuale è chiamata Squircle e sotto è la formula:

Il raggio dell'angolo dell'icona 57 x 57 pixel è di 9 pixel.

Come altri hanno già detto, non vuoi girare i tuoi angoli. Vuoi spedire una grafica piatta (senza livelli o alpha) quadrata. Apple ha cambiato la maschera che usano per arrotondare gli angoli in iOS7 e poi ancora in iOS8. Puoi trovare queste maschere nel pacchetto di applicazioni Xcode. Il percorso cambia con ogni nuova versione di SDK rilasciata. Quindi, ti mostrerò come puoi sempre trovarlo.

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

In questo preciso istante, il percorso trovato da quel comando è /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.framework ma non si fida di questo. Usa il comando per trovarlo da solo.

Quel percorso punta a una directory con questi file (di nuovo, al momento di questo post)

./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
./[email protected]~ipad.png
./[email protected]~iphone.png
./[email protected]~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./[email protected]
./[email protected]
./DefaultIcon-29.png
./[email protected]
./[email protected]
./DefaultIcon-40.png
./[email protected]
./[email protected]
./[email protected]~iphone.png
./[email protected]~iphone.png
./[email protected]~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./[email protected]
./DocumentBadgeMask-20.png
./[email protected]
./[email protected]
./[email protected]~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./[email protected]
./[email protected]
./[email protected]~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./[email protected]
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./[email protected]~ipad.png
./NewsstandNewspaperGra[email protected]~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./[email protected]
./NewsstandNewspaperSwitcherGradientLeft.png
./[email protected]
./NewsstandNewspaperSwitcherGradientRight.png
./[email protected]
./[email protected]~ipad.png
./[email protected]~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./[email protected]
./[email protected]
./SpotlightAppIconMask.png
./[email protected]
./[email protected]
./TableIconMask.png
./[email protected]
./[email protected]
./TableIconOutline.png
./[email protected]
./[email protected]

Come puoi vedere, ci sono molte maschere diverse, ma sono nominate abbastanza chiaramente. Ecco l'immagine [email protected]~iphone.png:

Puoi usarlo per testare l'icona per vedere se andrà bene dopo che è stato mascherato. Ma, non arrotondare i tuoi angoli . Se lo fai, quando Apple cambia di nuovo quelle maschere, avrai degli artefatti.

Se non si considera il tratto, il raggio esatto è in realtà 10px per l'icona 57x57.

Ottengo queste informazioni da iconreference .

Tutte le precedenti risposte a questa domanda sono ormai obsolete. Almeno da maggio 2015, Apple richiede di fornire icone quadrate senza arrotondamenti:

Mantieni quadrati gli angoli dell'icona. Il sistema applica una maschera che arrotonda automaticamente gli angoli delle icone.

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

Durante la progettazione delle icone delle mie app con Photoshop, ho riscontrato che nessun raggio di angolo intero si adatta alla maschera del dispositivo esattamente .

Quello che faccio ora è creare un progetto vuoto con Xcode, impostare un file PNG completamente bianco come icona e disattivare lo smusso e il lucido preimpostato. Quindi, eseguo l'app e faccio uno screenshot della schermata principale. Ora puoi facilmente creare una maschera da quell'immagine, che puoi usare in Photoshop. Questo ti porterà angoli perfettamente arrotondati.

L'iphone arrotonda gli angoli per te, tutto ciò di cui hai bisogno è un'icona quadrata 57x57 png e dovresti essere bravo

Ci sono due risposte totalmente in conflitto con un gran numero di voti uno è 160px @ 1024 l'altro è 180px @ 1024. Quindi, strega?

Ho eseguito alcuni esperimenti e penso che sia 180px @ 1024, quindi drbarnard è corretto. 

Ho scaricato l'icona iTunes U dall'App Store, è 175x175px, l'ho ingrandito in photoshop a 1024px e ho inserito due forme, una con raggio di 160 px e una con 180 px.

Come potete vedere sotto la forma (linea grigia sottile) con 160px (la prima) è un po 'spenta mentre quella con 180px sembra giusta. 

Questo è quello che faccio ora in PhotoShop:

1. Creo un canvas di dimensioni 1026x1026px con una maschera 180px per maindesign Smart Object . 
2. Duplo 5 volte lo Smart Object principale e le ridimensiono a 1024px, 144px, 114px, 72px e 57px. 
3. Metto una "nuova base basata su strati" su ogni oggetto avanzato e rinominerò le fette in base alla loro dimensione (ad esempio icon-72px).
4. Quando salvi l'artwork, seleziono "All User Slices" e BANG! Ho Tutte le icone necessarie per la mia app.

Ho provato il raggio di 228px per 1024x1024 e ha funzionato :)

Aggiornamento (a partire dal gennaio 2018) per i requisiti dell'icona dell'app:

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

Include:

Mantieni gli angoli dell'icona quadrati. Il sistema applica una maschera che arrotonda automaticamente gli angoli delle icone.

e 

Mantenere lo sfondo semplice ed evitare la trasparenza. Assicurati che l'icona sia opaca e non ingombrare lo sfondo. Dagli uno sfondo semplice in modo che non superi le altre icone delle app vicine. Non è necessario riempire l'intera icona con content.and

Non è necessario applicare il raggio dell'angolo all'icona della tua app, puoi semplicemente applicare icone quadrate. Il dispositivo applica automaticamente il raggio dell'angolo.