Illustrator Tutorial - Wikinger-Logo

Tutorial zum Logo eines WikingerhelmsDie Gestaltung eines Logos ist ein oftmals diffizieler Vorgang, der neben der entsprechenden Idee, vorhandener Kreativität, auch entsprechendes Können voraussetzt. Um einen solchen Entstehungsprozess eines Logos mal genauer unter die Lupe zu nehmen, präsentieren wir Euch heute ein Illustrator-Tutorial, bei dem Schritt für Schritt das abgebildete Wikinger-Logo erstellt wird. Warum es sich lohnt bis zum Ende des Tutorials dabei zu bleiben, werdet ihr am Ende des Beitrags sehen. Diese Wikingerhelm-Logo gestaltet Ihr im übrigen mit Illutrators Form-Werkzeugen und dem Pathfinder.

Schritt 1.

Als erstes wird in diesem Illustrator-Tutorial die Hörner konstruiert. Dazu nehmt Ihr das Ellipse-Werkzeug. Mit gedrückter Umschalttaste zieht Ihr einen Kreis auf.

Step1 Image1

In der Werkzeug-Palette holt Ihr dann das Fläche-Feld nach vorne und klickt dann auf "Ohne", damit der Kreis ungefüllt ist.

Step1

Schritt 2.

Der Kreis wird dann dupliziert. Dazu nehmt Ihr das Auswahl-Werkzeug (schwarzer Pfeil). Der Kreis wird durch Anklicken aktiviert, dann Alt-Taste (zum Duplizieren) und Umschalttaste (für eine exakt rechtwinklige Verschiebung) drücken und halten und den Kreis nach oben verschieben wie in der Abbildung.

Step2 Image1

Schritt 3.

Jetzt aktiviert Ihr die beiden Kreise und ruft die Pathfinder-Palette unter Fenster > Pathfinder auf. Klickt den Button "Vom Formbereich subtrahieren". Diese Funktion erstellt eine zusammengesetzte Form, das heißt, die Ursprungsobjekte bleiben erhalten, die Form ist praktisch nur "virtuell" vorhanden.

Step3 Image1

Mit dem Button "Umwandeln" entsteht ein Pfad. (Alternativ ist es auch möglich, bei der Anwendung des Subtrahieren-Buttons die Alt-Taste zu drücken.

Step3 Image2

Schritt 4.

Als nächstes kommt die Helmform an die Reihe. Wieder startet Ihr mit dem Ellipse-Werkzeug. Klickt damit etwa in der Mitte und etwas unterhalb der Hörner, drückt die Alt-Taste und zieht ein Oval auf, so dass die Größe ungefähr zu den Hörnern passt. Dank der Alt-Taste wird das Oval von der Mitte aus aufgezogen.

Step4 Image1

Schritt 5.

Mit dem Direktauswahl-Werkzeug (weißer Pfeil - ohne das Plus-Zeichen) zieht Ihr einen Auswahl-Rahmen um den unteren Ankerpunkt des Ovals auf und löscht diesen mit der Löschtaste (Backspace).

Step5 Image1

Schritt 6.

Der entstandene Halbkreis wird mit dem Auswahl-Werkzeug ausgewählt und durch Drücken von Strg/Befehl + J geschlossen.

Schritt 7.

Als nächstes wird die Proportion von Helm und Hörnern aneinander angepasst. Wählt beide aus und klickt in der Ausrichten-Palette auf "Horizontal zentriert ausrichten".

Step7 Image1

Schritt 8.

Wenn jetzt eines der Teile in vertikaler Richtung verschoben werden soll, drückt Ihr dabei die Umschalttaste, damit es exakt senkrecht geschieht. Die Größe wird mit Hilfe des Begrenzungsrahmens angepasst. Aktiviert das Teil, dessen Größe verändert werden soll. Dann drückt Ihr die Alt-Taste (damit die Veränderung von der Mitte aus berechnet wird und zieht an einer der Ecken die Größe des Objekts zurecht. Eine proportionale Skalierung erreicht Ihr durch zusätzliches Drücken der Umschalttaste.

Step8 Image1

Wenn der Begrenzungsrahmen nicht angezeigt wird, muss Ansicht > Begrenzungsrahmen einblenden ausgewählt werden.

Step8 Image2

Schritt 9.

Für den Mittelteil des Helms wird mit dem Rechteck-Werkzeug ein Rechteck in der gewünschten Breite aufgezogen. In der Höhe überragt es den Helm oben und unten.

Step9 Image1

Schritt 10.

Das Rechteck muss mittig zum Helm ausgerichtet werden, ohne dass sich dieser verschiebt. Dazu wählt Ihr den Helm und das Rechteck mit dem Auswahl-Werkzeug aus und klickt dann noch einmal auf den Helm. In der Ausrichten- Palette verwendet Ihr wieder "Horizontal zentriert ausrichten".

Step10 Image1

Schritt 11.

Während beide noch aktiviert sind, in der Pathfinder-Palette auf "Fläche aufteilen" klicken. Die entstandenen Objekte sind gruppiert, das löst Ihr mit Strg/Befehl + Umschalttaste + G und löscht den oberen und unteren Teil des Rechtecks.

Step11 Image1

Schritt 12.

Wählt erst den rechten Teil des Helms aus und schiebt ihn durch 4 mal Drücken auf die Pfeil-nach-rechts Taste. Den linken Teil verschiebt Ihr mit vier mal Pfeil-nach-links. Durch einen Klick auf die Zeichenfläche alles deaktivieren.

Step12 Image1

Schritt 13.

Die Hörner müssen jetzt abgeschnitten werden. Dazu aktiviert Ihr den rechten und linken Teil das Helms und wählt Objekt > Pfad > Pfad verschieben. Vorschau aktivieren und eine Distanz einstellen mit einem positiven Wert.

Step13 Image1

Schritt 14.

Die beiden entstandenen Formen aktiviert Ihr und wählt Objekt > Zusammengesetzter Pfad > Erstellen (das ist nötig, damit Ihr in einem Schritt damit stanzen könnt).

Step14 Image1

Schritt 15.

Aktiviert zusätzlich die Hörner (Umschalttaste drücken), drückt die Alt-Taste und klickt auf "Vom Formbereich subtrahieren" in der Pathfinder-Palette. Dann löst Ihr die Gruppierung und löscht das Mittelteil der Hörner.

Step15 Image1

Schritt 16.

Mit dem Direktauswahl-Werkzeug werden jetzt die drei oberen Punkte des Helm-Mittelteils angeklickt - drückt dabei die Umschalttaste - und per Pfeil-nach-oben-Taste verschoben.

Step16 Image1

Schritt 17.

Für die Helm-Verzierung zeichnet Ihr einen Kreis und zentriert diesen auf dem Helm-Mittelteil (mit der Methode aus Schritt 10). Dann drückt Ihr Alt- und Umschalttaste und erzeugt eine Kopie des Kreises.

Step17 Image1

Eine dritte Kopie im selben Abstand wird mit Strg/Befehl + D erzeugt (Erneut transformieren).

Step17 Image2

Schritt 18.

Aktiviert alle Objekte und wählt Objekt > Zusammengesetzter Pfad > Erstellen.

Step18 Image1

Wählt jetzt Fenster > Grafikattribute bzw. Attribute und klickt dort auf "Füllregel Gerade/Ungerade verwenden"

Step18 Image2

Schritt 19.

Damit die Schrift sich schön verzerrt, wird sie nicht als Pfadtext, sondern als Bildpinsel angewendet. Dazu setzt Ihr den Text in der gewünschten Schriftart und formatiert alle weiteren Attribute mit der Zeichen-Palette. Der Text erhält die Farbe schwarz (100 K bzw. RGB 000, je nach Farbmodus).

Step19 Image1

Wie in Schritt 1 beschrieben, holt Ihr jetzt wieder das Fläche-Feld in der Werkzeugpalette nach vorne und gebt dem Helm eine Farbe durch Anklicken eines Farbfelds in der Farbfelder-Palette oder durch Mischen in der Farbe- Palette. Dann holt Ihr das andere (das Kontur-Feld) nach vorne und gebt der Kontur die Farbe "Ohne".

Schritt 20.

Falls Ihr Euch alle Editierungsmöglichkeiten offenhalten wollt, erzeugt Ihr Euch eine Kopie. Dann muss der Text in Pfade umgewandelt werden: Strg/Befehl + Umschalttaste + O.

Step20 Image1

Schritt 21.

Step21 Image1

Dieses Objekt zieht Ihr in die Pinsel-Palette und wählt die Option "Bildpinsel".

Step21 Image2 Neuer Pinsel

In der folgenden Dialogbox ist es wichtig, die Option "Farbtöne" zu setzen. Damit könnt Ihr die Schriftfarbe durch Auswahl der Konturfarbe bestimmen.

Step21 Image3 Bildpinsel-Optionen

Schritt 22.

Zeichnet einen Kreis um den Helm und zentriert diesen wieder horizontal. Aus dem Kreis benötigt Ihr nur den unteren Teil.

Step22 Image1

Der wird abgetrennt durch einen Schnitt mit dem Messer-Werkzeug. Aktiviert den Kreis, drückt die Alt- und die Umschalttaste und zieht das Messer einmal horizontal über den Kreis wie in der Abbildung.

Step22 Image2

Schritt 23.

Dann löscht Ihr den oberen Teil des Kreises. Achtung: wenn nichts ausgewählt ist, schneidet das Messer alles, was es findet. Der Teilkreis wurde beim Schneiden automatisch geschlossen - klickt mit dem Direktauswahl-Werkzeug auf das gerade Pfadsegment und drückt die Löschtaste.

Step23 Image1

Schritt 24.

Dem verbliebenen Kreis-Segment weist Ihr den Pinsel mit dem Text zu.

Step24 Image1

Über die Schrift werden dann noch weiße Linien mit dem Buntstift-Werkzeug gezeichnet, um einen Bart anzudeuten.

Step24 Image2

Und fertig ist das Wikinger-Logo!

Gewinnt eines von 2 signierten Exemplaren des Buches: Adobe Illustrator CS3 - Das Praxisbuch zum Lernen und Nachschlagen

Adobe Illustrator CS3Monika Gause, Betreiberin der Webseite Vektorgarten und Autorin dieses Illustrator-Tutorials ermöglicht es uns, Euch ein interessantes Angebot zu machen. Überlegt Euch einen kreativen Kommentar zu diesem Tutorial und ihr habt die Möglichkeit eines von 2 signierten Exemplaren ihres Buches Adobe Illustrator CS3 - Das Praxisbuch zum Lernen und Nachschlagen gewinnen zu können. Welcher Kommentar diese Bedingungen erfüllt wird in einem "Gremium", bestehend aus uns und Monika, nach eingehender Diskussion entschieden. Aber hiermit nicht genug! Zudem wird via Zufallsgenerator, ein weiteres signiertes Exemplar unter allen anderen Kommentaroren dieses Tutorials verlost.

Die Möglichkeit diese Exemplare gewinnen zu können ist natürlich begrenzt, daher muss Euer Kommentar bis zum 23.Oktober 2008 hier in diesem Beitrag eingegegangen sein. Die beiden Gewinner werden von uns kontaktiert und nach Ablauf der Frist hier bekanntgegeben. An dieser Stelle nochmal ein grosses Dankeschön an unsere Gast-Autorin Monika für dieses Logo-Tutorial und die beiden Exemplare ihres Buches!

Update 24.10.08: Das Gewinnspiel ist beendet und es stehen 3 Gewinner fest! Ihr habt richtig gelesen, es sind 3! Das "Gremium" hat sich aufgrund der Vielzahl an interessanten Antworten für zwei kreative Antworten entschieden ( danke an Monika für das zusätzliche Exemplar!). Außerdem hat der Zufallsgenerator einen weiteren zufälligen Gewinner ermittelt. Gewinner sind die Kommentare folgender Teilnehmer: Rüdiger & Alexandra für die kreativsten Kommentare und Herr Doktor Focks, der via Zufallsgenerator ausgewählt wurde. Herzlichen Glückwunsch an alle Gewinner! Monika wird sich mit Euch bezüglich des Versenden des jeweiligen Exemplares und der Widmung in Verbindung setzen. Allen anderen sei auch wieder diesmal gesagt, dass nächste Gewinnspiel steht bereits in den Startlöchern!

  1. Frank
    14 Okt 2008, 15:08

    Hallo,
    gutes Tutorial. Man kann alles gut nachvollziehen. Bei vielen Tutorials im WWW ist das ja nicht immer der Fall.
    Aber wäre es nicht sinnvoller wenn man eher ein web 2.0iges Logo erstellt. Ich denke das würde die Leserschaft eher ansprechen. Ich weiß nicht ob sich viele Leser jetzt einen Wikingerhelm als Logo machen möchten.

    Gruß Frank


  2. Webstandard-Team
    14 Okt 2008, 15:17

    @Frank: Es geht hierbei ja nicht in aller erster Linie dabei das Wikinger-Logo zu erstellen, sondern die Technik zur Erstellung eines Logos erlernen. Und "Web2.0-Logos" gibt es bereits wie Sand am Meer, da ist ein wenig Abwechslung nicht schlecht ;o) Aber schön das es dir gefällt. Du bist damit bisher einziger Teilnehmer am Gewinnspiel ;o)


  3. Jenny Kettler 14 Okt 2008, 16:09

    Hallo Webstandard-Team, ("heut.zum.ersten.Mal.hier.bin.aber.gleich.super.find.und.RSS-Feed.abonniert.hab"), wollt schnell mitteilen, dass das Tutorial super ist ("manche.Dinge.schon.gesehen.hab.aber.nie.so.schnell.und.effizient.hinbekommen.hätt"), werds gleich mal ausprobieren ("nachdem.ich.mit.der.Arbeit.fertig.bin.und.mein.Chef.mich.nicht.mehr.mit.Jobs.zu.schmeißt"). Freu mich auf viele neue News, Tipps und Tricks! J.


  4. Martin Becker
    14 Okt 2008, 17:21

    Hallo Webstandard-Team,

    find die Buchaktionen von euch immer wieder gut, auch einen Dank an den Spender ;-)

    Grüße,
    Martin


  5. Andreas 14 Okt 2008, 20:29

    Also ich finde das Logo soweit schon ganz nett und das Tutorial auch gut nachvollziehbar. Der Schriftzug gefällt mir aber nicht...

    Nicht "web zwei nullig" genug? Vielleicht möchten wir ja konventionelle Schwedenhäuser verkaufen. Da ist diese Logo sicherlich ganz passend... :-D


  6. Webdesign Meppel
    14 Okt 2008, 22:06

    Very good tutorial! Pretty basic but a good explanation of some very usefull features in Illustrator!


  7. Arne Riemann
    15 Okt 2008, 08:45

    Als altes Nordlicht, bin ich natürlich besonders vom Wikinger-Logo angetan, und finde es sehr gut das es nicht immer auf Web 2.0 rausläuft. Es gibt ja bei weitem noch andere Felder wo Grafik eine Rolle spielt :-) Vielen Dank für das Tutorial!


  8. Rüdiger 16 Okt 2008, 13:05

    Wenn auch untypisch, unorthodox und zeitlich unökonomisch:
    Da es sich hier um ein 24-Schritte-Tutorial handelt, habe ich es mal einfach so mit der zeitlichen Maßgabe eines Adventskalenders belegt - also pro Tag ein Schritt.
    Ich habe also mit dem heutigen Tag den 2. Schritt hinter mir und freue mich schon auf Tag Nr. 3.
    Ich muss zugeben: Man muss seinen inneren Drang, das komplette Tutorial direkt durchzuarbeiten, gehörig zügeln. Aber es lohnt sich und verspricht mindestens 24 leckere Erfolgserlebnisse. !!!Natürlich ist davon abzuraten, diese Methode während eines auftragsbezogenen Produktionsverlaufs anzuwenden!!!


  9. Geri 16 Okt 2008, 13:39

    Hey Hey Wickie!
    Gutes Tutorial - nicht nur für starke Männer!

    Lg
    Geri


  10. Chris
    17 Okt 2008, 05:00

    Sehr schönes Tutorial und vor allem mal sehr ausführlich und auch für die Laien verständlich. Meistens sind Tutorials ja eher fachchinesisch gehalten und der User ist am Ende genauso schlau wie vorher. :-)


  11. Tobias Stewen 17 Okt 2008, 09:09

    Das Tutorial ist sehr gut (gerade auch für mich), da es zwar viele Tutorials zu AI gibt, aber nur sehr selten die Technick an sich auch erklärt wird (meinst nur eine anreihung von Befehlen wie: klcik hier, klick da, 20px eingeben, fertig).

    Ich würde mich freuen, wenn es hier eine Reihe von solchen Tutorials geben würde (ev. eine eigene Kategorie). Das ganze halt nicht nur auf AI bezogen =)

    Danke & Gruß
    Tobias


  12. Julius
    19 Okt 2008, 14:02

    Hallo allerseits. Bin heute zum ersten Mal auf diese Seite gestolpert und fühle mich recht wohl. Den Feed habe ich direkt aboniert, und werde mal schauen, was da noch so kommt.

    Und nun ein direktes Feedback zum Tutorial:

    Schön gemacht. Allerdings hätte die Autorin ggf. noch erklären können, warum man z.B. die Hörner aufteilt und nicht einfach dem Rest eine weiße Outline gibt. Desweiteren wurde bei den weißen Strichen im "Bart" dieses Prinzip leider nicht angewandt. Schade.

    Das sind aber auch schon die einzigen Kritikpunkte. ;)

    Da könnte ich doch glatt auch mal eines basteln. Jemand Wünsche?


  13. Paul Sanderson
    19 Okt 2008, 22:09

    Hi my name is Paul Sanderson an in feb this year I started this http://www.wscoop.com its a digg style site but dedicated to web design and development.

    You are more than welcome to promote your own sites, projects, comments and all… at the moment the posts go straight to the font page to it is good exposer and at least some sweet backlinks

    A mention or two about wscoop in your blog would do wonders too.

    Thanks

    Paul


  14. Camal 22 Okt 2008, 09:57

    Hallo,
    echt tolles Tutorial, mir gefällt die Idee, wie die Hörner erstellt worden sind. Zu bemängel habe ich leider (?) nichts :)

    Und die Aktion mit der Verlosung finde ich auch super. Wünscher euch viel Glück mit eurem Buch.

    Mit freunlichen Gruß Camal


  15. ar0ma 22 Okt 2008, 13:28

    Hallo,

    vielen Dank für das Tutorial.

    Es gibt, meiner Meinung nach, viel zu wenig deutsche Tutorials für Illustrator.
    Währe schön wenn Ihr einfach weiter macht.

    Ach, bevor ichs vergesse, könntet Ihr mir zu diesem Tutorial bitte auch das Buch dazu schicken.

    Vielen Dan im Voraus. :)

    Gruß ar0ma


  16. Metin
    22 Okt 2008, 14:42

    Hallo,
    also ich finde das Tutorial ganz nett. Das Logo sieht echt super aus, aber der Text Effekt gefällt mir irgendwie nicht :) Aber das kann man ja änder.

    Am Buch hätte ich auch interesse ^^

    Gruß Metin


  17. Alain 22 Okt 2008, 17:10

    Hallo

    Dieses Tutorial finde ich gut und es ist einfach nachvollziehbar.

    Gruss
    Alain


  18. ConnyLo
    22 Okt 2008, 20:08

    Kniffelig wirds an der Stelle mit den Hörnern, aber es macht Spaß, die Lösung kleinschrittig mitzuverfolgen.

    Weiter so ;-)

    Conny


  19. Herr Doktor Focks
    23 Okt 2008, 12:40

    Das ist doch mal ein super Tutorial. Und auf deutsch (was nicht unzweckmäßig ist, wenn man in Agenturen mit den fiesen lokalisierten Adobe-Produkten arbeiten muß und ständig irgendwelche Funktionen sucht).

    Mittels >>Schritt 1


  20. Timo
    23 Okt 2008, 13:56

    Hey,
    einfach nur toll :) Kann man nicht meckern. Achja das Buch hätte ich auch gern ^^

    See ya!


  21. Jan 23 Okt 2008, 19:08

    Coole Sache, auch für nen Nicht-Profi wie mich gut zu verfolgen. Ich würde mich über weitere Tutorials freuen.

    Gruß,
    Jan


  22. Daniella 23 Okt 2008, 19:14

    Danke für das hilfreiche Tutorial. Bin immer glücklich als Freehandumsteiger, tolle Illustratortutorials zu finden.

    Habe Eure Seite gleich als RSS abonniert! :o)


  23. Alexandra
    23 Okt 2008, 22:16

    Ein Buch zu gewinnen es gibt,
    da dacht ich mir ich mach schnell mit.
    Dies Tutorial ist einfach und gut erklärt,
    damit man sich in Illustrator auch bewährt.

    Gewinnst du das Buch nicht,
    behalte den Blog in deiner Sicht.
    Das nächste Gewinnspiel sei gesagt,
    bemerkt wer einen Klick zu Webstandard wagt.

    Ok... das ist bestimmt nicht das beste Gedicht,
    aber Ihr hattet um einen kreativen Kommentar gebeten :)


  24. Zoe 26 Apr 2009, 11:03

    Hallo, habe dieses Tutorial gefunden, weil ich nach Wikingerhelm gesucht habe. Wir machen mit der Jugendarbeit dieses Jahr ein Wikinger-Camp. Dazu wollen wir auch ein T-Shirt für die Kinder machen. Dafür würde sich dieser Wikinger-Helm ganz gut eignen. Da wir als Gruppe aber gar keinen Zugriff auf den Illustrator haben, wollte ich fragen, ob mir jemand netterweise dieses Wikingerhelm in groß zuschicken kann, damit man ihn vorne groß auf ein T-Shirt machen kann.
    Würde mich sehr freuen. Lieben Gruß Zoe.


  25. Lee 02 Jun 2009, 19:05

    Herzlichen dank für dieses Tutorial! Da ich noch ganz am Anfang stehe, freue ich mich um so mehr um gute Tuts, die auch für einen Anfänger nachvollziehbar sind!
    Bin bereits stolze Besitzerin eurer "Illustrator-Bibel" und nun fleissig am lernen! Einen kleinen Wunsch hätte ich, ein paar Tutorials mehr im Buch fände ich von Vorteil, um das Gelernte anschliessend anschaulich umsetzen zu können. Vielleicht gebt ihr mal ein Buch nur mit Tutorials heraus?
    Würde mich sehr freuen!
    Mit lieben Grüssen, Lee


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage