Tutorial: Kreative Effekte mit Bild-Overlays – Teil 1
In dem ersten Teil meines Tutorials über Bildeffekte mit Overlays möchte ich zeigen, wie man mit ein wenig Photoshop und ein paar Zeilen HTML und CSS ganz normalen Fotos verblüffende Effekte wie abgerundete Ecken und Schlagschatten hinzufügen kann.
Das Ziel
Am Ende dieses Tutorials werde ich einem normalen Foto, ohne es selbst zu bearbeiten, abgerundete Ecken und einen Schlagschatten hinzugefügt haben. Besonders im zweiten Teil wird dann deutlich, wie nützlich dieser Effekt ist und wie man diesen Vorgang mit Benutzerdefinierten Feldern in WordPress-Themes automatisieren kann.
Du willst erst wissen, worum genau es geht?
Dann schau Dir erst die Demo dieses Tutorials an.
Die Vorgehensweise
Zunächst erstelle ich in Photoshop den nötigen Bild-Overlay, den ich später mittels HTML und CSS so über das Foto positioniere, dass es den Anschein hat, dass das Bild abgerundete Ecken und einen Schlagschatten hat.
Schritt 1 – Photoshop
In Photoshop lege ich mir als erstes eine neue Datei mit den Maßen 540x440px und einem hellen Hintergrund #f9f9f9 an. Darüber lege ich auf eine zweite Ebene das Foto einer nicht hässlichen jugen Frau mit den Maßen 400x300px.
Schritt 2 – Photoshop
Über das Foto lege ich nun mit dem Abgerundete-Ecken-Werkzeug eine Ebene in denselben Maßen (wie das Foto) und einem Radius von 10px.
Schritt 3 – Photoshop
Im nächsten Schritte blende ich die Ebene des Fotos zur besseren Übersicht zunächst aus und lege die gewünschten Ebeneneffekte für meinen Bild-Overlay an. In meinem Beispiel ist das ein Schlagschatten (Deckkraft: 75%, Abstand: 2px & Größe: 5px).
Schritt 4 – Photoshop
Wenn ich das Bild unter dem Overlay nun wieder einblende, sieht man die überstehenden Ecken des Fotos. Um das Foto nur im gewünschten Bereich (innerhalb der abgerundeten Ecken) anzeigen zu lassen, klicke ich bei gedrückter STRG-Taste (oder Apfel- oder CMD-) auf die Miniaturansicht der Vektormaske des abgerundeten Rechtecks, um die richtige Auswahl zu laden.
Schritt 5 – Photoshop
Dann blende ich das Rechteck mit abgerundeten Ecken aus und füge dem Foto mit dieser Auswahl eine Ebenenmaske hinzu. Bemerkung: Dieser Schritt ist nicht unbedingt nötig und dient hier nur zur Veranschaulichung.
Schritt 6 – Photoshop
Die Ebene des abgerundeten Rechtecks, das über dem Foto liegt, wird nun wieder eingeblendet. Außerdem setze ich die Deckkraft innerhalb der Ebene (Fläche) auf 0%. Der Unterschied zur Ebenendeckkraft ist, dass trotz der 100% Transparenz der Ebenenstil (Schlagschatten) sichtbar bleibt.
Schritt 7 – Photoshop
Das Foto, das ich ja später eh separat ansprechen möchte, blende ich aus. Mit dem Klick auf die Vektormaske bei gedrückter STRG-Taste lade ich mir die Auswahl des abgerundeten Rechtecks, das ich wieder eingeblendet habe. Diese Auswahl schneide ich nun aus der Hintergrundebene aus, so dass im Bereich des Fotos nun ein transparenter Bereich entsteht.
Schritt 8 – Photoshop
Mit dem Freistellen-Werkzeug schneide ich mir schließlich das endgültige Format meines Bild-Overlays zu. Dabei lasse ich an jeder Seite 10px Platz, so dass der Overlay 420x300px misst.
Schritt 9 – Photoshop
Als letzten Schritt in Photoshop wähle ich nun Für Web und Geräte speichern, wähle als Bildformat PNG (wichtig für die Transparenz) und lege die Bilddatei unter dem Namen img-overlay.png ab.
Schritt 10 – HTML/CSS
Um die HTML/CSS-Struktur zu erstellen, lege ich mir einen Beispielordner /bildeffekte an, speichere dort mein Beispielfoto foto.jpg und mein Bild-Overlay img-overlay.png. Desweiteren lege ich mir gleich eine Stylesheet-Datei style.css für die späteren Formatierungen an.
Schritt 11 – HTML/CSS
Für das Beispiel lege ich mir eine index.html mit zwei Überschriften und meinem Beispielfoto an.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<html>
<head>
<title>Tutorial: Kreative Effekte mit Bild-Overlays erzeugen – Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<h1>Kreative Effekte mit Bild-Overlays</h1>
<h2>von Simon Rimkus [webdemar]</h2>
<div id="content">
<img src="foto.jpg" alt="foto" width="400" height="300"/>
</div>
</div>
</body>
</html>
Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay
Schritt 12 – HTML/CSS
Damit das Ganze etwas ansprechender aussieht habe ich folgende Formatierung über die externe Stylesheet-Datei style.css vorgenommen.
body {
margin: 100px 0 0;
background: #f9f9f9;
}
#main {
width: 600px;
margin: 0 auto;
}
h1 {
color: #444;
font-size: 36px;
font-family: Georgia, serif;
text-shadow: 1px 1px 0px #fff;
text-align: center;
}
h2 {
color: #666;
font-size: 10px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
text-align: center;
letter-spacing: 6px;
}
#content {
margin: 100px auto 0;
text-align: center;
}
Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay
Schritt 13 – HTML/CSS
Das eigentliche Ziel war und ist, den Bild-Overlay über das Foto zu legen und somit den gewünschten Effekt zu erzielen. Dazu bedarf es zunächst einiger Zeilen mehr im HTML-Code.
<div id="main">
<h1>Kreative Effekte mit Bild-Overlays</h1>
<h2>Ein Tutorial von Simon Rimkus [webdemar]</h2>
<div id="content">
<div class="foto-wrap">
<img src="foto.jpg" alt="foto" width="400" height="300" />
<span class="img-overlay"><img src="img-overlay.png" alt="" width="420" height="320" /></span>
</div>
</div><!-- end content -->
</div><!-- end main -->
Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay
Schritt 14 – HTML/CSS
Ich habe nun das Foto und den Bild-Overlay in einen weitern div mit der Klasse foto-wrap eingebaut, um diese innerhalb dieses divs mit CSS absolut positionieren zu können. Das Stylesheet ist also um weitere Zeilen zu erweitern.
.foto-wrap {
position: relative;
width: 400px;
margin: 0 auto;
}
.foto-wrap img {
position: absolute;
top: 0px;
left: 0px;
width: auto;
}
.foto-wrap span {
position: absolute;
top: -10px;
left: -10px;
width: auto;
}Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay
Schritt 15 – HTML/CSS
Der Bild-Overlay ist nun innerhalb des Container-divs mit der Klasse foto-wrap über dem eigentlichen Foto positioniert und verleiht ihm die gewünschten Effekte abgerundete Ecken und Schlagschatten.
Fazit
Dieser erste Teil des Tutorials macht hoffentlich deutlich, welche Möglichkeiten hinter dieser Technik stecken. Besonders im Bereich dynamischer Einbindung von Bildern macht der Effekt Sinn, da das Foto ja beliebig ausgetauscht werden kann und quasi automatisch ein paar Effekte verpasst bekommt.
Was kommt im zweiten Teil?
Im zweiten Teil werde ich diese Technik mit WordPress verknüpfen. Ich werde diesen Effekt auf Post-Fotos, die ich über Benutzerdefinierte Felder einbinde, in einem Loop automatisch anwenden. Außerdem zeige ich noch weitere Effekte, mit denen man normale Fotos etwas aufpeppen kann.
Relevante Links
- Demo ohne Overlay-Effekt
- Demo mit Overlay-Effekt
- Theme deLuxe – Live-Beispiel
Adsense und andere Werbungen mit WordPress
Gravatar Support zu Ihren WordPress Kommentaren hinzufügen
Experimente mit der CSS-Eigenschaft box-shadow
9 Beispiele für den Einsatz von CSS3
Kommentare
nicmare - am 23. November 2009 -
mag vielleicht nett aussehen und dem webdesigner arbeit erleichtern aber was ist mit dem ehrenkodex? sprich, semantisch korrekten code zu liefern? einen div hier und da zu viel dirn zu haben wäre nicht das problem. problematisch finde ich nur das dann bei jedem bild ein “sinnloses” img tag verwendet wird. besser wäre es, das effektbild als hintergrundbild im zu packen. span dann noch display: block geben und dann sollte es passen oder?
grüße
Michael - am 24. April 2010 -
Wollte schon lange wissen, wie ich in Photoshop eine Ebene ausblende und trotzdem die Ebeneneffekte weiterhin erhalten kann.
Nun ist mir ein Licht aufgegangen & ich spare mir vieles an Arbeit.
Danke für dieses gut nachvollziehbare Tutorial!