[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. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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ß

    [​IMG]


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

    [​IMG]


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

    [​IMG]

    Zur Verdeutlichung mit schwarzem Hintergrund:
    [​IMG]


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

    [​IMG]

    So ähnlich könnte euer Bild nun aussehen:
    [​IMG]


    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.

    [​IMG]

    Jetzt noch die Kontur, 1px, weiß.

    [​IMG]


    Outcome/PSD
    Mein Outcome:
    [​IMG]

    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
    [​IMG]


    Textfarbe stellenweise ändern. Text-Werkzeug auswählen, Buchstaben markieren, Farbe oben ändern
    [​IMG]


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

  3. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Photoshop Web Schrift
  1. Antworten:
    5
    Aufrufe:
    440
  2. Antworten:
    7
    Aufrufe:
    1.255
  3. Antworten:
    0
    Aufrufe:
    3.968
  4. Antworten:
    7
    Aufrufe:
    590
  5. Antworten:
    0
    Aufrufe:
    2.585