it-swarm.com.de

iPhone App-Symbole - exakter Radius?

Ich versuche, das Symbol für meine iPhone-App zu erstellen, weiß jedoch nicht, wie genau der Radius angezeigt werden kann, den die iPhone-Symbole verwenden. Ich habe nach einem Tutorial oder einer Vorlage gesucht und gesucht, kann aber keine finden.

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

Bearbeiten:

Welchen Radius hat das Retina iPad?

288
Frank Barson

Sie können (ab heute) vier Symbole für Ihre App erstellen und alle können ein anderes Aussehen haben - nicht unbedingt auf dem 512 x 512-Image.

  • 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 Symbol 114x114 = 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 Symbolen erstellen, können Sie die Option UIPrerenderedIcon in Ihrer Datei info.plist auf "true" setzen. Der Glanz-Effekt wird nicht hinzugefügt, es wird jedoch ein schwarzer Hintergrund darunter platziert und die Bildecken mit dieser Ecke immer noch abgerundet Radien Wenn also der Eckenradius auf einem der Symbole größer ist, wird er um die Kanten/Ecken schwarz angezeigt.

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

Um eine Retina-kompatible Datei hinzuzufügen, verwenden Sie denselben Dateinamen und fügen Sie "@ 2x" hinzu. Wenn ich also eine Datei für mein 72x72-Symbol namens 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 Netzhautanzeige verwenden. Sie können dies in Aktion auf der Zusammenfassungsseite 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. 

327
Bron Davies

Nachdem ich einige der Antworten in diesem Beitrag ausprobiert hatte, habe ich mich mit Louie Mantia (früherer Designer von Apple, Square und Iconfactory) beraten, und alle bisherigen Antworten in diesem Beitrag sind falsch (oder zumindest unvollständig). Apple beginnt mit dem 57px-Symbol. Ein Radius von 10 wird dann von dort nach oben oder unten skaliert. Daher können Sie den Radius für jede Symbolgröße mit 10/57 x new size berechnen (beispielsweise gibt 10/57 x 114 20 an, was der richtige Radius für ein 114px-Symbol ist). Hier finden Sie eine Liste der am häufigsten verwendeten Symbole, die richtigen Benennungskonventionen, Pixelabmessungen und 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 keines der in der Binärdatei verwendeten Bilder beschneiden oder an Apple senden. Diese sollten alle quadratisch sein und keine Transparenz haben. Apple maskiert jedes Symbol automatisch im entsprechenden Kontext.

Das Wissen um das oben Beschriebene ist jedoch wichtig für die Verwendung von Symbolen innerhalb der App-Benutzeroberfläche, bei der Sie die Maske in Code anwenden oder in Photoshop vorgerendert werden müssen. Es ist auch hilfreich beim Erstellen von Grafiken für Websites und anderes Werbematerial.

Zusätzliche Lektüre:

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

Marc Edwards von Bjango über die verschiedenen Optionen zum Erstellen von Rundungen in Photoshop und warum es so wichtig ist: roundrect

Offizielle Dokumente von Apple zu Symbolgröße und Designhinweisen: IconsImages

Aktualisieren:

Ich habe einige Tests in Photoshop CS6 durchgeführt, und es scheint, als seien 3 Ziffern nach dem Dezimalzeichen ausreichend genau, um den gleichen Vektor zu erhalten (zumindest wie in Photoshop mit 3200% Zoom dargestellt). Das Round Rect-Tool rundet die Eingabe manchmal auf die nächste ganze Zahl. Sie können jedoch einen deutlichen Unterschied zwischen 90 und 89,825 feststellen. Und das Round-Rectangle-Tool wurde mehrmals nicht aufgerundet und zeigte tatsächlich mehrere Nachkommastellen. Ich weiß nicht, was dort vor sich geht, aber es verwendet und speichert auf jeden Fall die genauere Nummer, die eingegeben wurde.

Wie auch immer, ich habe die obige Liste so aktualisiert, dass sie nur 3 Stellen nach dem Dezimalpunkt enthält (zuvor waren es 13!). In den meisten Situationen ist es wahrscheinlich schwierig, den Unterschied zwischen einem transparenten 512px-Symbol, das bei einem Radius von 90px maskiert ist, und einem maskierten bei 89.825 zu unterscheiden, aber das Antialiasing der abgerundeten Ecke würde definitiv etwas anders ausfallen und wäre unter bestimmten Umständen wahrscheinlich sichtbar wenn eine zweite, genauere Maske von Apple im Code oder auf andere Weise angewendet wird.

276
drbarnard

Ich sehe eine Menge von "px" -Diskussionen, aber niemand spricht über Prozente. Dies ist die feste Zahl, nach der Sie berechnen möchten

15,625% ist hier der Schlüsselprozentsatz. Multiplizieren Sie eine der oben genannten Bildgrößen mit 0,15625, und Sie erhalten den korrekten Pixelradius für diese Größe.

EDIT: Danke @Chris Prince für das Kommentieren mit dem Radiusprozentsatz von iOS 8/9/10: 22,37%

29
bitwit

Wichtig: Symbolgleichung für iOS 7

Mit der kommenden Version von iOS 7 werden Sie feststellen, dass der "Standard" -Symbolradius erhöht 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 120-Nummer 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,... Zu vermeiden, die Ecken Ihres Symbols zu beschneiden. IOS macht das für Sie, wenn Die Eckenrundungsmaske verwendet) ( Apple-Dokumentation )

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

Wenn Sie manuell abgerundete Ecken für Ihre Symbole festlegen, werden sie wahrscheinlich auf diesem oder jenem Gerät beschädigt aussehen, da sich die Rundungsmaske leicht von einer iOS-Version zu einer anderen ändert. Manchmal sind Ihre Symbole etwas größer, manchmal (seufzen) etwas kleiner. Wenn Sie ein quadratisches Symbol verwenden, werden Sie von dieser Belastung befreit, und Sie werden sicher ein stets aktuelles und gut aussehendes Symbol für Ihre App haben.

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

Bearbeiten

Um diese Antwort besser zu verstehen, lesen Sie die offizielle Apple-Dokumentation zu iOS-Symbolen . Auf dieser Seite wird eindeutig darauf hingewiesen, dass ein Quadratsymbol automatisch auf einem iOS-Gerät angezeigt wird:

  1. Abgerundete Ecken
  2. Schatten fallen
  3. Reflektierender Glanz (sofern Sie den Glanzeffekt nicht verhindern)

So können Sie den gewünschten Effekt erzielen, indem Sie einfach ein einfaches quadratisches Symbol zeichnen und den Inhalt füllen. Der letzte Eckenradius ist ähnlich wie in den anderen Antworten. Dies wird jedoch niemals garantiert, da diese Zahlen nicht Bestandteil der offiziellen Apple-Dokumentation zu iOS sind. Sie bitten dich, quadratische Symbole zu zeichnen, also ... warum nicht?

28
marzapower

Die Antwort von dbarnard enthält die Formel zum Berechnen des korrekten Radius. Da Sie jedoch nach Vorlagen gesucht haben, finden Sie alle Masken und Overlays 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 wird es wahrscheinlich in/Developer/sein).

Wie bereits erwähnt, sollten Sie sie NICHT selbst maskieren, aber Sie können diese verwenden, um zu überprüfen, wie Ihre Symbole aussehen, sobald sie maskiert sind.

(Dank für diese Feststellung geht an Neven Mrgan IIRC)

16
Agos

Die Leute, die sich über den Eckenradius streiten, werden geringfügig vergrößert, was aber eigentlich nicht der Fall ist.

Von diesem Blog :

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

enter image description here

Sie benötigen brauchen nicht, um den Eckenradius auf Symbole für iOS anzuwenden. Geben Sie einfach quadratische Symbole an. Wenn Sie dennoch wissen möchten, wie das geht, heißt die tatsächliche Form Squircle und unten ist die Formel:

enter image description here

9

Der Eckenradius des 57 x 57 Pixel-Symbols beträgt 9 Pixel.

7
willc2

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

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

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

Dieser Pfad verweist auf ein Verzeichnis mit diesen Dateien (wieder 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
./[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
./[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]

Wie Sie sehen, gibt es viele verschiedene Masken, die aber ziemlich eindeutig benannt sind. Hier ist das [email protected]~iphone.png Bild:

AppIconMask@3x~iphone.png

Sie können dies verwenden, um Ihr Symbol zu testen, um zu sehen, ob es nach dem Maskieren gut aussieht. Aber, gehe nicht um deine Ecken. Wenn Sie diese Masken erneut ändern, werden Artefakte auftreten.

6
Bruno Bronosky

Wenn der Hub nicht berücksichtigt wird, beträgt der exakte Radius für das 57x57-Symbol tatsächlich 10px.

Ich bekomme diese Informationen von iconreference .

5
Khomsan

Alle vorherigen Antworten auf diese Frage sind nicht mehr aktuell. Seit mindestens Mai 2015 verlangt Apple von Ihnen, quadratische Symbole ohne Rundung anzugeben:

Icon Ecken quadratisch halten. Das System wendet eine Maske an, die die Ecken des Symbols automatisch rundet.

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

5
Mark Whitaker

Beim Entwerfen meiner App-Icons mit Photoshop habe ich festgestellt, dass kein ganzer Eckenradius in die Maske des Geräts 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 abzuschalten. Dann starte ich die App und mache einen Screenshot des Startbildschirms. Jetzt können Sie problemlos eine Maske aus diesem Bild erstellen, die Sie in Photoshop verwenden können. Dadurch erhalten Sie perfekt abgerundete Ecken.

4
ryyst

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

3
Daniel

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

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

Ich habe das iTunes U-Symbol aus dem App Store heruntergeladen. Es ist 175x175px. Ich habe es in Photoshop auf 1024px hochskaliert und zwei Formen hinzugefügt, eine mit einem Radius von 160px und eine mit 180px.

Wie man unten sehen kann, ist die Form (dünne graue Linie) mit 160px (die 1.) etwas abgeneigt, wohingegen die mit 180px gut aussieht. 

shape with 160px radiusenter image description here

Das mache ich jetzt in PhotoShop:

  1. Ich erstelle eine Leinwandgröße 1026x1026px mit einer 180px mask für maindesign Smart Object
  2. Ich dupliziere das Haupt-Smart-Objekt fünfmal und verkleinere es auf 1024px, 144px, 114px, 72px und 57px. 
  3. Ich füge für jedes Smart-Objekt ein "New layered based slice" hinzu und benenne die Slices entsprechend ihrer Größe um (z. B. icon-72px).
  4. Wenn ich das Artwork speichere, wähle ich "All User Slices" und BANG! Ich habe alle Icons für meine App.
2
Tibidabo

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

2
Ruby

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


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

Beinhaltet:

Ecken des Symbols eckig halten. Das System wendet eine Maske an, die die Ecken des Symbols automatisch rundet.

und 

Halten Sie den Hintergrund einfach und vermeiden Sie Transparenz. Stellen Sie sicher, dass Ihr Symbol undurchsichtig ist, und stören Sie nicht den Hintergrund. Vergeben Sie einen einfachen Hintergrund, damit andere Symbole in der Nähe nicht überwunden werden. Sie müssen nicht das gesamte Symbol mit Inhalten füllen

0
agirault

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

0
Vinayak