• Themes
  • Blog
  • Kurs
  • Über Uns
  • Theme Bundle
  • EN
  • DE
Konto Warenkorb 0

Warenkorb

Elmastudio

Elmastudio

  • Themes
  • Blog
  • Kurs
  • Über Uns
  • Theme Bundle
  • EN
  • DE
Konto Warenkorb 0
  • Themes
  • Blog
  • Kurs
  • Über Uns
  • Theme Bundle
  • Facebook
  • Twitter
  • YouTube

Pimp Your Logo: Tipps und Tricks zum Logo-Styling in Photoshop

von Manuel
24. August 2010
Kommentare18

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

Webseiten Logos stylen
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.

Webseiten Logos stylen
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.

Webseiten Logos stylen
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.

Webseiten Logos stylen
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).

Webseiten Logos stylen
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.

Webseiten Logos stylen

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.

Webseiten Logos stylen

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.

Webseiten Logos stylen
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.

Webseiten Logos stylen

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

Webseiten Logos stylen
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.

Webseiten Logos stylen
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.

Webseiten Logos stylen
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.

Webseiten Logos stylen
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!

Artikel teilen

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Pocket (Opens in new window)
Kategorien Logos Tutorials Webdesign
SchlagwörterDesign Gestaltung Logo Photoshop Tipps Tricks

überManuel

Hallo, ich bin Manuel - Webdesigner, Illustrator und Blogger bei Elmastudio. Ich liebe Kunst und minimalistisches Design, Zeichnen, scharfes Essen, schwarzen Kaffee und dunkle Schokolade. Du findest mich auch bei Twitter, Facebook und Google+!

www.elmastudio.de

18 Kommentare zu “Pimp Your Logo: Tipps und Tricks zum Logo-Styling in Photoshop”

  1. pixakt
    24. August 2010

    sehr schick.
    Hmm… aber wie steht es dann mit der Scalierbarkeit?? Im Gegensatz zu VektorLogos?!

    Antworten
    • Manuel
      24. August 2010

      @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

      Antworten
  2. Robin
    24. August 2010

    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.

    Antworten
    • Manuel
      24. August 2010

      @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

      Antworten
  3. Peter Muth
    24. August 2010

    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!

    Antworten
    • Manuel
      24. August 2010

      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

      Antworten
  4. Jan
    24. August 2010

    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

    Antworten
    • Manuel
      24. August 2010

      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

      Antworten
  5. Webstandard-Team (Heiko)
    25. August 2010

    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!

    Antworten
    • Manuel
      25. August 2010

      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

      Antworten
  6. Rene
    25. August 2010

    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.

    Antworten
    • Manuel
      25. August 2010

      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

      Antworten
  7. Vadim
    17. Januar 2012

    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

    Antworten
  8. conny
    26. Februar 2012

    Tolles Tutorial! Werde mich die Tage garantiert mal zum „nachbasteln“ dransetzen. Danke.

    Antworten
  9. Alexander Hacke
    15. Mai 2012

    Hallo Manuel,
    danke für das ausführliche Tutorial.
    Auch einige Kommentare waren sehr hilfreich.
    Grüße,
    Alex

    Antworten
  10. nick
    17. November 2012

    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

    Antworten
  11. Tanja
    12. März 2014

    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

    Antworten
  12. Christian
    7. April 2015

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

    Antworten

Schreibe einen Kommentar zu Robin Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

Beitrags-Navigation

Vorheriger Beitrag Artikel-Serien in WordPress erstellen und verwaltenVorheriger Beitrag
Nächster Beitrag Jede Menge inspirierende Design-Elemente auf Application-WebsitesNächster Beitrag

Suche

Blog Themen

  • Blogging
  • Coding
  • CSS
  • Freebies
  • Freelancing
  • Gesundheit
  • Gutenberg
  • Health
  • Illustration
  • Inspiration
  • Link-Tipps
  • Logos
  • Mobile First
  • Persönliches
  • Plugins
  • Produktivität
  • Produktivität
  • Promotions
  • Responsive Webdesign
  • Screencasts
  • Social Media
  • Themes
  • Tipps und Tools
  • Tools
  • Tutorials
  • Typografie
  • Typografie
  • Videos
  • Web Development
  • Webdesign
  • Webfonts
  • Weiterbildung
  • WooCommerce
  • WordPress
  • WordPress Einsteiger
  • WordPress-Tipps
  • WordPress-Tutorials
  • Work-Life Balance
  • Work-Life Balance
  • Zitate

Related

Wir verwenden Cookies, um die einwandfreie Funktion unserer Website zu gewährleisten. Mehr Infos findest du in unserer Cookie-Richtlinie

Melde dich bei unserem Newsletter an

  • Facebook
  • Twitter
  • YouTube

Secure Payment via

  • Paypal
  • Stripe
  • Visa
  • Mastercard

Social

  • Twitter
  • YouTube
  • Instagram
  • Facebook

Info

  • FAQ
  • Dokumentationen
  • Showcase
  • Theme Updates
elma
  • © 2021 Elmastudio
  • Kontakt
  • AGB & Widerrufsrecht
  • Datenschutzerklärung
  • Impressum