Die Erstellung der Hintergrundgrafik

Wer mal etwas genauer die Demoseite betrachtet hat, wird festgestellt haben, dass der Hintergrund nicht einfarbig, sondern leicht gepunktet ist. Die Hintergrundgrafik für diesen BG (Background) erstellen wir im nunmehr letzten Schritt unserer grafischen Vorarbeiten.
Hierzu legen wir erst mal zwei neue Bilder an. Eines mit den Maßen 765 x 24 px und eines mit den Maßen 8 x 8 px.
Beide Bilder füllen wir mit Hilfe der Eimerfüllung Grau ein. Der genaue Farbwert entspricht dem unseres Seitenhintergrundes (#919191).

Wir wechseln zum Pinsel-Werkzeug und stellen die Pinselfarbe (#53E02C) und die Pinselgröße (2) ein. Die Pinselform sollte auf quadratisch eingestellt sein. Mit Hilfe dieses Pinsels zeichnen wir vier Punkte in unser kleines Bild. Unten im Screen ist zu sehen, wie dieses Bild dann aussehen sollte.

Dieses kleine Bild kopiert Ihr Euch in die Zwischenablage und klickt einmal das große Bild an.

Über das obere Menü nehmt Ihr die Einstellung genauso vor, wie es im nächsten Screenshot zu sehen ist und füllt dadurch das große Bild mit der Kopie des kleinen Bildes aus.

Das ausgefüllte Bild wird nun ausgeblendet.

Nachdem ihr die Entfernen-Taste betätigt habt, dürfte Euer Bild genauso wie das zweite Bild im Screenshot aussehen.

Dieses Bild dupliziert Ihr nun und...

spiegelt das Duplikat einmal horizontal.

Ihr legt ein neues Bild von der Größe 2000 x 24 px an und füllt es wieder mit der Eimerfüllung in unserer Hintergrundfarbe (#919191).
Die zwei erstellten Bilder werden in dieses große Bild eingefügt, wobei eines der Bilder ganz rechts außen platziert wird und das andere ganz links außen. Die blassere Seite der Bilder zeigt jeweils zur Bildmitte. Fertig platziert werden die Bilder per Rechtsklick und „Alles einbinden” fest in das große Bild eingebunden. Zum guten Schluss speichert Ihr auch diese Grafik webtauglich im PNG-Format ab.




So, das waren unsere grafischen Vorarbeiten. Ich hoffe, ich konnte dem Einen oder Anderen mit dieser Anleitung auf die Sprünge helfen. Wem sie zu lang ist, der möge bedenken, dass er sie, im Gegensatz zu mir, nur lesen musste. ;-)

Auf den folgenden Seiten machen wir uns nun an den Einbau unseres Designs in NOF. Hier entlang.