Wie man pixelperfekt in Adobe Illustrator arbeitet

Als Anfänger kann das Erstellen von digitalen Kunstwerken, die für die Verwendung im Internet gedacht sind, manchmal etwas frustrierend werden, besonders wenn man viel Zeit in ein Stück investiert (sei es eine Illustration oder ein Symbol), und dann merkt man das plötzlich, dass Endergebnis war nicht so knackig.

Das ist etwas, mit dem wir alle zu Beginn unserer Arbeit mit Adobe Illustrator beschäftigt waren. Aus diesem Grund habe ich beschlossen, diesen kurzen Artikel zu erstellen, der Ihnen helfen soll, wenn Sie nach Lösungen für dieses Problem suchen.

Vector vs. Bitmap

Bevor wir beginnen, möchte ich etwas Licht auf die verschiedenen Standards werfen, die Sie, ich und alle anderen, die als Designer arbeiten, beachten müssen, wenn wir diese Art von Arbeit übernehmen.

Es gibt zwei Haupttypen von Bildern, denen man begegnet, wenn man als kreativer Tüftler arbeitet.  Einer ist Vektor und der andere ist Bitmap.

Ein Vektorbild besteht aus einem oder mehreren Objekten, die aus einer variierenden Anzahl von Ankern und Pfaden bestehen, die virtuell beliebig skalierbar sind, so wie der Benutzer es wünscht oder benötigt, ein Prozess, der ohne Qualitätsverlust stattfindet.

Ein Bitmap-Bild hingegen besteht aus einer Reihe von fixierten einzelnen Pixeln, die zu einem Raster ausgerichtet sind. Das heißt, sobald ein Bild mit einer bestimmten Auflösung aufgenommen oder erzeugt wird, verliert es an Qualität, wenn seine Größe in irgendeiner Weise verändert wird (entweder hochskaliert oder herunterskaliert).  Das geschieht, wenn die Anzahl der Pixelinformationen (die tatsächliche Anzahl der Pixel) entweder reduziert oder stark vergrößert wird, da einige Projekte unterschiedliche Größen für unterschiedliche Verwendungen benötigen.

Wenngleich das Verkleinern eines Bildes keinen so starken Effekt auf die Qualität hat, wird es in den meisten Fällen zu einer verschwommenen, pixeligen Datei führen.  Es gibt einige Programme wie Perfect Resize, die spezielle Algorithmen zur Optimierung der Klarheit und Detaillierung von Bildern verwenden, die vergrößert werden müssen, aber für mich unterstreicht dies weiterhin das Fehlen einer wichtigen Eigenschaft, die Bitmap im Vergleich zu Vector hat: qualitätsunabhängige Skalierbarkeit.

Sowohl Vektor als auch Bitmap sind abhängig von dem Medium, in dem sie verwendet werden.  Wie Sie wahrscheinlich wissen, kann eine Datei entweder digital oder ausgedruckt angezeigt werden.  Der Hauptunterschied liegt in der Art der Bildwiedergabe. Während Drucker pixelunabhängig sind, sind digitale Bildschirme (PC-Monitore, Telefon- und Tablet-Bildschirme usw.) auf die Auflösung angewiesen, um jede Art von Bildern zu erstellen und auszugeben, sei es eine Bitmap-Datei oder eine Vektor-Datei.

Das stellt ein schwieriges Problem in der Art und Weise dar, in der sich Vektorbilder auf das Pixelraster beziehen, auf dem sie angeordnet sind, daher die Trennung zwischen pixelperfekten Grafiken und abrupten Ähnlichkeiten.

Glücklicherweise gibt es Lösungen, die meiner Meinung nach zu Standardregeln werden sollten, sobald man an einem Projekt anfängt, egal ob es ins Internet gestellt oder ausgedruckt werden soll.

Verstehen wie Adobe Illustrator funktioniert

Bevor Sie anfangen, etwas zu reparieren, müssen Sie zuerst verstehen, wie dieses "etwas" funktioniert.  Illustrator ist eine vektorbasierte Software, die mithilfe von mathematischen Algorithmen die Pfade (ob geschlossen oder offen), die wir sehen, mithilfe von Ankerpunkten erstellt und anzeigt.  Diese Ankerpunkte sind einfache Punkte, die Sie bearbeiten können, um die Größe und Form eines Objekts zu ändern.

Kreis mit Ankerpunkten BeispielDie Anker selbst sind nicht so wichtig, aber die Art und Weise wie Sie sie positionieren und das Objekt, das sie auf deiner Artboard bilden (geknipst oder nicht) ist, weshalb ich in den folgenden Schritten über all die kleinen Dinge sprechen werde, die uns helfen zu erschaffen Pixel-gestoche scharfe Grafik.

Die Einstellungen von Illustrator

Standardmäßig enthält Illustrator eine Reihe von Optionen und Einstellungen, von denen die meisten vordefiniert sind, sodass Sie sofort mit der Arbeit beginnen können, sobald Sie es auf Ihrem Computer installiert haben.  Für die meisten Leute da draußen funktioniert das ganz gut, aber sobald Ihr Workflow mehr Detail-orientiert ist, werden Sie feststellen, dass Sie einige von ihnen optimieren müssen, um Ihre Designs dorthin zu bringen, wo Sie sie haben wollen.  In den folgenden Schritten werde ich Sie durch einige der grundlegenden Dinge führen, die ich bei jeder Neuinstallation von Illustrator anpassen möchte.

Bevor wir beginnen, möchte ich darauf hinweisen, dass dies persönliche Präferenzen sind, die durch einen Prozess von Versuch und Irrtum entwickelt wurden, und ich werde sie keinesfalls als "perfekt" oder "korrekt" bezeichnen - mehr wie "passend" zu einem Pixel-perfektes beabsichtigtes Projekt.  Keine Situation wird dem gleichen Muster entsprechen, aber in den meisten Fällen erhalten Sie zuverlässige Lösungen, um Ihren Workflow anzupassen und anzupassen.

Schritt 1

Bevor wir anfangen, unsere Einheiten anzupassen, möchte ich eine Sekunde brauchen und den Standardwert, mit dem Illustrator kommt (Punkte), mit dem angepassten Wert vergleichen, den wir wählen (Pixel), um zu sehen, was sie voneinander unterscheidet.

Punkt

Aus einer typografischen Perspektive ist ein Punkt (pt) die kleinste Einheit, die verwendet wird, um die Schriftgröße, den Zeilenabstand, den Einzug und den Abstand vor einem Absatz zu messen.

Pixel

Laut Wikipedia ist ein Pixel (px) aus der Perspektive der digitalen Bildgebung das "kleinste adressierbare Element" eines Bildes, das auf einem digitalen Bildschirm dargestellt wird.  Da Bildschirme und andere Gerätebildschirme Bilder anzeigen sollen, können wir auch ein Pixel als grundlegende Maßeinheit definieren, mit der wir die Auflösung des Geräts und die Größe der darauf angezeigten Elemente definieren.

Wir haben also zwei Einheiten, aber wie unterscheiden sie sich?  Viele Artikel beschreiben die beiden als gleich (1 pt = 1 px), aber nur auf einem 72 ppi-Display als 1 pt = 1/72 Zoll, was bedeutet, dass, sobald Sie ein höheres ppi-Gerät haben, das Verhältnis zwischen den beiden beginnt sich zu verschieben.  Wenn Sie die beiden aus einer CSS-Perspektive betrachten, gibt das W3 Org an, dass 0,75 pt = 1 px.

Apple schrieb einen vollständigen Eintrag dazu auf seiner iOS Developer Library-Seite und versuchte zu erklären, warum die Verwendung von Punkten im Gegensatz zu Pixeln beim Anzeigen von Bildern hilft, die auf Geräten mit niedrigerer und höherer Auflösung gerendert werden.

"Zum Beispiel, auf einem Gerät mit einem hochauflösenden Bildschirm kann beispielsweise eine Linie, die einen Punkt breit ist, tatsächlich zu einer Linie führen, die zwei physikalische Pixel breit ist.  Wenn Sie also denselben Inhalt auf zwei ähnliche Geräte übertragen, von denen nur eines über einen Bildschirm mit hoher Auflösung verfügt, scheint der Inhalt auf beiden Geräten ungefähr gleich groß zu sein."

Was sie vergessen haben zu erwähnen, ist, dass wir heute eine beträchtliche Anzahl von Herstellern haben, die Bildschirme mit unterschiedlichen Dichten haben, was das ganze Beispiel ein wenig unscharf macht.

Jetzt fragen Sie sich vielleicht, welchen Sie wählen sollten?  Ich neige dazu, mich auf Pixel zu konzentrieren.  Warum? Sagen wir einfach, es ist eine persönliche Vorliebe, und da ich hauptsächlich illustrative Artworks gemacht habe, habe ich noch nie gehört, dass sich Leute darüber beschweren, dass eine Illustration auf ihrem iPhone eine dickere Kontur hat als auf ihrem PC.

Außerdem sind Pixel nicht ppi-abhängig, und Sie können entsprechende Dateien an Geräte mit höherer Auflösung senden, indem Sie die ppi-Ebene beim Erstellen eines neuen Dokuments anpassen.  Außerdem tendiere ich aufgrund der großen Auswahl an Auflösungen auf verschiedenen Geräten zu der Annahme, dass ein Gerät auf einem Gerät eines anderen Herstellers, das Displays mit höherer Dichte verwendet, einen anderen Wert haben kann, da 1 pt auf einem Gerät von Apple 2 px entspricht .

Die Entscheidung liegt bei Ihnen.  Wenn Sie feststellen, dass die Pixel für Sie funktionieren, gehen Sie zum Abschnitt Einheiten des Menüs Voreinstellungen (Bearbeiten > Voreinstellungen > Einheiten (Edit > Preferences > Units)) und setzen Sie die Werte für Allgemein und Strich auf Pixel.  Da der Typ punktbasiert ist, empfehle ich, den Standardwert beizubehalten, da die Einstellung auf Pixel die Klarheit oder Schärfe des Textes nicht verbessert.

Schritt 2

Sobald Sie Ihre Einheiten angepasst haben, ist es an der Zeit, die Einstellungen des Gitters zu optimieren.  Ich werde nicht viel darüber reden, was ein Grid ist, da ich einen anderen Artikel habe, der alles erklärt, was man über sie wissen muss.  Was ich sagen möchte, ist, dass Sie, wenn Sie scharfe Grafiken erstellen möchten, sich darauf konzentrieren sollten, ein superpräzises Raster zu erstellen und in Zusammenarbeit mit dem Pixel-Vorschau-Modus daran zu arbeiten (auf den ich in ein paar Minuten eingehen werde).

Um die Standardeinstellungen zu ändern, gehen Sie zu Bearbeiten > Voreinstellungen > Hilfslinien und Gitter (Edit > Preferences > Guides & Grid), wo Sie zwei Einstellungen finden, die Sie berücksichtigen müssen: die Gitterlinie für jede Option und die Unterbereiche für eine.  Ich benutze seit einiger Zeit 1 für beide Werte und ich fand, dass es für meinen Prozess am besten passte, egal an welchem Projekt ich arbeitete.  Ja, Sie müssen aufmerksamer sein, aber hey, wenn Sie wie ich sind, werden Sie versuchen, so detailiert wie möglich zu werden.

Schritt 3

Für alle von uns hat die Illustrator eine pfiffige Funktion, die es uns ermöglicht, Objekte mithilfe der Pfeiltasten der Tastatur mit höherer Präzision zu bewegen.  Da wir wollen, dass alles so pixelgenau wie möglich ist, müssen wir den Wert so anpassen, dass bei jedem Tastendruck das Objekt genau ein Pixel in die Richtung springt, in die wir es angewiesen haben.

Die Einstellung finden Sie unter Bearbeiten > Einstellungen > Allgemein > Tastaturinkrement (Edit > Preferences > General > Keyboard Increment).

Das ist sehr hilfreich, wenn wir Objekte schnell und präzise über kurze Distanzen bewegen wollen.

Der Prozess

Bis jetzt habe ich über einige Verbesserungen gesprochen, die Sie verwenden können, um Illustrator präziser zu machen, aber da Beispiele in der Regel mehr als einfache Funktionsbeschreibungen lehren, werde ich Ihnen den Prozess zeigen, den ich normalerweise durchlaufe, sobald ich anfange etwas Bestimmtes zu erstellen für das Web verwendet werden.

Schritt 1

Alles beginnt mit unserem Dokument.  Wenn wir auf einige seiner Grundeinstellungen achten, können wir sicherstellen, dass unser Kunstwerk eine starke pixelgenaue Grundlage hat, auf der wir aufbauen können.

Drücken Sie Control-N (oder gehen Sie zu Datei > Neu (File > New)) und werfen Sie einen Blick auf einige der Einstellungen, beginnend mit dem Profil.

Da wir uns normalerweise darauf konzentrieren, pixelperfekte Sachen für das Web zu erstellen, sollte das Profil auf Web eingestellt sein.  Dadurch stellt Illustrator automatisch die Einheiten auf Pixel und den Farbmodus auf RGB (Rot Grün Blau) ein.

Wenn Sie sich die Größe unseres Dokuments genau ansehen, werden Sie feststellen, dass sowohl die Breite als auch die Höhe runde Werte (960 x 560 px) haben und keine Dezimalstellen (960,5 x 560,38).  Aber warum? Wenn Sie eine Zeichenfläche mit einer Breite von 960,5 px erstellen, wird rechts ein Bereich angezeigt, der nicht ganze Pixel vom Raster entfernt einnimmt und stattdessen etwa die Hälfte der Fläche bedeckt.

Das ist ein Nein, da Illustrator Neue Objekte an Pixelraster ausrichten soll.  Diese Funktion ist sehr wichtig, da sie jedes neu erstellte Objekt anweist, sich korrekt auf dem Pixelraster zu positionieren, damit alles scharf aussieht.

Wenn wir zum Beispiel ein Rechteck von 960 x 560 px haben und es auf die Mitte unserer dezimalen Zeichenfläche ausrichten möchten, ist das nicht möglich, da die rechte und die untere Seite nicht das gesamte Rechteck abdecken Oberfläche ihrer unteren Pixel.

Einige von Ihnen denken vielleicht, dass diese Option nur für webbezogene Inhalte verwendet werden sollte, aber ich denke, sie für den Druck zu verwenden, kann einen Mehrwert bringen, da Sie Ihre Anker durch ein präzises System positionieren und Anker statt dessen flattern.

Kurztipp: Falls Sie versehentlich ein Projekt starten, das auf einer Dezimalwertbreite oder -höhe basiert, können Sie die Situation beheben, indem Sie mit dem Zeichenbrett-Werkzeug (Artboard Tool) (Shift-O) die Werte in runde Werte umwandeln Größenanpassung von Anfang an, damit Sie später keine Kopfschmerzen haben.

Schritt 2

Sobald ich sichergestellt habe, dass mein Dokument korrekt eingerichtet ist, fange ich normalerweise an, an meinen Elementen zu arbeiten, und stelle sicher, dass jeder von ihnen runde Werte für die Breite und Höhe verwendet.

Wie ich im vorherigen Schritt gezeigt habe, gilt auch hier die gleiche Regel für die gesamte Oberfläche der Pixel.  Wenn ich eine scharfkantige Form, zum Beispiel ein Quadrat, erzeugen möchte, muss es feste Werte haben (zum Beispiel 200 x 200 px), so dass jede Seite genau die gleiche Pixelzahl vom Artboard abdeckt.  Auf diese Weise kann ich eine Form erstellen, die bei jedem Prozentwert vergrößert werden kann und trotzdem kristallklar aussieht.

Wenn mein Quadrat 200.4 x 199.9 px gewesen wäre, hätte Illustrator einen Antialiasing-Effekt auf die rechte und die untere Seite angewendet, da diese nicht ein ganzes Pixel abdecken würden, und dadurch wäre mein Element unscharf geworden.

Glücklicherweise bieten die guten Leute bei Adobe eine Möglichkeit, diese Art von Problemen zu beheben, indem Sie die Funktion An Pixelraster ausrichten auf der Unterseite des Transform-Bedienfelds implementieren.  Wenn Sie das Objekt von schlechter Größe auswählen und die Option Ausrichten an aktivieren, wird die Breite und Höhe des Quadrats automatisch auf 200 px geändert, da das der nächstliegende Rundungswert ist, der von der Software identifiziert wird.

Kurztipp: Wenn die Option nicht sichtbar ist, müssen Sie sie aktivieren, indem Sie auf den nach unten weisenden Pfeil des Transformationsfensters klicken und Optionen anzeigen auswählen.

Schritt 3

Das sind bei weitem die wichtigsten Funktionen, die Illustrator bietet, wenn es darum geht, Pixel-perfekte Designs zu erstellen.  Obwohl beide eine ähnliche Funktion haben, gibt es einige wichtige Unterschiede, die die beiden unterscheiden.

Am Raster ausrichten

Wie der Name schon sagt, steht diese Option in direktem Zusammenhang mit dem von Ihnen eingerichteten Grid.  Die Funktion kann aktiviert werden, indem Sie zu Ansicht > An Raster ausrichten (View > Snap to Grid) (Shift-Control-") gehen, und sie weist jedes einzelne Objekt von Ihrem Zeichenbrett an, seine Kanten an den nächsten Gitterlinienüberschneidungen auszurichten.

An Pixel ausrichten

Die Option An Pixel ausrichten verhält sich ein wenig anders, da das Einrasten der Objekte im Pixelraster nicht geändert werden kann.  Die Funktion wird ausgeblendet, bis Sie zu Pixelvorschau (Alt-Control-Y) wechseln, wenn sie von An Raster ausrichten zu An Pixel ausrichten wechselt.

Auch wenn Sie anders arbeiten, können Sie die Funktion An Raster ausrichten genauso wie die Option An Pixel ausrichten anpassen, wenn Sie alle 1 Pixel an einer Unterteilung von 1 Gitterlinie verwenden. Das bedeutet, dass Sie das kleinste Raster erstellen, das tatsächlich dieselbe Größe wie das Pixelraster hat.

Schritt 4

In Verbindung mit der Option An Pixel ausrichten wird dieser Vorschaumodus Ihr größter Helfer bei der Erstellung pixelscharfer Grafiken sein.  Es ermöglicht Ihnen, auf Pixelebene zu zoomen und genau zu sehen, welche Teile Ihres Designs überarbeitet werden müssen.  Ich benutze es die ganze Zeit, und es hat mir sehr geholfen.  Wie bereits erwähnt, kann das Werkzeug aktiviert werden, indem Sie unter Ansicht > Pixelvorschau (View > Pixel Preview) oder mit der Tastenkombination Alt-Control-Y navigieren.

Schritt 5

Sobald Sie mit dem kreativen Prozess fertig sind, nehmen Sie sich ein wenig Zeit und stellen Sie sicher, dass alle Anker korrekt am Pixelraster eingerastet sind.  Wenn Sie Anker gefunden haben, die abgesprungen sind, greifen Sie einfach auf das Direktauswahl-Werkzeug (Direct Selection Tool) (A), wählen Sie den entsprechenden Ankerpunkt und positionieren Sie ihn dann wieder an der nächsten Gitterlinienkreuzung.

Sie könnten denken, dass die Verwendung der Option An Pixel ausrichten diese Art von Problemen behebt, aber meiner Erfahrung nach neigt es manchmal zum Scheitern, und wenn dies der Fall ist, verlasse ich mich immer auf mein vertrauenswürdiges Direktauswahl-Werkzeug (A).

Schritt 6

Die Bézier-Griffe sind ein wichtiger Bestandteil jeder Vektorsoftware, da sie es dem Benutzer ermöglichen, die Form und Ausrichtung eines beliebigen Pfades (sei es geschlossen oder offen) zu ändern.  Das Problem, das die meisten Anfänger im Umgang mit Griffen haben, ist, dass sie normalerweise dazu neigen, sie überall hin zu ziehen, und dadurch fast immer Formen erzeugen, die abgehackter aussehen.

Das Geheimnis besteht darin, sicherzustellen, dass die Griffe (bei gedrückter Shift-Taste) entweder vertikal, horizontal oder in einer perfekten Diagonalen von 45° gezogen werden, so dass ihre Enden an einer der Kreuzungen der Gitterlinie ausgerichtet sind.

Wenn der Pfad, den Sie verfolgen, eine flache Seite hat, versuchen Sie auch, den Griff so zu ziehen, dass er exakt auf den oberen Abschnitt dieser Seite fällt, ohne darüber zu gehen.

Richtig transformieren

Beim Umgang mit Pixel Perfect Artwork kann die Größenanpassung sehr schmerzhaft sein.  Wenn Sie versuchen, das Objekt auszuwählen und eine der Seiten der Begrenzungsbox zu ziehen, vergrößert oder verkleinert es sie, aber dabei werden auch die Dinge auseinander gerissen.

Eine Lösung wäre, die Skalierungsoption (Rechtsklick > Transformieren > Skalieren > Uniform (right click > Transform > Scale > Uniform)) zu verwenden und 50% -Schritte zu verwenden, also Werte wie 150%, 200%, 250% zum Vergrößern und -50% zum Herunterskalieren auf die Hälfte des Originals Größe.

Deshalb sollten Sie immer im Voraus planen, damit Sie die genauen Größen kennen, die Sie entwerfen müssen.

Kurztipp: Auch bei dieser Methode sehen Sie Probleme, besonders wenn Sie eine große Gruppe von Elementen mit runden Ecken und gekrümmten Pfaden haben.  In diesem Fall müssen Sie die Gruppierung aufheben und dann die verschiedenen Elemente gleichzeitig anpassen.

Wie man richtig rotiert

Wenn Sie Rechtecke haben, ist es relativ einfach, sie zu drehen, da Sie ihre Ankerpunkte auf die nächste Pixelrasterlinie zurückführen können.  Aber was ist mit abgerundeten Ecken oder gekrümmten Pfaden?

Das ist wahrscheinlich der nervigste Teil bei der Suche nach pixelperfekten Objekten, da es in den meisten Fällen fast unmöglich ist, die Anker zurück zum Pixelraster zu ziehen, da dies sicherlich die Gesamtform des Objekts beeinflussen wird.  Wenn ich ein abgerundetes Rechteck habe, das gedreht werden muss, verwende ich normalerweise die Drehung und belasse das Objekt so, wie es ist.

Das war's!

Wenn Sie diesen schnellen Tipps folgen, sollten Sie keine Probleme haben, schöne knackige Grafiken für jedes Gerät zu erstellen.