Farbverlauf
lima-city → Forum → Die eigene Homepage → Grafikdesign
bild
code
container
cursor
datei
dokument
farbe
fertig url
formel
gerade linie
hintergrund
http
kostenlose programm
legen
nachteil
nehmen
rechteck
url
verpassen
verschiedene arten
-
Hallo,
Würde mir gerne einen Header mit einem Farbverlauf erstellen.(z.B. wie auf dieser Seite) Leider habe ich keine Ahnung wie das geht.
Könnte mir vielleicht jemand ein paar Tipps geben wie ich soetwas am besten umsetze.
danke,
gruß -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also du kannst dazu GIMP oder Photoshop verwenden. Ersteres geht ganz einfach: Du öffnest ein neues Bild in der gewünschten Größe, stellst die beiden Farben richtig ein (Vorder und Hintergrund), und aktivierst das Farbverlauftool. Das ist ein Icon mit einem Viereck, dessen Inhalt von Schwarz zu Weiß verläuft. Dann gehst du mit dem Cursor auf das Bild und ziehst von dem einen Ende des Bildes eine gerade Linie zu der anderen Seite und fertig.
http://www.artografika.de/farbverlauf
Beitrag zuletzt geändert: 28.12.2009 10:38:21 von reimann -
wenn ich das jetzt richtig verstanden habe erstelle ich im gimp/photoshop ein bild und füge es dann in der html seite ein!?
-
donmartino schrieb:
wenn ich das jetzt richtig verstanden habe erstelle ich im gimp/photoshop ein bild und füge es dann in der html seite ein!?
Genau. Du machst das Bild speicherst es ab, dann erstellst du dir am besten einen neuen DIV-Container und machst im CSS-Stylesheet das Bild als Hintergrund. Das wäre so am einfachsten.
Viele Grüße -
Ganz soooo leicht ist das nicht:
Wenn Du den Farbverlauf auch sauber wiedergegeben sehen möchtest bleibt Dir eigentlich nur noch eine PNG128 Datei.
Alle anderen (GIF, JPG oder so) lassen den Farbverlauf eher mager aussehen. Ganz besonders wenn noch transparenzen dabei sind und die Option JPG wegfällt.
Nachteil dieser Lösung: Die Datei ist realtaiv gross!!! -
also noch viel einfacher und recoursen sparender ist dies lösung:
Mach deinen gewünschten farbverlauf in photoshop/gimp.
-> nehmen wir an deine grafic ist nun 800px lang und 150px hoch!
-> schneide dir ein teil deines verlaufes raus hier jetzt ein 1px breites auf 150px hohes bildchen.
-> neues dokument: 1px breit 150px hoch
-> dein soeben ausgeschnittenes bildchen einfügen. speichern als .png(128)
-> CSS formel:
#div { height: 150px; width: 800px; background: url(../datei.png); background-repeat: repeat-y; (oder x) :-D
hoff ich konnte helfen.
Falls du noch immer nicht weiter kommst pn an mich dann mach ichs dir schnell -
Ich empfehle dir das kostenlose Programm "PhotoFiltre" http://photofiltre.softonic.de/
Schaltfläche für Farbverlauf --> http://tinyurl.com/ylx5dm8 -
Du kannst auch, wenn Du Windows verwendest, Paint.net nehmen. Ein kostenloses Bildbearbeitungsprogramm von Microsoft.
Reicht mir persönlich völlig aus. Eines der Tools ist auch für den Farbverlauf. Einfach 2 Farben auswählen und dann kann man verschiedene Arten von Verläufen wählen zum Beispiel als Linie oder als Punkt. Und die Intensität des Verlaufes.
Link zu Paint.net http://www.paint.net/ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage