Bei der Gestaltung eines Webseiten-Logos gibt es jede Menge Details zu bedenken. Farben, Schriften und Symbole müssen ausgewählt und untereinander stimmig verwendet werden. Wie du ein Logo mit einem illustriertem Hunde-Maskottchen in deinem Grafik-Programm selbst erstellen kannst und was du dabei beachten solltest, möchte ich dir anhand des »Lola – i am a Lemon Beagle« Logos zeigen.
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.

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

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.

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.

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!

15 Kommentare
Sehr cool… Muss ich mal ausprobieren :D
Antwort an Chrissy
Hallo Chrissy,
freut mich, dass dir das Lola Logo-Tutorial gefällt :-)
Gruß Manuel
Antwort an Manuel
Ich frag mich nur gerade… muss ich für jeden Pfad ne neue Ebene erstellen? (Mach das ehrlich gesagt grad in Photoshop *G*)
Antwort an Chrissy
Hallo Chrissy,
für die Pfade brauchst du eigentlich nicht extra Ebenen anlegen, im Illustrator zumindest. Im Photoshop gibt es für Pfade ja die extra Pfadebenen. Die eignen sich wahrscheinlich dann am besten…
Viel Spaß bei der Logo-Gestaltung und viele Grüße,
Manuel
Ich mag Lolas leicht verdrehten Blick! =D
Antwort an Jonas
Hallo Jonas,
ja, die Fotos von Lola bei Flickr waren zu lustig, daher habe ich sie hier im Logo auch etwas schräg schauen lassen ;-)
Gruß Manuel
Lieber Manuel, wau-wow! Auch wenn ich keine Grafikerin bin, dein Tutorial ist klasse! So kann ich mir vorstellen, welche Arbeit hinter so einem Logo steckt. Die Inspirationsquelle ist aber auch wirklich süß! viele Grüße, tina
Antwort an tina bauer
Hallo Tina,
vielen Dank für dein tolles Feedback. Das freut mich, dass dir Lolas Logo so gut gefällt :-) Ja, Lola ist echt eine wahre Hunde-Heldin, und durch die verschiedenen Farben im Fell eignen sich Beagles echt super für eine Logo-Illustration :-)
Gruß Manuel
Hallo Manuel,
ich bin gerade dabei auf Grundlage des WordPress Tutorials von Ellen (großes Lob: Das Tutorial ist spitzenklasse) eine Website zu erstellen. Dein Logo Tutorial kommt wie gerufen, da es sich bei der Homepage um meine Beagle dreht. Vielen Dank für die Inspiration …
Gruß Nicole
Antwort an Nicole
Hallo Nicole,
hey, dass ist ja genial, dass du eine Webseite über Beagles hast. Aber deine eigene Illustration von dir und deinen Hunden ist auch wirklich genial, und passt super in den Webseiten-Header :-)
Es freut Ellen und mich auch sehr, dass dir das WordPress-Tutorial so gut gefällt. Deine Seite sieht echt toll aus. Die Pfoten in der Slider-Navigation sind super :-)
Viele Grüße Manuel
Was für ein süßer Hund. Sehr ansprechend, dieses Logo! Besonders gut gefallen mir die kleinen Zeichen links und rechts neben der untersten Zeile.
Sehr gut gelungen, Eure Lola, dazu passt doch auch ganz gut einer meiner Lieblingssongs http://www.myvideo.de/watch/1791532/The_Kinks_Lola
Finde das Logo auch sehr gelungen und das Tutorial sehr gut erklärt. Danke!
Ich bin so froh, daß ich Eure Seite entdeckt habe. Jetzt braucht man nur noch genügend Zeit das alles auszuprobieren. Meinen Blog habe ich schon mit Eurem Free Theme realisiert. Als nächstes wird jetzt das Logo hier dran kommen und als Vorlage muß mein Terrier dran glauben.
Vielen Dank für den vielen Input ! Habe Euch auch schon weiterempfohlen.
Gruß,
Simone
das ist kein Logo! – Das ist eine recht hübsche Illustration, aber kein Logo! – Warum, weil ein Logo schwarz/weiß funktionieren muss.