Ich versuche, das Symbol für meine iPhone-App zu erstellen, weiß aber nicht, wie ich den genauen Radius ermitteln soll, den die iPhone-Symbole verwenden. Ich habe nach einem Tutorial oder einer Vorlage gesucht, aber keine gefunden.

Ich bin mir sicher, dass ich nur ein Idiot bin, aber wie können Sie die abgerundeten Ecken mit Ihrem Symbol aus Illustrator oder Photoshop genau richtig machen?

Bearbeiten:

Was ist der Radius für das Retina iPad?

Sie können vier Symbole (ab heute) für Ihre App erstellen, die alle unterschiedlich aussehen können - nicht unbedingt basierend auf dem 512 x 512-Bild.

• Eckenradius für das 512x512-Symbol = 80 (iTunesArtwork)
• Eckenradius für das 1024x1024-Symbol = 180 (iTunesArtwork Retina )
• Eckenradius für das 57x57-Symbol = 9 (iPhone / iPod Touch)
• Eckenradius für das 114x114-Symbol = 18 (iPhone / iPod Touch Retina )
• Eckenradius für das 72x72-Symbol = 11 (iPad)
• Eckenradius für das 144x144-Symbol = 23 (iPad Retina )

Wenn Sie eine Reihe von benutzerdefinierten UIPrerenderedIconSymbolen erstellen , können Sie die Option in Ihrer info.plist-Datei auf true setzen. Der Glanzeffekt wird nicht hinzugefügt, es wird jedoch ein schwarzer Hintergrund darunter platziert und die Bildecken mit diesen Eckradien abgerundet Wenn also der Eckenradius eines der Symbole größer ist, wird an den Kanten / Ecken Schwarz angezeigt.

Bearbeiten: Siehe Kommentar von @ devin-g-rhode und Sie können sehen, dass zukünftige Symbolgrößen ein 1:6.4Verhältnis von Eckenradius zu Symbolgröße haben sollten . Es gibt auch eine sehr gute Antwort von https://stackoverflow.com/a/29550364/396005, die den Speicherort der Bildmaskendateien enthält, die im SDK zum Runden von Symbolecken verwendet werden

Verwenden Sie zum Hinzufügen einer Retina-kompatiblen Datei denselben Dateinamen und fügen Sie '@ 2x' hinzu. Wenn ich also eine Datei für mein 72x72-Symbol mit dem Namen icon.png hätte, würde ich dem Projekt / Ziel auch eine 114x114-PNG-Datei mit dem Namen [email protected] hinzufügen, und Xcode würde diese automatisch als Symbol auf einer Retina-Anzeige verwenden. Sie können dies in Aktion auf der Seite "Zusammenfassung" des Anwendungsziels sehen, wenn Sie es richtig gemacht haben. Das gleiche gilt für Ihre Startbilder. Verwenden Sie launch.png bei 320x480 und [email protected] bei 640x960.

Nachdem ich einige der Antworten in diesem Beitrag ausprobiert hatte, habe ich mich mit Louie Mantia (ehemaliger Designer von Apple, Square und Iconfactory) beraten. Alle bisherigen Antworten in diesem Beitrag sind falsch (oder zumindest unvollständig). Apple beginnt mit dem 57px-Symbol und einem Radius von 10 und skaliert dann von dort aus nach oben oder unten. Auf diese Weise können Sie den Radius für jede Symbolgröße mithilfe von berechnen 10/57 x new size(z. B. 10/57 x 11420, was dem richtigen Radius für ein 114px-Symbol entspricht). Hier finden Sie eine Liste der am häufigsten verwendeten Symbole, der richtigen Namenskonventionen, der Pixelabmessungen und der Eckenradien.

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

Wie in anderen Antworten erwähnt, möchten Sie auch keine der Bilder zuschneiden, die Sie in der Binärdatei verwenden oder an Apple senden. Diese sollten alle quadratisch sein und keine Transparenz haben. Apple maskiert automatisch jedes Symbol im entsprechenden Kontext.

Das oben Genannte zu wissen ist jedoch wichtig für die Verwendung von Symbolen in der App-Benutzeroberfläche, in der Sie die Maske im Code anwenden oder in Photoshop vorgerendert haben müssen. Dies ist auch hilfreich, wenn Sie Grafiken für Websites und anderes Werbematerial erstellen.

Zusätzliche Lektüre:

Neven Mrgan über zusätzliche Symbolgrößen und andere Designüberlegungen: ios App- Symbolgrößen

Marc Edwards von Bjango über die verschiedenen Optionen zum Erstellen von Roundrects in Photoshop und warum es wichtig ist: Roundrect

Apples offizielle Dokumente zu Symbolgröße und Designüberlegungen: Symbole und Bilder

Aktualisieren:

Ich habe einige Tests in Photoshop CS6 durchgeführt und es scheint, als ob 3 Stellen nach dem Dezimalpunkt ausreichen, um genau den gleichen Vektor zu erhalten (zumindest wie von Photoshop bei 3200% Zoom angezeigt). Das Round Rect Tool rundet die Eingabe manchmal auf die nächste ganze Zahl, aber Sie können einen signifikanten Unterschied zwischen 90 und 89,825 feststellen. Und mehrmals rundete das Round Rectangle Tool nicht auf und zeigte tatsächlich mehrere Ziffern nach dem Dezimalpunkt an. Ich bin mir nicht sicher, was dort vor sich geht, aber es wird definitiv die genauere Nummer verwendet und gespeichert, die eingegeben wurde.

Wie auch immer, ich habe die Liste oben so aktualisiert, dass sie nur 3 Stellen nach dem Dezimalpunkt enthält (bevor es 13 waren!). In den meisten Situationen ist es wahrscheinlich schwierig, den Unterschied zwischen einem transparenten 512-Pixel-Symbol, das mit einem Radius von 90 Pixel maskiert ist, und einem Symbol, das mit 89,825 maskiert ist, zu erkennen, aber das Antialiasing der abgerundeten Ecke würde definitiv etwas anders ausfallen und unter bestimmten Umständen wahrscheinlich besonders sichtbar sein Wenn Apple eine zweite, genauere Maske im Code oder auf andere Weise anwendet.

Ich sehe viele "px" -Diskussionen, aber niemand spricht über Prozentsätze, die die feste Zahl sind, nach der Sie berechnen möchten.

22,37% ist hier der Schlüsselprozentsatz. Multiplizieren Sie eine der oben genannten Bildgrößen mit 0,2237, um den richtigen Pixelradius für diese Größe zu erhalten.

Vor iOS 8 verwendete Apple mit 15,625% weniger Rundungen.

EDIT : Danke @ Chris Prince für mit dem iOS 8/9/10 Radius Prozentsatz Kommentierung: 22,37%

Wichtig: iOS 7-Symbolgleichung

Mit der kommenden Version von iOS 7 werden Sie feststellen, dass der "Standard" -Symbolradius vergrößert wurde. Versuchen Sie also, das zu tun, was Apple und ich mit dieser Antwort vorgeschlagen haben.

Es scheint, dass für ein 120px-Symbol die Formel, die seine Form unter iOS 7 am besten darstellt, die folgende Superellipse ist:

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

Natürlich können Sie die 120Nummer mit der gewünschten Symbolgröße ändern , um die entsprechende Funktion zu erhalten.

Original

Sie sollten ein Bild mit 90 ° -Ecken bereitstellen (es ist wichtig, das Abschneiden der Ecken Ihres Symbols zu vermeiden - iOS erledigt dies für Sie, wenn die Eckenrundungsmaske angewendet wird) ( Apple-Dokumentation ).

Der beste Ansatz ist, die Ecken Ihrer Symbole überhaupt nicht abzurunden. Wenn Sie Ihr Symbol als quadratisches Symbol festlegen, überlagert iOS das Symbol automatisch mit einer vordefinierten Maske, mit der die entsprechenden abgerundeten Ecken festgelegt werden.

Wenn Sie abgerundete Ecken für Ihre Symbole manuell festlegen, sehen diese in diesem oder jenem Gerät wahrscheinlich defekt aus, da sich die Rundungsmaske von einer iOS-Version zu einer anderen geringfügig ändert. Manchmal sind Ihre Symbole etwas größer, manchmal (seufz) etwas kleiner. Die Verwendung eines quadratischen Symbols befreit Sie von dieser Belastung und Sie werden sicher sein, dass Sie immer ein aktuelles und gut aussehendes Symbol für Ihre App haben.

Dieser Ansatz gilt für jede Symbolgröße (iPhone / iPod / iPad / Retina) sowie für die iTunes-Grafik. Ich bin ein paar Mal diesem Ansatz gefolgt, und wenn Sie möchten, kann ich Ihnen einen Link zu einer App senden, die native quadratische Symbole verwendet.

Bearbeiten

Weitere Informationen zu dieser Antwort finden Sie in der offiziellen Apple-Dokumentation zu iOS-Symbolen . Auf dieser Seite wird klar angegeben, dass ein quadratisches Symbol diese Dinge automatisch erhält, wenn es auf einem iOS-Gerät angezeigt wird:

1. Abgerundete Ecken
2. Schlagschatten
3. Reflektierender Glanz (es sei denn, Sie verhindern den Glanzeffekt)

So können Sie den gewünschten Effekt erzielen, indem Sie einfach ein einfaches quadratisches Symbol zeichnen und den Inhalt darin ausfüllen. Der endgültige Eckenradius ähnelt dem, was die anderen Antworten hier sagen, aber dies wird niemals garantiert, da diese Zahlen nicht Teil der offiziellen Apple-Dokumentation für iOS sind. Sie bitten dich, quadratische Symbole zu zeichnen, also ... warum nicht?

Leute, die darüber streiten, dass der Eckenradius leicht vergrößert wird, aber das ist eigentlich nicht der Fall.

Aus diesem Blog :

Ein "Geheimnis" der physischen Produkte von Apple besteht darin, dass sie Tangentialität vermeiden (bei der ein Radius an einem einzelnen Punkt auf eine Linie trifft) und ihre Oberflächen mit der sogenannten Krümmungskontinuität gestalten .

Sie müssen den Eckenradius nicht auf Symbole für iOS anwenden. Geben Sie einfach quadratische Symbole an. Aber wenn Sie immer noch wissen möchten, wie, wird die tatsächliche Form Squircle genannt und unten ist die Formel:

Die Antwort von dbarnard enthält die Formel zur Berechnung des richtigen Radius. Da Sie jedoch nach den Vorlagen gesucht haben, finden Sie alle Masken und Überlagerungen in diesem Verzeichnis:

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

(Pfad ist für neuere Versionen von XCode. Für ältere Versionen befindet er sich wahrscheinlich in / Developer /).

Wie andere angemerkt haben, sollten Sie sie NICHT selbst maskieren, aber Sie können diese verwenden, um zu überprüfen, wie Ihre Symbole nach dem Maskieren aussehen.

(Credits für diesen Befund gehen an Neven Mrgan IIRC)

Der Eckenradius des 57 x 57 Pixel großen Symbols beträgt 9 Pixel.

Wie andere gesagt haben, wollen Sie Ihre Ecken nicht abrunden. Sie möchten flache (keine Ebenen oder Alpha) quadratische Grafiken versenden. Apple hat die Maske geändert, mit der Ihre Ecken in iOS7 und dann wieder in iOS8 abgerundet werden. Sie finden diese Masken in Ihrem Xcode-Anwendungspaket. Der Pfad ändert sich mit jeder neuen SDK-Version, die sie veröffentlichen. Also zeige ich Ihnen, wie Sie es immer finden können.

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

In diesem Moment lautet der von diesem Befehl gefundene Pfad, /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworkaber vertrauen Sie dem nicht. Verwenden Sie den Befehl, um ihn selbst zu finden.

Dieser Pfad verweist auf ein Verzeichnis mit diesen Dateien (erneut zum Zeitpunkt dieses Beitrags).

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

Wie Sie sehen können, gibt es viele verschiedene Masken, aber sie sind ziemlich klar benannt. Hier ist das AppIconMask@3x~iphone.pngBild:

Damit können Sie Ihr Symbol testen , um festzustellen , ob es nach dem Maskieren in Ordnung aussieht. Aber nicht um die Ecke . Wenn Sie diese Masken erneut ändern, treten Artefakte auf.

Alle vorherigen Antworten auf diese Frage sind jetzt veraltet. Apple verlangt, dass Sie seit mindestens Mai 2015 quadratische Symbole ohne Rundung bereitstellen:

Halten Sie die Symbolecken quadratisch. Das System wendet eine Maske an, die Symbolecken automatisch abrundet.

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

Wenn der Strich nicht berücksichtigt wird, beträgt der genaue Radius für das 57x57-Symbol tatsächlich 10 Pixel.

Ich erhalte diese Informationen von iconreference .

Wenn meine App - Symbole mit Photoshop entwerfen, habe ich , dass keine ganze Zahl Eckenradius gefunden die Geräte Maske passt genau .

Was ich jetzt mache, ist ein leeres Projekt mit Xcode zu erstellen, eine vollständig weiße PNG-Datei als Symbol festzulegen und die voreingestellte Abschrägung und den Glanz auszuschalten. Dann starte ich die App und mache einen Screenshot des Startbildschirms. Jetzt können Sie einfach eine Maske aus diesem Bild erstellen, die Sie in Photoshop verwenden können. Dadurch erhalten Sie perfekt abgerundete Ecken.

Das iPhone rundet Ecken für Sie, alles was Sie brauchen ist ein quadratisches 57x57 PNG-Symbol und Sie sollten gut sein

Es gibt zwei völlig widersprüchliche Antworten mit einer großen Anzahl von Stimmen, eine ist 160px @ 1024, die andere ist 180px @ 1024. Also was für eine?

Ich habe einige Experimente durchgeführt und denke, dass es 180px @ 1024 ist, also ist drbarnard korrekt.

Ich habe das iTunes U-Symbol aus dem App Store heruntergeladen, es ist 175 x 175 Pixel groß. Ich habe es in Photoshop auf 1024 Pixel hochskaliert und zwei Formen darauf platziert, eine mit einem Radius von 160 Pixel und eine mit 180 Pixel.

Wie Sie unten sehen können, ist die Form (dünne graue Linie) mit 160px (die erste) etwas abweichend, während die mit 180px gut aussieht.

Das mache ich jetzt in PhotoShop:

1. Ich erstelle eine Leinwandgröße 1026x1026px mit einer 180px- Maske für das Hauptdesign Smart Object .
2. Ich dupliziere das Haupt-Smart-Objekt fünfmal und verändere die Größe auf 1024px, 144px, 114px, 72px und 57px.
3. Ich habe jedem Smart Objects ein "New Layered Based Slice" hinzugefügt und Slices entsprechend ihrer Größe umbenannt (z. B. icon-72px).
4. Wenn ich das Bildmaterial speichere, wähle ich "All User Slices" und BANG! Ich habe alle für meine App erforderlichen Symbole.

Ich habe 228px Radius für 1024x1024 versucht und es hat funktioniert :)

Update (Stand Jan. 2018) für App Icon-Anforderungen:

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

Halten Sie die Symbolecken quadratisch . Das System wendet eine Maske an, die Symbolecken automatisch abrundet.

Halten Sie den Hintergrund einfach und vermeiden Sie Transparenz . Stellen Sie sicher, dass Ihr Symbol undurchsichtig ist, und überladen Sie den Hintergrund nicht. Geben Sie ihm einen einfachen Hintergrund, damit andere App-Symbole in der Nähe nicht überfordert werden. Sie müssen nicht das gesamte Symbol mit Inhalten füllen.

Sie müssen keinen Eckenradius auf Ihr App-Symbol anwenden, sondern können nur quadratische Symbole anwenden. Das Gerät wendet automatisch den Eckenradius an.