Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Illustrator CC für Webdesigner: Wireframing

Hilfslinien für das eigene Design anlegen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Hilfsliniensystem (Grid-System) ist eine willkommene Unterstützung bei eigenen Designarbeiten. In diesem Video erfahren Sie, wie Sie Ihr eigenes Hilfsliniensystem für Illustrator mit Hilfe der Webseite gridulator.com anlegen und einrichten.

Transkript

Ich bin ein großer Freund von Hilfsliniensystemen und es gibt auf dem Markt ne ganze menge so Standardhilfsliniensysteme, 960 Pixel breit, 1200 Pixel wie sie auch zum Beispiel für Flexbox oder Bootstrap verwenden. Viele Angebote gibt es auch im Web zum Download, die Sie dann auch für Illustrator verwenden können, aber die Problematik ist, wenn Sie Ihr eigenes Hilfsliniensystem für Ihr spezielles Design erstellen möchten, dann ist immer ganz viel zu rechnen. Solche Hilfsliniensysteme ermöglichen einfach beim Design, das man immer in einer Struktur bleibt, das Abstände gleich sind. Also wie gesagt, ich bin ein großer Fan davon, und ich möchte Ihnen in diesem Video zeigen, wie ich mir ganz persönliche Grid-Systems, also Hilfsliniensysteme aufbauen kann. Zunächst einmal öffne ich den Menüpunkt Dateien Neu in Illustrator, Neues Dokument und wähle mir hier unter Profilgeräte das iPad Air aus. Und da muss man sich schon mal merken: die 1536. 1536 Pixel ist das Ganze breit, die Höhe ist im Moment nicht ganz so wichtig, das Ganze soll im Hochformat angegeben werden.So. Das mach ichmal. Und es gibt eine Website, das ist der gridulator.com, dort kann ich hier eine Breite und auch die Anzahl der Spalten eingeben So und ich möchte jetzt natürlich hier bei den Tausend, nicht die Tausend als Breite haben, sondern die 1536, die wir für das iPad Air angelegt hat. Dann möchte ich nicht mit 10 Spalten auskommen, und sondern ich brauche 12. Und jetzt braucht man sich hier in der Liste nur anzuschauen, welche Spaltenbreite einem am besten zusagt. Sie können sich das sogar in der Vorschau anschauen. Also haben wir jetzt Spalten, die sind so breit, dass es keine Lücken gibt dazwischen. Die Runde 117er, die hat Lücken, die 106 die hat paar mehr. Also, wie dem auch sei, das gefällt mir eigentlich ganz gut. Ich glaub damit kann ich auf meinen Designs, oder in meinem Designs sehr gut arbeiten. Und jetzt muss man sich genau diese Werte merken. Und das tolle an dieser Website ist einfach, wenn Sie das per Hand machen dann müssen Sie halt wirklich selber ausrechnen. Sie haben 106er Breite, 24er Lücke, natürlich ist es möglich, aber so gehts halt wirklich blitzschnell. Und wie kann ich mir das nun zu nutze machen in Illustrator? Wechseln wir zurück. Als erstes erstelle ich mir einfach ein ganz normales Rechteck und ziehe das über die komplette Höhe meiner Arbeitsfläche. Dann schalte ich die Farbe ein, also Flächenfarbe und hier die Kontur aus, die brauche ich nicht. Ich möchte also sicherstellen, dass ich nur die Fläche habe. Als nächstes brauche ich nun die Breite. Und da dieses Rechteck quasi meine Fläche in meinem Hilfsliniensystem darstellen. soll muss die Breite hier 106 sein. So. Dann Kann ich das ganze noch vernünftig ausrichten, entweder jetzt per Hand oder ich verwende die Ausrichten-Werkzeugpalette. Ja, so wie die jetzt hier angezeigt wird, vielleicht ist die bei Ihnen auch hier oben sichtbar, das liegt jetzt hier an der etwas kleineren auflösung, dass man es nicht sieht. Blende ich die Optionen ein, und dann kann ich hier auswählen, nicht an Auswahl, sondern an Zeichenfläche ausrichten. Und jetzt ist es leicht: einmal links und einmal oben. Ich mache das wieder rückgängig und schließe das Fenster. So jetzt habe ich genau eine Fläche von 106, die links und oben bündig am Dokument sitzt. Jetzt ist der nächste Schritt, ich markiere dieses Rechteck, und gehe dann auf den Menüpunkt Effekte, Verzerrungs und Transformationsfilter, Transformieren. Jetzt kommt der eigentliche Clou: Als erstes schalte ich mir die Vorschau ein, damit ich auch sehe, was hier passiert. Dann, ich wechsele nochmal zur Webseite zurück, möchte ich über diese Breite 12 Spalten haben, also 12 dieser roten Elemente. Jetzt komme ich auf die Idee, hier 12 einzugeben. Das ist aber falsch, weil ein Element haben wir bereits hier, also immer N-1 Elemente als Kopien anlegen. Und der nächste Schritt, den ich nun machen muss, dieses Rechteck ist 106 breit, ich möchte 24, hier, 24 Pixel Lücke haben. Also muss ich das ganze addieren und komme dann auf 130, 106 plus 24 sind 130, und das trage ich ein und siehe da, ich habe exakt von der linken Seite bis zur rechten Seite nun ein Hilfsliniensystem. Naja, auch nicht ganz, aber meine Rechtecke so über die Fläche verteilt. Das kann ich bestätigen. Dieses Objekt, oder diese Objekte, die ich jetzt hier habe, die möchte ich verändern und zwar, ja, transformieren in ein anderes Objekt. Dafür muss ich jetzt nochmal auswählen, über den Menüpunkt Objekt, dann Aussehen umwandeln. Jetzt werden alle Objekte, die in der Transformation drin waren, quasi markiert. Der nächste Schritt ist nun, ich gehe über den Menüpunkt Ansicht auf Hilfslinien und sage einfach Hilfslinien erstellen oder alternativ Command Fünf oder Steuerung Fünf. Und Zack, siehe da: Ich habe ein Hilfsliniensystem in meinem Dokument, das exakt 106 Pixel in der Fläche breit ist, exakt 24 Pixel in den Lücken beinhaltet und habe mir ganz ganz ganz viel Arbeit gespart, als wenn ich das in manuellen Schritten mit Hilfslinien gemacht hätte. Und solch eine Vorlage, die kann ich dann natürlich abspeichern und für weitere Arbeiten benutzen, oder ja ganz einfach auch für alle weiteren Zwecke mir neue Hilfsliniensysteme, neue Grid-Systems erstellen.

Illustrator CC für Webdesigner: Wireframing

Lernen Sie, wie Sie die Boardwerkzeuge von Illustrator CC nutzen, um aus ihren Design-Ideen Wireframes zu erstellen

2 Std. 14 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:20.06.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!