[Photoshop] Web 2.0 Schrift | schick & einfach

Dieses Thema im Forum "Grafik & Foto Tutorials" wurde erstellt von Murphyy, 13. Dezember 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 13. Dezember 2008
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    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ß

    Bild


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

    Bild


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

    Bild

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

    Bild

    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.

    Bild

    Jetzt noch die Kontur, 1px, weiß.

    Bild


    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!

    Spoiler
    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.
     
  2. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.