Im Folgenden zeige ich Dir, wie Du anhand von Farbverläufen zum Beispiel effektvolle Hintergründe wie den auf www.ohne-garnet.gehts-gar.net für Deine Website erstellen kannst.
Hinweis:
Dieser Tipp ist eine Coproduktion mit Friedhelm von meiner Partnerseite. Die Einzelheiten zu den verschiedenen Arten, wie Du Farbverlaufsgrafiken in Deine Webseite einbinden kannst, findest Du in Friedhelms CSS-Fundgrube anschaulich erklärt. Ein Besuch lohnt sich!
Um einen solchen Background zu erstellen bedarf es lediglich einer Grafik wie der folgenden. Ich habe sie in einer Breite von 5 Pixel erstellt, obgleich es ausreichen würde, wenn der Farbverlaufsstreifen lediglich 1 Pixel breit ist. Zur besseren Erkennbarkeit des Farbverlaufes zeige ich den Streifen zusätzlich noch in einer Breite von 70 Pixel:
farbverlauf_rot.gif
(links: 5x250px | rechts: 70x250px)
Die genaue Breite legst Du für Deine Website in der HTML- bzw. der CSS-Datei fest.
WICHTIG! Beachte bei der Erstellung des Farbverlaufes:
Nach der von Dir gewählten Grafikhöhe richtet sich später der Röhren-/Welleneffekt!
Die Auswirkungen unterschiedlich hoher Farbverlaufsgrafiken kannst Du auf den folgenden Screenshots (verkleinert) erkennen:
Original-Grafik "farbverlauf_rot.gif" 5x250px ...
... verkleinerter Screenshot 1
... verkleinerter Screenshot 2
Original-Grafik "balken_rot.gif" 70x30px ...
... verkleinerter Screenshot
Wie erstellt man nun eine solche Grafik in PI?
Du kannst der Grafik deutlich entnehmen, dass sie von oben nach unten "gelesen" von einem dunkleren Rot über ein helleres Rot mittig wieder in dem dunkleren Rot am unteren Ende mündet. Einen solchen Farbverlauf erstellst Du in PI mit einem kleinen Trick.
Zunächst fertigst Du zwei "einfache" Farbverläufe an, die Du im Anschluss zu einer einzigen Farbverlaufsgrafik zusammenfügst! Keine Angst, das ist nicht kompliziert, wie Du der folgenden Anleitung entnehmen kannst:
1. Zwei "einfache" Farbverläufe (Teilgrafik 1 und 2) erstellen
Öffne zunächst eine neue Leinwand, zum Beispiel in 5 x 125 Pixel.
Gehe über "Bearbeiten" auf "Füllen". In dem sich öffnenden Fenster wählst Du die Karteikarte "Farbverlauf" und als Fülltyp, also die Richtung für den Farbverlauf, den Pfeil, der von oben nach unten weist. Die beiden zu wählenden Rot-Farbtöne kannst Du dem Screenshot entnehmen:
Bestätige die Einstellungen mit "OK". Deine Leinwand hat sich jetzt in einen Farbverlauf von dunklerem Rot oben zu einem helleren Rotton unten verfärbt.
= erste Teilgrafik
Das ist aber ja erst die halbe Miete!
Öffne daher eine weitere neue Leinwand in derselben Größe und fülle diese mit einem Farbverlauf, bei dem Du die beiden Rottöne wechselst. Hierzu brauchst Du nur auf den Wechselpfeil zwischen den beiden Farbfeldern zu klicken:
Ergebnis dieses Arbeitsschrittes:
= zweite Teilgrafik
2. Aus den Teilgrafiken eine Gesamtgrafik erstellen
Schließlich müssen diese beiden Bilder zu einer Grafik vereint werden. Die zweite Teilgrafik muss unter die erste Teilgrafik angeordnet werden. Um das umzusetzen öffnest Du eine dritte Leinwand, die die gleiche Breite hat wie jeweils die beiden Teilgrafiken, also 5 Pixel, jedoch so hoch ist, dass beide Teilgrafiken untereinander gesetzt in ihr Platz finden. In unserem Beispielsfalle sind das 2 x 125 Pixel, mithin insgesamt 250 Pixel für die Höhe.
Über Rechtskick und "Kopieren" kopierst Du die erste Teilgrafik, also den Farbverlauf vom dunkleren zum helleren Rot, in die Zwischenablage ud fügst das Bild über Rechtsklick und "Einfügen" in die neue Leinwand ein.
Genauso verfähst Du danach mit der zweiten Teilgrafik, also dem Farbverlauf vom helleren zum dunkleren Rot. Nach dem Einfügen in die große Leinwnad legt sich diese Teilgrafik auf die erste Teilgrafik, so dass Du das Bild noch unten anordnen musst:
Zum Schluss über Rechtsklick "Alles einbinden" und als GIF abspeichern. Fertig!
Die folgenden Verlaufsgrafiken sind nach dem selben Prinzip erstellt. Die Originaldateien sind sämtlichst 5x250 px groß, für die bessere Erkennbarkeit sind sie hier jedoch auf jeweis 10 px Breite aufgezogen. Solltest Du trotz dieses Tutorials Schwieirigkeiten beim Pixeln haben oder sollte es Dir an der nötigen Geduld mangeln oder sollte Dir einer der Farbverläufe sogleich gefallen, so kannst Du Dich gern bedienen: speichere Deinen Wunsch-Farbverlauf per Rechtsklick auf Deiner Festplatte ab!
farbverlauf_orange.gif
Natürlich kannst Du Hintergrundeffekte auch lediglich über die "einfachen" Farbverläufe gemäß der obigen Teilgrafiken 1 ODER 2 erzielen! Den Arbeitsschritt unter Ziffer 2. kannst Du dann komplett auslassen. Teste einfach einmal einen der folgenden Farbverläufe:
blauverlauf1.gif
Was für einen Hingucker Du aus einer winzigen Grafik wie diesem einfachen Farbverlauf von mittel- nach dunkelblau ...
footer1.gif
... erzeugen kannst, der 20 Pixel hoch ist und anders als hier zu sehen lediglich 1 Pixel breit zu sein bräuchte, ist am Ende von Friedhelms Demo-Seite zu sehen. Der Hintergrund der Webseite dort ist übrigens mit dem obigen einfachen Farbverlauf "blauverlauf1.gif" erzeugt worden.
