Die Erstellung der Navigationsschaltflächen

Die Navigationsschaltflächen in unserem Projekt sollen eine Größe von 171 x 32 px haben. Also legen wir in genau dieser Größe ein neues leeres Bild an. Grundsätzlich ist zu sagen, dass die Größe der Schaltflächen für die NOF-eigene Navigation immer im Grafikprogramm geändert werden muss. Wenn Ihr also von Anfang an wisst, dass ihr sehr lange Schaltflächentitel haben werdet, solltet Ihr die Schaltflächengröße auch gleich etwas großzügiger wählen.

Im folgenden Screen habe ich drei Arbeitsschritte zusammengefasst, da wir diese Schritte bereits in irgendeiner Form schon einmal vorgenommen haben. Als erstes wechseln wir zum Textwerkzeug, stellen die Schriftfarbe auf Grau und die Schriftart auf Arial / Fett. Im Wechsel geben wir einen Punkt und ein Leerzeichen ein bis unsere Pünktchenlinie so lang wie das Bild ist. Die fertige Linie verschieben wir ganz nach unten im Bild und binden sie ein (Rechtsklick >> „Alles einbinden”). Dann wechseln wir zum Pfadzeichenwerkzeug und stellen, falls nicht mehr vorhanden, nochmal unseren Grünton ein. Über das kleine Männchen in der Symbolleiste wählen wir die im Screen markierte Blümchenform und ziehen in unserem Schaltflächenbild ein kleines Blümchen auf.

Die Blume binden wir vorerst nicht ein, sondern duplizieren die Schaltfläche nebst nicht eingebundener Blume wie im unteren Screen zu sehen.

Mit einem Klick markieren wir die Blume in unserem Duplikat und stellen oben links im Farbwähler für die Pfadfarbe von grün auf grau um. Wenn Ihr den Schritten bis hier hin genau gefolgt seid, habt Ihr jetzt eine Schaltfläche mit grüner Blume und eine mit einer grauen Blume. Wenn dem so ist, klickt Ihr bitte in jedes Bild mit einem Rechtsklick und bindet jeweils über „Alles einbinden” die Blumen in ihre Schaltflächen ein.

Danach wird jede Schaltfläche nochmals dupliziert. Das könnt Ihr über einen Rechtsklick und „duplizieren” machen oder über „kopieren” und „einfügen als neues Bild”. Wenn ihr jetzt je zwei Schaltflächen habt, markiert Ihr in den Duplikaten mit dem Standard-Auswahlwerkzeug den Bereich mit der gepunkteten Linie und entfernt die Linie durch die Option „ausschneiden” oder durch betätigen der Entfernen-Taste auf Eurer Tastatur. Wenn Ihr damit fertig seid, solltet Ihr die folgenden vier Schaltflächen haben:
 
Eine Schaltfläche mit grüner Blume und gepunkteter Linie
Eine Schaltfläche mit grauer Blume und gepunkteter Linie
Eine Schaltfläche mit grüner Blume ohne Linie
Eine Schaltfläche mit grauer Blume ohne Linie
 

Jede Schaltfläche für sich wird webtauglich als .GIF-Datei gespeichert. Versucht dabei bitte griffige Namen zu verwenden, die es Euch später leicht machen, die Grafiken nach Namen unterscheiden zu können.

So, jetzt fehlen noch unsere Schaltflächen für den Fußbereich. Aber die sind schnell gemacht. Wir legen dafür zuerst ein neues leeres Bild von 160 x 19 px an und füllen es mit dem Eimer schwarz ein. Diesen Vorgang wiederholen wir nochmals und haben dann zwei schwarze Bilder mit  je 160 x 19 px.

Für eins der beiden Bilder stellen wir die Ansicht jetzt mal  „etwas”  höher ein (in meinem Fall auf  1200%) und ziehen mit dem Standard-Auswahlwerkzeug ganz rechts einen 1 px breiten Streifen auf. Diesen Streifen füllen wir mit dem Eimer hellgrau.
Das war’s eigentlich schon. Beide Schaltflächen werden wieder webtauglich als . GIF-Datei abgespeichert. Versucht dabei bitte wieder griffige Namen zu verwenden, die es Euch später leicht machen, die Grafiken nach Namen zu unterscheiden.

Wir werden jetzt noch die zwei Blumenfotos rahmen, drehen und überlappen, damit Ihr auch dies einmal gesehen habt. Auf gehts!