Schärfen von iOS-Symbolen

Ich erstelle eine iOS-App und habe ein paar benutzerdefinierte Symbole für meine Navigationsleiste. Das erste ist ein Pluszeichen und das kam ziemlich gut heraus. Ich habe auch ein Aktualisierungssymbol und es ist nicht so scharf wie das Pluszeichen. Offensichtlich eine kreisförmige Form zu haben und etwas Anti-Aliasing zu spielen, aber ich denke, das Aktualisierungssymbol sollte viel schärfer sein als es ist.

Ich bin kein Experte für Photoshop oder Grafikdesign, daher suche ich nach Tipps, wie das Aktualisierungssymbol etwas klarer und schärfer wird. So bin ich bei der Erstellung vorgegangen:

1) Begonnen mit Hintergrundelementen in Photoshop 2) Gefundenes Aktualisierungssymbol, das mir gefallen hat und das eine lizenzfreie Lizenz hatte. 3) Ich nahm ein Symbol im PNG-Format und importierte es in Photoshop. 4) Habe die Farbe des Symbols mit dem Farbersetzungswerkzeug von Originalgrau auf aktuelles Weiß ersetzt. 5) Das weiße Aktualisierungssymbol wurde in eine .png-Datei gespeichert. 6) Wenn ich zu meinem anderen Photoshop-Dokument (mit Hintergrund usw.) zurückkehre und „Datei“ -> „Platzieren“ ausführe und die weiße .png-Datei in das Dokument einfüge. Hat die Größe überhaupt nicht geändert. 7) Identischer Stricheffekt zum Aktualisierungssymbol wie das Pluszeichensymbol hinzugefügt.

Ich weiß, dass es einen besseren Weg geben muss, dies zu tun, um ein besseres Ergebnis zu erzielen. Muss ich einfach in den sauren Apfel beißen und zu Illustrator gehen und versuchen, mein eigenes zu zeichnen? Ich habe keine Vektordarstellung dieses Symbols, das ich gefunden habe - nur Photoshop und .png.

Irgendwelche Tipps würden sehr geschätzt. Anbei der Screenshot der Navigationsleiste mit beiden Symbolen.

Geben Sie hier die Bildbeschreibung ein

Für App-Symbole ist es immer gut, das Vektorformat zu verwenden, damit die Dinge für verschiedene Auflösungen gut skaliert werden können. Dieses Symbol wäre in Illustrator nicht schwer zu erstellen. Möchten Sie ein Tutorial, wie man es erstellt?
Nun, ich denke, ich könnte das Symbol in Illustrator erstellen, aber mein Mangel an Wissen kommt zum Tragen, wenn es an der Zeit ist, es in einer Datei zu speichern, die von XCode / iOS verwendet werden kann. Würde ich diese Illustrator-Datei nicht letztendlich in einer PNG-Datei speichern? ist eine rasterbasierte Ausgabe? Ich weiß, dass Vektor mir die Möglichkeit gibt, nach oben/unten zu skalieren usw., ohne an Klarheit zu verlieren, aber was ich in Photoshop gemacht habe, ist genau die Größe, die ich brauche, und ich zoome hinein und versuche, alles pixelgenau hinzubekommen. Wäre Illustrator hier wirklich der richtige Weg? Wenn ja, verstehe ich nicht, warum, wenn die endgültige Ausgabe pixelbasiert ist.
Sollte ich diese überhaupt im .png-Format speichern oder gibt es ein anderes Format (.ico?), das besser geeignet wäre?
PNG sollte in Ordnung sein, aber um scharfe Kanten zu erhalten, sollten Sie das Symbol in einem Vektorformat erstellen und bearbeiten. Ich habe gerade ein kurzes Tutorial für Sie veröffentlicht, das zeigt, wie Sie das Symbol erstellen und es in Photoshop oder Illustrator auf die gewünschte Größe bringen.
Berücksichtigen Sie Retina-Displays? Das sieht aus wie eine Standardauflösung auf einem Retina-Display – das immer verschwommen sein wird. Aber wie oben und unten erwähnt, verwenden Sie idealerweise SVG (für HTML5-basierte Apps) oder konvertieren das SVG in native UI-Elemente für native Apps.
SVG funktioniert oder einfach eine höhere Pixeldichte in der Grafik mit der programmgesteuert festgelegten endgültigen Größe.

Antworten (2)

So erstellen Sie dieses Symbol in Illustrator:

http://imgur.com/a/FzZb8#0

Schritt 1: Öffnen Sie ein neues Illustrator-Dokument und fügen Sie das gerasterte Symbol ein.

Schritt 2: Zoomen Sie auf das Symbol, da wir einige Pixelmessungen durchführen werden. Es ist hilfreich, Hilfslinien über der Mitte des Symbols zu platzieren. Nichts muss exakt sein.

Schritt 3: Messen Sie die Breite der Kurve. Ich habe das Linealwerkzeug verwendet, von Mitte zu Mitte sind es ungefähr 33,25 Pixel. Noch einmal, muss nicht genau sein.

Schritt 4: Erstellen Sie mit dem Ellipsenwerkzeug einen Kreis mit diesem Durchmesser, indem Sie auf eine beliebige Stelle im Dokument klicken und dann eingeben, was Sie sowohl für die Höhe als auch für die Breite gemessen haben (33,25 Pixel).

Schritt 5: Bewegen Sie den Kreis über die Kurve. Wenn Sie Hilfslinien erstellt haben, können Sie sie über dem Schnittpunkt der Hilfslinien zentrieren.

Schritt 6: Fügen Sie dem Kreis einen Strich hinzu. Ich habe 5,5 pt verwendet, was sich als etwas dicker als die Symbolkurve herausstellte. Möglicherweise möchten Sie etwas zwischen 5 und 5,5 pt verwenden.

Schritt 7: Wählen Sie das Segment der Kurve oben rechts im Kreis aus. Wählen Sie mit dem Lasso-Werkzeug einen kleinen Teil oben rechts aus (stellen Sie sicher, dass Ihr Rastersymbolbild gesperrt ist!)

Schritt 8: Klicken Sie auf Löschen, um dieses Segment zu entfernen, sodass wir einen 3/4-Kreis haben.

Schritt 9: Bearbeiten Sie die Stricheigenschaften: Fügen Sie eine vorstehende Kappe hinzu

Schritt 10: Fügen Sie den Pfeil hinzu. Klicken Sie mit dem Polygon-Werkzeug auf eine beliebige Stelle, um ein Dreieck (3 Seiten, 7 Pixel) zu erstellen.

Schritt 11: Drehen Sie das Dreieck um -90°, sodass es am Pfeil ausgerichtet ist

Schritt 12: Platzieren Sie das Dreieck über dem Pfeil und passen Sie die Größe nach Bedarf an

Schritt 13: Wählen Sie Ihre Kurve aus, erweitern Sie den Strich (Objekt -> Erweitern)

Schritt 14: Speichern Sie nur das Symbol als .EPS

So exportieren Sie für iOS:

Es gibt zwei Möglichkeiten, dies zu tun. Öffnen Sie in Photoshop einfach Ihre .EPS-Datei und PS fragt Sie, in welcher Größe Sie sie rastern möchten. Stellen Sie sicher, dass "Anti-Aliasing" aktiviert ist.Geben Sie hier die Bildbeschreibung ein

Wählen Sie in Illustrator die gesamte Form aus und bearbeiten Sie die Größe mit dem Menü „Transformieren“ in der Symbolleiste. Dann Datei -> Exportieren und als .PNG speichern. Stellen Sie sicher, dass "Zeichenflächen verwenden" nicht aktiviert ist, um nur das Symbol auszugeben.Geben Sie hier die Bildbeschreibung ein

Sie können PocketSVG verwenden

https://github.com/arielelkin/PocketSVG#pocketsvg

Eine Klasse, die Scalable Vector Graphics (SVG) konvertiert in:

CGPaths
CAShapeLayers
UIBezierCurves
NSBezierCurves.

Dies macht es einfach, vektorbasierte Pfade und Formen in Ihren iOS- oder OS X-Apps zu erstellen.

Dies ist ein Fork eines SVG-zu-Bezier-Pfad-Parsers von Martin Haywood mit Korrekturen von Pieter Omvlee und Dominic Mortlock.

Verwendung

Erstellen Sie Ihre Zeichnung in einem Vektorgrafik-Editor wie Illustrator, Inkscape, Sketch usw.

Save as an SVG.
Drag and drop it into your Xcode project.
Follow the steps on the link below

https://github.com/arielelkin/PocketSVG#usage

Schärfen von iOS-Symbolen
AntwortenHierDatenschutz-Bestimmungen1y, 0v