Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Graphic Design
Design

Verständnis des Raster-Systems von Adobe Illustrator 

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Adobe Illustrator ist heute die mit Abstand beliebteste Vektorsoftware.  So komplex und durchdacht es auf den ersten Blick scheint, es dauert nicht lange, daran herumzubasteln und herauszufinden, was die meisten Tasten und Optionen tun.

Dennoch werden einige Funktionen und Einstellungen von denjenigen übersehen, die gerade anfangen, sie zu erfassen. Deshalb werde ich etwas mit Ihnen teilen, von dem ich mir wünschte, es hätte mir jemand gezeigt, als ich es anfing.

Ja, ich spreche über das Raster-System.

Was ist das Raster?

Wie bei jeder Lernkurve müssen wir uns als erstes fragen, was die eigentliche Bedeutung des Wortes ist?

Laut dem Merriam-Webster-Online-Wörterbuch ist ein Gitter definiert als "ein Netzwerk aus gleichmäßig beabstandeten horizontalen und senkrechten Linien (wie zum Lokalisieren von Punkten auf einer Karte)".

Eine noch verfeinerte Definition findet sich bei Wikipedia, wo das Gitter im Kontext des Grafikdesigns erklärt wird: "Ein Raster ist eine Struktur (normalerweise zweidimensional), die aus einer Reihe sich schneidender Geraden besteht (vertikal, horizontal und eckige) oder gekrümmte Führungslinien zur Strukturierung von Inhalten.  Das Raster dient als ein Anker, auf dem ein Designer grafische Elemente (Bilder, Glyphen, Absätze) in einer rationalen, leicht absorbierbaren Weise organisieren kann.  Ein Raster kann verwendet werden, um Grafikelemente in Relation zu einer Seite im Verhältnis zu anderen Grafikelementen auf der Seite oder zu anderen Teilen desselben Grafikelements oder derselben Form zu organisieren."

Es ist erwähnenswert, dass Illustrator's Raster nur aus geraden vertikalen und horizontalen Linien besteht.  Wenn Sie gekrümmte oder komplexere Raster erstellen möchten, müssen Sie darauf vertrauen, dass Sie sie mithilfe von Richtlinien erstellen, die relativ einfach zu verwenden sind.

grid example

Warum ist das Raster wichtig?

Wahrscheinlich haben Sie an diesem Punkt eine grundlegende Vorstellung davon, was ein Raster ist.  Aber warum sollte es Sie interessieren oder sogar benutzen?  Nun, wenn Sie etwas schaffen wollen, das eine Balance in Bezug auf die Art und Weise hat, wie sich die visuellen Elemente durch ihre Positionierung ergänzen, sind Raster der richtige Weg.  Sie bieten Ihnen Anleitungen, wie Sie ein Objekt mit einem anderen verknüpfen können, und vor allem, wie Sie Elemente auf der Zeichenfläche strukturieren.

Darüber hinaus hilft das Raster den Designern, pixelgenaue Grafiken für digitale Geräte zu erstellen (was meiner Meinung nach ein Muss ist), aber mehr dazu in ein paar Momenten.

Bevor ich auf die Bedeutung der Verwendung des Rasters zur Erstellung scharfer Grafiken eingehen kann, möchte ich kurz auf einige wichtige Aspekte der Art und Weise eingehen, in der Bilder auf den zwei verschiedenen Medien (Bildschirm und Druck) erstellt werden.

Digital vs. Druck

Wie Sie wahrscheinlich schon wissen, unterscheidet sich das digitale Medium stark von dem gedruckten.  Jeder von ihnen hat unterschiedliche Farbmodi (RGB vs. CMYK), und jeder kann unterschiedliche Auflösungen (Bildschirmauflösung vs. Druckauflösung) ausgeben.  Was sie noch mehr unterscheidet, ist die Art und Weise, wie sie Bilder rendern, und vor allem, wie sie mit gekrümmten Linien umgehen.

Ein Computermonitor ist pixelrasterabhängig (quadratische Pixel sind miteinander verkachelt). Das bedeutet, dass er Krümmungen behandelt, indem er an den Seiten transparente Pixel (Alpha-Kanäle) hinzufügt. Dieser Prozess wird als Anti-Aliasing bezeichnet und ahmt im Endeffekt die natürliche Gerade nach würde zum Beispiel auf ein Stück Papier malen.

round corner antialiasing example

Ein Drucker hängt nur von der Papiergröße und der dpi (Punkte pro Zoll) ab, auf die Sie das Bild einstellen. Das bedeutet, dass die Krümmungen perfekt ausgedruckt werden (unter der Bedingung, dass Sie die dpi auf einen hohen Wert setzen).  Das liegt daran, dass das Drucken darauf basiert, einzelne Farbpunkte übereinander zu legen, ohne dass die halbtransparenten Werte hinzugefügt werden müssen, die von den Bildschirmgeräten verwendet werden, um die Illusion einer glatten Kurve zu erzeugen.

Snap oder nicht Snap?

Nun, das ist wahrscheinlich die beste Frage, die man stellen könnte.  Während des Fangens weisen Sie Illustrator an, jedes Objekt auf der Zeichenfläche an das Raster/Pixelraster anzupassen.

Erinnern Sie sich, ich habe Ihnen vor ein paar Zeilen gesagt, dass das Raster uns hilft, pixelgenaue Illustrationen zu erstellen?  Jetzt, da Sie wissen, wie digital mit Bildern im Vergleich zum Druck verfahren wird, ist es an der Zeit, mehr über die wichtigste Rolle, die das Raster zu bieten hat, zu erfahren.

Ich bin mir fast sicher, dass Sie einige Illustrationen auf Dribbble oder Behance mit scharfen Linien gesehen haben und sich immer gefragt haben, wie der Designer das geschafft hat.  Nun, ich frage mich nicht mehr, ob er oder sie einfach darauf geachtet hat, alles auf das Pixelraster auszurichten und jedes Element mit ganzen Werten zu erstellen.

Mit ganzen Werten meine ich Werte, die keine Dezimalstellen haben, also haben wir zum Beispiel ein Rechteck mit einer Breite von 200 px und einer Höhe von 100 px und nicht etwa 200.84 px mit 99.80 px.

Erweitertes Raster

Weil ich glaube, dass Beispiele mehr als Worte sprechen, erkläre ich Ihnen alles, was Sie tun müssen, um das Raster richtig zu machen, indem Sie Schritt für Schritt einen Prozess vorbereiten, auf den Sie sich verlassen können, wenn Sie etwas in Illustrator erstellen.

Schritt 1

Wie bei jedem neuen Projekt ist das Dokument das erste, was wir immer einrichten.  Öffnen Sie Illustrator und erstellen Sie ein Testdokument mit den folgenden Werten:

  • Anzahl der Zeichenflächen: 1
  • Breite: 800 px
  • Höhe: 800 px
  • Einheiten: Pixel

Und von der Registerkarte Advanced:

  • Farbmodus: RGB
  • Rastereffekte: 300 ppi
  • Neue Objekte zum Pixelraster ausrichten: aktiviert
setting up a new document

Kurzer Hinweis: Sie haben vielleicht bemerkt, dass ich die Rastereffekte auf 300 ppi eingestellt habe, wenn das Dokument für den Bildschirm gedacht ist.  Nun, das Einstellen der Raster auf höhere ppi-Werte hat keine sichtbaren Auswirkungen auf den Bildschirm, aber wenn Sie aus irgendeinem Grund drucken müssen, was Sie entworfen haben (auch wenn Sie es mit RGB-Farbwerten erstellt haben) irgendwelche Schlagschatten, innere Schatten und Andere Effekte werden durcheinander gebracht, wenn sie mit einem niedrigeren PPI-Wert als 300 gedruckt werden.

Sie können die ppi eines Dokuments unabhängig von der Grundeinstellung jederzeit ändern, indem Sie zu Effect > Document Raster Effects Settings für Dokumente gehen und den gewünschten Wert eingeben.

Schritt 2

Nachdem Sie das Dokument erstellt haben, erstellen Sie ein schwarzes Quadrat mit 100 x 100 px und positionieren es mit dem Ausrichten-Bedienfeld in der oberen linken Ecke der Zeichenfläche.

positioning the black square

Schritt 3

Um zu verstehen, wie das Grid funktioniert, müssen Sie es zuerst sehen.  Gehen Sie zu View > Show Grid (Control- ") und sofort sollten Sie das Standard-Raster von 1000 x 4 sehen, mit dem Illustrator ausgestattet ist.

viewing the grid

Schritt 4

Jetzt, wo wir es sehen, wie funktioniert es eigentlich?  Zuerst möchte ich, dass Sie das kleine Quadrat mit Hilfe der Richtungspfeile Ihrer Tastatur auswählen und verschieben und sehen, wie es sich verhält.

Sie werden vielleicht bemerkt haben, dass unser kleines Objekt hier und da um ein paar Pixel gesprungen ist, aber nichts ist leicht zu beobachten.  Das liegt daran, dass die Option Am Raster ausrichten nicht aktiviert ist.

Platzieren Sie das Quadrat an der ursprünglichen Position, und gehen Sie dann zu View > Snap to Grid (Shift-Control-Y), und versuchen Sie erneut, das Objekt nach rechts zu verschieben.

moving the black square on the grid

Jetzt können wir eindeutig einen Unterschied sehen.  Wenn Sie es ein weiteres Mal nach rechts bewegen, beginnen Sie ein Muster zu beobachten.  Jedes Mal, wenn das Quadrat springt, springt es auf eine der Seiten der kleinen Quadrate, die durch die horizontalen und vertikalen Linien erzeugt werden, die unser Raster bilden.

Lassen Sie uns wissen, warum Illustrator sich so verhält, indem Sie erklären, wie Illustrator das Raster selbst erstellt.  Wie bereits erwähnt, sind die Standardeinstellungen, die in der Software konfiguriert sind:

  • Jede Gridline: 1000 px
  • Unterteilungen: 4

Aber was bedeuten diese Einstellungen eigentlich?

Es ist ganz einfach.  Bei jeweils 1000 px zeichnet Illustrator vier Begrenzungslinien (zwei horizontale und zwei vertikale), wodurch ein 1000 x 1000 px großes Quadrat entsteht, das in sechzehn kleinere Quadrate 250 x 250 px unterteilt wird (1000/4 = 250).

grid dimensions explained

Da unsere Zeichenfläche nur 800 x 800 px (drei 250 px-Felder und ein weiterer kleiner 50 px-Bereich mit Grün hervorgehoben) aufweist, wird sie auf der linken und oberen Seite eines der Quadrate des Rasters mit 1000 x 1000 px ausgerichtet, wobei der rechte und der untere Bereich beibehalten werden des Rasterplatzes unbesetzt (200 px rot hervorgehoben).

Wenn wir nun zu unserem kleinen schwarzen Quadrat zurückkehren, springt der Grund, warum es bis an die Seiten des 250 x 250 px großen Quadrats reicht, darin, dass es nur 100 x 100 px groß ist.  Wenn das schwarze Objekt genau 250 x 250 px gewesen wäre, hätte es die gesamte Oberfläche eines der Rasterquadrate eingenommen und wäre exakt eine von sechzehn inneren Positionen gesprungen.

artboard dimensions vs grid system

Anpassen der Rastereinstellungen

Ich hoffe, dass der letzte Schritt die Funktionsweise des Rasters erklärt hat, aber Sie müssen verstehen, dass jedes von Ihnen erstellte Projekt abhängig von der Größe Ihres Zeichenbretts und der Genauigkeit, mit der Sie Ihre Elemente positionieren möchten, unterschiedliche Raster einrichten muss darauf.

Ich habe festgestellt, dass die Verwendung der kleinstmöglichen Einstellungen mir die genauesten Ergebnisse liefert, und durch die Kombination der Leistung des Gitters mit Pathfinder kann ich meine Elemente schnell und intuitiv positionieren.

Meine Rastereinstellungen:

  • Jede Gridline: 1 px
  • Unterteilungen: 1

Wenn Sie experimentieren oder einfach die Einstellungen verwenden möchten, die Sie benötigen, gehen Sie einfach zu Edit > Preferences > Guides & Grid und ändern Sie sie nach Ihren Wünschen.

adjusting the grid settings

Rapid Prototyping mit dem Raster

Lassen Sie uns eine kurze Übung ausprobieren und sehen, wie wir ein schnelles Website-Drahtgitter mit einem Raster mit Rasternetzlinien alle 800 px und einer Unterteilung von 4 auf derselben Artboard-Fläche von 800 x 800 px erstellen können.

Ja, ich weiß, dass die Standardbreite der heutigen Basiswebsite 960 px beträgt. Ich möchte Ihnen jedoch ein schnelles Beispiel zeigen, wie einfach es ist, Dinge mit benutzerdefinierten Rastereinstellungen zu positionieren.

Schritt 1

Erstellen Sie ein Rechteck von 800 x 200 px und positionieren Sie es auf der Oberseite unserer Zeichenfläche, indem Sie es mit #191919 einfärben.  Greifen Sie das Type Tool und beschriften Sie diesen Bereich als Header unserer Website.

prototype header

Kurztipp: Wenn Sie Elemente haben, die kleiner sind und nicht wirklich an das Grid gerissen werden müssen, in unserem Fall die Abschnittsbeschriftungen, wählen Sie einfach diese Elemente aus und gehen dann zum Menü Ansicht und deaktivieren die Option Am Raster ausrichten.

Schritt 2

Erstellen Sie ein kleineres Rechteck von 600 x 400 px, färben Sie es mit einem dunkleren Farbton (#3D3D3D) und positionieren Sie es dann mit den Richtungstasten links neben der Zeichenfläche, direkt unter der Kopfzeile.  Achten Sie darauf, diesen Bereich der Website als Inhalt zu kennzeichnen.

prototype content

Schritt 3

Erstellen Sie ein noch kleineres 200 x 400 px großes Objekt, färben Sie es mit #B24747, und positionieren Sie es dann auf der rechten Seite des Inhalts, und beschriften Sie es als Sidebar.

prototype sidebar

Schritt 4

Ergänzen Sie unser kleines Drahtgitter, indem Sie ein weiteres Rechteck von 800 x 200 px (#191919) an der Unterseite unserer Zeichenfläche anbringen und es als unsere Fußzeile kennzeichnen.

prototype footer

In nur wenigen Sekunden gelang es uns, eine rudimentäre Website zu erstellen. Stellen Sie sich vor, wir hätten mehr Zeit damit verbracht, damit zu spielen. Stellen Sie sich vor, wir hätten mehr Zeit damit verbracht, damit zu spielen.

Der Snap zur Dualität

Bevor ich Sie selbst mit benutzerdefinierten Raster experimentieren ließ, wollte ich mit Ihnen über die Hauptunterschiede zwischen den Optionen An Raster ausrichten und An Pixel ausrichten sprechen.

Wenn Sie ein neues Dokument einrichten, wird der Vorschaumodus standardmäßig auf Standard festgelegt.  Das bedeutet, dass das, was Sie entwerfen, grundsätzlich das ist, was Sie sehen (Sie sehen den Vektor so, wie er ist und nicht im Pixelformat).  In diesem Fall wird die Option Fang an auf das Raster gesetzt, und abhängig von den Werten, die Sie ihm zuweisen, fängt es an einem der kleinen Quadrate an, die es bilden.

Wenn Sie Pixel Preview (View > Pixel Preview) aktivieren und die Zeichenfläche vergrößern, zeigt Illustrator die tatsächlichen Pixel an, die Ihre Vektorelemente bilden.  Sobald das Fangen auf Pixel eingestellt ist, wird jede auf der Zeichenfläche vorgenommene Bewegung genau der Anzahl der Pixel entsprechen, auf die Sie Ihre Tastaturerhöhung eingestellt haben, in der Richtung, in die Sie sie gedrückt haben.

Kurztipp: Ja, Sie können ein Standard-Inkrement für die Genauigkeit festlegen, mit der Sie Objekte auf Ihrem Zeichenbrett bewegen.  Die Option finden Sie unter Edit > Preferences > General > Keyboard Increment.

keyboard increment settings

Der Hauptunterschied zwischen diesen beiden Fangmethoden besteht darin, dass Sie, wenn Sie ein Objekt mit Pixeln mit Dezimalstellen erstellt haben, z. B. ein Rechteck von 200,9 x 60,40 px, beim Einrasten in das Pixelraster die Größe des Objekts ändern Werte, wodurch ein schärferes Objekt entsteht.

Ich empfehle, dass Sie, sobald Sie etwas mit der Option Am Raster ausrichten erstellt haben, immer zum Pixelvorschau-Modus wechseln und prüfen sollten, ob sie korrekt an das Pixelraster angepasst sind, damit Sie sicherstellen können, dass Ihr Bildmaterial so klar wie möglich aussieht .

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.