Ich versuche, das Symbol für meine iPhone-App zu erstellen, weiß aber nicht, wie ich den genauen Radius erhalte, den die iPhone-Symbole verwenden. Ich habe gesucht und gesucht für ein Tutorial oder eine Vorlage, aber nicht finden können, ein.
Ich bin sicher, dass ich nur ein Idiot bin, aber wie bekommt man die abgerundeten Ecken genau richtig mit dem Symbol aus Illustrator oder Photoshop?
Bearbeiten:
Was ist der Radius für das Retina iPad?
Sie können (ab heute) vier Icons für Ihre Anwendung erstellen, die alle unterschiedlich aussehen können - nicht unbedingt auf der Grundlage des 512x512-Bildes.
Wenn Sie einen Satz von benutzerdefinierten Symbolen erstellen, können Sie die UIPrerenderedIcon in der Datei info.plist auf true setzen, dann wird der Glanzeffekt nicht hinzugefügt, sondern es wird ein schwarzer Hintergrund darunter gelegt und die Bildecken werden mit diesen Eckenradien abgerundet, d.h. wenn der Eckenradius bei einem der Symbole größer ist, dann wird es an den Kanten/Ecken schwarz sein.
Bearbeiten: Siehe Kommentar von @devin-g-rhode und Sie können sehen, dass alle zukünftigen Symbolgrößen eine 1:6.4 Verhältnis von Eckenradius zu Symbolgröße. Es gibt auch eine sehr gute Antwort von https://stackoverflow.com/a/29550364/396005 mit dem Speicherort der Bildmaskendateien, die im SDK zum Abrunden der 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 mit dem Namen icon.png hätte, würde ich auch eine 114x114-PNG-Datei mit dem Namen icon@2x.png zum Projekt/Ziel hinzufügen und Xcode würde diese automatisch als das Symbol auf einem Retina-Display 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 launch@2x.png bei 640x960.
Nachdem ich einige der Antworten in diesem Beitrag ausprobiert habe, habe ich mich mit Louie Mantia (ehemaliger Apple-, Square- und Iconfactory-Designer) beraten und 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. Sie können also den Radius für jede Icon-Größe berechnen, indem Sie 10/57 x new size (zum Beispiel 10/57 x 114 ergibt 20, was der richtige Radius für ein 114px-Symbol ist). Hier finden Sie eine Liste der am häufigsten verwendeten Icons, der korrekten Namenskonventionen, der Pixelmaße und der Eckenradien.
Wie bereits in anderen Antworten erwähnt, sollten Sie die Bilder, die Sie in der Binärdatei verwenden oder bei Apple einreichen, nicht beschneiden. Sie sollten alle quadratisch sein und keine Transparenz aufweisen. Apple maskiert jedes Symbol automatisch in dem entsprechenden Kontext.
Diese Kenntnisse sind jedoch wichtig für die Verwendung von Symbolen in der Benutzeroberfläche von Anwendungen, bei denen die Maske im Code angewendet oder in Photoshop vorgerendert werden muss. Es ist auch hilfreich bei der Erstellung von Grafiken für Websites und anderes Werbematerial.
Weitere 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 zur Erstellung von Rundungen in Photoshop und warum das wichtig ist: roundrect
Offizielle Dokumente von Apple über die Größe von Symbolen und Designüberlegungen: Icons und Bilder
Aktualisierung:
Ich habe einige Tests in Photoshop CS6 durchgeführt, und es scheint, dass 3 Stellen hinter dem Komma ausreichen, um genau den gleichen Vektor zu erhalten (zumindest wie er von Photoshop bei 3200% Zoom angezeigt wird). Das Werkzeug "Rechteck abrunden" rundet die Eingabe manchmal auf die nächste ganze Zahl, aber man kann einen deutlichen Unterschied zwischen 90 und 89,825 erkennen. Und einige Male rundete das Round Rectangle Tool nicht auf und zeigte tatsächlich mehrere Stellen nach dem Komma an. Ich bin mir nicht sicher, was da los ist, aber es verwendet und speichert auf jeden Fall die präzisere Zahl, die eingegeben wurde.
Jedenfalls habe ich die obige Liste aktualisiert, so dass sie nur noch 3 Stellen nach dem Komma enthält (vorher waren es 13!). In den meisten Situationen wäre es wahrscheinlich schwer, den Unterschied zwischen einem transparenten 512px-Symbol, das mit einem Radius von 90px maskiert ist, und einem, das mit einem Radius von 89,825 maskiert ist, zu erkennen, aber das Antialiasing der abgerundeten Ecke würde definitiv etwas anders ausfallen und wäre wahrscheinlich unter bestimmten Umständen sichtbar, insbesondere wenn eine zweite, präzisere Maske von Apple, im Code oder anderweitig angewendet wird.
Ich sehe viele Diskussionen über "px", aber niemand spricht über Prozentsätze, die die feste Zahl sind, mit der man rechnen will.
22.37% ist hier der entscheidende Prozentsatz. Multiplizieren Sie eine der oben genannten Bildgrößen mit 0,2237 und Sie erhalten den richtigen Pixelradius für diese Größe.
Vor iOS 8 hat Apple weniger gerundet und 15,625 % verwendet.
EDITAR : Danke @Chris Prince für den Kommentar mit dem iOS 8/9/10 Radius Prozentsatz: 22.37%
Mit der bevorstehenden Veröffentlichung 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 am besten repräsentiert seine Form auf iOS 7 ist die folgende Superellipse:
|x/120|^5 + |y/120|^5 = 1Natürlich können Sie die 120 Nummer mit der gewünschten Symbolgröße, um die entsprechende Funktion zu erhalten.
Original
Sie sollten ein Bild bereitstellen, das 90°-Ecken hat (es ist wichtig, dass vermeiden, dass die Ecken Ihres Icons abgeschnitten werden - iOS erledigt das für Sie, wenn es die Maske zum Abrunden der Ecken anwendet) ( Apple-Dokumentation )
Am besten ist es, die Ecken der Icons überhaupt nicht abzurunden. Wenn Sie Ihr Symbol als quadratisches Symbol festlegen, wird iOS das Symbol automatisch mit einer vordefinierten Maske überlagern, die die entsprechenden abgerundeten Ecken festlegt.
Wenn Sie manuell abgerundete Ecken für Ihre Symbole festlegen, sehen sie auf diesem oder jenem Gerät wahrscheinlich nicht gut aus, weil sich die Abrundungsmaske von einer iOS-Version zur anderen leicht verändert. Manchmal sind Ihre Symbole etwas größer, manchmal (seufz) etwas kleiner. Die Verwendung eines quadratischen Icons befreit Sie von dieser Last, und Sie können sicher sein, dass Sie immer ein aktuelles und gut aussehendes Icon für Ihre App haben.
Dieser Ansatz gilt für jede Icon-Größe (iPhone/iPod/iPad/retina) und auch für das iTunes-Artwork. Ich habe diesen Ansatz ein paar Mal verfolgt, und wenn Sie möchten, kann ich Ihnen einen Link zu einer App schicken, die native quadratische Symbole verwendet.
bearbeiten
Um diese Antwort besser zu verstehen, lesen Sie bitte die offizielle Apple-Dokumentation über iOS-Symbole . Auf dieser Seite ist klar angegeben, dass ein quadratisches Symbol automatisch diese Eigenschaften erhält, wenn es auf einem iOS-Gerät angezeigt wird:
Sie können also jeden gewünschten Effekt erzielen, indem Sie einfach ein einfaches quadratisches Symbol zeichnen und es mit Inhalt füllen. Der endgültige Eckenradius wird in etwa dem entsprechen, was die anderen Antworten hier sagen, aber das wird nie garantiert sein, da diese Zahlen nicht Teil der offiziellen Apple-Dokumentation zu iOS sind. Sie bitten dich, quadratische Symbole zu zeichnen, also ... warum nicht?
Die Leute argumentieren, dass der Eckenradius leicht vergrößert wurde, aber das ist nicht der Fall.
En dieser Blog :
Ein "Geheimnis" der physischen Produkte von Apple besteht darin, dass sie Tangenten (wo ein Radius eine Linie in einem einzigen Punkt trifft) vermeiden und ihre Oberflächen mit dem so genannten Kontinuität der Krümmung .
Sie brauchen nicht um den Eckenradius auf Icons für iOS anzuwenden. Bieten Sie einfach quadratische Icons an. Aber wenn Sie immer noch wissen wollen, wie, ist die eigentliche Form genannt Eichhörnchen und unten ist die Formel:
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
