Sto cercando di creare l'icona per la mia app per iPhone, ma non so come ottenere il raggio esatto utilizzato dalle icone dell'iPhone. Ho cercato e cercato un tutorial o un modello ma non riesco a trovarne uno.

Sono sicuro di essere solo un idiota, ma come si ottengono gli angoli arrotondati esattamente con la tua icona di Illustrator o Photoshop?

Modificare:

Qual è il raggio dell'iPad Retina?

Puoi creare quattro icone (ad oggi) per la tua app e 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 d'angolo per l'icona 57x57 = 9 (iPhone / iPod Touch)
• raggio d'angolo per l'icona 114x114 = 18 (iPhone / iPod Touch Retina )
• raggio d'angolo per l'icona 72x72 = 11 (iPad)
• raggio d'angolo per l'icona 144x144 = 23 (iPad Retina )

Se crei un set di icone personalizzate, puoi impostare l' UIPrerenderedIconopzione su true nel tuo file info.plist e non aggiungerà l'effetto lucido ma posizionerà uno sfondo nero sotto di esso e continuerà a arrotondare gli angoli dell'immagine con questi raggi angolari quindi se il raggio dell'angolo su una 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 dell'icona futura dovrebbe avere un 1:6.4rapporto 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 della maschera immagine utilizzati 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 di nome icon.png, aggiungerei anche un file PNG 114x114 di nome icon@2x.png al progetto / target e Xcode lo userebbe automaticamente come icona su un display retina. Puoi vederlo in azione nella pagina Riepilogo del target dell'applicazione se l'hai fatto bene. Lo stesso vale per le immagini di lancio. Utilizzare launch.png a 320x480 e launch@2x.png a 640x960.

Dopo aver provato alcune delle risposte in questo post, mi sono consultato con Louie Mantia (ex designer Apple, Square e Iconfactory) e tutte le risposte finora su 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 di icona usando 10/57 x new size(per esempio 10/57 x 114dà 20, che è il raggio corretto per un'icona di 114px). Ecco un elenco delle icone più comunemente usate, 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. 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

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

Conoscere quanto sopra è importante, tuttavia, per l'utilizzo dell'icona all'interno dell'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 addizionali:

Neven Mrgan su ulteriori dimensioni dell'icona e altre considerazioni sul design: 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 sulla dimensione delle icone e considerazioni sul design: icone e immagini

Aggiornare:

Ho fatto alcuni test in Photoshop CS6 e sembra che 3 cifre dopo il punto decimale siano sufficientemente precise da finire con lo stesso vettore esatto (almeno come visualizzato da Photoshop con uno zoom del 3200%). Lo strumento Rettangolo arrotondato talvolta arrotonda l'input al numero intero più vicino, ma è possibile notare una differenza significativa tra 90 e 89.825. E più volte lo strumento Rettangolo arrotondato non si è arrotondato e ha effettivamente mostrato più cifre dopo il punto decimale. Non sono sicuro di cosa stia succedendo lì, ma sta sicuramente usando e memorizzando il numero più preciso che è stato inserito.

Comunque, ho aggiornato l'elenco sopra per includere solo 3 cifre dopo il punto decimale (prima c'erano 13!). Nella maggior parte dei casi, sarebbe probabilmente difficile distinguere tra un'icona trasparente da 512 px mascherata in un raggio di 90 px e una mascherata a 89.825, ma l'antialiasing dell'angolo arrotondato finirà sicuramente leggermente diverso e sarebbe probabilmente visibile in determinate circostanze soprattutto se una seconda maschera più precisa viene applicata da Apple, nel codice o in altro modo.

Vedo molte discussioni su "px", ma nessuno parla delle percentuali che è il numero fisso da calcolare.

Il 22,37% è la percentuale chiave qui. Moltiplica qualsiasi dimensione dell'immagine sopra menzionata per 0,2237 e otterrai il raggio di pixel corretto per quella dimensione.

Prima di iOS 8, Apple utilizzava meno arrotondamenti, utilizzando il 15,625%.

EDIT : Grazie @Chris Prince per aver commentato con la percentuale di raggio del 8/9/10 di iOS: 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 ciò che Apple e io abbiamo suggerito con questa risposta.

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

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

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

Originale

Dovresti fornire un'immagine con angoli a 90 ° (è importante evitare di ritagliare gli angoli dell'icona: iOS lo fa per te quando applica la maschera di arrotondamento degli angoli) ( Documentazione Apple )

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

Se imposti manualmente gli angoli arrotondati per le tue icone, probabilmente sembreranno rotte in questo o quel dispositivo, perché la maschera di arrotondamento cambia leggermente da una versione iOS a un'altra. A volte le tue icone saranno leggermente più grandi, a volte (sospiro) leggermente più piccole. L'uso 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 comprendere meglio questa risposta, fai riferimento alla documentazione ufficiale di Apple sulle icone di iOS . In questa pagina si afferma chiaramente che un'icona quadrata otterrà automaticamente queste cose quando viene visualizzata su un dispositivo iOS:

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

Quindi, puoi ottenere qualsiasi effetto tu voglia semplicemente disegnando una semplice icona quadrata e riempiendone 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?

Le persone che discutono sul fatto che il raggio dell'angolo sia leggermente aumentato, 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 .

Non è necessario applicare il raggio d'angolo alle icone per iOS. Fornisci solo icone quadrate. Ma se vuoi ancora sapere come, la forma attuale si chiama Squircle e di seguito è la formula:

La risposta di dbarnard ha la formula per calcolare il raggio corretto, ma dato che stavi cercando i modelli, in questa directory puoi trovare tutte le maschere e le sovrapposizioni:

/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 la versione precedente sarà probabilmente all'interno di / Developer /).

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

(i crediti per questo risultato vanno a Neven Mrgan IIRC)

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

Come altri hanno già detto, non vuoi arrotondare gli angoli. Volete spedire grafica quadrata piatta (senza livelli o alfa). Apple ha cambiato la maschera che usano per arrotondare gli angoli in iOS7 e poi di nuovo in iOS8. Puoi trovare queste maschere nel bundle dell'applicazione Xcode. Il percorso cambia con ogni nuova versione dell'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.frameworkma non fidarti di quello. 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
./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

Come puoi vedere, ci sono molte maschere diverse, ma sono chiamate abbastanza chiaramente. Ecco l' AppIconMask@3x~iphone.pngimmagine:

Puoi usarlo per testare la tua icona per vedere se sembrerà a posto dopo che è stata mascherata. Ma non arrotondare gli angoli . Se lo fai, quando Apple cambia di nuovo quelle maschere, avrai degli artefatti.

Tutte le risposte precedenti a questa domanda non sono più aggiornate. Da almeno maggio 2015, Apple richiede di fornire icone quadrate senza arrotondamento:

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

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

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

Ottengo queste informazioni da iconreference .

Nel progettare le mie icone delle applicazioni con Photoshop, ho scoperto che nessun raggio d'angolo intero si inserisce la maschera del dispositivo esattamente .

Quello che faccio ora è creare un progetto vuoto con Xcode, impostare un file PNG completamente bianco come icona e disattivare il bisello e la brillantezza preimpostati. 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 darà angoli perfettamente arrotondati.

L'iPhone ti fa girare gli angoli, tutto ciò di cui hai bisogno è un'icona png quadrata 57x57 e dovresti essere buono

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

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

Ho scaricato l'icona iTunes U dall'App Store a 175x175px L'ho ingrandito in Photoshop a 1024px e ho messo due forme su di esso, una con un raggio di 160px e una con 180px.

Come puoi vedere sotto la forma (sottile linea grigia) con 160px (la prima) è un po 'fuori mentre quella con 180px sembra perfetta.

Questo è quello che faccio ora in PhotoShop:

1. Creo una tela di dimensioni 1026x1026px con una maschera da 180px per il principale oggetto Smart Design .
2. Duplico 5 volte lo Smart Object principale e lo ridimensiono a 1024 px, 144 px, 114 px, 72 px e 57 px.
3. Ho messo una "Nuova fetta basata su livelli" su ogni Smart Objects e ho rinominato le sezioni in base alle loro dimensioni (ad esempio icona-72px).
4. Quando salvo la grafica, seleziono "Tutte le sezioni utente" e BANG! Ho tutte le icone necessarie per la mia app.

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

Aggiornamento (da gennaio 2018) per i requisiti dell'icona dell'app:

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

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

Mantieni lo sfondo semplice ed evita la trasparenza . Assicurati che la tua icona sia opaca e non ingombrare lo sfondo. Dai uno sfondo semplice in modo da non sopraffare le altre icone delle app nelle vicinanze. Non è necessario riempire l'intera icona di contenuto.

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