Die Abbildungen sind grauenhaft

Übersicht: Tipps, Tricks und Tutorials im Vektorgarten

»Die Abbildungen sind grauenhaft«

Seit 15 Jahren schreibe ich über Adobe Illustrator, die 8. Auflage meines »Praxisbuchs« ist im Frühjahr 2020 fertig geworden. Dieses Jahr ist außerdem »Halbzeit« - ich benutze nun Illustrator ebenso lange, wie ich vorher FreeHand verwendet habe. Zeit für einen Rückblick und einen Einblick.

Mein Buch richtet sich (unter anderem) an Designer-Kolleg/innen. Und natürlich haben sie Ansprüche an die Gestaltung eines Buchs, wie es ein Kollege in einer Rezension bei Amazon auch einmal für eine ältere Auflage deutlich formuliert hat:

Das Buch hätte 5 Sterne verdient. Aber als Wissenschaftlicher Zeichner und Profi-Infografiker habe ich auch Ansprüche an die Gestaltung der Beispiele, und die ist einfach nur grauenhaft. Die bunte Farbgebung und die plumpen Illustrationen stören mit der Zeit. Mein Tipp: Etwas dünner und dadurch günstiger sowie schönere Beispiele und das Buch wäre Perfekt.

Autsch. Tiefschlag. Ich mag es tatsächlich bunt. Aber ich habe mir bei den Abbildungen etwas gedacht (neben dem Umstand, dass sie außer wissenschaftlichen Illustrator/innen auch weitere Berufs- und Interessensgruppen ansprechen und Aufgabenfelder jenseits der Illustration abdecken müssen – nicht jede/r Anwender/in muss überhaupt mit Illustrator zeichnen) ...

Auf der Suche nach Abbildungen

Wahrscheinlich kann man so gut wie jede Illustrator-Funktion mit Rechtecken und Ellipsen zeigen. Ich habe Bücher, in denen genau das gemacht wird. Andererseits werden in vielen interessanten und schönen Illustrationen immer dieselben ca. 15 Funktionen und Techniken verwendet.

Ich muss dagegen alle Funktionen zeigen.

Abbildungen sollen eine bestimmte Funktion möglichst isoliert, möglichst unmittelbar erkennbar und möglichst wiedererkennbar zeigen.

Das Handbuch dient dazu, das Programm zu lernen. Und ich stehe beim Lesen nicht daneben, um zusätzliche Erklärungen zu liefern oder auf Details hinzuweisen. Dass Bilder mehr als 1000 Worte sagen, ist zwar inzwischen als simpler Werbeslogan enttarnt worden (anstatt ein chinesisches Sprichwort zu sein), aber trotzdem wirken Bilder immer noch schneller als Texte. Die Abbildungen müssen also funktionieren und nicht nur gut aussehen.

Einige Leser/innen verwenden das Buch zum Lernen und lesen von vorne nach hinten. Für sie steht der Text im Vordergrund. Die Abbildungen zeigen die Verwendung der Funktion. Man muss die besprochene Funktion darin wiedererkennen können und nicht erst zwischen Unwichtigem danach suchen müssen.

Andere suchen einen bestimmten Effekt. Nun kann ich natürlich nicht alle bekannten visuellen Effekte zeigen. Bestimmte Darstellungsmuster können aber schon so prägnant sein, dass man sie auch in verwandten Abbildungen erahnt.

Abbildung: Auch hier muss nur das Prinzip erkennbar sein (Ausschnitt).

Wieder andere wollen sich von den Möglichkeiten des Programms inspirieren lassen. Dazu ist es natürlich wichtig, dass man Unterschiede zwischen Darstellungen deutlich erkennt.

Abbildung: Unterschiedliche Herangehensweisen an Texturen – mit und ohne Muster.

Alle Benutzer/innen des Buchs erinnern sich an Funktionen oder Abbildungen und wollen etwas wiederfinden. Die Abbildungen müssen also so prägnant sein, dass das beim Durchblättern möglich ist. Z.B. durch unterschiedliche Farben. Ja, dadurch wird das Buch sehr bunt.

Noch etwas können Farben: man kann sie sehr einfach referenzieren. In einer Schritt-für-Schritt-Anleitung geht es schneller, auf das blaue Element zu verweisen, als auf ein eher dunkelmittelgraues. Da nacheinander unterschiedliche Elemente referenziert werden müssen, hilft es auch nicht, eine einheitliche Farbe für die Referenzierungen zu verwenden.

Abbildung: Für einen kurzen, übermütigen Moment hatte ich überlegt, die Bezeichnung »Ligamentum arteriosum« in diesem Workshop ebenfalls unterzubringen. »Blau« und «rot« ist jedoch einfacher zuzuordnen. Dieses Beispiel deutet sowohl den Aufgabenbereich »wissenschaftliche Illustration« als auch »Grafik« an.

Auf der Suche nach Inspiration oder einer bestimmten Abbildung blättert man durch das Buch und sieht die Illustrationen in der Marginalspalte. Sie sind relativ klein. Das, was gezeigt werden soll, muss auch in dieser Größe noch funktionieren. Dadurch wirkt das Ganze natürlich etwas grob.

Abbildung: Wenn man einem Fehler auf den Grund gehen möchte, dann muss der gut erkennbar sein. In welcher Form genau er bei meinen Leser/innen auftritt, kann ich nicht vorhersehen.

Die Grafiken greifen natürlich Designtrends auf. Gefragte Darstellungsformen, die viele Anwender/innen gerne nachbauen möchten. Nicht jeder dieser Trends gefällt jedem; trotzdem müssen möglichst viele in einem Handbuch gezeigt werden.

Abbildung: Stipple (links); Japanische Postersonne (2. v. li.) ist als Grafikeffekt nicht mehr ganz so gefragt wie vor 15 Jahren, aber für die dezente Gestaltung von Hintergründen immer noch in Verwendung. So dezent, wie das Ganze »in echt« zum Einsatz kommt, würde es beim schnellen Durchblättern des Buchs aber kaum ins Auge fallen. Relieftext (2. v. re.) ist dagegen ein Dauerbrenner, ebenso wie Inline-Effekte

DIY

Sowohl für das Illustrator-Praxisbuch als auch für Tutorials und Videos zeichne ich Illustrationen selbst. Natürlich nicht nur, weil ich gerne Dinge ausprobiere, sondern auch, weil ich sie quer durch alle meine Publikationen verwende und daher alle Rechte brauche. Bei einem 800-Seiten-Buch wäre der Erwerb von Nutzungsrechten außerdem nicht bezahlbar – selbst bei 400 Seiten nicht einmal dann, wenn die Abbildungen von Microstockportalen stammen.

Und so zeichne ich seit 15 Jahren in allen möglichen Stilen, von denen die meisten außerhalb meiner Komfortzone sind. Die Illustrationen stellen Aufgaben aus der realen Welt dar – ich denke mir nicht für jede Funktion ein Problem aus. Der anstrengende Teil dabei ist nicht, die Illustration zu entwickeln, sondern sie in eine Aufgabe einzubetten: eine Anzeige, Visitenkarte, ein Plakat oder ein anderes Medium, zu dem die Grafik gehört. Auch müssen diese Aufgaben natürlich möglichst viele der Bereiche abdecken, in denen Illustrator zum Einsatz kommt. Und auch da gilt: nicht in jedem dieser Bereiche bin ich zuhause und kenne daher nur Ausschnitte der Problemfelder.

Glücklicherweise bin ich bereits einige Jahre »im Geschäft« und so fanden sich natürlich anfangs Beispiele in alten Arbeiten oder abgelehnten Designs aus Kundenprojekten. Anwenderforen sind ebenfalls eine fette Weide für alle Arten von Problemstellungen. Entsprechende Beispiele müssen natürlich zum Teil abgewandelt, z.B. mit anderen Namen versehen werden. Und so stammen einige meiner Abbildungen sogar ursprünglich aus FreeHand.

Screenshots

Eine weitere Kategorie an Abbildungen erfordert andere Maßnahmen: die Screenshots. Glüklicherweise haben aktuelle Systeme sehr hohe Auflösungen, die auch im Druck eine tolle Qualität bieten. Das war nicht immer so. Eine weitere Herausforderung stellen Cursorformen dar, die auf dem Mac durch die Screenshot-Kurzbefehle verändert werden. Daher habe ich unterschiedliche Herangehensweisen an die Screenshots.

Einfach: Ist der Cursor nicht wichtig, wie etwa in Dialogboxen, dann reicht der System-Screenshot.

Mit besonderer Cursorform: Diese Formen bekommt man nur, wenn man besondere Programme für den Screenshots verwendet. Bei mir ist das Snapz Pro X. Aber auch das funktioniert nicht immer, dann muss man zuerst einen Film aufnehmen und anschließend das eine benötigte Bild daraus grabben (was ich meist mit einem Screenshot aus dem Video erledige). Seit Mac OS 10.12 kann man diese Aufnahmen glücklicherweise auch mit QuickTime machen – allerdings werden sie dann komprimiert, was bei Grafik-Screenshots wegen der Artefakte auffällt und daher manchmal Retuschen erfordert.

Nachgebaute Screenshots: bei einigen Abbildungen reichte mir die Qualität der Screenshots nicht aus, z.B. für die Darstellung intelligenter Hilfslinien und ihrer Funktionen. An der Stelle baue ich die Situation in Illustrator als Vektorgrafik nach. Für Version CS6 habe ich die Zeit investiert und alle Cursor gezeichnet. Diese Grafiken verwende ich auch für die Darstellung von Vorgängen in Bedienfeldern.

Abbildung: Alles nachgebaut – Cursor, Interface-Elemente, Texte

Noch ein Problem gibt es mit Screenshots: einige Dialogboxen sind einfach sehr sehr groß und passen nicht ins Layout. Daher bearbeite ich sie, und schiebe sie so zusammen, dass sie immer noch lesbar bleiben können, trotzdem in den zur Verfügung stehenden Bereich passen und nicht zuviel abgeschnitten werden muss.

Abbildung: Dialogbox des Transformieren-Effekts vor und nach einer Runde in Photoshop

Auch in Screenshots ist es mir wichtig, dass interessante Grafiken in einem Dokumentfenster sind und ich tausche die Abbildungen regelmäßig aus. Gefallen mir Abbildungen sehr gut, kann es aber auch vorkommen, dass ich lediglich die Icons austausche. Einige dieser Dateien besitzen mehrere Ebenen, die das wechselnde Programminterface abbilden – wie geologische Schichten.

Abbildung: Diese Photoshopdatei war von Version CS4 bis CC 2017 dabei (die Zeit reicht in der Regel nicht, sich Namen für all die Ebenen auszudenken, sie werden ohnehin in der betreffenden Auflage nicht mehr verändert).

Schichten, die mich wie in einem Rückblick an die Arbeit an einem wichtigen Aspekt meines Buchs erinnern, der in jeder Auflage eine Menge Kopfzerbrechen verursacht und nicht leichtfertig so aussieht, wie er aussieht.

Und falls Sie nun neugierig geworden sind: Illustrator - Das umfassende Handbuch Rheinwerk-Verlag