Weicher Bildschatten

Eine nach wie vor beliebte Art Fotos im www zu präsentieren, ist, diese mit einem "weichen" Schatten zu versehen. Das wirkt bei sparsam-gezielter Anwendung edel und lässt den Eindruck entstehen, dass das Bild über dem Hintergrund "schweben" würde.

Zwar lässt sich ein solcher Schatteneffekt auch mittels CSS generieren. Allerdings ist das dazu erforderliche Script ziemlich umfangreich, und der Effekt wird auch (noch) nicht von allen gängigen Browsern dargestellt, da einige das Attribut "border-radius" nicht unterstützen.

Man kann auch ein Bild, das nur den gewünschten Schatten enthält, erstellen und dieses mit entsprechendem Versatz hinter dem eigentlichen Foto positionieren. Dies wiederum funktioniert problemlos nur, wenn die Fotos stets die gleiche Größe haben.

Die gebräuchlichste Methode einen weichen Schatten um ein Bild zu legen ist wohl deshalb immer noch die Erzeugung des Schattens direkt am Foto im Bildbearbeitungsprogramm. Meine Vorgehensweise, bei der mir Effizienz (es soll schnell gehen), Reproduzierbarkeit (der Effekt soll immer gleich aussehen) und nicht unnötig aufgeblähte Dateigrößen wichtig sind, sieht folgendermaßen aus:

• im Bildbearbeitungsprogramm die "Leinwandgröße" des geöffneten, fertig bearbeiteten und skalierten Bildes horizontal und vertikal um jeweils 20 Pixel vergrößern, das Ursprungsbild dabei an Position x=6px, y=6px setzen
• eine neue Hintergrundebene mit exakt dem gleichen Farbwert (Hexadezimalcode!) wie der Hintergrund der Website, in die das Bild eingefügt werden soll, erstellen
• eine neue transparente Ebene zwischen Hintergrund und Ausgangsebene erzeugen
• den Umriss des Ursprungsbildes auswählen und in den Zwischenspeicher kopieren
• in die transparente Ebene den Umriss des Ursprungsfotos deckungsgleich (pixelgenau!) zu diesem einfügen
• die Auswahl mit schwarz füllen, abwählen
• auf dieses schwarze Rechteck in der Größe des Ausgangsbildes den Gauß'schen Weichzeichner mit 12 Pixel Unschärfe anwenden
• die Deckkraft der Ebene auf 60% einstellen
• die Ebene duplizieren
• duplizierte Ebene nach rechts und unten um jeweils 8 Pixel verschieben
• zum Schluss das Bild ins JPEG-Format exportieren, fertig.

Nachteil der Methode: die Background-Farbe der Website kann später nicht mehr geändert werden, ohne dass sich eigenartig-unschöne Effekte ergeben.

P.S.: Um den Schatteneffekt zu sehen, obiges Foto mit der Mouse überfahren.