Wie man Pixel perfekte Icons erstellen
Warum Pixel Perfect ist wichtig?
Icons sind alle über Klarheit und Kommunikation. Verschwommen Symbole können nicht so gut wie scharf diejenigen kommunizieren. So einfach ist das. Stellen Sie sich vor, wenn Verkehrsschilder waren verschwommen, was für ein Chaos sie machen würde!
Wenn Sie mit größeren Symbolen arbeiten (> 64px), verschwommene Kanten sehen in der Regel unästhetisch, und wenn man sie in einem kleineren Maßstab verwenden muß (16px - 32px) sie vielleicht sogar nicht mehr wiederzuerkennen sein. Und Sie werden nie wissen, wie Ihr Kunde diese Symbole in der Zukunft verwenden werden. So Pixel perfekt ist der Weg zu gehen!
Jeder Icon Designer sollte wissen, wie Pixel perfekte Icons zu erstellen. Zu einem bestimmten Zeitpunkt in der Zukunft könnten diese Fähigkeiten weniger wichtig geworden wie die Auflösungen auf unsere Geräte werden immer höher. Doch jetzt ist es ein absolutes Muss, oder eine Supermacht für jedes Symbol Designer da draußen!
Zu Beginn meiner Karriere als iconographer, kämpfe ich mit meinen Icons Pixel perfekt. Manchmal war es ein fehlschlagen, nachdem ein fehlschlagen, aber jetzt, mit all der Erfahrung hinter meinem Rücken, ich kann mit Stolz sagen, dass meine Symbole wie die Hölle sind scharf! Ich habe gelernt, wie wichtig es Pixel perfektes Design auf die harte Art und Weise, aber es war jeden Cent wert.
Jetzt fühle ich das Bedürfnis, diese Erfahrung zu teilen. Lassen Sie mich Ihnen meine Art und Weise Pixel perfekte Icons zu machen.
Teil 1: das Dokument einrichten
So möchten Sie Pixel perfekte Icons machen. Groß. Der erste Schritt, den Sie nehmen müssen, ist eine korrekte Illustrator-Datei zu erstellen.
Es gibt 3 Hauptelemente richtige Pixel perfekt Illustrator Dokument in der Erstellung: artboard Dimensionen, Einheiten und Ausrichten alle neuen Objekte an das Pixelraster.
Maße
Breite und Höhe sollen auch Zahlen sein. Stellen Sie sicher, dass Sie nicht eine dieser Funktionen mit einem Komma (zum Beispiel 64,23 px) verlassen.
Artboard Größe gehört zu den Symbolen Sie erstellen. Es könnte von jeder Standard-Größe: 16 × 16; 28 · 28; 30 x 30; 40 x 40; 48 · 48; 64 x 64; 96 × 96; 128 × 128, usw.
Bitte beachten Sie, dass alle Zahlen sind sogar! Es ist die Art, wie sie sein sollte.
Pixel. Deshalb ist es Pixel perfekt genannt wird, nicht Millimeter perfekt
Richten Neue Objekte Grid Pixel
Ok, das ist sehr wichtig. Gehen und diese Funktion überprüfen. Sobald es aktiviert ist, werden alle neu erstellten Objekte am nächsten Pixel Snap automatisch.
Illustrator Vorl
Wunderbar, jetzt, wenn Sie ein richtiges Dokument haben, ist es Zeit, einige des Illustrator-Einstellungen anzupassen. gehen in erster Linie auf Illustrator> Einstellungen> Allgemein (oder drücken Sie Cmd + K, wenn Sie ein Macbook Benutzer sind)
Ändern Keyboard Erhöhungsschritte auf 1px. Auf diese Weise, wenn Sie Ihre Symbole bewegen werden sie in dem Pixelraster bleiben.
Wie Sie wahrscheinlich verstanden haben, setzen wir alle Werte auf Pixel. Gehen Sie auf die Menü-Einheiten und ändern Allgemeine und Stroke Werte Pixel. Typ kann in den Punkten bleiben, weil man nur selten in Symbole verwenden Schriftarten
Das ist es!
Sie haben ein Upgrade Adobe Illustrator es ein echtes Symbol Fabrik machen. Dennoch gibt es viel mehr Sie pixelgenaue Icons wissen müssen, wenn Sie es nageln wollen. Lassen Sie uns auf den nächsten Teil bewegen!
Teil 2: Tipps und Tricks, wie Sie pixelgenaue Symbole zu entwerfen.
So, jetzt, wenn Ihr Pixel perfekte Illustrator-Datei gut geölte und reibungslos arbeitenden, können wir auf die Schaffung der ersten Charge von Pixel perfekte Icons bewegen. Sollen wir?
eine vorbereitete Datei ist nicht genug große Symbole zu machen. Es gibt viele verschiedene Tipps und Techniken, um Ihnen scharfe Symbole zu erstellen. Heute werde ich ein paar wichtigsten gehen. Diese Tricks bringen Sie näher an immer der Meister der Pixel perfekt Symbole. Ohne weitere Umschweife, lassen Sie uns beginnen!
Verwenden ganze Objekt Messungen.
Dies ist der Schlüssel Pixel perfekt Symbole zu schaffen. Achten Sie darauf, alle Dimensionen, Objektgrößen, Positionierung Koordinaten, Strichbreite, etc. sind ganze Zahlen. Jede einzelne Messung. Vermeiden Sie Freihandzeichnung. Stattdessen wählen Sie ein Objekt-Werkzeug (Ellipse, Rechteck, etc.), und klicken Sie auf dem Bildschirm. Geben Sie Ihre Objektdimensionen manuell. Und noch einmal - kein Komma!
Alle Zahlen sollten auch sein.
Wenn auf Ihren Symbolen arbeiten, versuchen Sie in geraden Zahlen Ihre Objekthöhe und Breite Messungen zu halten (2, 4, 6, 8, 10, 12, etc ..). Icons sollen verkleinert werden, so stellen Sie sie auf einem 64 x 64 Raster erstellen und ein Objekt 15px x 21px machen. Wenn Sie Ihr Symbol der Größe werden auf 32 × 32 (die Hälfte), wird dieses Objekt wird 7,5px x 10,5px, die in einem unscharfen Symbol führen.
Und vergessen Sie nicht über die richtige Objektmessungen. Noch einmal: das Haupt-Pixel perfekt Konstruktionsprinzip - keine Kommas verwenden! Nie.
Machen Sie das Transformationsfeld Ihres bester Freund.
Verwenden Pixelvorschau.
Klicken Sie auf Ansicht> Pixel Vorschau. Verwenden Sie diese Option, wenn Sie überprüfen möchten, ob alles Pixel perfekt ist, und Sie haben keine Fehler auf dem Weg gemacht. (Einige Leute mögen es halten auf die ganze Zeit. Ich benutze es nur, wenn ich sicherstellen möchten, dass alles in Ordnung ist. Danach gehe ich zurück in die reguläre Ansicht.)
Illustrator ist der Vektor-Software, und es sei denn, diese Funktion zu überprüfen, es wird Ihnen immer perfekt zeigen glatte Linien. Wenn es überprüft, es zeigt ein Rasterbild, das Sie nach dem Speichern Ihrer Datei als .png oder ein anderes Rasterformat erhalten werden. Sie sollten die Ansicht vergrößern und sehen, wenn Sie keine halben Pixel verlassen haben. (Um die tatsächliche Größe eines Symbols zu sehen, gehen Sie zu Ansicht> Tatsächliche Größe.)
Ist Ihr Symbol Pixel perfekt?
Ist es? Wenn Sie alles richtig gemacht haben, sollten Sie Ihre Icons sehen super scharf.
Es gibt ein paar andere Nuancen Ihre Symbole bei der Aufrechterhaltung der Pixel Perfect, wenn Sie sie sind zu exportieren. Manchmal Illustrator vermasselt sie. Warum ist es passiert? Lesen Sie zusammen, um herauszufinden!
Teil 3: Exportieren von Icons aus Illustrator.
Nun, da Sie eine Illustrator-Datei erstellt haben und in Handarbeit einig Pixel perfekt Symbole der Spitzen mit ich dir gegeben habe, ist es Zeit für den letzten und einfachen Teil - Ihre Symbole exportieren und jeden zeigte da draußen was für eine wunderbare Arbeit, die Sie getan haben!
Es gibt viele Möglichkeiten, Symbole aus Illustrator zu exportieren. Leider neigen sie die meiste Zeit verschwommen zu bekommen, so muss man aufmerksam sein. Diese Tipps und Tricks sparen Sie Zeit und Energie und helfen, die Unschärfen zu vermeiden.
Wie sie sagen, ist es gut, von den Fehlern anderer zu lernen. Wenn es darum geht, die Pixel perfekte Icons zu exportieren, ich schlage vor, Sie auf mich hören und nie wiederholen meine!
Früher habe ich meine Ikonen aus Illustrator direkt auf die Photoshop kopieren. Falsch! Unabhängig davon, wie genau Sie waren während der Symbole in Illustrator zu machen, werden sie verschwommen in Photoshop erhalten. Immer.
Also, wenn Sie auf die Symbole fertig sind arbeiten, Ihr Bildschirm wie folgt etwas aussehen sollte (siehe ist jedes Symbol auf seiner eigenen Kunst-Karte):
Es Namensgebung Zeit!
Dies ist der Teil, wo Sie Ihre Symbole nennen. Klicken Sie auf den Menüpunkt - Kunst Boards (Shift + O). Das ist, wie Sie die Kontrolle über die Kunst Boards zu gewinnen. Wählen Sie eine von ihnen, und Sie können die Einstellungen auf der Oberseite bearbeiten. Das einzige, was wir verändern hier ist der Name. Zum jeden Artboard einzeln und benennen Sie sie in nach dem Symbol.
Speichern der Symbole
Bitte schön! Jetzt den Kopf Datei> Speichern unter. Geben Sie einen kurzen einfachen Namen wie „1.svg“. Doch lesen Sie weiter, um herauszufinden warum.
Der nächste Schritt ist die Änderung des Dateitypen die Verwendung Art Boards Option SVG und Überprüfung. Es ist erforderlich, separat alle Kunstplatten zu speichern. Da Sie alle Ihre Symbole in verschiedenen Kunsttafeln halten (Sie tun?), Wird er sie alle auf einmal exportieren. Wenn Sie nur ein paar exportieren möchten, können Sie Bereich überprüfen und die Kunstkartennummern eingeben Sie exportieren möchten. Wählen Sie, wo Sie Ihre Symbole gespeichert werden soll und klicken Sie auf die Schaltfläche Speichern.
Yay, alle Ihre Symbole werden exportiert! Es gibt eine Sache verlassen. Jedes Symbol hat, dass „1-“ im Dateinamen. Wenn Sie einen Mac-Benutzer sind, können Sie die Symbole auswählen, die rechte Maustaste und wählen Sie „umbenennen alle“ und ersetzen Sie die „1-“ mit einem leeren Feld. Für diejenigen, die Arbeit mit Windows, ich denke, es sollte eine gewisse Art eines Batch Renamer sein. Wenn nicht, können Sie die Symbole manuell beheben.
Wie die PNGs aller Größen zu generieren?
Ziehen Sie einfach und Ihre SVGs fallen, und die App wird sie fast jede mögliche PNG Auflösung umwandeln. Es erspart Ihnen wirklich eine Menge Zeit.
Also, wenn alles funktioniert hat, jetzt sollten Sie eine Reihe von Pixeln perfekter Icons auf Ihrem Computer haben. Vielleicht möchten Sie diese PNGs verwenden, um Ihren Dribbble Schuss zu machen! Meine persönliche Symbolgröße der Wahl für Dribbble ist 96x96px. Aber Sie können wählen, was für Sie gut zu sein scheint. Gehen Sie einfach mit Ihrem Darm.
Und das ist es mit den Pixeln perfekt Symbolen! Hoffe euch es genossen und gemeistert Ihre Fähigkeiten auf dem Weg. Pixel Perfektion braucht Zeit, aber es ist jeden Cent wert, nicht wahr denken so?
Nun sage ich: „Geh und experimentieren!“ Verschiedene Techniken versuchen, nutzen Sie Ihre Fantasie und Erfahrung, aber vergessen Sie nicht immer für „sauberere“ Pixel zu zielen, und Ihre Symbole werden wie die Hölle scharf aussehen, bevor Sie es wissen!
Viel Glück Raumkadetten!
