Tutorial: Kreative Effekte mit Bild-Overlays – Teil 1

Simon — Wed, 30 Sep 2009 08:00:33 +0000

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.







Tutorial: Kreative Effekte mit Bild-Overlays erzeugen – Demo







    

        Kreative Effekte mit Bild-Overlays
        von Simon Rimkus [webdemar]

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.

    

        Kreative Effekte mit Bild-Overlays
        Ein Tutorial von Simon Rimkus [webdemar]

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

onlinecasinodemar.com » Bild-Overlays