4. Januar 2011

Schlichtes Web-Logo mit Photoshop erstellen

Filed under: Tipps und Tricks,Tutorials von Michael um 17:24
 

In diesem kleinen Tutorial will ich versuchen eine Anregung zu geben wie man sich in Eigenleistung ein einfaches aber relativ ansehnliches Logo für die eigene Webseite erstellt.
Sollte das Logo auch zum Ausdrucken geeignet sein (Visitenkarten, Sticker, oder was auch immer) – dann empfehle ich eine höhere Auflösung von 300dpi zu verwenden da das Ergebnis sonst pixelig rüberkommt.
Merke: verkleinern geht nachträglich immer noch – andersherum wird es schwierig.

In meinem Beispiel habe ich es allerdings bei 72dpi gelassen.

Wie immer habe ich für die Umsetzung Photoshop in der Version CS2 verwendet, und ein paar kleine Vorkenntnisse in der Bedienung von PS sind hilfreich.

einfaches web-logo 5

einfaches web-logo 5


Schritt 1:

Ich erstelle mir ein neues Dokument in der Grösse 400×200 Pixel mit weissem Hintergrund. Auf eine neue Ebene schreibe ich mit dem Textwerkzeug meinen Gewünschten Text in einem freundlichen Orange-Ton (Farbwert: #e25e16).
Als Font benutze ich Times New Roman. Für alle Letter verwende ich Grossbuchstaben in der Grösse 36pt. Nur der Anfangsbuchstabe wird etwas grösser in 48pt geschrieben um ihn etwas hervorzuheben.

einfaches web-logo 1

einfaches web-logo 1

Schritt 2:

Nun füge ich einen „Sub-Text“ hinzu den ich durch Linien abtrenne. Sowohl die Linien als auch der Subtext soll mit dem „Haupt-Schriftzug“ bündig abschliessen. Hierfür kann man entweder die Linienfunktion von PS verwenden, oder aber mit dem Textwerkzeug sogenannte Underscores „_“ setzen.

Als Farbe für die Linien wähle ich ein dunkles Blau (#1e1e51). Habe ich eine Linie erstellt dupliziere ich einfach die Ebene und positioniere die Kopie entsprechend. Zwischen die beiden Linien schreibe ich meinen Sub-Text in einem relativ hellen Grau (#c1c1c1) da er nicht zu sehr vom Haupttext ablenken soll.
Um den Sub-Text auf die entsprechende Breite zu bringen gehe ich zu Bearbeiten –> Frei transformieren und ziehe den Text auf die gewünschte Breite

Dem Haupttext, der in meinem Fall übrigens quasi aus zwei Wörtern besteht, verpasse ich noch eine farbliche Abstufung für beide Wortteile. Während der Anfang im Orange bleibt, färbe ich den Zweiten Teil des Wortes in das gleiche Blau um das ich schon den Linien gegeben habe.

Blau strahlt übrigens Seriosität aus, und Orange Lebensfreude oder Spass. Farblich sollte man das ganze also nach farbenpsychologischen Aspekten für den jeweiligen Verwendungszweck anpassen. Ich habe hier darüber übrigens vor einiger Zeit etwas über Farb-Psychologie geschrieben.

einfaches web-logo 2

einfaches web-logo 2

Schritt 3:

Soweit so gut. Das ganze sieht mir noch etwas zu schmucklos aus und könnte ein grafisches Element vertragen.

Manchmal bietet es sich je nach Webseiten-Thema an ein bestimmtes grafisches Symbol zu verwenden (Beispiel: die Lufthansa hat einen Kranich im Logo der symbolisch für das Fliegen steht) – aber da wir den eigentlichen Sinn der Webseite nicht kennen muss es eben etwas abstraktes sein.

Hierfür erstelle ich ein neues Dokument in 200×200 Pixeln Grösse, und ziehe mit dem Rechteck-Werkzeug verschieden dicke Linien – und zwar in den bereits im Textlogo verwendeten Farben (blau, orange, hellgrau…)

Wichtig ist, dass alle Linien sich auf einer Ebene befinden, damit man Sie nachher gemeinsam bearbeiten kann (man kann natürlich auch die Ebenen auf eine reduzieren, falls die einzelnen Linien auf verschiedenen Ebenen angelegt sind.)

Auch sollten die Linien nicht an den linken Rand heranreichen, etwa so wie auf dem Nächsten Bild.

einfaches web-logo 3

einfaches web-logo 3

Schritt 4:

Nun wenden wir unter Filter –> Verzerrungsfilter –> Polarkoordinaten den entsprechenden Effekt an. Dabei sollte Rechteckig -> Polar aktiviert sein. Dabei kommt dann folgendes heraus:

einfaches web-logo 4

einfaches web-logo 4

Schritt 5:

Die Ebene mit den nicht geschlossenen Kreisen ziehen wir jetzt in das Projekt in dem sich die Ebenen unseres Logos befinden (einfach mit der Maus die Ebene rüberziehen.)

Unter Bearbeiten –> Transformieren –> Drehen, drehen wir uns die Kreise so hin, dass sie zum Text hin offen sind, und positionieren das ganze wie folgt:

einfaches web-logo 5

einfaches web-logo 5

Grundsätzlich ist das ganze nun fertig. Natürlich kann man je nach Thema der Seite das ganze beliebig aufpeppen, mit Schlagschatten versehen, Farbüberläufe darüberlegen etc. etc… z.B. wirkt der Haupt-Schriftzug etwas plastischer wenn man unter Ebene –> Ebenenstil –> Abgeflachte Kante und Relief ein wenig herumprobiert (Grösse dabei eventuell auf 3 setzen). Wie immer ist der Phantasie keine Grenze gesetzt. Das was ich beschrieben habe ist jedenfalls eine Methode wie man sehr schnell und einfach zu einem brauchbaren Ergebnis ohne viel SchnickSchnack kommen könnte.

Wichtig ist immer das man sich vor Augen hält, dass sich ein Logo im Optimalfall sehr schnell einprägen sollte. Das bedeutet, dass es oft zielführender ist, wenn man auf wildes Herumgekünstel eher verzichtet und das ganze schlicht in klaren Farben hält. So machen es die allermeisten grossen Webseiten oder Firmen auch.
Natürlich gibt es Ausnahmen. Webseiten von z.B. einem Tattoo-Studio oder Grafikdienstleister müssen nicht unbedingt wie die Seite einer Versicherung daherkommen – das schliesst das Logo mit ein.

So, genug für heute 😉

So long,

Michael K.


Keine Kommentare »


No comments yet.


Leave a comment




Ähnliche Beiträge zum Thema: "Schlichtes Web-Logo mit Photoshop erstellen"


Weitere Beiträge zum Thema: