Vollständige Version anzeigen : [Photoshop] Web 2.0 Schrift | schick & einfach


Murphyy
13.12.2008, 21:18

So, mein erstes Tutorial, let's go!


Photoshop Version: CS3 Extended
Empfohlene Font: serifenlose Fonts, z;B;: Neophyte (;;;dafont~com/y2k-neophyte;font)
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ß


;;;xup~in/pic,17225064/Web2;0TutBild1;jpg


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


;;;xup~in/pic,87698716/Web2;0TutBild2;jpg


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


;;;xup~in/pic,56688723/Web2;0TutBild3;jpg

Zur Verdeutlichung mit schwarzem Hintergrund:
;;;xup~in/pic,18001702/Web2;0TutBild4;jpg


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


;;;xup~in/pic,39878977/Web2;0TutBild5;jpg

So ähnlich könnte euer Bild nun aussehen:
;;;xup~in/pic,18844399/Web2;0TutBild6;jpg


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.


;;;xup~in/pic,45176567/Web2;0TutBild7;jpg

Jetzt noch die Kontur, 1px, weiß.


;;;xup~in/pic,11476903/Web2;0TutBild8;jpg


Outcome/PSD
Mein Outcome:
;;;xup~in/pic,64408369/Web2;0TutMurphyyOutcome;png

Meine ;PSD für Euch:
No File | xup~in (;;;xup~in/dl,76825340/Web2;0TutMurphyy;psd/)


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
;;;xup~in/pic,20164444/Web2;0TutBildZusatz;jpg


Textfarbe stellenweise ändern. Text-Werkzeug auswählen, Buchstaben markieren, Farbe oben ändern
;;;xup~in/pic,12096439/Web2;0TutBildZusatz2;jpg


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.

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Ähnliche Themen zu [Photoshop] Web 2.0 Schrift | schick & einfach
  • Photoshop CS2 + Persische Schrift
    Hallo, wie kann ich denn in Photoshop einstellen dass ich auf persisch von rechts nach links schreiben kann? Wenn ich wörter (persische) vom Wörd in PS einfüge dann setzt es die buchstaben nicht zusammen. [...]

  • Schrift mit Photoshop unscharf?
    Hi, bin dabei ein Etikett zu entwerfen, aber die Schrift ist immer unscharf wenn ich es ausdrucke, an was kann das liegen? [...]

  • Photoshop, Schrift unsichtbar!?
    Hi Leute, so, hab mir mal Adobe Photoshop hier ausm Underground gezogen. Installiert, ein Bild bearbeitet, auch Text reingeschrieben. Doch ab dem 2ten Bild kann ich keinen Text mehr schreiben. Hab reinstalled, neugestartet, es geht nicht mehr. Der springt in der Schriftgröße auf 0,01 Pt u [...]

  • [CSS] Schrift will einfach nicht fett werden.
    Hi :) Die id stimmt mit der im css file überein das ist schonmal sicher. Php-code function bestätigung() } else } css-code #kontaktF Das width wirktt sich aus aber die schrift wird nicht fett. mfg blade [...]



raid-rush.ws | Imprint & Contact pr