Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator

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 fertige Illustration entsteht.

Die fertige Illustration

Roboter Maskottchen Illustrator Tutorial
So sieht die fertige Illustration des Lime-Bot Maskottchens aus.

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

1. Das Illustrator-Dokument vorbereiten

Als erstes solltest du deine Zeichenvorlage einscannen oder mit einer Digitalkamera abfotografieren. Da die Skizze nur als Unterlage für die Illustration dient, reicht eine geringere 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 verwenden 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 anzuzeigen, wählst du 30% Transparenz aus. Anschließend kannst du deine Skizzen-Ebene noch sperren, damit du die Skizze während des Arbeitens nicht verschiebst.

2. Pfade bauen

Im nächsten Schritt musst du alle Linien deiner Skizze in Illustrator-Pfaden nachbauen.
Lege dir dazu die neue Ebene »Pfade« an. Ich habe bei meinem Roboter mit den Pfaden für den Kopf angefangen. Beim Nachbauen der Linien in Pfade kannst du ein paar Tricks anwenden, um die Linien sauber (so wenig Pfadpunkte wie möglich) und schnell hinzubekommen. Hier die wichtigsten 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 bildest. 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 gleichen Stelle darüber eingefügt, und einen weiteren Kreis daneben aufgezogen. 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.
Roboter Maskottchen Illustrator Tutorial

Alle weiteren Formen am Kopf kannst du mit der gleichen Funktion bauen.

2.3. Das Zeichenstift-Werkzeug (P)

Formen, die nicht direkt aus den geometrischen Formen (Kreis, Rechteck) abgeleitet werden können (z.B. die Antenne am Roboter-Kopf), legst du einfach selbst mit dem Zeichenstift-Werkzeug (P) an.
Roboter Maskottchen Illustrator Tutorial

2.4. Filter: Biegung

Die Arme meines Roboters habe ich mit einem weiteren Trick geformt. Dazu zeichnest 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.
Roboter Maskottchen Illustrator Tutorial

Jetzt musst du die Form anwählen, und Objekt / »Aussehen umwandeln« anklicken (so nimmt die Form die Kontur an, und der Biegungs-Effekt wird entfernt). Anschließend musst du die Pfade des Arms noch mit dem Direktauswahl-Werkzeug (A) ein bisschen zurecht zupfen. Fertig ist der Roboter-Arm.
Roboter Maskottchen Illustrator Tutorial

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 (inklusive den Arm) und wähle die Pathfinder-Funktion: »Fläche aufteilen«.
Roboter Maskottchen Illustrator Tutorial

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

Roboter Maskottchen Illustrator Tutorial
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 hilfreich, sich ein Farbkonzept von ungefähr 5 Farben anzulegen. Lege dir dazu die neue Ebene »Farben« in deinem Dokument an.

Für meinen Lime-Bot habe ich als Farbinspiration eine Limette verwendet und dann mit Hilfe eines Online-Farbtools (z.B. Color Scheme Designer) eine Farbpalette angelegt.
Roboter Maskottchen Illustrator Tutorial

4. Flächen kolorieren

Als nächsten Schritt kannst du den Flächen deines Maskottchens die entsprechenden 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).
Roboter Maskottchen Illustrator Tutorial

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 beispielsweise allen weißen Flächen des Roboters einen Schein nach innen gegeben.
Roboter Maskottchen Illustrator Tutorial

6. Fugen hinzufügen

Roboter Maskottchen Illustrator Tutorial
Fugen sind ein wichtiges Stilmittel, um bei einer Illustration Volumen zu erzeugen.

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

Roboter Maskottchen Illustrator Tutorial
Du erstellt so die gleiche Fläche, nur ein bisschen 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 skalierst du diese Fläche proportional mit Umstell-Taste+Alt gedrückt ein klein wenig größer.

7. Schattierungen

Um deiner Illustration mehr Tiefe zu verleihen, ist es wichtig Schattierungen hinzu zu fügen. Dazu musst du dir als erstes Gedanken machen, aus welcher 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.

Roboter Maskottchen illustrieren
Ich habe alle Schattenflächen pink eingefärbt.

Die Flächen für die Schatten (pink) habe ich übrigens 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.

Roboter Maskottchen Illustrator Tutorial

Um die Schatten noch raffinierter aussehen zu lassen (und deiner Figur mehr Volumen zu geben), kannst du jetzt noch eine zweite, parallele Schattenschicht bauen. Diese Flächen ziehst du allerdings 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.

Roboter Maskottchen Illustrator Tutorial

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

Roboter Maskottchen Illustrator Tutorial

Den eigentlichen Eckpunkt löscht du jetzt mit dem Ankerpunkt entfernen-Werkzeug (-) weg.

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

Roboter Maskottchen Illustrator Tutorial

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 abgewandt).
Roboter Maskottchen Illustrator Tutorial
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 mittleren Pfadpunkt einer Fuge mit dem Direktauswahl-Werkzeug (A) auswählst. Kopiere dann den Punkt mit Strg+C. Die beiden benachbarten Pfadpunkte werden so automatisch mit kopiert. Füge jetzt die kopierten drei Pfadpunkte mit Strg+F an der selben Stelle wieder ein. Jetzt wechselst du die angewä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 findest du unter Fenster / Farbfeldbibliotheken / Verläufe / Blendeneffekte (ganz oben). Wähle den »Weißübergang zu Kante-Effekt«.

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

Roboter Maskottchen Illustrator Tutorial

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).

Roboter Maskottchen illustrieren

8.2. Leuchteffekte

Leuchteffekte lassen Flächen spannender wirken. Ich verwende 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.

Roboter Maskottchen Illustrator Tutorial

Den gleichen Effekt habe ich beim grünen Button am Bauch mit einer ähnlichen Einstellung wiederholt.

Bei den Augen und dem Mund meines Roboters nutze ich den gleichen Effekt nur diesmal mit »Schein nach außen« und den Einstellungen Negativ multiplizieren, Deckkraft 100%, Weichzeichnen 5px.

Roboter Maskottchen Illustrator Tutorial

8.3. Reflexionen

Um die sehr wichtigen 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 gleichen Stelle wieder ein.

Roboter Maskottchen Illustrator Tutorial
Zur besseren 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 aufteilen«. Anschließend muss ich die Flächen noch einmal anwählen und die Gruppierung (mit der rechten Maustaste: Gruppierung aufheben) aufheben. 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 solltest darauf achten, dass Augen und Mund der Illustration über der Reflexion liegen).

Roboter Maskottchen Illustrator Tutorial

Genau den gleichen Vorgang habe ich beim grünen Button am Bauch.

Roboter Maskottchen Illustrator Tutorial

9. zusätzliche Details hinzufügen

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

Eigentlich kannst du deine Illustration jetzt schon als fertig bezeichnen. Möchtest du allerdings deinem Maskottchen noch den finalen Schliff geben, kannst du noch ein paar zusätzliche 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äsentieren, kannst du außerdem noch einen Hintergrund, eine Bodenfläche und ein Schlagschatten am Boden gestalten.

Wie du siehst, sind deiner Kreativität wirklich keine Grenzen gesetzt und du kannst die verschiedensten Dinge ausprobieren.

Noch ein Tipp: Alternative Grafik-Programme

Hast du kein Abode Illustrator Programm und möchtest trotzdem Illustrationen in einem Grafik-Programm erstellen, gibt es das kostenlose Inkscape oder das sehr spannende, neue Online-Programm Aviary Raven als Alternativen. Mit diesen Tools lassen sich ebenfalls etliche, tolle Effekte erzeugen.

Ich hoffe dir gefällt der fertige 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 verwendeten Illustrator-Funktionen freue ich mich sehr!

21 Kommentare zu “Ein Roboter-Maskottchen entsteht (Teil 2): Illustration mit Adobe Illustrator

  1. Habe den zweiten Teil schon mit Spannung erwartet und gleich nach Entdeckung unter den Feeds verschlungen.

    Finde inhaltliche Darstellung und Schreibstil gleichermaßen hilfreich und gut.

    Vielen Dank und einen fröhlichen Gruß,
    Tanja

    • Hallo Tanja,
      vielen herzlichen Dank für deinen Kommentar.
      Ich freue mich natürlich riesig, dass du dass Tutorial hilfreich findest. Das ist das wichtigste :)

      Viele Grüße auch von mir
      Manuel

  2. Sehr, sehr fein.

    Heute ist auch ein Post erschienen, wo die Agentur Turbomilk ebenfalls über die Entstehung einer Illustration für Iconfinder berichtet http://turbomilk.com/blog/cookbook/masterclass/iconfinder-404-page/

    • Hallo Sergej,
      vielen Dank für dein tolles Feedback :)
      Der Artikel von Turbomilk ist echt toll (hab ihn mir gerade durchgelesen und angeschaut, das sind echt super nette Ideen für die Error-Page 404 und überhaupt die ganze Agentur macht spitzenmäßige Illustration. Vielen Dank auch für diesen Link, hab mir gleich den rss-feed geholt :)

      Viele Grüße
      Manuel

      • Ja, deren Blog und Arbeiten sind wirklich Spitze. Turbomilk gehört in Russland zu den führenden Kreativagenturen, werden aber auch gern aus dem Ausland beauftragt.

        • Also ich muss echt sagen Turbomilk kommt echt total krass (supergenial) rüber :) Die haben absolutes Weltklasse Niveau , was mich aber nicht wundert, da Russland schon immer eine ausgesprochen künstlerisches Nation war und ist. :-)

  3. Wirklich zwei schöne Artikel :)
    Fand selbst ich als totale Null in Sachen Grafikerstellung/-bearbeitung spannend zu lesen!

    • Hallo Dennis,
      vielen Dank für dein tolles Feedback.
      Das ist echt cool dass dir die Artikel auch gefallen haben.
      Freut mich :)
      viele Grüße
      Manuel

  4. Klasse geworden das kleine Kerlchen!

    Und toll, wie mit Kleinigkeiten (z.B. Highlights an den Fugen) das Ergebnis an Ausstrahlung gewinnt.

    Als absoluter „Nicht-Designer“ ist mein Respekt solchen Arbeiten gegenüber schon immer hoch gewesen, aber die vielen notwendigen Schritte zeigen, daß das sehr sehr viel Arbeit hintersteckt!

    Super und weiter so.
    Gruß
    Oliver

    • Hallo Oliver,
      vielen Dank für dein Kommentar.
      Es freut mich, dass dir der kleine Weltraumforscher und Zitronenliebhaber gefällt :-)
      Ja, Details sind ein sehr wichtiges Element und tatsächlich nehmen sie auch ein wenig Zeit in Anspruch.
      Ich verliere mich selbst manchmal in Detailierungen und merke gar nicht wie die Stunden vorbeisausen :)
      Viele Grüße
      Manuel

  5. Lieber Manuel, ich bin begeistert! Ich weiß – und sehe ja an deinen ausführlich beschriebenen Schritten im Artikel – , dass diese Kunst lernbar ist ;-) aber ich bin doch immer wieder von deinen Zeichenkünsten beeindruckt, wie du den Figuren durch deine Zeichnungen Leben einhauchst. Ich mag das Männchen sehr!

    • Vielen Dank für den Link, Sergej. Der neue Woothemes-Ninja sieht ja echt klasse aus! Der Artikel und Skizzen sind auch super interessant.

      Gruß Manuel

  6. unglaublich, wieviel mühe ihr euch macht. sehr ausführlich, sehr gut, SEHR hilfreich! werde euch gleich an alle meine grafiker und illustratoren weiterempfehlen. hier lohnt es sich ja mal wirklich vorbei zu schauen.

    • Hallo Sue,
      herzlichen Dank für dein Kommentar.
      Es freut mich riesig, dass dir der Artikel so gut gefällt und du ihn hilfreich findest :)
      Solch ein Feedback motiviert natürlich sehr :)
      Viele Grüße
      Manuel

  7. Määäh!
    Auch ich habe den zweiten Teil mit Spannung erwartet. Nachdem der erste Abschnitt, das Umwandeln der Skizze in Pfade, schon intuitiv bei meinen Schäfchen zur Anwendung kommt, hat mir vor Allem der restliche Teil – wie bekomme ich die dritte Dimension dazu und wie binde ich Licht und Schatten mit ein sehr viele weitere Anregungen gegeben.
    Ich arbeite zwar mit Corel Draw, aber die Anwendung ist dort ja recht ähnlich.
    Mit sicherheit wird dieser Workshop der Welt der Sheepshirts-Schafe mehr Tiefe – im wörtlichen Sinn- bringen.
    Vielen Dank dafür!

    Viele Grüße
    Werner

    • Hallo Werner,
      Vielen herzlichen Dank für deinen Kommentar.
      Es freut mich riesig, dass du diese Vorgehensweise hilfreich findest :-)
      Ja, ich denke mit Corel-Draw funktioniert das bestimmt ähnlich :-)
      Ich freue mich schon sehr auf deine Schäfchen :)
      Viele Grüße und ein freundliches Määäh!
      Manuel

  8. voll super dein beitrag :) lg eva

  9. großartiges tutorial, definitiv unter meinen favorites:
    http://www.w3q.de/2012/03/01/hochwertige-illustrator-tutorials/

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *