Wichtige Details: Knöpfe, Schieberegler, Einstellrädchen für Ihre Illustrator-Designs

Technische Details brauchen Sie für Infografiken, für die Gestaltung von Benutzeroberflächen wie für freie Illustrationen. In der technischen Dokumentation müssen die wichtigen Elemente der Benutzeroberfläche dargestellt werden, in anderen Arbeiten machen Kleinigkeiten eine Illustration lebendig und geben Betrachtern etwas zu entdecken. Für viele Fälle gibt es einfache Wege, um Dinge glaubhaft darzustellen.

Abb.: Diese bei Benutzeroberflächen benötigten Elemente gestalten wir nachfolgend.

 

Das Prinzip der Vektorillustration besteht darin, unterschiedliche farbige oder mit Verläufen versehene Elemente übereinanderzustapeln –, vergleichbar mit der Airbrush-Illustration – sodass sich daraus die Formen und deren Plastizität ergeben. Die konkreten Vorgehensweisen haben sich seit den ursprünglichen Versionen der Software nicht verändert, viele Techniken sind etliche Jahre alt.

Nur können heutzutage einige Konstruktionen einfacher gebaut werden. Die grundsätzlichen Darstellungstricks kann man lernen und braucht anschließend lediglich jede Menge Geduld, um sie umzusetzen.

Eine klassisches Anzeigemodul gestalten

Die korrekte technische Bezeichnung für die Anzeigetafeln ist »Fallblattanzeige«. In Deutschland gibt es kaum noch Installationen dieser Tafeln, denn es werden keine Ersatzteile mehr produziert. Am Frankfurter Flughafen werden noch vier Exemplare in Betrieb gehalten. Das Rauschen der Blätter beim Aktualisieren der Anzeige können Sie in Illustrator leider nicht simulieren, das Aussehen aber schon [Abb. 1].

Abb. 1: Fallblattanzeige

 

Nur wenige Objekte bilden diese Module: vier Rechtecke mit abgerundeten Ecken und einige Linien. Darüber liegt die Schrift. Verläufe sorgen für die plastische Wirkung.

Fallblatttafeln

Falls Sie sich auch für das »echte« Vorbild interessieren, finden Sie unter den folgenden Links einige Informationen zu Fallblatttafeln allgemein sowie zu den »berühmten« Tafeln am Frankfurter Flughafen und am Züricher Hauptbahnhof:
https://de.wikipedia.org/wiki/Fallblattanzeige
http://www.fnp.de/lokales/frankfurt/Anzeigetafeln-Dieses-Rasseln-ist-weltberuehmt;art675,742696?fCMS=lmsp40ef727reghlkk3p4ugae6
https://www.youtube.com/watch?v=_XPORRYTZjY
http://www.limmattalerzeitung.ch/limmattal/region-limmattal/in-schlieren-entsteht-die-meistbeachtete-anzeigetafel-der-schweiz-129646381

Hintergrund

Der Hintergrund der Grafik wirkt sehr stark. Was auf einem weißen Hintergrund »nach Nichts aussieht«, wirkt plötzlich richtig, nachdem Sie lediglich ein schwarzes Rechteck dahintergesetzt haben. Machen Sie es sich einfacher und zeichnen Sie gleich ein Hintergrundobjekt in der endgültigen Farbe. Sperren Sie das Objekt, damit Sie es nicht ständig unabsichtlich aktivieren und sogar bearbeiten: Befehl/Strg +2.

Typografie

1.Im ersten Schritt wählen Sie eine Schrift für das Projekt aus. Das Schöne an dieser Art Anzeigetafeln ist, dass darauf jede Schrift verwendet werden kann. Sinnvoll sind natürlich serifenlose Schriften. In meinem Beispiel habe ich die DIN Mittelschrift verwendet.

Die Schriftart ist wichtig für die Ermittlung der Breite der einzelnen Module. Da nicht beliebig viele Zeichen in einem Modul enthalten sein können, werden in der Regel nur Versalien verwendet. Sie müssen den breitesten Buchstaben als Referenz verwenden.

Um die vertikale Ausrichtung zu bestimmen, benötigen Sie ein A und ein H – deren horizontale Balken sollten geschickt in der Mitte der beiden Blättchen platziert werden. Zeichnen Sie ein Rechteck so, dass das W darauf gut Platz findet. Markieren Sie die Mitte, um den Text vertikal auszurichten.

Wenn Sie dagegen komplette Wörter blättern, müssen Sie das längste Wort als Referenz verwenden.

2.Wenn Sie die Größe ermittelt haben, duplizieren Sie das Rechteck und verkleinern eine der Kopien von oben, die andere von unten zur Mitte. Nun geben Sie den Blättchen ihre Füllung. Dazu verwenden Sie einen Verlauf zwischen der Basisfarbe und einem Licht [Abb. 2].

Abb. 2: Wenn Sie den Verlauf kreisförmig anlegen und zum Teil außerhalb des Objekts anordnen, erzielen Sie eine sehr realistische Wirkung.

 

3.Die Blättchen besitzen eine gewisse Stärke. Um das zu verdeutlichen, geben Sie ihnen Licht- und Schattenkanten. Dies lässt sich sehr effizient mit einem Konturverlauf darstellen.

Weisen Sie eine Kontur zu und geben Sie dieser einen Verlauf von einem sehr hellen zu einem dunklen Grau. Der Verlauf liegt einfach in der Kontur. Sie können die Verlaufsrichtung nicht mit dem Verlauf-Werkzeug einstellen, sondern müssen den Winkel im Verlauf-Bedienfeld eingeben. Tasten Sie sich mit den Werten heran, bis Ihnen das Ganze gefällt [Abb. 3].

Abb. 3: Konturverläufe für das obere und das untere Blättchen; die Ausrichtung der Verläufe auf der Kontur müssen Sie mit dem WInkel im Verlauf-Bedienfeld vornehmen.

 

4.Die einzelnen Blättchen werden von Ringen an den Seiten gehalten, die Sie mit abgerundeten Rechtecken zeichnen können. Da Sie sie exakt von vorne darstellen, sind Licht und Schatten der einzige Anhaltspunkt für ihre Form. Sehen Sie sich zylindrische Formen als Vergleich an und richten Sie für Ihre Formen einen entsprechenden Verlauf ein [Abb. 4].

Abb. 4: Auch hier kommt wieder ein kreisförmiger Verlauf zum Einsatz. Eine schwarze Kontur wirkt wie eine Lücke zwischen Blättchen und Halterung.

 

5.Die Buchstaben setzen Sie nun auf die Blättchen. Reduzieren Sie die Deckkraft, so integrieren sie sich besser in die Zeichnung [Abb. 5].

Abb. 5: Wird die Deckkraft des Buchstabens reduziert, dann ersparen Sie es sich, den Buchstaben selbst mit Verläufen zu versehen.

 

6.Nun setzen Sie noch eine schwarze Linie in die Mitte sowie weitere dunkel- und hellgraue Licht- und Schattenkanten auf den Buchstaben, um die Wirkung zu verstärken [Abb. 6].

Abb. 6: Die schwarze Linie überdeckt den Buchstaben, dunkel- und hellgraue Linien stellen Licht und Schatten dar.

 
openpanel-ca50.png

Inhaltsverzeichnis

Arbeitsdateien

  • CA07-IL-02-schalter.zip

Beitragsinfo

Um den kompletten Beitrag zu lesen, melden Sie sich bitte nachfolgend an.

Sie haben Ihr Passwort vergessen? Klicken Sie hier, um sich ein neues zusenden zu lassen!