Lernen Sie einen professionellen Workflow zur Darstellung eines Comic-Style-Kopfbildes

In diesem Lernprogramm werden wir einen professionellen Workflow zur Darstellung von Website-Header-Bildern im Comic-Stil beschreiben, die in Wordpress-Designs integriert werden können. Dies ist eine großartige Möglichkeit, um Ihren Blog hervorzuheben und in den Top-Webdesign-Galerien zu promoten. Lass uns anfangen!

Endgültige Bildvorschau

Unten ist das endgültige Bild, auf das wir hinarbeiten werden. Möchten Sie auf die vollständigen Vector Source-Dateien und herunterladbaren Kopien jedes Tutorials zugreifen, einschließlich dieses Tutorials? Nehmen Sie an Vector Plus für nur 9 € pro Monat teil. Sie können das fertige Bildmaterial, das endgültige Website-Design in voller Größe anzeigen oder die Live-Site besuchen.

Schritt 1 - Ein Wordpress-Theme betrachten

Nachfolgend finden Sie mein Wordpress-Theme. Wie Sie sehen, besteht das Theme aus ein paar Zonen, wie der "Kopfzeile". Hier möchte ich das Hintergrundheaderbild ändern und etwas posten, das mehr über mich als Designer und Illustrator ausdrücken kann.

Schritt 2 - Beginnen Sie mit dem Skizzieren auf Papier, hier nicht digital!

Ich beginne immer mit ein paar Skizzen auf Papieren. Dies hilft mir wirklich, einige Ideen besser zu fokussieren und anschließend in Illustrator etwas aufzuspüren. Hier ein lustiges Video, das ich für dieses Tutorial gemacht habe.

Schritt 3 - Die Skizzen

Meine Idee ist also, mit Robotern und einem Mädchen als Kommandant eine seltsame Zukunftswelt zu schaffen. Vorläufige Skizzen sind unten gezeigt.

Das Bild unten zeigt die endgültige Bleistiftskizze, die in Illustrator als Vorlage bereitgestellt werden soll.

Schritt 4 - Beginnen Sie mit Illustrator CS4

Jetzt kann ich mich vor meinen PC setzen und mit Adobe Illustrator CS4 beginnen. Ich öffne ein neues Dokument und platziere die Skizze als Vorlage (durch Doppelklicken auf die Ebene und Prüfen der Vorlage).

Jetzt erstelle ich eine neue Ebene über der Ebene "Vorlage". Dann beginne ich, die grundlegenden Skizzenlinien zu zeichnen. Ich gehe immer mit geöffneter Stiftwerkzeugpalette nach, um schneller zu arbeiten (kleiner Tipp).

Folgen Sie den ersten Schritten im Video unten.

Schritt 5 - Einfärben

Mit dem Stiftwerkzeug mache ich das Schwarze Einfärben; Ich bezeichne das gerne als Tinten weil ich mich für Comic-Kunst interessiere. Siehe das Video unten.

Am Ende sehen Sie die Ebene mit den Zeichentinten.

Siehe auch unter der Hintergrundschicht Tinte.

Die Ebene "Vorlagenskizze" muss nicht mehr verwendet werden, daher habe ich sie gelöscht. Hier werden alle Schichten zusammengefügt.

Schritt 6 - Grundlegende Farbschritte

Nach dem Einfärben brauche ich etwas Grundfarbe, hier ist die Ebene "Grundfarbe Zeichen".

Unter dem Hintergrund ist die Grundfarbe unten dargestellt.

Hier sind alle Grundfarbenebenen zusammen.

Schritt 7 - Tiefe und Schatten

Nach den Grundfarben brauche ich etwas Tiefe und Schatten, um die Illustration realer zu machen. Hier ist eine kurze Studie, wie das Licht in diese Abbildung fällt.

Ich kehre im Illustrator zurück und fange an, die Schatten zu verfolgen, wo sie gebraucht werden. Für diese kopiere und füge ich häufig die Formen ein und wende dann „Teilen“ in der Pathfinder-Palette an.

Am Ende wird das endgültige Bild unten gezeigt oder das endgültige Bildmaterial angezeigt.

Schritt 8 - Speichern von Bildern für Wordpress

Von diesem Bild benötigte ich zwei Teile für mein Wordpress-Design, einen für die Kopfzeile und einen für den Hauptteil. Mit den Führern zeichne ich die beiden Zonen.

Nachdem Sie die Hilfslinien platziert haben, erstelle ich die Schnitte, indem Sie auf Objekt> Schnitt> Aus Hilfslinien erstellen klicken.

Jetzt speichere ich die beiden Bilder, indem ich auf Datei> Für Web speichern gehe (ich speichere nur die Bilder und kein HTML). Dann lade ich das endgültig exportierte Bild in die Wordpress-Theme-Falte hoch. Jetzt ist es bereit, in das Thema einzugeben.

Fazit

Die endgültigen Ergebnisse sehen Sie unten, die vollständig in das endgültige Wordpress-Design integriert wurden. Sie können das fertige Bildmaterial, das endgültige Website-Design in voller Größe anzeigen oder die Live-Site besuchen.

Abonnieren Sie den Vectortuts + RSS-Feed, um mit den neuesten Vektor-Tutorials und Artikeln auf dem Laufenden zu bleiben.