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

Photoshop und CSS3

Datei anlegen und Smart-Filter vorbereiten

Erstellt zunächst einen neue Datei mit weißer Hintergrundfarbe. Ich habe in diesem Beispiel mit einer 500×300 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.

Photoshop: Smart-Objekt aus Ebene erstellen
In Smart-Object umgewandelte Hintergrundebene.

Rauschfilter anwenden

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

Photoshop: Rauschfilter anwenden
Rauschen hinzufügen: leicht, gleichmäßig, monochromatisch

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.

Transparentes Rauschen

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.

Photoshop: Farbbereiche auswählen
Photoshop: Farbbereiche auswählen

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).

Photoshop: Fläche füllen

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.

Rauschen exportieren

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.

Für Web-Speichern-Dialog
Als PNG24 speichern

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Basti
    schrieb am 27.06.2013 um 16:13 Uhr:

    Ein zusätzliches weißes Rauschen mit etwa einem Viertel bis ein Drittel der Deckkraft des schwarzen Rauschens gibt dem ganzen noch ein bisschen mehr Griff.

    Antworten
  2. jörg
    schrieb am 11.06.2012 um 14:58 Uhr:

    gut, geht aber auch etwas schneller ;)
    den punkt mit „Farbbereich auswählen“ kann man optimieren:
    nach dem man in der original-ebene den rauschen-filter angewendet hat, stellt man hier die gewünschte opacity ein, erstellt dann oberhalb dieser ebene eine neue transparente ebene und reduziert diese zwei neue ebenen auf eine (beide ebenen auswählen und Strg+E).

    Antworten
  3. Frank
    schrieb am 27.03.2012 um 18:58 Uhr:

    Danke für die super Anleitung.
    Endlich weiß ich jetzt – wie Rauschen geht.
    Und mein Hintergrund rauscht auch schon. :)

    Antworten
  4. phillip lukas
    schrieb am 08.09.2011 um 19:12 Uhr:

    Aber es scheint leider nicht bei gleichzeitigen Farbverlauf im Hintergrund zu funktionieren… Schade.

    Antworten
  5. Lukas
    schrieb am 05.08.2011 um 18:11 Uhr:

    Hey, is echt genial.. hab die ganze zeit versucht wie das geht :D

    Antworten
  6. herrfischer
    schrieb am 27.07.2011 um 10:56 Uhr:

    ist wirklich eine gute idee, werde das „rauschen.png“ mal auf dem schreibtisch lagern, mal sehen ob ich es demnächst mal brauchen kann …

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →