Farbverlauf für Webseitenhintergrund erstellen

Der Hintergrund für eine Webseite kann wichtig sein um den Text ins rechte Licht zu rücken. Ist dieser mit einer hellen Farbe hinterlegt, kann der Hintergrund (rechts und links neben dem Text) dunkler gewählt werden. Dadurch erscheint der Text wie in einer Art „Rampenlicht“, das Auge schaut automatisch dorthin.

Wenn man nicht gerade eine Kachel mit Muster für den Webseitenhintergrund verwendet, kann man auch einen schönen Farbverlauf einfügen. Via CSS geht das sehr einfach einzubinden.

Ich kenne mehrere Grafikprogramme und behaupte jetzt mal, dass es in jedem Programm eine Funktion gibt, mit der man eine Farbverlaufsfüllung erzeugen kann. Man definiert eine Anfangsfarbe und eine Endfarbe. Das Programm errechnet daraus selbstständig die Übergangsfarben. Handelt es sich um eine Webseite, kann man mit einem Colorpicker die Hintergrundfarbe abgreifen und die Anfangsfarbe setzen, die Endfarbe wählt man dann nach Belieben. Diese Methode hat jedoch den Nachteil, dass die Farbverläufe oft nicht so fein ausfallen wie gewünscht.

Screenshot erstellen

In meinem Firefox Browser habe ich die Erweiterung „Screen Grab“ installiert. Mit diesem Addon hole ich mir zunächst einen Screenshot von der Webseite und öffne das Bild in Corel Photopaint.

Wer diese Erweiterung nicht hat, kann auch einfach mit STRG + Druck einen Screenshot machen. Dieser befindet sich nach dem Betätigen der Tasten in der Zwischenablage des Computers und lässt sich einfach mit

„Datei neu“ ==> „aus Zwischenablage“

als bearbeitbares Bild in Photopaint öffnen.

Das Bild von der Webseite:

Mit der Rechteckmaske (Werkzeugleiste links) legt man nun den Bereich fest, über den sich der Farbverlauf erstrecken soll.

 

Wer es ganz präzise braucht, kann sich die genaue Größe der Maske auch pixelgenau festlegen:

 

Mit dem Maskenwerkzeug legt man nun den Ausschnitt fest, über den sich der Farbverlauf erstrecken soll.

 

Ist Photopaint unter dem Hauptmenüpunkt „Maske“ die Option „Maskenüberlagerung“ aktiviert, legt sich ein rotes, transparentes Overlay über das Bild. Es deckt dann die Bereiche ab, die von Änderungen NICHT betroffen werden und erhalten bleiben. Nur der Teil, der nicht überdeckt ist, ist veränderbar.

Anstatt in den nun abgegrenzten Bereich mit dem Farbeimer eine Farbverlaufsfüllung einzufüllen,
erst das Icon „Kopieren“ klicken:

 

… dann das Icon „Einfügen“

 

Der Ausschnitt, der nicht von der Maske bedeckt war ist nun als neues Objekt eingefügt worden. Dies ist an den 6 Markierungspunkten (Anfassern) zu erkennen, die nun rund um den Ausschnitt erscheinen.

Wenn man vorsichtig über das neue Objekt drüberhovert, lässt es sich bewegen und verschieben.

 

Verlaufstransparenz zuweisen

Als erstes das rote Overlay deaktivieren.
Maske ==> Maskenüberlagerung(Haken rausnehmen).
Das Overlay ist in vielen Situationen hilfreich, hier jedoch sollte man es ausnahmsweise abschalten, weil dem Objekt mittels eines Reglers jetzt eine andere Farbe zugewiesen werden soll. Mitr deaktiviertem Overlay kann man den Hintergrund sehen und den Farbregler so alnge verschieben bis man die Frabe, die am besten zum Hinergrund passt, gefunden hat.

Nach Auswahl der Option „Farbton-Sättigung-Helligkeit“ erscheint folgende Maske.
Durch Verschieben der Regler, kann nun die Farbe des Objekts, die Sättigung der Farbe und die Helligkeit verändert werden.

 

 

In meinem Beispiel habe ich dem Objekt ein dunkleres Grau zugewiesen.

 

Nun muss dem ausgeschnittenen Objekt noch der Verlauf hinzugefügt werden. Das geht ganz einfach mit dem Hilfsmittel „Interaktive Objektransparenz“ aus der Werkzeugleiste links.

Den Cursor auf das Objekt absetzen und nach oben ziehen. Das Objekt wird nun in Richtung des Pfeiles stufenweise transparent. Da das Objekt jedoch auf einer zweiten Schicht über dem darunterliegenden Hintergrund liegt, tritt dieser nun an den transparenten Stellen zum Vorschein.

 

Der Vorgang wird anschließend für die andere Richtung (nach unten ziehen) wiederholt:

 

Der Verlauf ist nun fertig.
Jetzt muss das Objekt mit dem Hintergrund verbunden werden.
Objekt ==> Kombinieren ==> Alle Objekte mit dem Hintergrund kombinieren.

Danach das Objekt einfach mit der Scherenfunktion ausschneiden und mit
Datei ==> Neu aus Zwischenablage ein neues Bild erzeugen.

Bild abspeichern, fertig.
Ich habe das Bild unter dem Namen „background_image.jpg“ abgespeichert.

Wie kommt nun das Bild auf die Webseite?

In den head einer Webseite oder in der .css Datei schreibt man:
<style type="text/css">
body {background: #cccccc url(images/background_body.jpg") 0px 0px repeat-x;}
<style>

Die Formulierung bei body bedeutet:

Gib dem Body eine Hintergrundfarbe mit dem Hex-Wert #cccccc. Das ist das Grau, welches auf der Beispielseite zu sehen ist.
Diese Farbe wird dann angezeigt, wenn das Bild, welches im nächsten Teil des Satzes referenziert wird, nicht aufgerufen werden kann.
Wenn das Bild jedoch vorhanden ist, dann nimm das Bild mit dem Namen „background_body.jpg“ welches du im Ordner mit dem Namen „images“ findest. Beginne am Nullpunkt und wiederhole das Bild in x-Richtung.

0px 0px sind Koordinatenangaben, die man bei diesem Beispiel auch hätte weglassen können, weil 0px 0px die linke obere Ecke meint. Man hätte statt dessen auch „left top“ schreiben können.

Wichtig werden diese Koordinatenangaben jedoch, wenn man z.B. möchte dass das Hintergrundbild nicht ganz oben am Bildschirmrand anfangen soll sich zu wiederholen, sondern z.B. 100 Pixel tiefer. Dann würde man schreiben :

body {background: #990000 url(images/background_body.jpg") 0px 100px repeat-x;}

Und so sieht das Ergebnis aus:

Ergebnis anschauen