Im ersten Teil der Serie hast du gesehen, wie man die Skizze für ein Webseiten-Maskottchen zeichnet. In diesem Tutorial möchte ich dir Schritt für Schritt zeigen, wie aus deiner Zeichen-Vorlage eine fer­tige Illustration ent­steht.

Die fer­tige Illustration

So sieht die fer­tige Illustration des Lime-Bot Maskottchens aus.

Also los geht’s, machen wir uns an die Arbeit :-)

1. Das Illustrator-Dokument vorbereiten

Als erstes soll­test du deine Zeichenvorlage ein­scannen oder mit einer Digitalkamera abfo­to­gra­fieren. Da die Skizze nur als Unterlage für die Illustration dient, reicht eine gerin­gere Auflösung (ca. 150dpi beim Scannen). Anschließend kannst du die Vorlage noch im Photoshop (mit Tonwertkorrektur oder Helligkeit / Kontraste) ein wenig aufhellen.

Jetzt legst du dir ein neues Illustrator-Dokument an. In meinem Beispiel habe ich eine Dateigröße von 600×600 Pixel gewählt. Da ich die Illustration ja später auf einer Webseite ver­wenden will, wähle ich den RGB-Farbwert und eine Auflösung von 72dpi.

Die Skizzen-Vorlage fügst du mit Datei / Platzieren in dein Dokument ein. Diese Vorlagen-Ebene nenne ich »Skizze«. Mit einem Doppelklick auf die Ebene öffnest du die Ebenen-Optionen. Um die Skizze nur mit 30% Deckkraft anzu­zeigen, wählst du 30% Transparenz aus. Anschließend kannst du deine Skizzen-Ebene noch sperren, damit du die Skizze wäh­rend des Arbeitens nicht verschiebst.

2. Pfade bauen

Im nächsten Schritt musst du alle Linien deiner Skizze in Illustrator-Pfaden nach­bauen.
Lege dir dazu die neue Ebene »Pfade« an. Ich habe bei meinem Roboter mit den Pfaden für den Kopf ange­fangen. Beim Nachbauen der Linien in Pfade kannst du ein paar Tricks anwenden, um die Linien sauber (so wenig Pfadpunkte wie mög­lich) und schnell hin­zu­be­kommen. Hier die wich­tigsten Werkzeuge und Funktionen.

2.1. Das Ellipsen-Werkzeug (L)

Mit dem Ellipsen-Werkzeug (Kurzbefehl L) kannst du alle Kreise und Ellipsen deiner Figur bauen.

2.2 Die Pathfinder-Funktion: Schnittmenge bilden

Außerdem kannst du sehr viele Formen bauen, indem du von zwei Kreisen die Schnittmenge bil­dest. Ich habe z.B. erst einen Kreis für den Roboter-Kopf gezogen, diesen mit Strg+C kopiert, mit Strg+F (F steht für front) an der glei­chen Stelle dar­über ein­ge­fügt, und einen wei­teren Kreis daneben auf­ge­zogen. Dann wähle ich beide Kreise an und wähle aus dem Pathfinder-Fenster die Funktion »Schnittmenge bilden«. So bekomme ich die Fläche für die Ohren am Helm.

Alle wei­teren Formen am Kopf kannst du mit der glei­chen Funktion bauen.

2.3. Das Zeichenstift-Werkzeug ℗

Formen, die nicht direkt aus den geo­me­tri­schen Formen (Kreis, Rechteck) abge­leitet werden können (z.B. die Antenne am Roboter-Kopf), legst du ein­fach selbst mit dem Zeichenstift-Werkzeug ℗ an.

2.4. Filter: Biegung

Die Arme meines Roboters habe ich mit einem wei­teren Trick geformt. Dazu zeich­nest du ein freies Rechteck (M) und wählst unter Effekt / Verkrümmungsfilter / den Effekt »Bogen« aus. Bei den Optionen habe ich 20% Filter bei Biegung gewählt.

Jetzt musst du die Form anwählen, und Objekt / »Aussehen umwan­deln« ankli­cken (so nimmt die Form die Kontur an, und der Biegungs-Effekt wird ent­fernt). Anschließend musst du die Pfade des Arms noch mit dem Direktauswahl-Werkzeug (A) ein biss­chen zurecht zupfen. Fertig ist der Roboter-Arm.

2.5. Pathfinder-Funktion: Fläche aufteilen

Um die Unterteilung bei den Armen zu erzeugen habe ich drei Pfade gebaut, und diese jeweils über die Armform hinaus stehen lassen. Dann wähle ich alle Pfade an (inklu­sive den Arm) und wähle die Pathfinder-Funktion: »Fläche auf­teilen«.

Mit diesen Pfad-Funktionen kann ich den gesamten Körper und Kopf, sowie alle Gliedmaßen erstellen. Hände und Füße zeich­nest du anschlie­ßend direkt mit dem Zeichenstift-Werkzeug ℗ und zupfst sie mit dem Direktauswahl-Werkzeug (A) zurecht.

So sieht mein Roboter in Illustrator-Pfaden aus.

Die Pfade sind fertig gebaut. Deine Skizzen-Ebene kannst du jetzt ausblenden.

3. Farbkonzept erstellen

Bevor du die Farben für dein Maskottchen anlegst ist es hilf­reich, sich ein Farbkonzept von unge­fähr 5 Farben anzu­legen. Lege dir dazu die neue Ebene »Farben« in deinem Dokument an.

Für meinen Lime-Bot habe ich als Farbinspiration eine Limette ver­wendet und dann mit Hilfe eines Online-Farbtools (z.B. Color Scheme Designer) eine Farbpalette ange­legt.

4. Flächen kolorieren

Als nächsten Schritt kannst du den Flächen deines Maskottchens die ent­spre­chenden Farben zuweisen, indem du eine Pfadkontur anwählst und mit dem Pipetten-Werkzeug (I) auf eine Farbe deiner Farbpalette klickst.

Es hilft ein wenig mit den Verhältnissen von dunklen und hellen Farben herum zu spielen.
Bei meinem Roboter habe ich z.B. helle Farben für den Körper gewählt (da ich die Figur in einen dunklen Hintergrund setzen möchte) und dem Gesicht dagegen eine dunkle Farbe als Kontrast gegeben (das lenkt den Fokus aufs Gesicht).

5. Volumen mit »Schein nach innen« erzeugen

Um der Figur mehr Volumen zu geben (so werden die Kreise mehr zu Kugeln) kannst du
auf bestimmte Flächen den Effekt Schein nach innen (Effekt / Stilisierungsfilter / Schein nach innen) setzten. Ich habe bei­spiels­weise allen weißen Flächen des Roboters einen Schein nach innen gegeben.

6. Fugen hinzufügen

Fugen sind ein wich­tiges Stilmittel, um bei einer Illustration Volumen zu erzeugen.

Die Fugen (der schmale Zwischenraum zwi­schen zwei Objekten) erzeugst du, indem du eine Fläche (z.B. das grüne Gesicht) anwählst und bei Objekt / Pfad / »Pfad ver­schieben« aus­wählst. Den Versatz habe ich beim Roboter-Gesicht mit -3px gewählt (damit bekomme ich eine Fuge von 3 Pixeln).

Du erstellt so die gleiche Fläche, nur ein biss­chen kleiner und gibst der grö­ßeren eine dunkle Farbe.

Fugen kannst du auch bauen, indem du eine Fläche mit Strg+C kopierst und sie mit Strg+B (B steht für behind) an die gleiche Stelle dahinter setzt. Dann ska­lierst du diese Fläche pro­por­tional mit Umstell-Taste+Alt gedrückt ein klein wenig größer.

7. Schattierungen

Um deiner Illustration mehr Tiefe zu ver­leihen, ist es wichtig Schattierungen hinzu zu fügen. Dazu musst du dir als erstes Gedanken machen, aus wel­cher Richtung das Licht kommen soll. Denn danach richtet sich, wo du die Schatten für deine Figur anlegen musst.
Kommt die Lichtquelle z.B. von rechts oben, bilden sich die Schatten unten links an deiner Figur.

Ich habe alle Schattenflächen pink eingefärbt.

Die Flächen für die Schatten (pink) habe ich übri­gens genauso mit Pfaden gebaut, wie in Schritt 2 beschrieben.

Als nächstes setzt du deine Schattenflächen auf Schwarz (#000000), 20% Transparenz und Multiplizieren (Fenster Transparenz). In meinem Beispiel habe ich die grüne Fläche des Gesichts und des Knopfs am Bauch vor die Schattenflächen gesetzt, da ich diesen Flächen später noch eine Reflexion geben möchte.

Um die Schatten noch raf­fi­nierter aus­sehen zu lassen (und deiner Figur mehr Volumen zu geben), kannst du jetzt noch eine zweite, par­al­lele Schattenschicht bauen. Diese Flächen ziehst du aller­dings nicht ganz so hoch, wie die ersten Schatten. Diesen zweiten Schattenflächen gibst du wieder die Farbe Schwarz, und setzt sie auf 10% Transparenz und Multiplizieren.

Als finalen Schliff kannst du jetzt noch die Ecken deiner Schattenflächen abrunden. Dazu fügst du mit dem Ankerpunkt hinzufügen-Werkzeug (+) zwei wei­tere Pfadpunkte rechts und links (ganz nah) von der Ecke ein.

Den eigent­li­chen Eckpunkt löscht du jetzt mit dem Ankerpunkt entfernen-Werkzeug (-) weg.

Außerdem soll­test du alle Schattenflächen an den Außenkonturen leicht nach innen kleiner ska­lieren. Damit wird die äußerste Linie z.B. bei einer Kugel wieder hell und hebt sich dadurch von einem dunklen Hintergrund besser ab. Es ent­steht eine Lichtkante.

8. Highlights, Leuchteffekte und Reflexionen

8.1. Highlights an den Fugen setzen

Wenn das Licht von oben kommt, bildet sich ein Highlight (Lichtkante) an einer Fuge an der unteren Kante und nicht an der oberen (die obere Kante ist ja vom Licht abge­wandt).

Ein gutes Beispiel für Highlights an Fugen sieht du an diesem Auto.

Die Highlights bilden sich bei meinem Roboter z.B. am Helm oder an den Fugen des Roboter-Anzugs.

Du kannst Highlights im Illustrator setzen, indem du den mitt­leren Pfadpunkt einer Fuge mit dem Direktauswahl-Werkzeug (A) aus­wählst. Kopiere dann den Punkt mit Strg+C. Die beiden benach­barten Pfadpunkte werden so auto­ma­tisch mit kopiert. Füge jetzt die kopierten drei Pfadpunkte mit Strg+F an der selben Stelle wieder ein. Jetzt wech­selst du die ange­wählte Fläche mit Umschalttaste+x in eine Kontur. Dann gibst du der Kontur eine Breite von 2 oder 3 Pixeln, damit deine Lichtkante etwas breiter wird.

Verändere deine Lichtkante mitt Objekt / Pfad / Konturlinie in eine Fläche. Jetzt gibst du der Lichtkante einen Blendeneffekt (ab CS4). Die Blendeneffekte fin­dest du unter Fenster / Farbfeldbibliotheken / Verläufe / Blendeneffekte (ganz oben). Wähle den »Weißübergang zu Kante-Effekt«.

Als letztes ver­schiebst du die Lichtkante 1 bis 2 Pixel nach unten (bzw. zur Seite, je nach Fuge). Achte darauf, dass deine Lichtkante in der obersten Ebene ange­ordnet ist.

Diese Highlights setzt du jetzt bei allen Fugen (ich habe Highlights in meiner Illustration z.B. am Helmvisier, am Bauch, an den Ohren und Schultern gesetzt).

8.2. Leuchteffekte

Leuchteffekte lassen Flächen span­nender wirken. Ich ver­wende einen Leuchteffekt z.B. für das Gesicht und am grünen Knopf am Bauch.

Wähle dazu deine Fläche an, gehe auf Effekt / Stilisierungsfilter und wähle »Schein nach innen«. Bei den Einstellungen habe ich Ineinanderkopieren, Farbe Weiß, Deckkraft 75%, Weichzeichnen 40px und Mitte gewählt.

Den glei­chen Effekt habe ich beim grünen Button am Bauch mit einer ähnli­chen Einstellung wiederholt.

Bei den Augen und dem Mund meines Roboters nutze ich den glei­chen Effekt nur diesmal mit »Schein nach außen« und den Einstellungen Negativ mul­ti­pli­zieren, Deckkraft 100%, Weichzeichnen 5px.

8.3. Reflexionen

Um die sehr wich­tigen Reflexionen im Gesicht vom Lime-Bot zu erzeugen, kopiere ich den Schatten im Gesicht, sowie die äußere (schwarze) Fläche des Gesichts und füge dann mit Strg+F beide Flächen an der glei­chen Stelle wieder ein.

Zur bes­seren Ansicht habe ich den Flächen neue Farben gegeben und die Deckkraft auf 100% gesetzt.

Dann wähle ich beide Flächen an und wähle im Pathfinder »Fläche auf­teilen«. Anschließend muss ich die Flächen noch einmal anwählen und die Gruppierung (mit der rechten Maustaste: Gruppierung auf­heben) auf­heben. Jetzt lösche ich die pinke Fläche weg und die blaue Fläche habe ich in zwei Teile geteilt.
Der unteren blauen Fläche gebe ich die Farbe Schwarz auf 30% Transparenz, der oberen Fläche den Blendeneffekt »Weißübergang 1« (du soll­test darauf achten, dass Augen und Mund der Illustration über der Reflexion liegen).

Genau den glei­chen Vorgang habe ich beim grünen Button am Bauch.

9. zusätz­liche Details hinzufügen

Tata, wir haben es geschafft! Die Roboter-Illustration ist fertig :-)

Eigentlich kannst du deine Illustration jetzt schon als fertig bezeichnen. Möchtest du aller­dings deinem Maskottchen noch den finalen Schliff geben, kannst du noch ein paar zusätz­liche kleine Schmankerl einbauen.

Ich habe beim Lime-Bot z.B. eine kleine Nummer auf den Anzug geschrieben, auch kleine Accessoires (z.B. die Limette in der Hand des Roboters) sind ein nettes Feature. Wenn es zum Stil deiner Illustration passt, kannst du auch noch Texturen (z.B. bei den Kleidungstücken oder im Hintergrund) addieren. Um dein Maskottchen würdig zu prä­sen­tieren, kannst du außerdem noch einen Hintergrund, eine Bodenfläche und ein Schlagschatten am Boden gestalten.

Wie du siehst, sind deiner Kreativität wirk­lich keine Grenzen gesetzt und du kannst die ver­schie­densten Dinge ausprobieren.

Noch ein Tipp: Alternative Grafik-Programme

Hast du kein Abode Illustrator Programm und möch­test trotzdem Illustrationen in einem Grafik-Programm erstellen, gibt es das kos­ten­lose Inkscape oder das sehr span­nende, neue Online-Programm Aviary Raven als Alternativen. Mit diesen Tools lassen sich eben­falls etliche, tolle Effekte erzeugen.

Ich hoffe dir gefällt der fer­tige Lime-Bot und du kannst die Illustrations-Tipps und -Tricks auch bei deine eigenen Arbeiten anwenden. Über dein Feedback und deine Fragen zum Tutorial oder zu den ver­wen­deten Illustrator-Funktionen freue ich mich sehr!