Bildstile für Webseiten in blau

Bildsprache im einheitlichen Look

Bildbearbeitung mit pixlr

Um einen einheitlichen Look für eine Bildsprache zu erhalten kann man ein einfaches aber wirkungsvolles Stilmittel verwenden. Man färbt Bilder mit einem Farbton ein.
Früher wurde dieser Effekt für einen 2-farbigen kostengünstigeren Effekt mit 2 Farben angewendet (Schwarz + 1 Buntfarbe). Aktuell sehe ich diesen Bildstil sehr oft auf Webseiten. Beispielsweise sieht man diesen auf der Website von Blue Frost Security. Alle Bilder sind dort mit einem kühlen blau eingefärbt. Das unterstreicht optimal das Thema Security wie auch den Firmennamen (Blue Frost). Ein grosser Benefit dieses Stils ist die visuelle Konsistenz des Auftritts. Man kann unterschiedliche Bildquellen nutzen und durch die Farbgebung wirken die Bilder einheitlich.

Gerne beschreibe ich wie man diesen Blue-Frost-Effekt erreichen kann.

Vorbereitung

Hinweis: Ich habe alle Schritte in einem Video festgehalten.

Als erstes werde ich mir Bildmaterial besorgen. Hier hole ich mir ein kostenloses Bild mit einer Public Domain Lizenz um den Effekt nachzubauen. Das Bild mit dem Mann der am Notebook arbeitet eignet sich sehr gut für die Nachstellung des Security-Bildes.

Nun benötige ich ein Bildbearbeitungsprogramm. Ich arbeite oft in Photoshop. Damit aber alle dieses Tutorial nachvollziehen können, zeige ich die Bearbeitung anhand von pixlr – einem Online Bildbearbeitungsprogramm, welches frei genutzt werden kann.

Konkrete Schritte

Zuerst wähle ich «Bild vom Computer öffnen»

Anschliessend lege ich eine neue Ebene an und stelle die Vordergrundfarbe auf den Farbwert RGB 137 / 188 / 250 resp. Hex #89bafa
Zum Füllen der Ebene nutze ich das Füllwerkzeug (Farbtopf).

pixlr-neue-ebene

Die Einstellung/Modus der Ebene stelle ich auf «Multiply»

Bereits jetzt sehe ich einen Verfärbungseffekt. Diesen kann man nun variieren. Je nach Einstellung der Hauptfarbe auf der ersten Ebene oder durch Variation des darunterliegenden Bildes.

Um meinen Effekt noch frostiger werden zu lassen wähle ich nun die Ebene mit dem Foto. Ich passe die Helligkeit an und nehme die Farbintensität zurück:

Menu > Anpassung > Farbton&Sättigung

Ich klicke als erstes die Checkbox «Colorieren» an. Dies reduziert alle Farben auf ein einfarbiges Bild. Die Farbsättigung stelle ich auf Minus 75. Anschliessend OK klicken.

pixlr-farbton-saettigung

Menu > Anpassung > Gradationskurve

Hier ziehe ich in der Mitte der Kurve nach oben, das Bild wird heller. Ohne die hellsten und dunkelsten Bildstellen zu verändern.

pixlr-gradationskurve

Nun kann ich den Effekt noch verstärken und das Bild mehr aufhellen in dem ich den Ebenen-Modus der blauen Fläche auf «Overlay» stelle.

Fertig ist das frostige Bild.

final-blue

Schreibe einen Kommentar