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

  • Alternative Portrait von Goldstaubwerk

    Goldstaubwerk

    02.11.2011 - 22:59

    sehr verständlich erläutert, danke

  • Alternative Portrait von deketo

    deketo

    28.06.2011 - 22:14

    werd ich gleich versuchen umzusetzen

  • Alternative Portrait von timlangemann

    timlangemann

    18.05.2011 - 15:55

    sehr ausführliche Beschreibung!
    besten Dank!

  • Alternative Portrait von angel_web_shop24

    angel_web_shop24

    22.01.2011 - 23:55

    wow super beschrieben
    besten dank

  • Alternative Portrait von preyerxlein

    preyerxlein

    19.12.2010 - 05:15

    Mit vielen Bildern gemacht, das mag ich.

  • Alternative Portrait von photoheini

    photoheini

    11.10.2010 - 10:02

    Sehr schöne Sache, würde mich freuen noch mehr solche Anleitungen zu finden.

  • Alternative Portrait von reni_46

    reni_46

    04.04.2010 - 16:13

    Klasse Tutorial: Super Ergebnis, Gut verständlich = 5 Sterne

  • Alternative Portrait von ebc104

    ebc104

    23.10.2009 - 09:42

    sehr schoene Sache, werde mich jetzt gleich ans Wer machen, vielleicht klappt es ja acu bei mir, danke und weiter so.
    Bester Gruß vom schönen Niederrhein ebc

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    31.03.2009 - 15:40

    Super Workshop, Danke

  • Alternative Portrait von sokrat_78

    sokrat_78

    15.02.2009 - 21:00

    Sehr gut gemacht, würde mich freuen noch mehr solche Anleitungen hier zu finden.
    Weiter so :0)

  • Alternative Portrait von attntaeta23komma5

    attntaeta23komma5

    06.02.2009 - 16:39

    sieht wirklich top aus, sehr gutes tut

  • Alternative Portrait von christd

    christd

    22.10.2008 - 20:24

    nettes tut ... das design ist zwar nicht ganz meins aber die erklärungen waren sehr hilfreich

  • Alternative Portrait von newcomer05

    newcomer05

    01.02.2008 - 21:45

    sieht richtig genial aus

  • Alternative Portrait von irenks

    irenks

    27.09.2007 - 09:15

    Sehr gut gemacht :)

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    05.08.2007 - 20:41

    hi super gamcht ich habs kapiert

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    05.08.2007 - 20:40

    sauber gemacht du bekommst von mir einen daumen

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    05.08.2007 - 16:27

    Sehr gut gemacht :) würde mich freuen noch mehr solche Anleitungen hier zu finden.

  • Portrait von KBanane

    KBanane

    06.06.2007 - 21:17

    Klasse Tutorial: Super Ergebnis, Gut verständlich = 5 Sterne

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    07.04.2007 - 21:40

    HAMMA GEIL Ey ich werde sie mal anwenden

  • Alternative Portrait von Kraloma

    Kraloma

    12.03.2007 - 23:47

    Ein richtiger Hingucker.
    Habs in orange nachgebaut.

    Danke für Deine Mühe.

Weitere Kommentare
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 viele Kleinarbeiten verrichtet. Vielen Fireworks Benutzern ist diese Arbeit evtl. nicht bewusst aber gerade die kleinen Dinge machen die Arbeit (Objekt/Grafik) zu was besonderen. Versucht hier viel mit den „Hilfslinien“ zu arbeiten.

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

Was wir brauchen…

In diesem Tutorial habe ich als Schriftart „Verdana / Bold“ Größe 9 genommen. Allerdings empfehle ich hier die Pixelschriftarten (FFF Atlantis Trial). Pixelschriftarten könnt Ihr „hier“ im bereich Freebies herunterladen. Ggf. müsst Ihr euch lediglich mit einer e-Mail Adresse anmelden. Einen weiteren Link findet Ihr „hier“.

Schritt 1:

Sofern wir die benötigten Schriftarten herunter geladen und installiert haben, öffnen wir Fireworks mit einer neuen Leinwand in der
Größe: 400 x 300  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: 300 x 15 Pixel
Rand: „Hart“ (befindet sich in der Eigenschaft und steht in der Regel als Standart immer auf „Anti-Alias“).
und richten diesen auf unserer Leinwand „Mittig und Zentriert“.
Vergeben einen Verlauf: „Linear“ von unten nach oben.
Farbverlauf: „Schwarz“ zu „#00414D“
Und vergibt Ihm den Namen: Panel_unten

Bilder

Bild 1 / Schritt 3:

Das ganze sollte (ist eine Großansicht für den Verlaufspegel) so aussehen. Den Verlaufspegel stellt Ihr so, dass der untere teil unseres Rechtecks in die Hintergrundfarbe unserer Leinwand hinein fließt.

Bilder

Bild 2 / Schritt 4:

Zeichnet mit dem „Rechteckwerkzeug“ ein weiteres Rechteck in der
Größe: 300 x 25 Pixel (oder Klonen und die Höhenmaße ändern)
Alle anderen Daten, Farbe, Linearverlauf,  etc. übernimmt ihr aus dem ersten Rechteck und stellt diesen über unseren ersten Rechteck (beide Rechtecke sollten sich oben verbinden) und den Verlaufspegel stellt Ihr so, dass nun die obere hälfte in unsere Leinwandfarbe hinein fließt.
Vergibt Ihm den Namen: Panel_oben

Bilder

Bild 3 / Schritt 5:

Zeichnet mit dem „Rechteckwerkzeug“ ein weiteres Rechteck in der
Größe: 300 x 1 Pixel
Farbe: Weiß
Rand: Hart
Name vergeben: Linie1
Und stellt diesen sozusagen zwischen den beiden Rechtecke. Also so, dass die „Linie1“ auf dem oberen Rande vom „Panel_unten“ liegt.
Dann erst vergibt ihr der „Linie1“ im Mischmodus das „Ineinanderkopieren“. Das ganze sollte dann wie in Bild 3 aussehen.

Bilder

Bild 4 / Schritt 6:

Klont unsere „Linie1“ und stellt diesen wie in Bild 4 abgebildet über die „Linie1“ und vergibt ihm den Namen: „Linie2“.
Der Abstand nach oben zwischen den beiden Linien beträgt 7 Pixelpunkte.
(Tipp: Wenn Ihr „Linie1“ + „Linie2“ erneut klont und darüber lässt, ist die Farbe leuchtender)

Bilder

Bild 5 / Schritt 7:

Klont die „Linie2“ und nennt das geklonte um in „Linie3“.
Stellt den Mischmodus von der „Linie3“ auf Normal und vergibt ihm die
Farbe: #00414D.
Nun stellt die „Linie3“auf die untere Kante von „Panel_unten“. (Arbeitet hier mit der Hilfslinie).

Bilder

Bild 6 / Schritt 8:

Klont die „Linie3“ und nennt das geklonte in „Linie4“ um. Alles wird übernommen bis auf die Änderung, dass Ihr den Mischmodus auf: „Bildschirm“ stellt.

Bilder

Bild 7 / Schritt 9:

Klont die „Linie4“ und nennt das geklonte in „Braun1“ um. Alles wird übernommen bis auf folgende Änderung:
Farbe: Weiß
Mischmodus: Normal
Mischmodus – Opazität: 26

Die Entfernung zwischen „Linie4“ und „Braun1“ beträgt nach unten hin 5 Pixelpunkte.

Bilder

Bild 8 / Schritt 10:

Klont  „Braun1“ und nennt das geklonte in „Braun2“ um.
Die Entfernung zwischen „Braun1“ und „Braun2“ beträgt nach unten hin 3 Pixelpunkte.

Bilder

Bild 9 / Schritt 11:

Das ganze sollte bis jetzt so aussehen.

Bilder

Bild 10 / Schritt 12:

So, um unser Tutorial sauber und geordnet zu halten, eröffnen wir in der Ebenenleiste eine neue Ebene. Unsere erste Ebene nennen wir in „Panel“ um und schließen diesen. Siehe dazu Bild 10. Klickt die Duplizierte Ebene an, damit unsere nachfolgende arbeit auch hier automatisch hineingelegt wird.

Bilder

Bild 11 / Schritt 13:

Wir arbeiten rechts von unserem Panel!
Zeichnet mit dem „Rechteckwerkzeug“ einen Rechteck in der
Größe: 5 x 25 Pixel
Farbe: Schwarz (vorerst)
Rand: Anti-Alias
Stellt diesen wie in Bild 11 dargestellt.
Benennt es: „RE_Links“.

Bilder

Bild 12 / Schritt 14:

Unserem „RE_Links“ vergeben wir in der Eigenschaft den
Verlauf: Linear
Opazität oben bleibt:
Farben unten:
Links: #000000
Mitte: #424242 (Ich nenne es hier Mitte aber Ihr stellt es wie in Bild 12)
Rechts: #000000

Bilder

Bild 13 / Schritt 15:

Den Verlaufspegel stellt Ihr wie in Bild 13 dargestellt.

Bilder

Bild 14 / Schritt 16:

Wir zeichnen mit unseren „Rechteckwerkzeug“ ein Rechteck in der
Größe: 1 x 15 Pixel
Farbe: #00F6FF (vorerst)
Benennt es: „Links1“
Und stellt es wie in Bild 14 dargestellt.

Bilder

Bild 15 / Schritt 17:

Unserem „Links1“ vergeben wir in der Eigenschaft den
Verlauf: Linear
Opazität oben bleibt:
Farben unten:
Links: #00414D
Rechts: #00F6FF

Bilder

Bild 16 / Schritt 18:

Den Verlaufspegel stellt Ihr wie in Bild 16 dargestellt.

Bilder

Bild 17 / Schritt 19:

Klont „Links1“ nennt das geklonte „Rechts1“und stellen es wie in Bild 17 dargestellt.

Bilder

Bild 18 / Schritt 20:

Markiert: „RE_links“ + „Links1“ + „Rechts1“ und Gruppiert diese über:

Modifizieren / Gruppieren ( Tastatur: „STRG+G“)

Dann klont Ihr das Gruppierte und stellt es so wie in Bild 18 dargestellt nach rechts.

Bilder

Bild 19 / Schritt 21:

Zeichnet mit dem „Ellipsenwerkzeug“ einen Kreis in der
Größe: 13 x 20 Pixel
Farbe: Weiß
Und stellt den
Mischmodus auf: „Ineinanderkopieren“.
Und setzt es so wie in Bild 19 dargestellt.

Bilder

Bild 20 / Schritt 22:

Wir zeichnen mit unserem „Rechteckwerkzeug“ 4 Rechtecke in der
Größe: 1 x 1
Und setzen diese wie in Bild 20 dargestellt.
Wir vergeben folgende Farben: (von links aus nach rechts)
Rechteck 1: Weiß
Rechteck 2: #999999
Rechteck 3: #999999
Rechteck 4: Weiß

Bilder

Bild 21 / Schritt 23:

Das ganze sollte insoweit so wie in Bild 21 dargestellt aussehen.

Bilder

Bild 22 / Schritt 24:

So, Ihr müsst jetzt den letzten durchgenommenen Abschnitt nur noch Gruppieren und Klonen soviel Ihr braucht. Diese dann beschriften. Siehe dazu Bild 22.

Wir sind noch nicht fertig!!!

Jetzt soll der User der sich bei uns auf der Webseite befindet auch wissen was er gedrückt hat und wo er sich gerade aufhält!

Bilder

Bild 23 / Schritt 25:

Zeichnet mit dem „Rechteckwerkzeug“ ein Rechteck in der Breite der Buttonbeschriftung. Achtet lediglich darauf, dass die kleinen Rechtecke rechts und links nicht durch den Rechteck überdeckt werden.
Höhe habe ich genommen: 9 Pixel.
Verlauf: Linear
Farbe unten (also links): #000000
Farbe oben (also rechts): #00414D
Rand: Hart
Verlaufspegel wieder so stellen, dass dieser in den Hintergrund hinein fließt.

Bilder

Bild 24 / Schritt 26:

Zeichnet mit dem „Rechteckwerkzeug“ einen Rechteck in der breite eures Rechtecks (Schritt 25)
Höhe nehmt ihr: 1 Pixel.
Farbe: Weiß
Rand: Hart
Mischmodus: Ineinanderkopieren.
Und stellt diesen wie in Bild 24 dargestellt.

Das war’s, jetzt sind wir fertig!

Bis zum nächsten mal

cenka

Bilder

vBulletin 0.044 • ZF-App 0.523 • Total 0.566