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

  3. Anzeige

  4. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Photoshop Web Schrift
  1. Dark_Tomek

    3D, Webdesign, Photoshop Interesse

    Dark_Tomek , 3. April 2009 , im Forum: Allgemeines & Sonstiges
    Antworten:
    5
    Aufrufe:
    430
    BenQ
    4. April 2009
  2. taromisaki

    Schwebende Fenster Photoshop cs4

    taromisaki , 12. Februar 2009 , im Forum: Grafikdesign und Fotografie
    Antworten:
    7
    Aufrufe:
    1.235
    taromisaki
    13. Februar 2009
  3. Final

    [Photoshop] [WEBDESIGN] Hölzerne Navi / Schild

    Final , 3. Juli 2008 , im Forum: Grafik & Foto Tutorials
    Antworten:
    0
    Aufrufe:
    3.916
    Final
    3. Juli 2008
  4. Melcos

    Web-2.0-Bildbearbeitung Photoshop Express ist online

    Melcos , 27. März 2008 , im Forum: Netzwelt
    Antworten:
    7
    Aufrufe:
    576
    tee
    29. März 2008
  5. rasmil

    [Photoshop] Leichter Webdesign für Anfänger!

    rasmil , 29. Februar 2008 , im Forum: Grafik & Foto Tutorials
    Antworten:
    0
    Aufrufe:
    2.544
    rasmil
    29. Februar 2008