[Photoshop] Web 2.0 Schrift | schick & einfach

Murphyy · 13. Dezember 2008

Web 2.0 Schrift | schick & einfach

So, mein erstes Tutorial, let's go!

Photoshop Version: CS3 Extended
Empfohlene Font: serifenlose Fonts, z.B.: Neophyte
Benötigte Vorkenntnisse: keine/sehr gering (Hilfen ganz unten)
Benötigte Vorlagen: keine

Einleitung

Ich möchte euch zeigen, wie ihr mit ein paar Schritten und ohne riesigen Aufwand eine schicke Schrift im Web 2.0 Stil erstellen könnt.

Tutorial

Step 1
Zu aller erst eröffnen wir ein neues Dokument der Größe 500 x 100 px (eigentliche egal), Hintergrundfarbe weiß

Step 2
Textwerkzeug auswählen und euren eigenen Text schreiben, komplett farbige Schrift empfehle ich nicht. Farbakzente, Größe, Font bleibt euch überlassen.

Step 3
Ihr erstellt eine neue Ebene und nehmt das Pfade- oder auch Zeichenstift-Werkzeug und erstellt einen Pfad quer über eure Schrift. Euren (geschlossenen!) Pfad füllt ihr per Rechtsklick -> Pfadfläche füllen... mit weiß.

Zur Verdeutlichung mit schwarzem Hintergrund:
Bild

Step 4
Jetzt setzt ihr die Deckkraft der Ebene mit eurer weißen Fläche runter (30% ist ein guter Richtwert) und erstellt eine Schnittmaske (die Schriftebene muss unter dieser Ebene liegen!)

So ähnlich könnte euer Bild nun aussehen:
Bild

Step 5
Nun Bearbeiten wir die Fülloptionen der Schrift-Ebene. Rechtsklick auf sie und Fülloptionen... auswählen. Ihr könnt beim Schatten etwas experimentieren, folgende Werte sehen aber generell gut aus.

Jetzt noch die Kontur, 1px, weiß.

Outcome/PSD
Mein Outcome:
Bild

Meine .PSD für Euch:

No File | xup.in

Nachwort

Ich hoffe es war lehrreich, im Spoiler sind noch Tipps und Hilfen für blutige Anfänger
Wenn ihr Gefallen an meinem Tutorial gefunden habt, denkt daran, sowohl Bedanken als auch Bewerten ist immernoch kostenlos :]
Feedback gerne per PM. Viel Spaß damit!

Tipp
Für eine perfekte Anzeige im Internet, bei der das Hintergrundbild übernommen werden soll, einfach die Hintergrund ebene deaktivieren und das Bild als .png abspeichern!

Exakt horizontaler Schein:
Anstatt dem Pfad-Werkzeug das Auswahl-Rechteck benutzen und ebenfalls per Rechtsklick mit weiß füllen.

Hilfen
Zeichenstift-Werkzeug, direkt dort drunter das Text-Werkzeug
Bild

Textfarbe stellenweise ändern. Text-Werkzeug auswählen, Buchstaben markieren, Farbe oben ändern
Bild

Pfad-Schwung:
Für einen geschwungenen Schein über der Schrift das Pfadwerkzeug beim erstellen des zweiten Punktes gedrückt halten und so ziehen, wie ihr es wollt.

Anzeige

Nützliche Suchen

[Photoshop] Web 2.0 Schrift | schick & einfach

Videos zum Themenbereich