Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von PrintMaus

    PrintMaus

    03.12.2011 - 16:31

    Gute Beschreibung, war einfach nachzuvollziehen. Danke.

  • Alternative Portrait von photoheini

    photoheini

    11.10.2010 - 10:05

    Sehr gutes Tutorial! Das bringt mich echt weiter!

  • Alternative Portrait von reni_46

    reni_46

    04.04.2010 - 16:21

    Super Tut und alles schön erklärt, habs gelb gemacht

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    02.02.2010 - 16:49

    Sehr gutes Tut! sehr gut beschrieben! Thx

  • Alternative Portrait von de_Vali

    de_Vali

    19.12.2009 - 12:21

    Das bringt mich echt weiter! *Daumen hoch*

  • Alternative Portrait von PrOOnOOb

    PrOOnOOb

    26.11.2009 - 17:47

    Gutet TUT

  • Alternative Portrait von semisonic

    semisonic

    26.11.2009 - 10:25

    Auch für Anfänger gut nachvollziehbar - danke :-)...

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    10.12.2008 - 16:23

    Hat mir echt weiter geholfen bin begeistert

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    13.02.2008 - 17:57

    gut gemacht. gut erklärt. passt.

  • Portrait von trusterbr

    trusterbr

    02.12.2007 - 11:47

    Jo klasse! Cooles style und ne gute Erklärung : 5/5

  • Alternative Portrait von Polonium210

    Polonium210

    19.03.2007 - 13:54

    schönes tut weiter so! ging dank deines tut ganz easy:)

  • Alternative Portrait von xgadex

    xgadex

    08.02.2007 - 19:26

    sieht gut aus, muss ich gleich verwenden!

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    26.01.2007 - 17:41

    Was sonst: 5 Sterne!!!

  • Portrait von harriz

    harriz

    24.01.2007 - 19:50

    finde das es auch echt gur erklärt is, dies ist eine Sehr gute Anleitung auch für eine Navi-Leiste. Mach weiter so

  • Alternative Portrait von pate1005

    pate1005

    18.01.2007 - 22:44

    Super Tut und alles schön erklärt, hat mir sehr geholfen

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Vorwort

Bei diesem Tutorial werden ebenfalls viele Kleinarbeiten verrichtet. Versucht hier viel mit den „Hilfslinien“ zu arbeiten.

Info: Dieses Tutorial, habe ich aus einem Photoshop- Tutorial ins Fireworks umgesetzt.

Was wir brauchen…

Schriftarten „Webdings“. Wir nehmen das vorhandene Standart Webdings von Word. Ansonsten findet Ihr „hier“ weitere Webdings.

Schritt 1:

Wir öffnen eine neue Leinwand in der
Größe: 700 x 400  Pixel (Größe bezieht sich hier lediglich für diesen Tutorial)
Leinwandfarbe: Schwarz

Schritt 2:

Wir nehmen unseren „Rechteckwerkzeug“ und zeichnen ein Rechteck in der
Größe: 600 x 180 Pixel
und richten diesen auf unserer Leinwand „Mittig und Zentriert“.
Vergeben einen Verlauf: „Linear“ von unten nach oben.
Farbverlauf: „#8E0000“ zu „#BB0000“

Bilder

Bild 1 / Schritt 3:

Das ganze sollte so aussehen. Den Verlaufspegel stellt Ihr so, wie in Bild 1 dargestellt.

Bilder

Bild 2 / Schritt 4:

Wir nehmen unseren „Abgerundetes Rechteckwerkzeug“ und zeichnen ein Rechteck in der
Größe: 214 x 83 Pixel
Und runden die Ecken (mit Hilfe der gelben Punkten) einwenig, wie in Bild 2 dargestellt, ab.
Farbe: #BC0000

Bilder

Bild 3 / Schritt 5:

Wir vergeben unseren „Abgerundeten Rechteck“ einen „Inneres Glühen“ über:

Filter / Schatten und Glühen / Inneres Glühen….

Und vergeben die Daten wie in Bild 3.

Bilder

Bild 4 / Schritt 6:

Das ganze sollte wie in Bild 4 dargestellt aussehen.

Bilder

Bild 5 / Schritt 7:

Unseren Abgerundeten Rechteck klonen wir über:

Bearbeiten / Klonen…..

Alle Daten die wir durch das Klonen übernommen haben werden wie folgt in der Eigenschaft geändert (Siehe Bild 5):

Farbfüllung: Keins
Randfüllung: „Weiß“
Pinselstärke: „3“
Pinselrand: „100“
Filter: Keins
Mischmodus: „Weiches Licht“

Bilder

Bild 6 / Schritt 8:

Das ganze sollte so aussehen wie in Bild 6 dargestellt.

Bilder

Bild 7 / Schritt 9:

Wir nehmen unseren „Abgerundetes Rechteckwerkzeug“ und zeichnen ein Rechteck in der

Größe: 83 x 83 Pixel
Und runden die Ecken (mit Hilfe der gelben Punkten) einwenig, wie in Bild 7 dargestellt, ab.
Farbe: #BC0000
Der Abstand zwischen den beiden Rechtecken beträgt „31 Punkte“.

Bilder

Bild 8 / Schritt 10:

Wir vergeben unseren „Abgerundeten Rechteck“ einen „Inneres Glühen“ über:

Filter / Schatten und Glühen / Inneres Glühen….

Und vergeben die Daten wie in Bild 8.

Bilder

Bild 9 / Schritt 11:

Unseren Abgerundeten Rechteck klonen wir ebenfalls über:

Bearbeiten / Klonen…..

Alle Daten die wir durch das Klonen übernommen haben werden wie folgt in der Eigenschaft geändert (Siehe Bild 9):

Farbfüllung: Keins
Randfüllung: „Weiß“
Pinselstärke: „3“
Pinselrand: „100“
Filter: Keins
Mischmodus: „Weiches Licht“

Bilder

Bild 10 / Schritt 12:

Das ganze sollte dann insoweit wie in Bild 10 dargestellt aussehen.

Bilder

Bild 11 / Schritt 13:

Den zweiten Abgerundeten Rechteck und das Klon markieren wie in der Eigenschaft und Gruppieren diesen über:

Modifizieren / Gruppieren….. (Tastaturbefehl: „STRG+G“)

Klonen nun das Gruppierte zweimal über:

Bearbeiten / Klonen…..

Und setzen die zwei neu geklonten Rechtecke wie in Bild 11 dargestellt.

Der Abstand der jeweiligen Rechtecke beträgt (wie bereits beim ersten) „31 Punkte“.

Bilder

Bild 12 / Schritt 14:

Bevor wir zu den „Kleinarbeiten“ wechseln, gehe ich ganz kurz in die Beschriftung ein:
Es handelt sich, wie bereits erwählt, um Standart Webdings von World:
Von Rechts nach links:
1: klein „m“
2: „2“ (Ziffer Zwei)
3: „?“(Fragezeichen)
4: „Welt“. Das ist leider kein Standart Webdings von Word. Die habe ich, wie bereits unter „Was wir brauchen“ erwähnt, unter den angegebenen Link herunter geladen.

Bilder

Bild 13 / Schritt 15:

So, nun wie bereits erwähnt zu den Kleinarbeiten.
Vorerst sperren wir alles auf unserer „Ebeneneigenschaft“ und zeichnen mit unserem „Abgerundetes Rechteck“ ein Rechteck in der
Größe: 15 x 77 Pixel
Farbe: #B20000
Mit Hilfe der gelben Punkte runden wir unser Rechteck so ab, dass oben und unten eine komplette Rundung entsteht.
Und das neu gezeichnete Rechteck setzten wir mittig zwischen die beiden ersten Rechtecke wie in Bild 13 dargestellt.

Bilder

Bild 14 / Schritt 16:

wir klonen unser Rechteck und ändern die Daten in der Eigenschaft wie in Bild 14 dargestellt.

Bilder

Bild 15 / Schritt 17:

Wir klonen das geklonte Rechteck erneut. Und bevor wir die Änderungen der Daten in der Eigenschaft wie in Bild 15 vornehmen, ändern wir die Größe des neu geklonten Rechteckes in:
Größe: 11 x 73 Pixel.
Nun die Änderung in der Eigenschaft:
Farbfüllung: „Radial“   - „#CC0000“ zu  #000000“
Pinsel: Keins
Mischmodus: „Ineinanderkopieren“
Und vergeben Ihm einen Filter „Inneres Glühen“. Siehe dazu Schritt 18.

Bilder

Bild 16 / Schritt 18:

Filter / Schatten und Glühen / Inneres Glühen…..

Die Daten übernehmen wie in Bild 16 dargestellt.

Bilder

Bild 17 / Schritt 19:

Das ganze sollte insoweit wie in Bild 17 dargestellt aussehen. Den Verlaufspegel stellt Ihr wie in Bild 17 dargestellt.

Bilder

Bild 18 / Schritt 20:

Wir zeichnen mit unseren „Rechteckwerkzeug“ einen Rechteck (Siehe Bild 18) in der
Größe: 2 x 69 Pixel
Mischmodus: „Farbig abwendeln“
Die Daten für die Farbfüllung „Radial“ siehe Schritt 21.

Bilder

Bild 19 / Schritt 21:

Farbfüllung: Radial
Farbverlaufspegel unten von Links:
Links: #CC0000
Mittig: #000000

Farbverlauspegel oben von Links:
Links Opazität: 100
Rechts Opazität: 0

Bilder

Bild 20 / Schritt 22:

Wie das ganze insoweit aussehen soll und wie Ihr den Verlaufspegel stellen müsst, entnehmt Ihr es wie in Bild 20 dargestellt.

Bilder

Bild 21 / Schritt 23:

So, klont nun das zuletzt gezeichnete Rechteck und setzt es rechts vom mittleren Rechteck wie in Bild 21 dargestellt.

Bilder

Bild 22 / Schritt 24:

So, nun den letzten Vorgang Gruppieren und 2 Mal Klonen und wie in Bild 22 dargestellt ebenfalls zwischen den Rechtecken einfügen.

Bilder

Bild 23 / Schritt 25:

Zeichnet mit dem „Linienwerkzeug“ eine Linie in der

Breite: 599
Höhe: 1
Pinselstärke: 1
Pinselstrichkategorie: 1-Pixel Hart
Und stellt den
Mischmodus: Ineinanderkopieren
Und setzt die Linie wie in Bild 23 dargestellt.

Bilder

Bild 24 / Schritt 26:

Wir klonen unsere Linie und belassen alle die Mitgeklonten Eigenschaften bis auf die Änderung, dass Ihr die Opazität in der Eigenschaft auf 60 stellt. Der Abstand zwischen den Linien beträgt 8 Punkte.

Bilder

Bild 25 / Schritt 27:

Wir klonen unseren (Linie) Klon erneut und ändern hier ebenfalls nur die Opazität auf 30. Der Abstand beträgt ebenfalls 8 Punkte.

Das war’s, wir sind fertig!

Bis zum nächsten mal

cenka

Bilder

vBulletin 0.04 • ZF-App 1.441 • Total 1.48