Unscharfe Bilder im Webdesign Wie man sie zum Laufen bringt

Es ist eine unbestreitbare Tatsache: Die Verwendung von unscharfen Bildern ist eine Trendwebtechnik für das Jahr 2015. Es scheint, als ob überall, wo man hinschaut, etwas Unschärfe herrscht.

Dies ist jedoch keine Lösung für einige Ihrer Fotoprobleme. Es ist eine besondere Technik, die Übung und Perfektion erfordert, um alles richtig zu machen. Bevor Sie sich dem Trend widmen, sollten Sie sich also überlegen, wie Sie verschwommene Bilder verwenden können, um zu entscheiden, ob dies für Sie richtig ist und wie Sie diese Technik in Ihren Projekten optimal einsetzen können.

Unscharfe Fotos sind im Trend

Wir könnten ganze Seiten mit verwackelten Bildern der Anzahl der Websites widmen. Der Trend ist momentan eine große Sache.

Das ist das erste, was Sie beachten müssen, wenn Sie eine Idee mit unscharfen Bildern vorantreiben.

  • Möchten Sie ein Teil des Trends sein?
  • Können Sie den Trend auf eine Art und Weise nutzen, die sich von anderen Websites unterscheidet?
  • Ist es dein Stil oder ein bisschen zu stark für deinen Geschmack?
  • Sind Sie mit dem Site-Design einverstanden, nachdem der Trend seinen Lauf genommen hat? Oder benötigen Sie ein Redesign?

Es ist absolut nichts Falsches daran, etwas zu kreieren, das trendy ist. Aber es ist eine Entscheidung, die Sie von Anfang an berücksichtigen sollten. Das Erstellen einer Website mit unscharfen Bildern - abhängig von Ihrem bevorzugten Stil und Gebrauch - kann zeitaufwändig sein und wenn Sie keine Erfahrung mit Bildbearbeitungssoftware haben, kann eine zusätzliche Schulung erforderlich sein.

Unschärfe ist eine Technik für gute Bilder

Dies könnte der wichtigste Satz sein, den Sie lesen, wenn Sie über unscharfe Bilder nachdenken. Es funktioniert nur, wenn Sie gute Bilder haben, um damit anzufangen. Unschärfe ist kein Weg, um zu beheben? ein schlechtes Bild.

Um es anders zu sagen. Wenn Sie ein verschwommenes Foto erhalten und aufgefordert werden, daraus eine Website zu erstellen, liegt das nicht im Trend. Das ist ein schlechtes Foto. Wenn dies Ihre Situation ist, ist dies nicht die Technik für Sie. (Möglicherweise möchten Sie darüber nachdenken, ob Sie ein Kunstelement mit Typografie erstellen oder nach Archivbildern suchen.)

Wenn Sie jedoch ein schönes Bild haben, das Sie noch ein paar Kilometer verlassen oder auf neue Weise verwenden möchten, ist die unscharfe Technik möglich. Es gibt mehrere Möglichkeiten, über das Verwischen nachzudenken (wir werden uns auf jeden unten konzentrieren), aber der erste Schritt ist zu verstehen, wie man die Unschärfe tatsächlich erzeugt. Adobe bietet ein hübsches Tutorial für den Einstieg in Photoshop.

Verwischen Sie das gesamte Bild

Zu dem verwaschenen Bildtrend hat auch ein anderer Trend beigetragen: Verwendung von Heldenkopfzeilen. Designer setzen die Techniken zusammen, um Vollbild-Stil und unscharfe Bilder als dominierende Bilder auf den Zielseiten von Websites zu erstellen.

Die Website für Trellis Farm verwendet ein ikonisches Bild einer Farm, um Ihnen einen Eindruck von der Website zu vermitteln. Für zusätzliches Interesse ist das Foto schwarzweiß, um dieses Gefühl von früher zu vermitteln, und mit einer großen Schrift, die Ihre Aufmerksamkeit auf sich zieht. Die Schriftrolle setzt dieses Gefühl fort, während der Mischung Farbe hinzugefügt wird. Die Unschärfe ist schön, weil Sie wissen, was sich auf dem Bild befindet, und der Benutzer kann sich auf den Text konzentrieren und die nächsten Aktionen auf dem Bildschirm ausführen.

Warum es funktioniert:

  • Ein unscharfer Hintergrund kann Ebenen wie Bilder auf dem Bild hervorheben. Stellen Sie sicher, dass Sie eine wirkungsvolle Schrift auswählen.
  • Mit einem Bild, das Sie regelmäßig verwenden, z. B. einem Standard-Markenfoto, kann ein neues Interesse entstehen.
  • Es kann mit fast allen Arten von Inhalten in fast allen Farbschemata verwendet werden, um universell zu wirken.

Hintergründe und geschichtete Bilder

Unschärfe ist keine reine Technik. Bestimmte Teile eines Bildes können für die Auswirkung unscharf sein. Während unscharfere Hintergründe mit einem scharfen Vordergrundfokus häufiger zu sehen sind, verwenden einige Designer den umgekehrten Ansatz für eine neue Option, die einen unscharfen Vordergrund mit einem fokussierten Hintergrund aufweist.

Die Agentur Anchour verwendet auf ihrer Zielseite Unschärfen in Fotos. Die im Bild verwendete Technik kann Teil der eigentlichen Fotografie sein, oder Sie können denselben Effekt in der Fotobearbeitungssoftware erzielen. Der Trick hier, wenn Sie diese Art von Unschärfe erstellen, ist, dass Sie nicht erkennen können, dass sie "erstellt" wurde. und es sollte natürlich aussehen, als ob das Foto auf diese Weise aufgenommen wurde. (In der Fotobearbeitungssoftware können Sie dies mit dem Gaußschen Unschärfewerkzeug mit kleinen inkrementellen Anpassungen durchführen.)

Warum es funktioniert:

  • Unschärfe erzeugt einen visuellen Kontrast und kann das geschäftige Gefühl eines Bildes abschwächen.
  • Es ändert die Perspektive des Bildes und die Sicht des Benutzers auf das Bild.
  • Sie fügt einem Bild Bemaßungen hinzu, die sich für ein fast 3D-Rendering sonst flach anfühlen.

Dramatische Unschärfe für abstrakte Kunst

Wenn Sie ein Hintergrundbild für Ihre Website benötigen, aber ein Muster oder eine Farbe finden können, die den Trick erfüllt, kann ein Foto mit einer dramatischen Unschärfe die perfekte Lösung sein. Betrachten Sie eine dramatische Unschärfe als alles, was den Bildinhalt auf einen Blick nicht wahrnehmbar macht, und das Foto könnte dadurch völlig unkenntlich gemacht werden.

Dies ist eine beliebte Option für Websites, die ein digitales Projekt mit einem abstrakten verschwommenen Fotohintergrund hinter einem Telefon starten, das das Produkt anzeigt. Piction verwendet dasselbe Bild im Hintergrund und im Telefon mit unterschiedlichen Zoom- und Unschärfegraden, um ein auffälliges Design zu erzielen.

Warum es funktioniert:

  • Bringt den Fokus auf das vorgestellte Produkt.
  • Erstellt einen benutzerdefinierten Hintergrund, anstatt ein Muster zu verwenden, das sich möglicherweise auf anderen Websites befindet.
  • Gibt dem Designer die Kontrolle über Farbe und Gefühl, wenn es darum geht, wie die abstrakte Unschärfe von der Schärfe über weiche Farben und Formen bis zur Lesbarkeit des Hintergrundbilds und der Verbindung zur Marke funktioniert.

Dezente Unschärfe für jedes Bild

Eine geringe Unschärfe kann auch für viele andere Arten von Fotos verwendet werden und muss nicht nur für ein Vollbild verwendet werden. Designer können einem Bild, das ein wenig Vordergrundfokus benötigt, einen Hauch von Unschärfe hinzufügen, um Benutzern zu helfen, die richtigen Teile eines Bildes zu betrachten, ein Logo zu stilisieren oder einfach nur ein komplexeres Bild zu erstellen.

Das Zeo-Logo verwendet im runden Design eine subtile, aber feine Unschärfe. Die Unschärfe zwingt Sie, das Logo aufgrund der interessanten Form genauer zu betrachten, und die Kanten der einen Seite des Logos sind im Vergleich zur Schärfe der anderen Seite. Die Technik wird weiter betont, weil das Website-Design als Ganzes an anderen Stellen Unschärfe verwendet, beispielsweise im Hintergrund des dominanten Bildes auf der Zielseite.

Warum es funktioniert:

  • Kleine Unschärfen können zu Überraschungen führen.
  • Es fokussiert auf bestimmte Teile eines Fotos mit visuellem Fokus. (Werfen Sie einen Blick auf einige der Promos auf der Zeo-Site, wenn Sie subtile Unschärfen für den Fokus auf Fotos verwenden möchten.)
  • Auf diese Weise erhalten Sie den richtigen Kontrast, um andere Elemente in einem Bildbereich (z. B. Text) übereinander zu legen, genauso wie eine Vollbildunschärfe mit einer Heldenkopfzeile funktionieren kann.

Verwenden Sie es auch für Video

Sie können den Unschärfetrend auch mit einem anderen heißen Designelement koppeln - Video. Sie können es genauso verwenden wie mit jeder anderen Bildtechnik. Es funktioniert auf dieselbe Weise (obwohl die Bearbeitungswerkzeuge und der Prozess etwas anders sind).

Level 2 Design verwendet einen blauen und einen Bildschirmeffekt, um Interessenten zu einem Vollbildvideo hinzuzufügen. (Aktualisieren Sie den Browser, um unscharfere Videos zu sehen.) Der Effekt ist lustig und frisch und funktioniert mit Videos, die ein altes Schulgefühl vermitteln sollen. Die schnellen Videoschlaufen sind sehr gut lesbar und aufmerksamkeitsstark.

Fazit

Es gibt viele Möglichkeiten, Unschärfe effektiv für Webdesign-Projekte zu verwenden. Das Geheimnis - wenn es wirklich eines gibt - ist, einen verschwommenen Effekt zu erzeugen, der sich nahtlos in den Rest des Designs einfügt. Und Sie können das fast tun, indem Sie über das Weichzeichnen in Extremen nachdenken.

Verwenden Sie viel Unschärfe, um starke Wirkung und ein abstraktes Gefühl zu erzielen. Verwenden Sie eine minimale Unschärfe, um einen subtilen Kontrast zu erzeugen und den Fokus zu setzen. Wie bei jedem Design, testen Sie es vor dem Start mit ein paar Benutzern und sehen Sie, was Sie davon halten. Bemerken sie die Unschärfe? (Die meisten Nicht-Designer denken nicht wirklich darüber nach.)