inkscape_logoDa der Relaunch meines Blogs immer näher rückt (Stichtag: 09.11.) und noch ein passendes Logo für das neue Theme her musste, habe ich mich die letzten Tage an die Arbeit gemacht und ein wenig rumgebastelt. Gerade im Logodesign Bereich, für Flyer aber auch Stadtpläne und Landkarten ist ein Vektorgrafik Editor fast immer die erste Wahl. Da wir uns ein professionelles Zeichenprogramm nicht leisten wollen (und auch nicht können), greifen wir für den Webbereich auf den einfach zu bedienenden aber dennoch umfangreichen Open-Source Editor Inkscape zurück. Was dabei rausgekommen ist und vor allem wie es entstanden ist, erfahrt Ihr in diesem Artikel.

Schritt 1: Die Idee

Bevor man sich ans Werk macht, sollte man eine ungefähre Vorstellung  haben, wie das Logo im Endeffekt aussehen soll. Mein aktuelles Logo gefällt mir zwar immer noch recht gut, aber zum neuen Theme Layout passt es einfach nicht mehr.  Anfangs habe ich also etwas gegoogelt und ein paar Eindrücke gesammelt. Der Bloggonaut sollte jetzt moderner, einfarbig und minimalistischer in Button-Form dargestellt werden, der Hintergrund “shiny” im Web2.0 Stil. Schnell entstand so eine Idee im Kopf, welche jetzt nur noch umgesetzt werden musste.

Schritt 2: Der erste Entwurf

entwurfMein erster Entwurf entstand mit Photoshop und sah in meinen Augen schon recht ansehnlich aus. Das Problem: das Logo lässt sich nicht beliebig vergrößern ohne Qualitätsverlust. Außerdem ist Photoshop nur beschränkt dafür geeignet, Logos zu gestalten. Was ist wenn ich mein Logo auf ein T-Shirt oder eine Tasse drucken möchte? Mit einem simplen .jpg Image in niedrieger Auflösung eher nicht zu empfehlen. Die Lösung: Man nimmt ein Vektorgrafik Zeichenprogramm. Da eine Vektorgrafik nicht, wie bei herkömmlichen gif, jpg oder png Images, auf ein Pixelraster mit verschiedenen Farbwerten basiert,  lässt sich so die Grafik verlustfrei dehnen, verkleinern und vergrößern. Für den Entwurf greift man dann auf Photoshop zurück, fotografiert, oder zeichnet seine Idee auf ein Blatt Papier und scannt es später ein, denn Inkscape kann Pixelgrafiken in Vektorgrafiken umwandeln. Praktisch oder?

Schritt 3: Entwurf in Vektorgrafik umwandeln

vektorgrafikNatürlich könnt Ihr auch direkt mit Inkscape loslegen aber dafür solltet Ihr für Top Ergebnisse schon etwas mehr Erfahrung haben. Nachdem wir nun Inkscape gestartet haben, öffnen wir eine neue Bilddatei, in diesem Fall unseren Entwurf, makieren Ihn mit der Maus und öffnen mittels der Tastenkombination shift + alt + b die Umwandlungsmaske. In meinem Fall habe ich alle Werte unverändert gelassen. Ihr könnt aber auch etwas rumspielen, bis für eure Vorlage ein akzeptables Ergebnis herauskommt. Ein umfangreicheres Tutorial zum vektorisieren von Pixelgrafiken findet Ihr auf der offiziellen Inkscape Webseite. Das schöne an der Sache war, das Inkscape meinen Entwurf sofort wunderbar abgerundet hat und so eine Korrektur der Helmkonturen garnicht mehr nötig war.

Schritt 4: Logo freistellen

freigestelltIm Idealfall haben wir das Logo bereits in einem anderen Zeichenprogramm freigestellt und können diesen Punkt überspringen. In meinem Fall habe ich den Hintergrund mit importiert um euch kurz zu zeigen wie man das Logo freistellt. Wir machen also einen Doppelklick auf den Bereich, den wir nicht mehr benötigen, um so die Knotenpunkte der Vektorgrafik angezeigt zu bekommen. Danach wählen wir mit gehaltener shift Taste die Knotenpunkte aus, die gelöscht werden sollen und wählen  im Menu “die gewählten Knotenpunkte löschen” aus. Das somit freigestellte Logo habe ich nun zur besseren Übersicht eingefärbt und erstmal zur Seite geschoben.

Schritt 5: Shiny Button gestalten

Für einen Button im refektierenden Web2.0 Stil, eignet sich Inkscape ebenfalls hervorragend. Nachdem wir das Logo zur Seite geschoben haben erstellen wir als nächstes mit F4 ein Rechteck. Durch die Hilfslinien am Rand des Rechtecks lassen sich die Kanten bequem abrunden (Punkt 1). Wenn nicht schon sichtbar, drücken wir shift + strg + F um in die Farbmaske zu gelangen. Dort können wir den Button einfärben, die Konturgröße und Farbe verändern, sowie die Farben des Farbverlaufs festlegen (Punkt 2).

farbwahl

Schritt 6: Farbverlauf und Glanzeffekt

Als nächstes duplizieren wir den Button 2x mit strg + D und schieben die 2 Duplikate vorerst zur Seite.  Im ursprünglichen Rechteck können wir  mit strg + F1 nun einen hübschen Farbverlauf  erstellen (Punkt 1). Beim ersten Duplikat erstellen wir ebenfalls ein Farbverlauf, entfernen aber vorher die Konturlinie, ändern die Farben in Schwarz/Weiss und senken die Deckkraft in der Farbmaske (Punkt 2). Danach nehme wir uns das zweite Duplikat zur Brust und kreisen einen Teilbereich mit dem BezierKurven Tool (shift + F6) ein (Punkt 3), wählen die soeben gezeichnete Kontur und das Rechteck mit gedrückter shift Taste im Pfadmodus aus und drücken danach strg + * um die 2 Pfade mittels überschneiden zu verschmelzen (Punkt 4). Auch bei diesem Teilstück wird die Kontur in der Farbauswahl entfernt und der Farbverlauf leicht angepasst.

web20button

Schritt 7: Zusammenfügen

Zum Schluss legen wir alle Objekte übereinander und nehmen noch leichte Größen- und Farbkorrekturen vor. Die Teilstücke lassen sich übrigens mit den Tasten PgUp und PgDn nach oben bzw. unten verschieben, falls ein Teilstück ein anderes verdecken sollte. Danach ist das Logo fertig und wir können es als Webgrafik exportieren. Was am Ende bei mir rausgekommen ist, seht Ihr hier:

neueslogo

Viel Spass beim nachmachen! :-)

Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können. MisterWong  Y!GG  Webnews  Wikio DE  Infopirat  SEOigg  Hype  Facebook 

Ähnliche Beiträge: