Transparentes Rauschen: Photoshop und CSS3

Moderne Websites realisieren mittlerweile einen Großteil der grafischen Elemente vollständig über CSS3. Hierbei stehen die Möglichkeiten von CSS3 denen von Photoshop in nichts nach, und es lassen sich mitunter sehr beeindruckende Effekte erzielen.
Leider wirken über Code erstellte Grafiken häufig zu glatt und zu einheitlich, was den fotorealistischen Gesamteindruck negativ beeinflusst. Es liegt ja gerade im Trend dezente Strukturen einzusetzen und so dem Design etwas mehr "Griff" zu geben. Was also tun? Die Lösung ist eine Kombination aus Photoshop-Pattern und CSS3.
In diesem Tutorial möchte ich euch zeigen, wie ihr zunächst eine transparente Struktur in Photoshop erstellt, und diese anschließend auf CSS3-generierte Objekte anwenden könnt.

Alle Dateien dieses Tutorial könnt ihr herunterladen. Das Download-Paket umfasst eine Photoshop-Datei, eine PNG-Struktur und das HTML-Beispiel.

Beispieldateien herunterladen

Datei anlegen und Smart-Filter vorbereiten

Erstellt zunächst einen neue Datei mit weißer Hintergrundfarbe. Ich habe in diesem Beispiel mit einer 500x300 Pixel großen Arbeitsfläche gearbeitet - die Abmessungen der Datei sind für das Verständnis dieser Technik allerdings irrelevant.

Wandelt nun die Hintergrundebene in eine normale Ebene um. Das erreicht ihr entweder mit einem Doppelklick auf die Hintergrundebene innerhalb der Ebenenpalette, oder alternativ über das Menü. "Ebene → Neu → Ebene aus Hintergrund".

Wandelt nun über "Filter → Für Smartfilter konvertieren" die Ebene in ein Smart-Objekt um. Das hat den Vorteil, dass ihr später den Rausch-Effekt noch anpassen könnt, ohne das ihr die Pixel unwiderruflich zerstört habt.

Rauschfilter anwenden

Wählt nun über "Filter → Rauschfilter → Rauschen hinzufügen" den Rauschfilter aus und erstellt ein leichtes, gleichmäßiges, monochromatisches Rauschen.

Auswahl aus Farbbereich erstellen

Erstellt jetzt eine zusätzliche Ebene oberhalb des Smart-Objektes. Auf dieser Ebene werden wir nun mit Hilfe einer automatischen Auswahl das transparente Rauschen erzeugen.

Achtet darauf, dass ihr die neue Ebene ausgewählt habt und ruft nun über "Auswahl → Farbbereich" den Farbbereich-Dialog auf. Mit diesem Werkzeug könnt ihr nun Pixel auf eurer Arbeitsfläche auswählen und anschließend eine Auswahl aller gleichfarbigen Pixel erstellen lassen. Die Toleranz bestimmt wie viele farblich benachbarte Pixel ebenfalls in die Auswahl aufgenommen werden.

Ich habe in diesem Beispiel mit einer Toleranz von 15 gearbeitet. Die Miniaturansicht zeigt welche Pixel ihr ausgewählt habt. Versucht hier ein möglichst gleichmäßiges Verhältnis von Schwarz und Weiß zu erreichen.

Bestätigt nun den Dialog und füllt die Auswahl anschließend über "Bearbeiten → Fläche füllen" schwarz ein. Jetzt könnt ihr die Auswahl wieder aufheben (Auswahl → Auswahl aufheben).

Struktur fertigstellen

Ihr könnt nun die ehemalige Hintergrundebene (Ebene 0) ausblenden oder löschen. Anschließend reduziert ihr die Deckkraft der Rausch-Ebene auf 5%-10% - je nachdem wie stark ihr das Rauschen einsetzen möchtet.

Struktur exportieren

Die transparente Rausch-Struktur ist nun fertig und muss lediglich exportiert werden. Speichert die Daten nun also über "Datei → Für Web und Geräte speichern" im PNG24-Format ab. Nur so erreicht ihr die benötigte Transparenz im Hintergrund.

Struktur mit CSS3 kombinieren

Die fertige Struktur könnt ihr nun wie gewohnt per CSS auf ein Element anwenden. Die Technik wird allerdings erst richtig interessant, wenn ihr fortgeschrittene CSS3-Techniken - wie Verläufe oder 3D-Effekte - mit der Rausch-Struktur noch weiter aufwertet.

Das folgende Live-Beispiel zeigt einen simplen CSS3-Button mit angewandter Rausch-Textur. Der Code wurde in Firefox, Chrome und Safari getestet.

Im direkten Vergleich nun das Beispiel ohne Rauschen.

CSS-Code des Beispiel-Buttons

.button {
	padding:15px 17px;	
	
	background-color: #b5bdc8;
	background-image:url(rauschen.png);
	border-top:1px solid rgba(255,255,255,0.4);

	color:#222;
	font:22px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	text-shadow: rgba(255,255,255,.3) 0 1px 0;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	-moz-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
	
	-ms-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	-o-box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);
		
	box-shadow: 
		inset 0px -5px 35px rgba(0,0,0,0.7), 
		inset 0px 5px 15px rgba(255,255,255,.7),
		inset 0px -1px 0px rgba(255,255,255,0.3), 
		0px 3px 3px rgba(0,0,0,0.5);	
}

Download aller Beispiel-Dateien

Ihr könnt alle Dateien dieses Beispiels hier herunterladen. Das Paket enthält eine Photoshop-Datei mit der Basis-Struktur, die exportier PNG und das HTML-Beispiel mit dem Button.

Beispieldateien herunterladen