Anzeige
Tutorialbeschreibung

High-Tech Navigation 2

High-Tech Navigation 2

Erstellt mit Macromedia Fireworks 8. Geht natürlich auch mit Vorgänger.

Ihr könnt natürlich das "Tutorial - High- Tech Navigation 2 " als .PDF Datei herunterladen.

Link: Uploadcenter "Rapidshare"

Datei: "RAR" / "PDF"

Größe: "0.40 MB"

DOWNLOAD


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


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von PrintMaus
  • 03.12.2011 - 16:31

Gute Beschreibung, war einfach nachzuvollziehen. Danke.

Portrait von photoheini
  • 11.10.2010 - 10:05

Sehr gutes Tutorial! Das bringt mich echt weiter!

Portrait von reni_46
  • 04.04.2010 - 16:21

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

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.02.2010 - 16:49

Sehr gutes Tut! sehr gut beschrieben! Thx

Portrait von de_Vali
  • 19.12.2009 - 12:21

Das bringt mich echt weiter! *Daumen hoch*

Portrait von PrOOnOOb
Portrait von semisonic
  • 26.11.2009 - 10:25

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

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.12.2008 - 16:23

Hat mir echt weiter geholfen bin begeistert

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 13.02.2008 - 17:57

gut gemacht. gut erklärt. passt.

Portrait von trusterbr
  • 02.12.2007 - 11:47

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

Portrait von Polonium210
  • 19.03.2007 - 13:54

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

Portrait von xgadex
  • 08.02.2007 - 19:26

sieht gut aus, muss ich gleich verwenden!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 26.01.2007 - 17:41

Was sonst: 5 Sterne!!!

Portrait von 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

Portrait von pate1005
  • 18.01.2007 - 22:44

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

x
×
×