So erstellen Sie diesen iOS7-Weichzeichnungseffekt neu

Antworten:

29

Der untere Teil ist Gauß-unscharf und hat eine halbtransparente weiße Überlagerung.

Schritt 1: Wählen Sie den Überlagerungsbereich auf dem Hintergrund (das Originalbild) und wenden Sie eine Gaußsche Unschärfe mit einem Radius von 12px an.

Schritt 2: Erstellen Sie eine neue Ebene, wählen Sie denselben Teil für die Überlagerung aus, füllen Sie ihn mit Weiß und geben Sie dieser Ebene eine Deckkraft von 66%.

Reproduziert mit dem oberen Teil Ihres Referenzbildes:
BEARBEITEN: Neue Parameter, die dem Original entsprechen

Bildbeschreibung hier eingeben

Peter Walser
quelle
Ich würde annehmen, dass dies mit Code gemacht wird, wenn dies ein Screenshot ist. Ich denke, es kommt darauf an, ob er / sie darum bittet, dies in einer Komposition oder einem Modell zu tun oder es online umzusetzen.
Eric
@Peter Walser wie erstelle ich den Overlay-Bereich, auf den der Gauß-Effekt angewendet wird, wenn es mehr Ebenen gibt? Müssen Sie sie zuerst zusammenführen?
Fred Collins
1
@FredCollins: Ja, entweder führen Sie sie zuerst zusammen und verwischen die Auswahl, oder Sie erstellen eine neue Ebene mit einer Kopie der zusammengeführten Auswahl (die jedes Mal neu erstellt werden müsste, wenn eine Ebene geändert wird).
Peter Walser
@PeterWalser danke. Letzte Frage. Um die neue transparente Ebene mit einer Deckkraft von 66% zu erstellen, verwende ich das Rechteckwerkzeug, aber ich denke, es gibt einen besseren Weg. Zum Beispiel eine Maske / Schnittmaske für die verschwommene Ebene oder ähnliches erstellen. Was schlagen Sie vor?
Fred Collins
Mit einer separaten Ebene können Sie die Gesamtopazität schnell anpassen. Die Deckkraftmaskenlösung hat das gleiche Ergebnis, hier können Sie sogar die Deckkraft pro Pixel einstellen. Natürlich können Sie auch beide Ansätze kombinieren (Maske + Ebenentransparenz). Was auch immer für Sie am besten funktioniert.
Peter Walser
7

Sie haben nicht definiert, welches Programm oder welche Technologie Sie verwenden. Also, während Peter einen schönen Weg beschrieben hat, dies mit Photoshop zu tun , möchte ich hinzufügen, dass dieser Effekt auch mit CSS3 erstellt werden kann.

Hier ist ein Einblick in das benötigte CSS:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Ich sage nicht, dass Sie das so machen sollen ... ich persönlich würde Peters Verfahren anwenden.

E-Sushi
quelle