Banner, Bänder und Fahnen

Transkript

1 Skizzieren Einfärben Schattieren Mit Schrift kombinieren...51 Pinsel anlegen...51 So richtig in Fahrt gekommen sind diese Designelemente durch ihren Einsatz im Webdesign. Aber es gibt sie nicht nur dort. Auch auf Plakaten oder als Bestandteil von Logos, Siegeln und Tattoos geben sie ein gutes Bild ab. Illustrator enthält einige vorgefertigte Banner in einer Pinsel-Bibliothek 1. Damit kann zwar sehr gut die Funktion von Pinseln demonstriert werden, zum tatsächlichen Einsatz in professionellen Illustrationen und Layouts taugen diese Beispiele jedoch eher nicht. Daher sehen wir uns einmal an, wie wir selbst Banner in unterschiedlichen Stilen konstruieren können. 1 Siegel Wenn Sie auch Siegel zu den Bändern benötigen, lesen Sie zusätzlich unseren Beitrag zu Siegeln und Urkunden in»«ausgabe 17. Skizzieren Da die Banner für die jeweilige Gegebenheit angepasst und entsprechend konstruiert werden müssen, sollten Sie sorgfältig skizzieren und genau bestimmen, wie das Banner aussehen soll. Wir werden uns auf den folgenden Seiten einige unterschiedliche Möglichkeiten der Gestaltung ansehen. Anregungen im Web Viele Designblogs veröffentlichen regelmäßig thematische Zusammenstellungen von interessanten Layouts, Verpackungen, Logos oder Webdesigns, etwa»40 spannende rote Websites«. So gibt es auch Listen zum Thema Bänder und Banner. Am weitesten verbreitet sind diese Zusammenfassungen in englischsprachigen Blogs, sodass man die englische Bezeichnung für das Designelement herausfinden muss, das man sucht. In unserem Fall ist es»ribbons«. Bänder mit Falten Gefaltete Bänder sind am einfachsten zu konstruieren, bieten aber trotzdem interessante Gestaltungsmöglichkeiten und entsprechen dem Trend zur Einfachheit. Die Bänder selbst können gerade verlaufen oder ein wenig gebogen sein 2. 2 Einige Beispiele aus der Pinselbibliothek»D EKORATIV _ BANNER werden wir uns nicht zum Vorbild nehmen. UND SIEGEL«die Download Die Demo-Dateien zu diesem Workshop finden Sie im Download unter www. mev.de/pdf/praxisdateien/illustrator/ilaktuell25.zip im Ordner Aktuell/Banner. Logo der»south by Southwest«-Konferenz 2012 (Design: Foxtrot Bravo Alpha) 40

2 Auch Illustrators Startbildschirm setzt ähnliche Gestaltungselemente ein Verschiedene Lesezeichenkonstruktionen auch die graue»faltwand«ist im Prinzip ein Banner. Startbildschirm von Illustrator CS6 Schleifenbänder Abgerundete Richtungsänderungen entsprechen der Natur von Bändern natürlich mehr als Ecken. Selbst eine eher unauffällige Rundung erweckt bereits den Eindruck eines gewissen Aufwands bei der Illustration, denn die Schatten müssen etwas umständlicher angepasst werden. Denken Sie daran, dass an keiner Stelle der Richtungsänderung eine Ecke gezeichnet werden darf 4. 4» Flipbook«Im Kontext nicht ganz passend, jedoch mit vergleichbaren Techniken auszuführen sind die beliebten aufgeblätterten Ecken 6. 6 Flipbook Tattoo-Bänder Ein leicht unregelmäßiges Aussehen und eine eventuell nicht ganz exakte Perspektive gehören dazu, um den»handgemachten«look zu unterstreichen. Wenn Sie die Bänder beschriften wollen, können Sie zu diesem Zweck die Typografie ebenfalls selbst zeichnen oder eine Schrift verwenden, die ursprünglich so entworfen wurde 7. 7 Ein gebogenes Band darf keine Ecken besitzen (oben; falsch: unten).» Lesezeichen«Das Lesezeichenelement findet man häufig im Webund Screendesign. Es wird verwendet, um Menüs interessanter zu gestalten oder um zusätzliche Symbole unterzubringen. Es wird vertikal oder horizontal nach denselben Prinzipien konstruiert 5. Lesezeichenelement im Webdesign Auf einer Webseite können Sie eine solche Grafik über Cascading Style Sheets auch so einbinden, dass sie sich dem Inhalt anpasst. Das Lesezeichen sollte dazu jedoch (anders als in Abbildung 5 ) einen geraden Abschluss haben. Ein typisches Tattoo-Motiv (Font:»Tattoo Ink«, erhältlich bei dafont.com); das Herz ist als Verlaufsgitter umgesetzt, die Konturen wurden mit variablen Breitenprofilen versehen (zum Einsatz kam dabei das Plug-in»WidthScribe«s.»Illustrator Service«Ausgabe 24 ). 41

3 Der Grundaufbau der Bänder ist sehr einfach und es reicht eigentlich, wenn Sie genau beobachten und Ihr räumliches Vorstellungsvermögen einsetzen. Illustrators Funktionen, wie das Perspektivenraster oder Verzerrungshüllen, helfen dann bei den schwierigeren Fällen. Lesezeichen Das Lesezeichen besteht nur aus einfachen Grundformen, die Sie mit den Form-Werkzeugen aufziehen können. 1 3 Erzeugen eines Viertelkreises aus dem Kreis 5 Verbinden Sie dann noch die beiden oberen Punkte der Viertelkreise mit einer Geraden. Die Teile können Sie nun alle verknüpfen in neueren Versionen, indem Sie sie aktivieren und Befehl/Strg + J drücken 4. 4 Mit dieser Geraden ist das Element komplett. Kreise und Rechtecke reichen aus, um das Lesezeichen zu bauen. 1 Ziehen Sie die Kreise und Rechtecke so auf, dass sie exakt an den Ankerpunkten aneinanderstoßen. Dabei helfen die intelligenten Hilfslinien 1. 2 Die Kreise benötigen Sie an exakt derselben Stelle zweimal. Daher kopieren Sie sie in die Zwischenablage, bevor Sie sie nun zerschneiden. Sie dürfen anschließend natürlich nichts verschieben. 3 Um die vordere Fläche des Lesezeichens zu bauen, aktivieren Sie mit dem Direktauswahl-Werkzeug das obere horizontale Pfadsegement des großen Rechtecks, indem Sie darauf klicken. Dann löschen Sie es Nun können Sie die vorher kopierten Kreise wieder einfügen: Befehl/Strg + F. Sie werden nun jeweils mit den kleinen Rechtecken verbunden. Verwenden Sie das Pathfinder-Bedienfeld 5. 5 der Rückseite des Lesezeichens 7 Um das Lesezeichen an der unteren Kante anzuschneiden, müssen Sie einfach einen Punkt in die Mitte des unteren Pfadsegments setzen (die intelligenten Hilfslinien zeigen dabei die Mitte an) und diesen nach oben schieben 6. 6 Das obere Pfadsegment wird aktiviert und mit der LÖSCHTASTE/ENTF gelöscht. 4 Dann ziehen Sie ebenfalls mit dem Direktauswahl- Werkzeug ein Auswahlrechteck über die beiden jeweils außen liegenden Punkte der Kreise auf und löschen sie auch. Es bleibt ein Viertelkreis übrig 3.»Einschneiden«der Unterkante Schleifen Die der Lesezeichen mit den rechtwinklig angeordneten geometrischen Figuren, die sich je- 42

4 weils an vorhandenen Ankerpunkten ausrichten ließen, war einfach. Wenn Sie jedoch die Tangenten an die organisch verschlungenen Bänder legen sollen, wird das nur mit Illustrators eigenen Werkzeugen etwas»fummelig«und nie genau. Es gibt glücklicherweise ein kostenloses Plug-in, das für diese Aufgabe ideal ist: SubScribe. SubScribe Rundung Ein gerundetes Banner können Sie z.b. mithilfe eines Pinsels aus der geraden Form konstruieren. Wenn Sie jedoch den Pinsel später umwandeln müssen z.b. weil das Motiv geschnitten werden soll, dann erhalten Sie kein sauberes Konstrukt, sondern Pfade mit einer überbordenden Anzahl von Punkten 9. 9 SubScribe erhalten Sie für Illustrator CS6 über das Adobe-Exchange-Bedienfeld oder für Version CS4 bis CS6 direkt vom Hersteller Astute Graphics unter www. astutegraphics.com/download/subscribe-download.html. Obwohl das Plug-in kostenlos ist, müssen Sie einen Freischaltungsschlüssel anfordern. Videos über die Funktionen finden Sie unter movies.html. 1 Starten Sie mit einer Kurve. Diese duplizieren Sie, skalieren und bearbeiten sie nach Bedarf, um die untere Seite des Bands zu erstellen. 2 Die Kanten müssen nun verbunden werden. Verwenden Sie das Line-tangent-to-two-Paths-Tool, um dies zu erreichen. Damit ziehen Sie jeweils eine Linie ungefähr zwischen den beiden betreffenden Punkten. 3 SubScribe findet automatisch die beiden Tangentenpunkte und zieht den Pfad 7. Mit dem Pinsel (oben) lassen sich frei geformte Bänder erstellen, die jedoch von Illustrator nicht sauber umgewandelt werden. Dies verschlimmerte sich in jeder höheren Version. Ein besseres Ergebnis erhalten Sie mit Verzerrungshüllen. Diese werden jedenfalls bei einfachen Ausgangsobjekten und einer nicht so hohen Genauigkeit (einzustellen in den Hüllen-Optionen) glatter in Pfade umgewandelt Umwandlung einer Hülle; Einstellung der Genauigkeit in den HÜLLEN-OPTIONEN (rechts) Arbeiten mit SubScribe 4 Verwenden Sie anschließend z.b. das Interaktivmalen-Werkzeug, um die Flächen zu bilden. Alternativ geht das auch mit dem Formerstellungswerkzeug 8. Sie können ein einfaches gebogenes Banner jedoch aus einer kleinen Anzahl von Grundobjekten konstruieren Die des Flatterbands Flatterbänder Lesen Sie auch den Beitrag»Schrift und Grafik aus Luftschlangen«in»Illustrator Aktuell«Ausgabe 17. Darin geht es um einen Einsatz der hier beschriebenen Techniken für freie Grafiken. Die gebogenen Bänder lassen sich in dieser Form zum Glück einfach konstruieren. 1 In diesem Fall habe ich mit Kreisen gearbeitet. Markieren Sie auf der Zeichenfläche den Mittelpunkt mit Hilfslinien. 43

5 2 Die beiden Kreise zeichnen Sie mit dem Ellipse- Werkzeug bei gedrückter Alt- und Umschalttaste aus dem Mittelpunkt heraus Kreis. Löschen Sie dann die senkrechte Kante des Dreiecks und vergrößern Sie es ein wenig, sodass die Seiten den Kreis überragen Das Dreieck wird ebenfalls benötigt. Die Hilfslinien sind vor allem dann interessant, wenn Sie zu einem viel späteren Zeitpunkt (also nach dem Zerschneiden der Kreise) noch Elemente passend hinzufügen wollen. 3 Beide Kreise erhalten eine fette Kontur. Mit der Funktion Objekt Pfad Konturlinie werden die Konturen umgewandelt. 7 Mit dem Drehen-Werkzeug drehen Sie das Dreieck um den markierten Mittelpunkt an seine äußere Position. Dann spiegeln und kopieren Sie es um die Mittelachse Aus der Mitte heraus ziehen Sie dann auf einer Seite zwei Geraden, die die Stellen markieren, an denen das Banner abknickt und daher die Kreise aufgetrennt werden müssen. Die Geraden spiegeln Sie dann um die Mitte Drehen des Dreiecks um die Mitte (unten) Spiegeln der Geraden um die Mittelachse und Zusammenfügen der entsprechenden Geraden (rechts) 5 Zum Zerschneiden der Kreise durch die Geraden fügen Sie jeweils die beiden äußeren und die beiden inneren zusammen, indem Sie sie aktivieren und Befehl/Strg + J drücken Zum Schneiden aktivieren Sie jeweils einen der zusammengefügten Pfade und verwenden den Befehl Objekt Pfad Darunterliegende Objekte aufteilen. Da dies jeweils auch den anderen Kreis aufteilen würde was nicht erwünscht ist, müssen Sie diesen vorher mit Befehl/Strg + X ausschneiden und nach dem Aufteilen wieder an derselben Stelle einfügen (Befehl/Strg + B bzw. F für Dahinter bzw. Davor einfügen) Zusammenfügen Die einfache Art des Zusammenfügens funktioniert erst ab Version CS5. In früheren Versionen müssen dazu jeweils die Ankerpunkte aktiviert werden, an denen die Objekte zusammengefügt werden sollen. Da das ein ganzes Stück umständlicher ist, sparen Sie durch das Zusammenfügen keine Arbeit und können es daher auslassen. 6 Sie benötigen nun außerdem noch ein Dreieck. Konstruieren Sie es so, dass seine Grundlinie auf der senkrechten Hilfslinie liegt, mittig auf dem unteren Wenn ein Kreis zerschnitten wird, muss der jeweils andere aus dem Weg geschafft werden, damit er nicht ebenfalls zerteilt wird. 44

6 9 Wenn Sie die beiden Kreise zerschnitten haben, können Sie schon den unteren Teil des hellroten Kreises löschen, da er nicht mehr gebraucht wird Zwischen den Buchblock und den rechten Winkel zeichnen Sie zwei Bögen mit dem Zeichenstift-Werkzeug. Damit Sie die Pfade exakt treffen, aktivieren Sie die intelligenten Hilfslinien Das Ergebnis nach dem Schneiden 10 Mit den beiden Winkeln zerschneiden Sie nun den dunkelroten Kreis und löschen dessen unteren Teil, sodass die Fähnchen übrig bleiben Anschließen der beiden Kurven 3 Die Endpunkte des Winkels verschieben Sie auf die Endpunkte der Kurven. Dann verbinden Sie die Kurven mit dem Winkel. 4 Mit dem Line-tangent-to-two-Paths-Tool ziehen Sie nun eine Tangente auf die beiden Kurven Zuscheiden der Fähnchenenden mit den dreieckigen Winkeln Hilfslinien Da Sie wesentliche Teile der Kreise gelöscht haben, würde es nun schwierig werden, nachträglich wieder den Mittelpunkt der zu finden, falls Sie später Objekte hinzufügen wollen. Sie sollten daher eine Version mit allen Hilfslinien speichern, falls Sie spätere Korrekturen und Ergänzungen wie zusätzliche Texte oder Verzierungen nicht völlig ausschließen können. Flipbook 1 Die aufgeblätterte Seite starten Sie mit einem Rechteck, das den Buchblock darstellt. Dann zeichnen Sie einen rechten Winkel für die Seite. Dieser Winkel wird etwas gedreht und auf die rechte untere Ecke des Buchblocks gelegt der Verbindung 5 Diese aufgeblätterte Seite muss nun so verbunden werden, dass Sie die Fläche füllen können. Dazu aktivieren Sie zunächst die beiden Elemente die Ecke mit den angeschlossenen Kurven und die Gerade und wenden darauf die Pathfinder-Funktion Kontur aufteilen an. Dabei verschwinden die Konturen und die Pfade werden gruppiert. Diese Gruppe müssen Sie zurückwandeln (Befehl/Strg + Umschalttaste + G) Drehen Sie den Winkel so zurecht, wie Sie das Buch aufschlagen möchten. Nach dem Anwenden von KONTUR AUFTEILEN 6 Das aufgeschlagene Dreieck können Sie nun bilden, indem Sie die zugehörigen Pfade aktivieren und mit Befehl/Strg + J zusammenfügen

7 24 1 Legen Sie die Grundformen der Banner mit Schrift zunächst unverzerrt an. Wenn Sie bereits eine Skizze angelegt oder Proben gemacht haben, ziehen Sie sich Hilfslinien für die Schrägung der Objekte Die aufgeblätterte Ecke ist fertig. 7 Dann führen Sie die beiden abgetrennten Teile der Kurven mit einem Pfad fort und fügen sie damit zusammen. In dieses Element wird ein Verlauf gelegt, der einen Schatten bildet Diese Objekte zeigen eine Vorversion des Schriftzugs. 2 Aktivieren Sie dann die Balken und Texte auf der linken Seite. Mit dem Verbiegen-Werkzeug klicken Sie auf den Schnittpunkt der beiden Hilfslinien, um ihn als Zentrum für die Transformation zu setzen. Dann klicken und ziehen Sie bei gedrückter Umschalttaste am oberen linken Punkt des blauen Schilds bis zur Hilfslinie Aufbauen der Form oberhalb der aufgeblätterten Ecke 8 Zu guter Letzt benötigen Sie noch ein Dreieck rechts unten in der Ecke. Setzen Sie einfach drei Punkte mit dem Zeichenstift jeweils exakt auf das Pfadsegment In diesem Dreieck wird der Schatten des umgeblätterten Blatts angelegt. Isometrie Diese Grafik besitzt keine Perspektive die Bänder wurden mit dem Verbiegen-Werkzeug verformt, sodass sich eine isometrische Darstellung ergibt 27. Intuitives Verzerren von Objekten auf der Zeichenfläche 3 Doppelklicken Sie auf das Verbiegen-Werkzeug, um die Dialogbox aufzurufen. Merken Sie sich den (krummen) Wert und widerrufen Sie die Verbiegung. 4 Klicken Sie dann mit dem Werkzeug und gedrückter Alt-Taste erneut auf den Punkt. Damit rufen Sie die Verbiegen-Dialogbox auf. Geben Sie den Wert von eben ein, runden Sie ihn jedoch. Das trägt dazu bei, dass sich diese Transformation wiederholen lässt, falls nötig. Notieren Sie sich den Wert in der Datei. 5 Dann wählen Sie den nächsten Teil der Objekte aus und verformen diesen nach derselben Methode BAU HAMBURG MESSE 2013 Isometrisch gestalteter Schriftzug Verformen der mittleren Banner 46

8 6 Bevor Sie nun die Banner rechts verzerren können, wäre es praktisch, sie noch an die richtige Stelle zu verschieben Ziehen Sie die einzelnen Elemente zu diesem Zweck ins Symbole-Bedienfeld oder aktivieren Sie sie und drücken Sie F8. Das Element auf der Zeichenfläche wird in eine Symbolinstanz umgewandelt. Perspektivenraster Detaillierte Informationen zum Umgang mit dem Perspektivenraster finden SIe in»«ausgabe Richten Sie das Perspektivenraster nach Ihrer Skizze ein. Das Verschieben der Teile ist in der Pfadansicht am einfachsten. 7 Da alle Objekte mit einem unterschiedlichen Referenzpunkt transformiert werden müssen, aktivieren Sie sie dann nacheinander und wenden dieselbe numerische Verzerrung an. Auch hier können Sie natürlich wie vorher erst intuitiv probieren Dann wechseln Sie zum Perspektivenauswahl- Werkzeug und ziehen nacheinander die zusammengehörenden Symbolinstanzen ins Perspektivenraster 34. Mit den Tasten 1 und 3 wechseln Sie zwischen den betreffenden Perspektivenebenen hin und her Der fertiggestellte Schriftzug 8 Mit dem rückwärtsgewandten Pfeil wird jedoch eine negative Aussage verbunden, daher muss das Design verändert werden. Zu diesem Zweck ist es immer praktisch, eine unverzerrte Version aufzuheben. Sie können jedoch auch die vorgenommenen Transformationen widerrufen, indem Sie dieselben Werte mit umgekehrtem Vorzeichen eingeben. oder Perspektive? Wenn Sie ein ähnliches Logo mit perspektivischer Verzerrung erstellen wollen, dann können Sie das Perspektivenraster dafür verwenden. Auch hier starten Sie mit einer unverzerrten Darstellung. Aus den Bestandteilen erzeugen Sie anschließend am besten Symbole, damit Sie eventuelle Änderungen durchführen können Begonnen wird mit den Objekten, die die Vorderkante des Gebildes markieren. 4 Die seitlich anschließenden Elemente werden auch zunächst auf die vordere Kante gesetzt 36 und dann einzeln bei gedrückter Taste 5 nach hinten an ihre jeweils eigenen Plätze verschoben Der Schriftzug in einer Zweipunktperspektive Anschließende Elemente einfügen und positionieren 47

9 Text in Perspektive Wenn der Text nicht vorher umgewandelt wurde, bleibt er innerhalb des Symbols editierbar. 3D Wenn Sie gerne ein gebogenes Band mit korrekter Perspektive erstellen möchten, ist das Perspektivenraster dafür eventuell zu umständlich. Diese Aufgabe ist einfacher mit dem 3D-Effekt Extrudieren und abgeflachte Kante erledigt Mit dem 3D-Effekt ist das Erstellen verschlungener Bänder ein Kinderspiel. Länge des Bands anpassen. Das Dokumentinformationen-Bedienfeld enthält diese Angabe. Wählen Sie Objekte aus dem Bedienfeldmenü und lesen Sie die Länge ab Die Größe der Bild-Map ermitteln Sie mit den Dokumentinformationen (links) und den Optionen des 3D-Effekts (rechts). 4 Zusammen mit der Tiefe der Extrusion haben Sie nun die Maße für ein Rechteck, das Sie mit dem Rechteck-Werkzeug aufziehen können Zeichnen Sie einen verschlungenen Pfad, der die Biegung der Schleife in der Aufsicht darstellt Exakte Größen geben Sie ins Transformieren- oder ins Steuerungsbedienfeld ein. Darin können Sie auch Werte aus anderen Maßeinheiten umrechnen lassen. 5 Setzen Sie dann an beiden kurzen Enden noch jeweils einen Punkt in die Mitte des Pfadsegments, den Sie nach innen verschieben Es ist wichtig, nur Kurvenpunkte auf dem Pfad zu verwenden. Kurvenpunkte Die Art der gesetzten Punkte hat einen großen Einfluss darauf, welche Flächen gebildet werden. Damit Sie später das Banner in einem Stück auf das Objekt»mappen«können, muss eine durchgehende Fläche gebildet werden. Achten Sie genau darauf, den Pfad nur mit Kurvenpunkten zu zeichnen. Mehr dazu finden Sie in einem Beitrag über 3D-Kantenprofile in»«ausgabe Geben Sie diesem Pfad eine Kontur von etwa 1 pt. Weisen Sie Effekt 3D Extrudieren und abgeflachte Kante zu 40. Der zusätzliche Punkt wird anhand intelligenter Hilfslinien gesetzt und dann nach innen verschoben. 6 Speichern Sie das Banner als Symbol. Dann öffnen Sie über das Aussehen-Bedienfeld erneut die Optionen für den 3D-Effekt und klicken auf Bildmaterial zuweisen Ein Band mit glatten Enden kann einfach per Effekt konstruiert werden. 3 Die gezackten Enden des Bands können nicht in einem Schritt miterzeugt werden. Stattdessen legen Sie Bildmaterial auf das 3D-Objekt. Damit dieses nicht verzerrt wird, müssen Sie es exakt an die Zuweisen des Bildmaterials 48

10 7 Wählen Sie zunächst mit den Pfeil-Buttons die richtige Fläche aus (die ausgewählte Fläche wird auf der Zeichenfläche hervorgehoben) und anschließend das passende Symbol. Aktivieren Sie dann Unsichtbare Geometrie und Bildmaterial schattieren. 8 Anschließend sehen Sie sich bei Bedarf unter Mehr Optionen die Beleuchtung an oder wenn Sie lieber ein flaches Modell berechnen und nach dem Umwandeln mit Verläufen versehen wollen wählen Sie Keine Schattierung. Handgezeichnet Ein Design wie das Tattoo-Herz müssen Sie entweder analog mit Bleistift auf Papier oder digital skizzieren und dann mit Pfaden nachkonstruieren. Die unregelmäßigen Linien und Konturstärken lassen sich mit Effekten (z.b. dem Aufrauen-Effekt) erzielen. Einfärben Erst durch das Einfärben entsteht bei den meisten Bändern der räumliche Eindruck. Dabei kommen nur einfache Verläufe zum Einsatz. Durch die Wahl der richtigen Verläufe und Verlaufsfarben sowie durch trickreiches Verschieben der Verläufe auf dem Objekt können Sie hier viel erreichen. Beobachtung Wenn Sie sich nicht sicher sind, wie ein Verlauf anzulegen ist, probieren Sie es einfach aus. Biegen Sie ein Stück Papier so zurecht wie das Objekt, das Sie einfärben wollen, und richten Sie ein Licht darauf. So können Sie sehen, wie Licht und Schatten zu setzen sind. Bei linearen Verläufen achten Sie auf deren Winkelung. Sie muss exakt passend eingestellt werden. Wenn sich ein Verlauf nicht intuitiv mit dem Verlauf- Werkzeug auf der Zeichenfläche einstellen lässt, messen Sie mit dem Mess-Werkzeug die Winkelung von Pfadsegmenten und geben dann den Winkel numerisch ein 1. 1 Bei kreisförmigen Verläufen ist die Position des Verlaufs auf dem Objekt eine interessante Stellschraube. Der kreisförmige Verlauf wird zu großen Teilen außerhalb des Objekts verschoben. So lassen sich ziemlich schnell realistische Schatten erstellen 2. 2 Auch der graue Verlauf im Hintergrund ist auf diese Art erstellt, ist jedoch kein Kreis, sondern ein Oval. Abdunkeln und Aufhellen Um die abgedunkelten bzw. aufgehellten Pendants zu Ihren Farben zu finden, verwenden Sie das Farbhilfe-Bedienfeld. Stellen Sie in dessen Bedienfeldmenü die Option FARBTÖNE/SCHATTIERUNGEN ANZEIGEN ein. Banner werden in bestimmten Bereichen z.b. im Packungsdesign gerne mit einem Goldverlauf versehen, um die Wertigkeit des Produkts hervorzuheben. Verläufe, die Metalle simulieren sollen, finden Sie in Illustrators Farbfeldbibliotheken unter Verläufe Metalle 3. 3 Dieses Band wurde noch mit Verlaufkonturen abgesetzt (rechts: Metallverläufe- Bibliothek) Verzierungen, Nähte und andere Details Es sind die kleinen Dinge, die den Unterschied machen. Sorgfältig gesetzte Details, die sich nicht in den Vordergrund drängen, runden Elemente ab und lassen das Design plastisch wirken. In diesem Fall steht der Verlauf senkrecht zum umgebogenen Blatt. Setzen Sie unauffällige Lichtkanten, indem Sie einen Pfad kopieren und, mit einer helleren Kontur versehen, davor einfügen 4. 49

11 4 Elemente besser. Sie können die Schatten auch negativ als Aussparung anlegen 7. 7 Eine Kontur für eine Lichtkante wie diese sollten Sie bereits bei der der Objekte»abzweigen«, bevor Sie Objekte ggf. zerschneiden. In Illustrator CS6 können Sie ihr auch einen Verlauf zuweisen, um den Lichtreflex noch realistischer zu gestalten. Eine Naht erstellen Sie als gestrichelte Kontur mit rundem Abschluss 5. Um sie weiter zu verfeinern, probieren Sie einen Konturverlauf (in Illustrator CS6) oder ein leicht versetztes dunkleres Duplikat als Schatten. Schlagschatten Interessante Wirkungen können Sie auch mit Schattenwurf erreichen. Anstatt z.b. das Banner selbst rund zu gestalten, setzen Sie einfach den Schatten so, als wäre es rund Das Band selbst ist gerade, der Schatten verursacht die gebogene Wirkung. Runde Schatten im Webdesign Die einfache Naht aus einer einfarbigen gestrichelten Kontur reicht für kleine Darstellungsgrößen. Strukturen Wenn die Banner nicht so glatt aussehen sollen, haben Sie mehrere Möglichkeiten. Sie können Struktur mit Rauschfiltern aus den Photoshop-Effekten erzeugen 6. Sie können auch feine Muster einsetzen (Beispiele dafür finden Sie in dem Beitrag über Siegel in»«ausgabe 17 ) oder Sie legen Fotos als Deckkraftmasken an. Im Webdesign sind diese Schatten interessant, weil sie sich per Stylesheet hinter rechtwinklige Elemente (wie eingebundene Bilder oder farbige Boxen) legen lassen und diesen damit ihr statisches Aussehen nehmen. In diesem Fall kamen Angleichungen zum Einsatz. Sie bieten die Möglichkeit, präzise Ecken konstruieren und gleichzeitig unregelmäßig weiche Verläufe erzeugen zu können Der Photoshop-Effekt KÖRNUNG erzeugt hier die feine Struktur. Schattieren In flach gestalteten oder einfarbigen Designs lässt sich mit Schlagschatten Räumlichkeit herstellen. Die Schlagschatten trennen darüber hinaus die einzelnen Die Angleichungen wurden jeweils zwischen einem weißen (mit blauer Outline dargestellt) und einem grauen Objekt erstellt. Unregelmäßige Schattierung Für manche Designs reichen einfache Abdunklungen an den Ecken nicht aus, denn das Banner selbst soll kleine Falten werfen. In diesem Fall ist der Einsatz zusäzlicher Elemente vonnöten. Sie haben hier die Wahl zwischen normalen Verläufen, Verlaufsgittern und Angleichungen

12 10 1 Wenn Sie Ihre eigenen Pinsel anlegen wollen, ist es wichtig, dass Sie bereits beim Konstruieren darauf achten, bestimmte Funktionen nicht zu verwenden. Vor allem dürfen in einem Pinsel keine Verläufe und keine Schnittmasken zum Einsatz kommen. Verläufe müssen Sie in mehrere, farblich abgestufte Objekte umwandeln 2. 2 Diese Delle im Stoff wurde mit einem Gitter gezeichnet. Mit Schrift kombinieren Wenn Schriftelemente auf den Bannern eingesetzt werden sollen, müssen sie derselben Perspektive folgen, damit das Design plausibel ist. An einem Beispiel haben Sie bereits gesehen, dass es sinnvoll sein kann, die Schrift gleich mit einzuplanen, um sie dann gemeinsam mit den anderen Elementen zu verzerren. Das spart nicht nur Arbeit, sondern ist natürlich wesentlich exakter gegenüber dem nachträglichen Anpassen vor allem wenn weder Hilfslinien noch Transformationswerte bekannt sind. Wie die Schrift hinzugefügt wird ob als Pfadtext, mit einer Verzerrungshülle, im Perspektivenraster oder als 3D-Mapping sollte jeweils der Gestaltung des Banners angepasst sein. In diesem Fall wurde ein Kreis aus dem markierten Mittelpunkt erstellt und der Text als Pfadtext darauf gesetzt 1. Mit OBJEKT UMWANDELN können Sie Verläufe in einzeln abgestufte Objekte umwandeln. Die Standardeinstellung von in der Regel 255 Objekten benötigt Rechenstärke und ist auch meist unnötig. 2 Nach dem Umwandeln ist die vormalige Verlaufsfläche eine Schnittmaske. Wenden Sie darauf die Funktion Schnittmengenfläche aus dem Pathfinder-Bedienfeld an, um die Schnittmaske anzuwenden und die Objekte damit endgültig zu beschneiden Umwandlung eines Verlaufs Pfadtext auf dem gerundeten Banner der Pfad sollte passend zugeschnitten werden, damit das Objekt nicht unhandlich wird. Pinsel anlegen Diesen Workshop haben wir ja eigentlich begonnen, um eine Alternative zu Illustrators Banner-Pinseln zu haben. Nun können Sie Ihre eigenen Banner wieder als Pinsel anlegen. Das ist natürlich vor allem für gerade konstruierte Banner sinnvoll, die Sie dann als Pinsel einfacher verformen können. Schnittmasken endgültig anwenden Das»echte«Beschneiden der Objekte funktioniert in diesem Fall nur, weil keine Konturen beteiligt sind. In vielen anderen Fällen werden Sie diesen Pathfinder nicht anwenden können. 3 Um dann den Pinsel zu erstellen, ziehen Sie einfach alle dazugehörigen Objekte gemeinsam ins Pinsel-Bedienfeld. Erstellen Sie einen Bildpinsel. Enthält das Motiv keine Muster oder Verläufe, dann können Sie auch die spezielle Skalierung zwischen Hilfslinien in dem Pinsel verwenden. 51