{"id":3609,"date":"2007-12-11T23:24:16","date_gmt":"2007-12-11T21:24:16","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2007\/12\/11\/farbverlauf-fur-webseitenhintergrund-erstellen\/"},"modified":"2007-12-11T23:24:16","modified_gmt":"2007-12-11T21:24:16","slug":"farbverlauf-fur-webseitenhintergrund-erstellen","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2007\/12\/farbverlauf-fur-webseitenhintergrund-erstellen\/","title":{"rendered":"Farbverlauf f\u00fcr Webseitenhintergrund erstellen"},"content":{"rendered":"

Der Hintergrund f\u00fcr eine Webseite kann wichtig sein um den Text ins rechte Licht zu r\u00fccken. Ist dieser mit einer hellen Farbe hinterlegt, kann der Hintergrund (rechts und links neben dem Text) dunkler gew\u00e4hlt werden. Dadurch erscheint der Text wie in einer Art „Rampenlicht“, das Auge schaut automatisch dorthin.<\/p>\n

Wenn man nicht gerade eine Kachel mit Muster f\u00fcr den Webseitenhintergrund verwendet, kann man auch einen sch\u00f6nen Farbverlauf einf\u00fcgen. Via CSS geht das sehr einfach einzubinden.<\/p>\n

Ich kenne mehrere Grafikprogramme und behaupte jetzt mal, dass es in jedem Programm eine Funktion gibt, mit der man eine Farbverlaufsf\u00fcllung erzeugen kann. Man definiert eine Anfangsfarbe und eine Endfarbe. Das Programm errechnet daraus selbstst\u00e4ndig die \u00dcbergangsfarben. Handelt es sich um eine Webseite, kann man mit einem Colorpicker die Hintergrundfarbe abgreifen und die Anfangsfarbe setzen, die Endfarbe w\u00e4hlt man dann nach Belieben. Diese Methode hat jedoch den Nachteil, dass die Farbverl\u00e4ufe oft nicht so fein ausfallen wie gew\u00fcnscht.<\/p>\n

Screenshot erstellen<\/h2>\n

In meinem Firefox Browser habe ich die Erweiterung „Screen Grab“ installiert. Mit diesem Addon hole ich mir zun\u00e4chst einen Screenshot von der Webseite und \u00f6ffne das Bild in Corel Photopaint.<\/p>\n

Wer diese Erweiterung nicht hat, kann auch einfach mit STRG + Druck einen Screenshot machen. Dieser befindet sich nach dem Bet\u00e4tigen der Tasten in der Zwischenablage des Computers und l\u00e4sst sich einfach mit<\/p>\n

„Datei neu“ ==> „aus Zwischenablage“ <\/strong><\/p>\n

als bearbeitbares Bild in Photopaint \u00f6ffnen.<\/p>\n

Das Bild von der Webseite:<\/h2>\n


\n\"screenshot\"<\/a><\/p>\n

\"Rechteckmaske\"Mit der Rechteckmaske (Werkzeugleiste links) legt man nun den Bereich fest, \u00fcber den sich der Farbverlauf erstrecken soll.<\/p>\n

 <\/p>\n

Wer es ganz pr\u00e4zise braucht, kann sich die genaue Gr\u00f6\u00dfe der Maske auch pixelgenau festlegen:<\/p>\n

\"maskeneinstellungen.jpg\"<\/p>\n

 <\/p>\n


\n\"Maskenoverlay\"<\/a><\/p>\n

Mit dem Maskenwerkzeug legt man nun den Ausschnitt fest, \u00fcber den sich der Farbverlauf erstrecken soll.<\/p>\n

 <\/p>\n

Ist Photopaint unter dem Hauptmen\u00fcpunkt „Maske“ die Option „Masken\u00fcberlagerung“ aktiviert, legt sich ein rotes, transparentes Overlay \u00fcber das Bild. Es deckt dann die Bereiche ab, die von \u00c3\u201enderungen NICHT betroffen werden und erhalten bleiben. Nur der Teil, der nicht \u00fcberdeckt ist, ist ver\u00e4nderbar.<\/p>\n

\"kopieren\"Anstatt in den nun abgegrenzten Bereich mit dem Farbeimer eine Farbverlaufsf\u00fcllung einzuf\u00fcllen,
\nerst das Icon „Kopieren“ klicken:<\/p>\n

 <\/p>\n

\"einf\u00fcgen\"
\n\u00e2\u20ac\u00a6 dann das Icon „Einf\u00fcgen“<\/p>\n

 <\/p>\n

Der Ausschnitt, der nicht von der Maske bedeckt war ist nun als neues Objekt eingef\u00fcgt worden. Dies ist an den 6 Markierungspunkten (Anfassern) zu erkennen, die nun rund um den Ausschnitt erscheinen.<\/p>\n


\n\"Objektanfasser\"<\/a><\/p>\n

Wenn man vorsichtig \u00fcber das neue Objekt dr\u00fcberhovert, l\u00e4sst es sich bewegen und verschieben.<\/p>\n

 <\/p>\n

Verlaufstransparenz zuweisen<\/h2>\n

Als erstes das rote Overlay deaktivieren.
\nMaske ==> Masken\u00fcberlagerung(Haken rausnehmen).<\/strong>
\nDas 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.<\/p>\n

\"Farbe<\/p>\n

Nach Auswahl der Option „Farbton-S\u00e4ttigung-Helligkeit“ erscheint folgende Maske.
\nDurch Verschieben der Regler, kann nun die Farbe des Objekts, die S\u00e4ttigung der Farbe und die Helligkeit ver\u00e4ndert werden.<\/p>\n

 <\/p>\n


\n\"Farbtonregler<\/a><\/p>\n

 <\/p>\n


\n\"ausschnitt004\"<\/a>
\nIn meinem Beispiel habe ich dem Objekt ein dunkleres Grau zugewiesen.<\/p>\n

 <\/p>\n

Nun muss dem ausgeschnittenen Objekt noch der Verlauf hinzugef\u00fcgt werden. Das geht ganz einfach mit dem Hilfsmittel „Interaktive Objektransparenz“ aus der Werkzeugleiste links.<\/p>\n

\"transparenz\"
\n
\n\"ausschnitt_005\"
\n<\/a><\/p>\n

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 \u00fcber dem darunterliegenden Hintergrund liegt, tritt dieser nun an den transparenten Stellen zum Vorschein.<\/p>\n

 <\/p>\n


\n\"ausschnitt006\"
\n<\/a>
\nDer Vorgang wird anschlie\u00dfend f\u00fcr die andere Richtung (nach unten ziehen) wiederholt:<\/p>\n

 <\/p>\n

Der Verlauf ist nun fertig.
\nJetzt muss das Objekt mit dem Hintergrund verbunden werden.
\nObjekt ==> Kombinieren ==> Alle Objekte mit dem Hintergrund kombinieren.<\/strong><\/p>\n

Danach das Objekt einfach mit der Scherenfunktion ausschneiden und mit
\nDatei ==> Neu aus Zwischenablage ein neues Bild erzeugen.<\/strong><\/p>\n

Bild abspeichern, fertig.
\nIch habe das Bild unter dem Namen „background_image.jpg“ abgespeichert.<\/p>\n

Wie kommt nun das Bild auf die Webseite?<\/h2>\n

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

Die Formulierung bei body bedeutet:<\/p>\n

Gib dem Body eine Hintergrundfarbe mit dem Hex-Wert #cccccc. Das ist das Grau, welches auf der Beispielseite zu sehen ist.
\nDiese Farbe wird dann angezeigt, wenn das Bild, welches im n\u00e4chsten Teil des Satzes referenziert wird, nicht aufgerufen werden kann.
\nWenn 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.<\/p>\n

0px 0px sind Koordinatenangaben, die man bei diesem Beispiel auch h\u00e4tte weglassen k\u00f6nnen, weil 0px 0px die linke obere Ecke meint. Man h\u00e4tte statt dessen auch „left top“ schreiben k\u00f6nnen.<\/p>\n

Wichtig werden diese Koordinatenangaben jedoch, wenn man z.B. m\u00f6chte dass das Hintergrundbild nicht ganz oben am Bildschirmrand anfangen soll sich zu wiederholen, sondern z.B. 100 Pixel tiefer. Dann w\u00fcrde man schreiben :<\/p>\n

body {background: #990000 url(images\/background_body.jpg\") 0px 100px repeat-x;}<\/code><\/p>\n

Und so sieht das Ergebnis aus:<\/h2>\n

Ergebnis anschauen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Der Hintergrund f\u00fcr eine Webseite kann wichtig sein um den Text ins rechte Licht zu r\u00fccken. Ist dieser mit einer hellen Farbe hinterlegt, kann der Hintergrund (rechts und links neben dem Text) dunkler gew\u00e4hlt werden. Dadurch erscheint der Text wie in einer Art „Rampenlicht“, das Auge schaut automatisch dorthin.
\nWenn man nicht gerade eine Kachel mit … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,74,119,254],"yst_prominent_words":[],"class_list":["post-3609","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-grafik","tag-grafik-gestaltung","tag-anleitung"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3609"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3609\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3609"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}