Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Photoshop Logo Tutorial: überlappende Buchstaben

Heute möchte ich mal mit dem ersten Photoshop Tutorial hier im Blog anfangen. Auch wenn ein Logo nun nichts direkt mit WordPress zu tun hat, benötigt dennoch jede Webseite ein Logo, ich denke da sind wir uns einig. Da wir gerade das Problem hatten, dass es zu dem Artikel „Advanced Custom Fields“ von Christian, kein großes Logo von ACF gab, habe ich dieses kurzerhand nachgebaut. Da es ein sehr simples Logo ist, was dennoch hübsch aussieht, möchte ich dir diese Anleitung an die Hand geben, falls du selbst einmal ein solches Logo erstellen möchtest.

Schritt 1 – Neue Arbeitsfläche erstellen

Als erstes startet wir Photoshop und erstellen eine neue Arbeitsfläche. Hierzu gehst du unter Datei » neu oder benutzt die Tastenkombination STRG+N. Da ich dieses Logo zeitgleich als Artikelbild verwende, lege ich die Größe 718×444 fest. Bei einem Logo für deine Webseite, sind diese Dimensionen natürlich kleiner (zum Beispiel 200×150). Hier sind dir natürlich keine Grenzen gesetzt. Da wir das Bild im Web verwenden wollen, legen wir noch die Auflösung auf „72 DPI“ (Pixel/Zoll) fest und wählen den Farbmodus „RGB-Farbe„.

Schritt 1 – Neue Arbeitsfläche erstellen

 

Schritt 2 – Hintergrund einfärben

Als nächstes kommt ein eher optionaler Schritt. Wir färben den Hintergrund ein. Wenn du das Logo als Bild wie hier als Artikelbild verwenden möchtest ist dieser Schritt nicht verkehrt. Wenn du es aber als Logo benutzen möchtest, welches im Normalfall einen transparenten Hintergrund hat, dann kannst du diesen Schritt überspringen.

Über die Tastenkombination STRG+SHIFT+N oder im Menü Ebene » neu » Ebene kannst du eine neue Ebene erstellen, welche wir „Hintergrund“ nennen und nun im nächsten Schritt einfärben werden.

20140722 Farbe definieren

Es gibt nun mehrere Möglichkeiten diese einzufärben.

Zunächst musst du im unteren Bereich deiner Werkzeugleiste eine Farbe definieren. Wir benutzen hier das „DRWP“-Blau (HEX: #269bce).

Du kannst hier über den Colorpicker, oder über die Eingabe von RGB Werten (und anderen), natürlich deine eigene Farbe definieren.

20140722 Füllwerkzeug auswählen

Als Nächstes wählen wir zum Beispiel das Füllwerkzeug aus. Dieses findest du ebenfalls in deiner Werkzeugleiste hinter folgendem Icon (oder durch das Drücken der Taste „G“). Standardmäßig ist hier das Verlaufswerkzeug ausgewählt. Alternativ kannst du auch die Tastenkombination SHIFT + Backspace (löschender Rückschritt) drücken und dort dann „Verwenden: Vordergrundfarbe“ auswählen. So lässt sich ebenfalls die gesamte Ebene einfärben.

 

Schritt 3 – Setzen der Buchstaben

Nun wählen wir eine hübsche Schriftart aus und setzen jeden Buchstaben einzeln (das ist wichtig, für den späteren Effekt). Ich habe in diesem Beispiel die einzelnen Buchstaben des DRWP-Logos verwendet, du kannst aber wie gesagt jede Schriftart verwenden.

20140722 Text-Werkzeug

Über das Text-Werkzeug (Tastenkombination STRG+T) kannst du nun jeden Buchstaben schreiben. Wichtig ist hierbei, dass die Anreihung der Ebenen „falsch“ herum ist. D.h. Der vorderste Buchstabe muss in den Ebenen ganz oben stehen, sodass es später keine Probleme mit dem Effekt gibt, da die folgenden Buchstaben ja unter dem vorherigen liegen.

20140722 überlappende Buchstaben

Wenn das nun alles soweit erledigt ist, müssen die Buchstaben noch so gesetzt werden, dass der vorherige Buchstabe ca. 25% des Folgenden versteckt. Natürlich kannst du hier auch mehr oder weniger nehmen, das ist eine reine Geschmackssache und kann je nach Schriftart komplett unterschiedlich wirken.

Hier mal ein Beispiel mit 2 transparenten Buchstaben um in etwa darzustellen, was ich genau meine.

Diesen Schritt machen wir nun so für jeden einzelnen Buchstaben, sodass unser Zwischenergebnis in etwa wie folgt aussieht. Auch hier habe ich die Transparenz nur zu Demonstrationszwecken verwendet.

Schritt 3.1 – Gesetzte Buchstaben

 

Schritt 4 – Der Schatten-Effekt

So, wir sind schon fast am Ende. Nun brauchen wir noch den Schatten-Effekt. Dieser wird „etwas“ komplizierter, da der Schatten der einzelnen Buchstaben ja nur auf dem folgenden Buchstaben zu sehen ist. Wir machen es erstmal kurz „falsch“ und korrigieren dieses Problem am Ende.

Um einen Schlagschatten für die Buchstaben zu erstellen klickst du mit der rechten Maustaste auf die Ebene des ersten Buchstabens und wählst dort den Punkt „Fülloptionen“ aus. Anschließend klickst du auf den Punkt „Schlagschatten“ (der Haken wird dadurch automatisch gesetzt) und gibst dort die folgenden Werte an.

Schritt 4 – Fülloptionen Schatten Effekt

Die Deckkraft zeigt an, wie hoch die Transparenz bei der Farbe sein soll. Da wir nur einen sehr leichten Schatten möchten, setzen wir diese auf 20%. Danach kommt der Winkel, in welchem der Schatten fällt. Hier ist es wichtig, diesen auf -180° zu setzen, sodass der Schatten nach rechts, auf den nächsten Buchstaben, fällt. Natürlich kannst du es auch anders rum machen, sodass der Schatten bei den Buchstaben von rechts nach links fällt. Auch hier sind deiner Kreativität keine Grenzen gesetzt. Abstand und Überfüllen lassen wir beides auf 0 stehen und setzen am Ende noch die Größe auf 15px fest und klicken oben rechts auf „ok“. Nun solltest du auch schon das Ergebnis sehen.

Damit du diesen Schritt nun nicht bei jeder Ebene neue machen musst, gib es einen kleinen Trick. Hierzu klickst du mit der rechten Maustatse auf die eben bearbeitete Ebene und wählst dort „Ebenenstil kopieren“ aus. Anschließend markierst du alle anderen Ebenen die einen Buchstaben enthalten (außer die letzte, die braucht ja keinen Schatten), klickst erneut auf einen mit der rechten Maustaste und wählst du diesmal „Ebenenstil einfügen„. Und Voilá, nun haben alle anderen Buchstaben ebenfalls diesen Schatten. Dein Bild sollte nun in etwa so aussehen:

Schritt 4.1 – Schatten gesetzt

 

Schritt 5 – Ausbesserung des Schattens

So, nun sind wir fast fertig. Was nun noch auffällt ist, dass der Schatten aber nicht nur auf den jeweils folgenden Buchstaben liegt, sondern auch auf dem Hintergrund. Das sieht nun zwar auch nicht schlecht aus, aber wir wollen den Effekt ja etwas anders haben. Hierzu müssen wir eine Maske anlegen, sodass der Schatten bzw. das gesamte Logo nur noch auf dieser Maske dargestellt wird und der überlappende Schatten verschwindet. Das wird nun nochmal etwas knifflig, aber ich versuch es bestmöglich zu erklären. :)

Du drückst nun STRG+SHIFT und klickst jeden Buchstaben einzeln an, sodass sich eine Selektierung um das gesamte Logo erzeugt. Sollte dann in etwa so aussehen.

Schritt 5 – Buchstaben selektieren

 Als nächstes drückst du  STRG+SHIFT+N um eine neue Ebene zu erzeugen und nun  SHIFT+Backspace um die ebene auszufüllen. Hier wählst du bei Verwenden „Weiß“ oder „Vordergrundfarbe“ (die musst du dann vorher aber auf weiß stellen. Falls du eine andere Farbe für das Logo verwendest, dann die entsprechende Farbe.

Schritt 5 – Schnittmaske erstellen

Anschließend ziehst du die Ebene in der rechten Ebenen-Verwaltung unter alle angelegten Buchstaben, sodass diese Ebene im Hintergrund liegt (aber noch vor dem farblichen Hintergrund). Als nächstes klickst du auf den ersten Buchstaben und wählst dort „Schnittmaske erstellen“, dieser müsste nun in der Ebenen-Verwaltung mit einem Pfeil auf die unsere Ebene angezeigt werden. Dieser Schritt wird nun für alle Buchstaben wiederholt und sollte abschließend wie folgt aussehen.

Wenn du nun alles richtig gemacht hast, müsstest du das Ergebnis nun auch sehen.

Der Schatten von unserem Buchstaben „D“ sollte nun nur noch auf dem „R“ zu sehen sein und so weiter.

Das Ganze liegt daran, dass wir durch die Schnittmaske alles, was sich außerhalb der „Grundebene“ befindet, ausblenden.


Ich hoffe dir hat mein erstes Photoshop Tutorial gefallen und ich konnte dir ein klein wenig helfen. Bei Fragen oder Feedback einfach ein kurzes Kommentar hinterlassen. Gern kannst du auch deine eigene Kreation in den Kommentaren hinterlegen. Dazu das Bild einfach bei einem Bildhoster wie picload.org o.Ä. hochladen.

Zum Abschluss noch mein finales Bild.

Schritt 6 – Finales Logo

 

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

1 Kommentar

Avatar von klebefolie

klebefolie 13. Oktober 2016 um 12:51

Vielen dank für die tollen Informationen und die ausführlichen Tipps. Es ist ziemlich hilfreich.

Gruß Anna

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*