15.022013

Noise Background erstellen

Hallo und herzlich Willkommen beim heutigen Grafik Tutorial.

Ich zeige euch heute wie ihr ganz schnell einen Background für eine Website erstellen könnt, der sehr schlicht ist aber auch super ausschaut.


Beginnen wir indem wir ein Dokument öffnen, hierbei ist es es nicht wichtig, dass die Datei eine große Auflösung hat, da sie nachher mit CSS durch "background-repeat" eh wiederholt wird. Eine Auflösung wie z.B. 140x140 Pixel wäre geeignet.

In dem neuen Dokument erstellen wir eine neue Ebene und füllen diese mit der Farbe #222222. Danach wird die Ebene fixiert, damit sie nicht mehr verrutschen kann oder ähnliches.

grauerbg

Auf einer weiteren Ebene legen wir die Farbe #ffffff also weiß an.

weißerbg

Mit der weißen Ebene ausgewählt wenden wir den Filter -> Rauschfilter -> Rauschen hinzufügen an. Wert hierbei ist 177.

rauschenhinzufügen2

Diese Rauschebene setzen wir nun auf 2% Deckkraft, womit schon das meiste erledigt ist.

Unbenannt-2

Desweiteren zeige ich euch noch, wie schicke Trennlinien auf diesem Background aussehen könnten. Diese Trennlinien werden nachher im CSS mit den Border befehlen gesetzt.

Dazu nehmen wir 1Px der Farbe #000000 also schwarz und einen darunter mit der Farbe #333333 also grau. Durch diese beiden Farben haben wir einen schönen optischen Effekt.

schwarze-linie

grauelinie

Fertig sieht unser Background dann so aus:

final