Du kannst dir die Wallpaper herunterladen, indem du auf das jeweilige Vorschaubild klickst.

Third Floor

Letterbox

Coffeebot

Capitol

Colorfall

Spring Spring

Wau Wau

Zeverest

Ich hoffe du kannst die Wallpaper als Hintergrundbild für deinen Monitor gut gebrauchen. Über dein Feedback oder deine Vorschläge für weitere Motive freue ich mich sehr!

Das finale Logo

So sieht das fertige Logo von Lola aus. Ich habe das Logo im Grafik-Programm Adobe Illustrator gestaltet, es gibt aber auch kostenlose Grafik-Programme (z.B. Inkscape) mit denen du ein Logo in einem ähnlichen Stil selbst erstellen kannst.

Und so bin ich bei der Umsetzung des Logos vorgegangen:

1. Die Skizze

Als Vorlage für meine Hunde-Skizze habe ich mir zuerst Flickr-Fotos von Hunden angeschaut. Dabei sind mir die lustigen Bilder von Lola dem Lemon Beagle aufgefallen. Diese Fotos waren die Inspirationen für die Logo-Umsetzung. Als nächsten Schritt habe ich eine einfache Skizze gezeichnet.

Die Skizze muss wie du siehst wirklich nichts besonderes sein, sondern sollte vor allem klären, welche Pose und welchen Gesichtsausdruck dein Logo-Maskottchen haben soll. Wichtig ist eine möglichst simple Form zu wählen, so dass man das Maskottchen später ganz leicht mit Farbflächen definieren kann. Die Skizze kannst du dann einscannen oder mit deiner Digicam abfotografieren.

2. Die Zeichnung ins Grafik-Programm übertragen

Die eingescannte Skizze platzierst du jetzt in ein leeres Illustrator-Dokument. Um die Zeichenlinien in Pfaden nachzubauen, reduzierst du die Skizze auf 30% Transparenz.

Auf einer neuen Ebene legst du deine Pfade an. Um die fertige Pfadform besser zu sehen, gibst du der Fläche eine Farbe und reduzierst diese ebenfalls auf 20-30%, so dass deine Skizze durchscheint.

Hast du alle Pfade gesetzt, kannst du die Formen deines Maskottchens schon sehr schön erkennen. Eventuell kannst du deine Pfade noch etwas ausbessern, und »wackelige« Flächen optimieren.

Dazu ist es hilfreich, die Pfadansicht in Illustrator zu nutzen und die Farbflächen auszublenden. Auf diese Weise kannst du am besten sehen, an welchen Stellen du die Pfade nachbearbeiten musst.

So sehen die fertigen Ilustrator-Pfade von Lola in der Pfadansicht aus.

3. Farben auswählen

Nachdem du alle Pfade gebaut hast, kannst du die Farben für dein Logo auswählen. Bei einem Maskottchen-Logo in einem simplen Stil ist es sinnvoll, maximal drei Farben auszuwählen.

Für das Logo von Logo von Lola habe ich einen dunkles Braun, ein helles Braun und ein warmes Beige gewählt.

Mit den Farben lässt es sich besonders leicht arbeiten, wenn man sich eine kleine Farbpalette im Dokument anlegt.

Mit meinem Farben fülle ich jetzt die Pfadformen und den Hintergrund aus. Dabei solltest du auch überlegen, wie dein Logo später sowohl auf hellem, als auch auf einem dunklem Hintergrund funktionieren kann.

Zunächst habe ich das Logo auf der dunklen Hintergrund-Fläche gestaltet.

4. Den Schriftzug gestalten

Da das Maskottchen besser grafisch umzusetzen ist, wenn es nicht mit dem ganzen Körper zu sehen, sondern als Porträt angeschnitten ist, nutze ich eine Fläche, um Lola dahinter hervor gucken zu lassen.

In diese Fläche setzte ich jetzt den Logo-Schriftzug. Besonders schön kann ein Logo-Schriftzug gestaltet werden, wenn es neben dem Namen noch eine Unterüberschrift oder einen Slogan gibt. So kann man mit zwei unterschiedlichen Schriften, Farben und Größen einen spannenden Kontrast erzeugen.

Für den Lola-Schriftzug habe ich z.B. die Serifenschrift Baskerville in fett und heller Farbe gewählt. Dagegen verwende ich für den »i am a Lemon Beagle« Slogan die geschwungene Kalligrafie-Schrift Marketing Script in einer kleinen Schriftgröße und dunkler Farbe.

Um den Schriftzug abzurunden und ihm eine etwas edlere Komponente zu geben, habe ich außerdem dezente, geschwungene Linien (an Kalligrafie erinnernd) rechts und links vom Slogan gezeichnet.

5. Das Logo für hellen und dunklen Hintergrund vorbereiten

Eigentlich ist das Logo jetzt fast schon fertig. Das Logo funktioniert bereits sehr gut auf einem dunklem Hintergrund.

Das fertige Lola-Logo auf dunkler Hintergrund-Fläche.

Als letzten Schritt werde ich nun noch eine Logo-Variante erstellen, die sich auch für die Darstellung auf einem hellen Hintergrund eignet. So ist das Logo später vielseitige einsetzbar.

Dazu schneide ich aus der dunkelbraunen Hintergrund-Fläche einen Bogen aus, als würde Lola in einem Türbogen stehen oder aus ihrer Hundehütte herausschauen. So ist das Logo auch hervorragend auf einer weißen Fläche einsetzbar.

Das fertige Maskottchen-Logo »Lola – i am a Lemon Beagle« auf hellem Hintergrund.

Ich hoffe dir hat das kleine Logo-Tutorial gefallen und du kannst einige Tipps und Vorgehensweisen für die Gestaltung deiner eigenen Logos nutzen. Über dein Feedback und deine Tipps zur Logo-Erstellung mit Maskottchen freue ich mich sehr!

10 Webseiten mit kreativen Illustrationen

Diese 10 Webseiten sind Beispiele für moderne Webdesigns, die kreative Illustrationen und Hintergrund-Bilder mit individuellen Schriften und offenen Layouts kombinieren.

1. Red Tiki

Die australische Kreativ-Agentur »Red Tiki« haben ihre Webseite detail freudig und mit viel Liebe zum Detail im Thema der polynsischen Tiki-Kultur gestylt.

2. AmazeeLabs

Die Webseite der Schweizer Internet-Agentur AmazeeLabs setzt auf dezente Farben und kreative Illustrationen und Icons.

3. Tahoe Techtalk Conference

Die Webseite der Tahoe Techtalk Conference hat ein großzügiges Design und eine je nach Tageszeit wechselnde Header-Illustration.

4. Spout Fund

Das Webdesign von Sprout Fund, einem Programm zum Erhalt der biologischen Vielfalt, beeindruckt mit Illustrationen im Retro-Stil, und einer Japan-Papierstruktur als Webseiten-Hintergrund.

5. The Many Faces Of…

Auf dem Webseiten-Projekt »The Many Faces Of…« der Web-Agentur Paravel kann man wunderbar große Illustrationen von Schauspieleren und Filmen bewundern.

6. Josh Sullivan

Die Intro-Seite des Webdesigners- und Developers Josh Sullivan beeindruckt durch eine seitenfüllende Hintergrund-Illustration.

7. Cafundo Studio

Das brasilianische Design-Studio Cafundo hat eine tolle Hahn-Illustration als Webseiten-Hintergrund.

8. Awesome

Auf der Webseite der JavaScript-Developer Teams Awesome beeindruckt besonders die große Header-Illustration.

9. Hugs for Monsters

»Hug for Monsters« ist kreatives Portfolio und Blog des Visual Artists und Developers Joe Lifrieri.

10. Tijuana Flats

Die wilde Single-Page Webseite der amerikanischen Tex Mex Restaurant-Kette »Tijuana Flats« ist ein echter Hingucker.

Tools zur Optimierung von Bildern fürs Web

Damit deine Webseite keine langen Ladezeiten hat, solltest du versuchen alle Bilder so weit wie möglich in der Dateigröße zu verkleinern. Natürlich ohne dabei sichtbare Verluste in der Qualität einzubüßen. Diese praktischen Online-Tools und Programme können dir dabei helfen.

Smush.it

Das Yahoo Developer-Tool Smush.it ist eines der beliebtesten Online-Tools für das verlustfreie Verkleinern von Bildern. Smush.it gibt es auch in einem WordPress-Plugin, so dass du deine Bild-Dateien direkt in WordPress optimieren kannst.

Shrink O’Matic

Mit dem Programm Shrink O Matic kannst du deine Bilder fürs Web (JPEG, GIF und PNG) schnell Bilder per Drag’n’Drop in Format oder Qualität verkleinern.

RIOT - Radical Image Optimization Tool

RIOT ist ein kostenloses Programm (für Windows) zum verlustfreien Verkleinern von JPGs, GIFs oder PNG-Bildern fürs Web. Das Programm lässt sich auch als Addon für GIMP oder IrfanView nutzen.

JPEG und PNG Optimierung

Einen interessanter, ausführlicher Artikel zum Thema PNG Optimierung ist auch der Artikel »Clever PNG Optimization Techniques« auf Smashing Magazine.

Für die JPG-Optimierung gibt es hilfreiche Infos im Artikel »Clever JPEG Optimization Techniques« ebenfalls bei Smashing Magazine.

Wie gefallen dir Illustrationen im Webdesign? Denkst du dieser kreative Trend kann sich durchsetzen, oder bist du der Meinung, dass die modernen CSS3 Techniken und der Trend zu leichten Webseiten mit geringen Dateigrößen Illustrationen im Web verdrängen wird? Über deine Meinung und deine Tipps zu weiteren Inspirationen und Image Optimierungs-Tools freue ich mich sehr!

1. Das 404 Monster-Klassenzimmer

Mit dieser lustigen Monster-Illustration kannst du deine Besucher bei Laune halten :-)

1. Die Skizzen-Vorlage

Mit dieser schnellen Skizze habe ich die Idee für die 404-Schulklasse entwickelt.

404 Fehlerseiten-Illustration downloaden

Du kannst dir die Illustration als transparentes PNG für deine eigene Webseite herunterladen. Ich habe 3 verschiedene Größen in den ZIP-Ordner vorbereitet (850px, 600px und 450px breit). So hast du genug Optionen, die Illustration in der passenden Größe auf auf deiner 404-Seite einzubinden. Du kannst dir die Elmastudio 404-Fehlerseite als Beispiel anschauen.

• Download PNG
  .zip, 820 KB
• Download PNG
  English Version, .zip 806 KB

2. Nützliche Tipps für die 404-Fehlerseite

Neben einer Illustration auf der 404-Fehlerseite, kannst du deinen Lesern weitere Tipps geben, wie sie auf die passende Info auf deiner Seite finden können. Hier einige Inspirationen:

1. Informiere deine Besucher, in einem kurzen Text, warum es zu einem kaputten Link kommen kann.
2. Integriere eine Such-Funktion.
3. Behalte das Layout deiner Seite bei (Header, Navi, Sidebar etc.), so dass der Besucher sich wie gewohnt weiter navigieren kann.
4. Biete einen Link zum Kontaktformular an, falls ein Besucher dich direkt kontaktieren möchte.
5. Integriere einen Link zur Startseite oder zum Archiv deiner Webseite.
6. Biete deinem Besucher alternativen Lesestoff, indem du z.B. eine Auflistung der neusten Blog-Artikel einbindest.
7. Achte jedoch darauf, dass deine 404-Fehlerseite nicht zu viele Links und Infos enthält, und dadurch unübersichtlich wirkt.
8. Bring deine Besucher mit Humor zum schmunzeln, so dass sie nicht zu enttäuscht oder verärgert über den kaputten Link sind.

3. Die 404-Fehlerseite in WordPress

In den meisten Fällen enthält ein WordPress-Theme eine 404.php Datei. In dieser Theme-Datei kannst du deine 404-Seite anpassen. Um die Freebie-Illustration auf der 404-Seite zu integrieren, kannst du z.B. folgenden Code innerhalb des Content-DIVs einfügen.

<div class="error-404">
	<img src="IMAGE URL" alt="404 Error" width="850" height="700" />
</div>
<!--error page illustration-->

Eine weitere hilfreiche Option (falls nicht bereits in deinem Theme integriert) ist es, die Suche zu integrieren. Dazu kannst du folgenden Code in die 404.php Datei einfügen:

<p>Schau doch einmal in der Suche, ob du die passende Information finden kannst.</p>
<?php get_search_form(); ?>

Eine ausführliche Dokumentation zur Erstellung und Anpassung der 404-Fehlerseite in WordPress findest du im WordPress Codex.

4. Jede Menge kreative 404-Inspirationen

Es gibt zahlreiche Blogs und Webseiten, die sich mit der individuellen Gestaltung ihrer 404 Error Page sehr viel Mühe gegeben haben. Dort findest du tolle Inspirationen für deine eigene 404-Fehlerseite. Außerdem kannst du dir anschauen, welche Informationen und Links diese Webseiten ihren Besuchern im Falle eines kaputten Links geben.

Über 50 schöne Beispiele findest du z.B. im Artikel »54 Cool Examples of Custom Error Pages« von Dzine-Blog.

Ebenfalls kreative Beispiele bietet der Artikel »Beautiful and Useful 404 Error Pages for Inspiration« bei Six Revisions.

Ich hoffe, dir gefällt die 404 Monster-Illustration, und du findest die Tipps und Tricks zum Thema 404-Fehlerseiten ebenfalls hilfreich. Über dein Feedback und weitere Tipps freue ich mich sehr!

Das fertige Logo

So sieht das fertige Limebot-Logo aus.

Also los! Ab in den Illustrator, und ran an die Arbeit :-)

1. Eine Limette in Illustrator bauen

Hast du eine Logo-Idee entwickelt und vielleicht schon eine erste Skizze von Hand gezeichnet, kannst du damit anfangen das Symbol deines Logos in Illustrator (oder einem alternativen Grafikprogramm) zu bauen. Ich zeige dir in den folgenden Arbeitsschritten, wie ich die Limette für mein Limebot-Logo gebaut habe.

1.1. Die Grundform erstellen

Als erstes legst du dir ein neues Dokument an. Da ich ein Logo fürs Web erstellen möchte wähle ich den RGB-Wert, die Maßeinheit Pixel eine Auflösung von 72dpi (für Print-Logos sind CMYK, mm und 300dpi geeignet).

Dann legst du die Grundformen deines Symbols an. Für die Limette baust du drei, ineinander liegende Kreise, und gibst den Kreisen jeweils eine Farbe (z.B. dunkelgrün #5db801, weiß #fffadc, hellgrün #dbf298). Der größte Kreis hat einen Durchmesser von 85 Pixel.

Als nächstes habe ich das Fruchtfleisch der Limette unterteilt. Dazu kannst du das Stern-Werkzeug verwenden (das Sternwerkzeug findest du in der gleichen Werkzeug-Palette wie die Ellipse).

Um den Stern zentral zu den Limetten-Kreisen auszurichten, öffnest du jetzt das Ausrichten-Fenster (Fenster / Ausrichten), wählst den Stern und alle Kreise an und wählst die Funktionen »Horizontal zentriert« und »Vertikal zentriert« aus.

Die Spitzen des Sterns kannst du an den Enden abschneiden, indem du den mittleren Kreis auswählst (A), kopierst (Strg+C) und über alle anderen Flächen an der gleichen Stelle einfügst, indem du alles anwählst und Strg+F (F für front) drückst.
Jetzt öffnest du den Pathfinder (Fenster / Pathfinder), wählst den Stern und den gerade neu erstellten Kreis aus (A) und verwendest die Pathfinder-Funktion »Schnittmengenfläche«.

Um die Gruppierung aufzuheben, wählst du den Stern mit der Direktauswahl (A) aus, und gehst auf Objekt / Gruppierung aufheben (oder Umschalttaste +Strg+G). Jetzt gibst du dem Stern mit dem dem Pipetten-Werkzeug (I) die weiße Farbe des mittleren Kreises und setzt einen kleinen Kreis (4x4px) im hellen Grünton in die Mitte. Zum Schluss gruppierst du alle Elemente miteinander (Strg+G).

1.2. Eine 3D Ansicht erzeugen

Um die Limette in Form zu bringen wählst du jetzt alle Elemente (A) aus und gehst auf Effekt / 3D / Extrudieren und abgeflachte Kante. In diesem Fenster gibst du jetzt folgende Werte ein: 9° / -26° / 8° / 40° / 0pt / keine Schattierung.

Anschließend wählst du wieder alle Elemente aus (A) und gehst auf Objekt / Aussehen umwandeln. Die Limettenscheibe liegt jetzt schon schräg im Bild.

Um die Form der Limette zu modellieren, erstellst du mit dem Ellipsen-Werkzeug (E) einen neuen, pinken Kreis mit ca. 85px Durchmesser, wählst den oberen Pfadpunkt des Kreises an und löscht ihn mit (-) weg. Lege jetzt den pinken Kreis hinter die Limettenschnitte und zupf dir die Pfade so zurecht, dass die pinke Fläche die Unterseite der Limette bildet. Gib der pinken Fläche die dunkelgrüne Farbe der Limettenschale.

1.3. Schatteneffekte hinzufügen

Um der Limette einen Schatten zu geben (links im Bild), kopierst du die eben erstellte Fläche (also der Körper der Limette) und fügst die Form an der gleichen Stelle noch einmal ein (Strg+F). Dieser neuen Fläche gibst du eine noch etwas dunklere grüne Farbe. Jetzt zupfst du die Pfade der Fläche so zurecht, dass die Form die vom Licht abgewandte Schattenfläche bildet.

Den Schatten unter der Form (rechts im Bild) erzeugst du, indem du eine schwarze Ellipse (E) hinter der Limette zeichnest, diese auf 35% Transparenz setzt und Multiplizieren setzt (im Fenster Transparenz) und bei Effekt / Weichzeichnungsfilter / Gaußscher Weichzeichner einen Effekt von 17 Pixel wählst.

1.4. Schriftzug wählen

Da ich mit Schriften viel lieber im Illustrator arbeite (als im Photoshop) habe ich die Schrift für das Logo schon jetzt gewählt. Ich habe für den Schriftzug die Free-Font »Zag Regular« verwendet.

2. Hintergrund und Schriftzug mit Photoshop stylen

Im zweiten Schritt des Logo-Tutorials geht es ab in den Photoshop. Hier kannst du am besten einen coolen Hintergrund mit Beleuchtungseffekt erzeugen für dein Logo erstellen und deinen Schriftzug stylen.

2.1. Dunkler Hintergrund mit Beleuchtungseffekt

Als erstes öffnest du dir ein neues Photoshop-Dokument (lass den Illustrator aber weiter geöffnet) und gib der Hintergrund-Fläche die Farbe mit dem Hex-Wert #272727. Dann wählst du unter Filter / Kunstfilter / Körnung & Aufhellung und stellst folgende Einstellungen ein: Körnung 1, Aufhellungsbereich 0 und Intensität 2.

Für den Beleuchtungseffekt wählst du anschließend Filter / Renderfilter / Beleuchtungseffekte. Du musst darauf achten, dass die Lichtart bei den Einstellungen auf »Strahler« eingestellt ist.

So sieht der fertige Photoshop Hintergrund-Effekt aus.

2.2. Illustrator-Elemente in Photoshop einfügen

Als nächsten Schritt kopiert du die Limette im Illustrator (Strg+C) und fügst sie (Strg+V) in dein Photoshop-Dokument ein. Es öffnet sich das Fenster »Einfügen als«, wähle hier die Option Pixel aus. Das gleiche wiederholst du mit dem Limebot-Schriftzug. Lege für jedes Element noch eine eigene Photoshop-Ebene an.

2.3. Schriftzug stylen

Mit Ebenenstilen im Photoshop kannst du den Schriftzug des Logos jetzt noch so richtig pimpen.

Klicke dazu mit einem Doppelklick auf die Schriftzug-Ebene und stelle die Einstellungen bei Schlagschatten, Schatten nach innen und Verlaufsüberlagerung ein. Mit der Vorschau-Funktion kannst du den jeweiligen Effekt gleich kontrollieren.

Ich habe diesw Werte bei dein Ebenstilen der Schrift ausgewählt.

Das fertige Limebot-Logo

Du hast es geschafft :-) Dein Logo ist fertig gestaltet.

Ich hoffe dir gefällt das Logo und du kannst die verwendeten Illustrator- und Photoshop Funktionen für deine eigenen Logos gebrauchen. Über dein Feedback und deine Fragen freue ich mich sehr!

Die fertige Illustration

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 600x600 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.

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

2.3. Das Zeichenstift-Werkzeug ℗

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 ℗ an.

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.

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.

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

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

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

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.

6. Fugen hinzufügen

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

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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

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

9. zusätzliche 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 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!

1. Die fertige Skizze

Diese Skizze dient später als Vorlage für die Illustrator-Illustration.

Darf ich vorstellen: Das ist der kleine Roboter »Lime-Bot«. Er soll später in der Tutorial-Serie zu unserem Webseiten-Maskottchen werden. Als ersten Schritt möchte ich heute beschreiben, wie ich den Charakter und die Figur des kleinen Roboters entwickelt habe. Bei der Entwicklung eines Maskottchens kommt es nicht unbedingt darauf an, dass du der allerbeste Zeichner bist. Vielmehr ist wichtig, dass du dir Gedanken machst, welche Wirkung dein Maskottchens haben soll (möchtest du z.B. einen athletischen Superheld, einen niedlichen Panda oder vielleicht sogar einen richtigen Bösewicht gestalten).

Das Ziel dieses ersten Tutorials ist es also nicht eine perfekte Zeichnung zu erstellen, sondern einen lebendigen Charakter zu entwickeln.

2. Inspirationen sammeln

Um Inspirationen für dein Maskottchen zu sammeln ist es sehr hilfreich, dir ein Imageboard (oder Moodboard) anzulegen, bevor du mit der eigentlichen Zeichenarbeit beginnst. Ein Imageboard ist eine Collage deiner Inspirationen. Diese können ganz unterschiedlich sein und z.B. aus Farben, Architektur, Comic-Figuren, Actionhelden, atmosphärischen Bildern oder Zeichnungen entstehen. Du kannst auch mehrere Imageboards anlegen, und diese in unterschiedliche Themen kategorisieren.

Dieser Arbeitsprozess hilft dir deinen Charakter zu entwickeln, und eine genauere Vorstellung davon zu bekommen, in welchem Stil du dein Maskottchen gestalten möchtest.

Bilder für dein Imagebord findest du natürlich bei Google, aber auch Flickr, Zeitschriften, deine eigene Fotosammlung, alte Comics, die Artworks bei DeviantArt oder Artikel auf Kreativ-Blogs wie Abduzeedo liefern dir jede Menge Material.

Das ist das Imageboard für die Entwicklung meines Roboter-Maskottchens.

3. Körper- und Kopfform entwickeln

Jetzt beginnt endlich die eigentliche Zeichenarbeit. Um dich ein bisschen warm zu zeichnen, und in die Materie deines Charakters (z.B. Roboter) rein zufinden, kannst du zuerst ganz locker verschiedene Körper- und Kopfformen zeichnen. So findest du am besten heraus, welche Formen für deinen Charakter in Frage kommen. In dieser Phase ist es auch wichtig, die Größenverhältnisse der Körperteile und die Anatomie deiner Figur zu definieren.

Hierbei solltest du wieder überlegen, welche Wirkung dein Maskottchen auf den Betrachter haben soll. Runde Formen und ein großer Kopf (wie bei Kleinkindern) wirken z.B. niedlich. Eckige Formen und ein kleiner Kopf im Verhältnis zum Körper wirken dagegen stark, überlegen, eventuell sogar böse.

In dieser Skizze habe ich verschiedene Körperformen für meinen Roboter ausprobiert.

Ich habe die unterschiedlichsten Kopfformen gezeichnet.

Am einfachsten ist es, wenn du so viele Skizzen wie möglich machst. Dabei ist ein Trick (vor allem wenn du noch unsicher beim Zeichnen bist) auch mal ganz nebenbei, z.B. während eines Telefongesprächs zu zeichnen. Aus diesen spontanen Krizzeleien entstehen oft die schönsten Ideen, da du unbefangen an die Sache heran gehst. Später kannst du deine Ideen dann weiter ausarbeiten.

Am Ende dieser ersten Zeichenphase sollte die Form deiner Figur weitgehend definiert sein, damit du im nächsten Schritt die Körpersprache, Bewegung und Mimik deines Maskottchens entwickeln kannst.

4. Gestik und Mimik definieren

Du weißt also, wie dein Maskottchen aussehen soll. Jetzt kannst du dich um die Körperhaltung und den Gesichtsausdruck deines Charakters kümmern. Die Wirkung deines Maskottchens auf den Betrachter erzielst du durch eine entsprechende Gestik und Mimik.

Du solltest dir also Gedanken machen, ob dein Maskottchen z.B. herzlich, einladend, schüchtern, oder angriffslustig wirken soll.

Um die Gestik deiner Figur leichter zu erfassen, kannst du jetzt Bewegungsskizzen machen. Es reicht, wenn du deine Figur dazu nur ganz vereinfacht darstellst. Du kannst deine Figur fliegend, vor Freude in die Luft springend, nachdenklich oder meditierend skizzieren. Je mehr Skizzen du machst, desto lebendiger kannst du deinen Charakter darstellen.

Hast du die Bewegungen deines Maskottchens erfasst, solltest du im nächsten Schritt verschiedene Gesichtszüge üben. Als Hilfsmittel kannst du auch dein Imageboard zur Hand nehmen, um zu gucken wie eine bestimmte Mimik erzeugt wird. Nicht nur die Gesichtszüge, auch die Kopfhaltung ist ein wichtiges Stilmittel, um deiner Figur Ausdruck zu verleihen.

Die Skizzenblätter können ganz frei entstehen. Wieder gilt: Je mehr du zeichnest, desto besser kannst du den Ausdruck deines Maskottchens einfangen.

5. Die finale Sizze erstellen

Als letzten Schritt musst du jetzt noch die zuvor definierten Elemente (Form, Gestik, Mimik der Figur) in einer finalen Skizze zusammenfügen. Am besten fängst du mit leichten Strichen an, und arbeitest dich immer mehr ins Detail vor.

Der Lime-Bot Roboter entsteht in mehreren Zeichenschritten.

Du kannst deine Figur auch auf mehrere Blätter zeichnen, indem du sie von der vorherigen Skizze durch paust. Hier musst du allerdings aufpassen, dass deine Zeichnung nicht an Dynamik und Lebendigkeit verliert.

In der finalen Zeichnung solltest du auch Details wie Kleidung, Schattierungen, Licht / Schattenwirkung (eine Kugel kann unten dunkler sein, als oben) klären.

Es kommt bei dieser Skizze wirklich nicht auf eine perfekte Zeichnung an sondern darauf, dass dein Maskottchen den richtigen Ausdruck hat, und alle Flächen und Formen in der Zeichnung definiert sind. So bekommst du eine schöne Unterlage für deine spätere Illustrator-Illustration.

In unserem Flickr-Account kannst du dir übrigens alle Zeichenblätter noch einmal in einem größeren Format anschauen.

Und so geht’s im nächsten Teil weiter

Du hast also dein Maskottchen definiert und eine Vorlagen-Skizze für die Illustration gezeichnet. Im nächsten Teil geht es ab in den Illustrator, wo du mit der Skizze als Unterlage dein Maskottchen in Pfaden nachbaust, dir ein Farbkonzept für die Kolorierung überlegst und die Flächen deines Maskottchens anmalst.

Ich hoffe dir hat der erste Teil des Tutorials gefallen, und du kannst die Tipps und Tricks bei deinen eigenen Arbeiten anwenden. Über dein Feedback und deine Fragen freue ich mich sehr!

Du kannst dir die Icons als transparente PNG’s in zwei verschiedenen Größen oder als AI-Illustrator-Datei (Version CS4) herunterladen. Wir hoffen dir gefallen die Icons und du kannst sie gut gebrauchen, um deine nächste selbst gebastelte Geburtstags-Karte zu verzieren.

Detailansicht der Icons

Hier geht’s zum Download

• Download PNG
  .zip, 441 KB
• Download Vector
  .zip, 3,05 MB

Wir freuen uns schön auf ein weiteres, gemeinsames Blog-Jahr mit jeder Menge neuen, spannenden Artikeln :-) Über dein Feedback, Verbesserungsvorschläge und Tipps für unseren Blog würden wir uns sehr freuen!

Ellen, Manuel & Kubi :-)

Das Icon-Set enthält einen erfrischenden Kokosnuss-Drink, einen fertig gepackten Koffer, Schwimmflossen für den perfekten Schnorchel-Trip, ein leckeres Eis und einen schattigen Liegeplatz mit Blick aufs Meer ;-) Wie gewohnt kannst du dir die Icons entweder als Vektordatei (Version CS4) oder als transparente PNGs in zwei verschiedenen Größen downloaden.

Detailansicht der Icons

Hier geht’s zum Download

• Download PNG
  .zip, 316 KB
• Download EPS
  .zip, 5,24 MB

Wie gefallen dir diese Sommerurlaubs-Icons? Hast Vorschläge und Ideen für weitere Icons-Sets? Über dein Feedback und deine Tipps freue ich mich sehr!

Detailansicht der Icons

Hier geht’s zum Download

• sushi-restaurant-icons-vector.zip (Dateigröße 3,54 MB)
• sushi-restaurant-icons-png.zip (Dateigröße 543 KB)

Wie gefallen dir die Sushi-Icons? Hast du weitere Ideen für Icon-Freebies? Wir freuen uns auf deine Vorschläge :-)