Anzeige
Tutorialbeschreibung

High-Tech Navigation

High-Tech Navigation

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


DVD-Werbung

Passend zum Inhalt empfehlen wir: Objektorientierte Web-Programmierung mit PHP

Hier kommt dein ausführlicher Wegweiser in die moderne Webentwicklung mit PHP! Lerne detailliert und praktisch die objektorientierte Entwicklung mit PHP kennen und lass dir von Jan Brinkmann zeigen, wie du deine Kenntnisse auf ein neues Level anhebst und beschleunigst! Von den Grundlagen über die richtige Denkweise bis hin zur finalen Umsetzung erfährst du hier, wie dynamische Webentwicklung mit der Skriptsprache PHP funktioniert. 10 Stunden Video-Training mit Basics, fortgeschrittenen Konzepten, wichtigen Entwurfsmustern und praktischen Projekten erwarten dich!

  • 88 Lektionen in 10 Stunden Video-Training zur objektorientierten Web-Programmierung mit PHP
  • Von den Basics bis zur Praxis und als Bonus ein vollständiges HTML/CSS-Template
  • Von Jan Brinkmann, einem Entwickler aus Leidenschaft mit über 15 Jahren Web- und App-Erfahrung

Sprachen lernen war nie so einfach! Lass dir zeigen, wie es dir auch mit PHP gelingt!

Erhältlich im Shop ... oder in der Kreativ-Flatrate

Kommentare
Portrait von Goldstaubwerk
  • 02.11.2011- 22:59

sehr verständlich erläutert, danke

Portrait von deketo
  • 28.06.2011- 22:14

werd ich gleich versuchen umzusetzen

Portrait von timlangemann
  • 18.05.2011- 15:55

sehr ausführliche Beschreibung!
besten Dank!

Portrait von angel_web_shop24
Portrait von preyerxlein
  • 19.12.2010- 05:15

Mit vielen Bildern gemacht, das mag ich.

Portrait von photoheini
  • 11.10.2010- 10:02

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

Portrait von reni_46
  • 04.04.2010- 16:13

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

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

-versteckt-(Autor hat Seite verlassen)

  • 31.03.2009- 15:40

Super Workshop, Danke

Portrait von sokrat_78
  • 15.02.2009- 21:00

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

Portrait von attntaeta23komma5
Portrait von christd
  • 22.10.2008- 20:24

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

Portrait von newcomer05
  • 01.02.2008- 21:45

sieht richtig genial aus

Portrait von irenks
  • 27.09.2007- 09:15

Sehr gut gemacht :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.08.2007- 20:41

hi super gamcht ich habs kapiert

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.08.2007- 20:40

sauber gemacht du bekommst von mir einen daumen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.08.2007- 16:27

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

Portrait von KBanane
  • 06.06.2007- 21:17

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

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.04.2007- 21:40

HAMMA GEIL Ey ich werde sie mal anwenden

Portrait von Kraloma
  • 12.03.2007- 23:47

Ein richtiger Hingucker.
Habs in orange nachgebaut.

Danke für Deine Mühe.



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