![[CSS][Photoshop] Flatdesign Header](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/css-photoshop-flatdesign-header_ltr.gif){kind=small}
Hi,
vielleicht sehen manche von euch Webseiten, die einen Headerbereich haben und dieser einen Hintergrund mit einem leichtem Bild hat.
Dies trifft besonders auf Webseiten mit Flat Design zu.
Ungefähr so:
Was brauchen wir?
- Photoshop
- Bild & Farbe euer Wahl
- Texteditor
- Brain
1. Neue Datei in Photoshop erstellen
Am besten die selben Maße nehmen.
2. Farbe auswählen & Hintergrund füllen
Sollte nicht so schwer sein.
Ich nutze übrigens diese Seite für Flatdesign Farben:
3. Bild einfügen
Einfach euer Bild in Photshop einfügen und mit gedrückter shift - Taste vergrößern
bzw. verkleinern.
4. Deckkraft & Filter
Nun müsst ihr einfach die Deckkraft eures Bildes auf 5-10% stellen.
Anschließend den Filter "Gaußscher Weichzeichner" nutzen. Ihr findet ihn über:
Filter -> Weichzeichnungsfilter -> Gaußscher Weichzeichner
Nun könnt iht wieder entscheiden, wie stark der Effekt sein soll.
5. Abspeichern
Einfach eure Ebene, die die Farbe beinhaltet ausblenden.
(! Euer Bild ist noch da, nur mit dert geringen Deckkraft !)
Dann einfach als .png speichern.
6. Webseite erstellen
Nun erstellt ihr 2 Dateien (egal wo) :
- index.html
- style.css
7. Grundgerüst der HTML Datei
Wir werden den <header> Tag stylen.
Einfaches Grundgerüst:
8. Ein wenig CSS
Zum Abschluss ein wenig CSS
Habe die nötige Erklärung schon direkt mir reingeschrieben
Viel Spaß mit eurem responsive Hintergrund
