Das Logo ist eines der wichtigsten und ausdrucksstärksten grafischen Elemente einer Firma, eines Produkts oder auch eines Blogs. Daher ist es besonders wichtig, bei der Gestaltung eines Logos viel Liebe ins Detail zu stecken, und so das Beste aus einer Logo-Idee herauszuholen. Im Webdesign ist es manchmal auch sinnvoll, ein bestehendes Print-Logo für die Webseite noch etwas zu stylen, damit es im Header der Webseite die richtige Wirkung erzielen kann. Ich zeige dir anhand des »Adventurer« Trekking-Logos, welche Tricks du beim Logo-Styling in Photoshop anwenden kannst.
Das fertige Logo
So sieht das Ergebnis aus, nachdem das Logo mit Hilfe von Photoshop gepimpt wurde.
1. Die Vektor-Vorlage des Logos
Ich gehe als Vorlage in diesem Tutorial davon aus, dass es bereits eine Vektor-Vorlage des Logos gibt. Für das Adventurer-Logo habe ich beispielsweise eine Wappenform mit Bergsilhouette als Hintergrund erstellt, eine Bandarole mit Hilfe der Illustrator-Funktion »Verzerrungshülle / Mit Verkrümmung« gestaltet, sowie die Bären-Silhouette bei iDesign Vectors heruntergeladen. Als Logo-Schriften verwende ich die Free-Fonts America Sans und Droid Serif.
Die Adventurer Logo-Vorlage als EPS-Vektordatei.
2. Die Photoshop-Datei anlegen
Als ersten Schritt erstellst du dir eine neue Photoshop-Datei für dein Logo. Da du die Pixeldatei später nicht mehr größer skalieren kannst, solltest du schon wissen, in welcher Größe du dein Logo später benötigst.
Dann ziehst du deine Vektor-Ebenen, Schritt für Schritt in die Photoshop-Datei. Dabei wandelst du die Vektor-Fläche in ein Smart-Object um. Jede Fläche, Schriftzug etc. des Logos legst du in eine eigene Ebene in Photoshop ab. So kannst du Schritt für Schritt Ebenenstile auf die einzelnen Elemente deines Logos anwenden.
Deine Ebenen kannst du am besten verwalten, wenn du ihnen einen Namen gibst.
3. Das Wappen mit Hilfe von Ebenenstilen und Filtern stylen
Ziel des Logo-Stylings ist des, dem Logo mehr Tiefe, Struktur und einen leichten 3D-Effekt zugeben. Außerdem möchte ich einen dezenten Glanz-Effekt erzeugen, damit das Logo hochwertiger wirkt. Wichtig ist, dass du alle Effekte nur leicht anwendest.
Als erste Fläche nehme ich die Wappenform im Hintergrund des Adventurer-Logos. Alle anderen Ebenen blende ich vorerst aus.
Die einfache Wappen-Fläche ohne Effekte.
Ich möchte die Fläche wie einen metallischen Rahmen wirken lassen. Das Logo soll aussehen, als sei es einige Millimeter dick. Dazu nutze ich die Ebenenstile der Fläche (die Stile öffnest du mit einem Doppelklick auf die Ebene). Ich gebe der Fläche einen linearen Verlauf von Weiß auf Schwarz (metallischer Effekt), eine weiße Kontur (wirkt wie eine Materialkante, auf der das Licht reflektiert) und einen Schatten nach innen (dieser erzeugt einen 3D-Effekt).
Das Licht soll von oben auf das Wappen scheinen, so dass die Farbigkeit nach unten hin dunkler wird.
Als nächstes blende ich die Ebene mit der inneren Wappen-Fläche ein.
Aus dieser Fläche möchte ich eine haptisch wirkende Struktur erzeugen (sie soll samtig, leicht rau wirken, wie ein Naturmaterial). Dazu kannst du die Filter in Photoshop nutzen. Ich gebe der Fläche mit Rauschfilter / Rauschen hinzufügen ein Filter von 1 Pixel.
Außerdem wende ich wieder Photoshop-Ebenstile auf der Fläche an. Um die Wirkung zu erzeugen, dass die zweiter Fläche ungefähr 2-3 Millimeter vertieft liegt, erzeuge ich eine schwarze Kontur nach innen, einen schwarzen Schein nach innen, sowie einen ganz leichten, weißen Schein nach außen. Um zu betonen, dass das Licht auf den oberen Bereich der Fläche scheint, nutze ich den Ebenstil »Verlaufsüberlagerung« und stelle einen Verlauf von Weiß auf Transparenz ein.
Die Wappen-Fläche ist jetzt fertig gestylt.
4. Die weiteren Logo-Elemente stylen
Die Bergsilhouette ist eine weiße Fläche, die ich einfach nur auf 30% Transparenz und Multiplizieren gesetzt habe. Der Bär soll die Wirkung bekommen, als sei er noch einmal leicht in der Wappen-Fläche ein gestanzt (ca. 1-2 Millimeter). Dazu gebe ich ihm die Ebenenstile Schlagschatten, Schatten nach innen, Schein nach innen und Verlaufsüberlagerung. Außerdem bekommt der Bär auch einen 1 Pixel starken Rausch-Filter.
Weiter geht es mit dem Styling der Schriftzug-Banderole. Für die grüne Fläche verwende ich den Filter Leinwand. Dann bekommt die Banderole noch den Ebenstil Kontur. Ein praktische Trick für die Seitenelemente der Banderole (die ja auf einer eigenen Ebene liegen) ist es, den Ebenenstil zu kopieren. Das machst du, indem du mit der rechten Maustaste auf die Ebene klickst, und »Ebenenstil kopieren« aus dem Dropdown-Menü auswählst. So musst du die Stile nicht noch einmal neu eingeben. Die braune Hintergrund-Fläche der Banderole bekommt einen dunklen Verlauf mit dem Ebenenstil »Verlaufsüberlagerung, ineinanderkopieren«.
So sieht die fertig gestylte Banderole des Logos aus.
Die Schriftzüge des Logos kannst du stylen, indem du Textschatten mit dem Ebenenstil Schlagschatten (helle oder dunkle Farbe) erzeugst. Dem Adventurer-Schriftzug habe ich außerdem mit Verlaufsüberlagerung einen Verlauf gegeben, so dass die Schriftfarbe nach unten leicht dunkler wird.
Der Durango-Schriftzug wirkt durch einen hellen Schlagschatten auch wieder leicht aus der Fläche ausgestanzt.
Die Schriftzüge des Logos gestylt.
Als weiteren Effekt kannst du deinem Logo noch einen leichten Glanz-Effekt geben, indem du auf einer neuen, leeren Ebene einen Kreis ziehst, und mit einem weichen, weißen Pinsel (leicht transparent gesetzt) einmal unterhalb des Auswahl-Kreises entlang malst.
So kannst du schnell Glossy-Effekte setzen.
Diese Technik kannst du auch anwenden, um der Banderole noch etwas dunklere Schatten zu geben, und das Logo so noch etwas 3D-mäßiger erscheinen zu lassen.
5. Das Ergebnis des Photoshop Logo-Stylings
Mit all diesen tollen Photoshop-Effekten kannst du ein Logo vor allem für die Verwendung im Webdesign richtig schön pimpen. Und so sieht das fertig gestylte Adventurer-Logo aus.
Mit jede Menge Tricks und Effekten kannst du aus einem Logo einen echten Hingucker werden lassen.
Ich hoffe dir hat dieses kleine Photoshop-Tutorial gefallen, und du kannst den ein oder anderen Trick auch für das Styling deiner eigenen Logos verwenden.
Kennst du weitere hilfreiche Photoshop-Tricks, die für das Gestalten von Webseiten-Logos hilfreich sind? Über deine Tipps und dein Feedback freue ich mich sehr!
sehr schick.
Hmm… aber wie steht es dann mit der Scalierbarkeit?? Im Gegensatz zu VektorLogos?!
@pixakt: Vielen Dank für deinen Kommentar :-)
Falls du noch nicht ganz sicher bist, welche Größe dein Logo bzw. Webseiten-Header haben soll, kannst du die Photoshop-Datei einfach größer und in einer hohen Auflösung (300dpi) anlegen. Dann kannst du das fertige Logo später auf jeden Fall vielseitig verwenden.
Ansonsten finde ich es immer am besten, sowohl eine Web- als auch eine Print-Variante (Vektoren) eines Logos zu gestalten. So ist das Logo besonders flexibel einsetzbar.
Viel Spaß bei der Logo-Gestaltung und viele Grüße,
Manuel
Schöner Beitrag. Das Ergebnis sieht natürlich viel besser aus als vorher.
Obwohl mir der letzte Schritt nicht so gut gefällt. Ich bin generell aber kein Fan von Glanz-Effekten.
@Robin, vielen Dank für deinen Kommentar. Es freut mich, dass dir der Beitrag und das Logo-Styling gefällt :-)
Klar, kannst du den letzten Schritt des Tutorials auch weglassen, wenn du Glanz-Effekte und Highlights persönlich nicht so magst.
Viele Grüße,
Manuel
Glossy Effekt ist im Prinzip ok, aber doch nur für glatte Flächen, oder? Weiter oben hast du für den Hintergrund eine „…haptisch wirkende Struktur erzeugt (sie soll samtig, leicht rau wirken, wie ein Naturmaterial).“ Widerspricht sich das nicht?
Sonst super Anleitung, vielen Dank. Hab noch nicht mit Illustrator gearbeitet, aber die PS-Effekte wirken schon cool!
Hallo Peter,
vielen Dank für dein Feedback zum Logo-Artikel. Freut mich sehr, dass dir die Photoshop-Effekte gefallen :-)
Da das Logo-Design ja keine fotorealistische Darstellung sein soll, kann man meiner Meinung nach auf jeden Fall matte Flächen mit Highlights kombinieren.
Hier im Logo-Beispiel habe ich mir aber eher vorgestellt, dass eine transparente (Glas)-Fläche über dem vertieften Bereich des Wappens sein könnte, und der Glanz-Effekt so entsteht.
Viele Grüße,
Manuel
Hallo Manuel,
mich würde interessieren, wie lange Du in etwa für die Vektorvorlage und das Webstyling des Logos benötigt hast. Das Ergebnis sieht wirklich gut aus.
Viele Grüße
Jan
Hallo Jan,
vielen Dank für deinen Kommentar. Es freut mich, dass dir das Logo-Ergebnis gefällt :-)
Mhh, das ist eine schwierige Frage…es kommt immer ein wenig darauf an, ob man schon eine gute Logo-Idee im Kopf hat (oder eventuell sogar schon ein paar Skizzen zum Entwurf gemacht hat).
Auf jeden Fall ist die Logo-Findung im Illustrator der zeitlich aufwendigere Teil, da man dort das Logo-Design definieren muss. Hat man etwas Übung im Umgang mit den Photoshop-Effekten, kann man das Styling dann recht schnell machen. Ein paar Stunden sitze ich aber insgesamt bestimmt dran (vielleicht insgesamt 3-5 Std.).
Viele Grüße, und einen schönen Abend :-)
Manuel
Klasse Tutorial Manuel. Diese Step-by-Step Tutorials sind eine wirklich hilfreiche Sache, so können selbst Einsteiger (nahezu) jeden Schritt einfach nachvollziehen und was viel wichtiger ist, selbst ausprobieren! Kompliment!
Hallo Heiko
Vielen herzlichen Dank für deinen Kommentar. Es freut mich ganz besonders, dass dir das Tutorial so gut gefällt :-)
Ja, du hast vollkommen recht. Mir ging es bei diesem Tutorial vor allem darum, dass man selbst solche Effekte relativ einfach nachmachen und ausprobieren kann. Und Photoshop-Effekte machen ja auch riesig Spaß :-)
Viele Grüße
Manuel
Bzgl. Skalierbarkeit …
Wenn man statt der Auswahl, einfach ein „Shape“ nimmt und über einen Ebeneneffekt einen Verlauf – weiß zu transparent – legt und ein bisschen die Deckkraft reduziert, so erhält man den gleichen Effekt.
Via Maskierung kann man dann dieses Shape entsprechend beschneiden.
Vorteil des Ganzen: Skalierbarkeit, da Vektor.
Hallo Rene,
vielen Dank für deine sehr hilfreiche Ergänzung.
Die Methode die du erklärst finde ich super!
Mit der Shape-Funktion ist, genau wie du beschreibst, die Erstellung eines solchen Logos auch möglich, damit man alles skalierbar hat.
Viele Grüße
Manuel
Hallo,
dein Logo sieht sehr gut aus und die Erklärungen dazu sind sehr gut. Jedoch habe ich eine Frage zu dem Bären. Ich bekomme es nämlich nicht hin, dass der Bär wie eingestanzt wirkt. Welche Einstellungen hast du denn genau vorgenommen. Wenn ich die Beschreibung aus deinem Artikel nehme, komme ich nicht auf das gleiche Ergebnis.
Danke
Tolles Tutorial! Werde mich die Tage garantiert mal zum „nachbasteln“ dransetzen. Danke.
Hallo Manuel,
danke für das ausführliche Tutorial.
Auch einige Kommentare waren sehr hilfreich.
Grüße,
Alex
Hallo Manuel,
der eingestanzte Bär auf deinem Logo sieht echt klasse aus.
Könntest du mir die details verraten wie du das so gut hinbekommen hast?
Ich meine damit die einzelnen Werte. Habe es auch versucht aber
nie so gut hinbekommen wie du,deshalb möchte ich gerne wissen was ich
noch falsch mache.
beste grüsse
nick
Hallo Manuel,
Weißt Du wie ich den geprägten Effekt im Illustrator hinbekomme? Ich brauche für eine Webseite das Logo in 180 x 50 Pixel, und als jpg ist es leider sehr verschwommen, deshalb würde ich es gerne als Vektor nachbauen, lieben danke vorab!
Tanja
Ich bin über Google auf diesen Beitrag gestoßen, weil ich gerne mein Logo ändern möchte und muss sagen der Beitrag hat mir echt geholfen, sehr einfach nachzumachen. Vielen Dank :-)