Wie kann ein zerstörungsfreier und wiederverwendbarer Glaseffekt erzielt werden?

Wie kann ich einen allgemeinen unscharfen Hintergrund erstellen, der für mehrere Bilder verwendet werden kann, ähnlich wie im folgenden Beispiel?

Ich brauche ein weißes Milchglas, das wie ein Png aussieht, mit dem ich reguläre Bilder überlagern kann, um allen ein Milchglas-Aussehen zu verleihen (so als könnten Sie fast erkennen, was dahinter steckt; vielleicht ein paar Farben).

Beispiele:

^{Klicken Sie auf das Bild, um es in voller Auflösung anzuzeigen}

Vielleicht ein weißer Hintergrund mit Textur (körnige Textur), dann verwischen Gauß und verwenden Sie es dann als Ebene über alle meine Bilder.

Ich weiß, dass der Link, den ich oben gepostet habe, wahrscheinlich nur ein unscharfes Bild ist, aber ich benötige eine Ebene, die in einem iOS-Projekt wiederverwendet werden kann. Auf diese Weise kann eine Ansichtsebene über Abschnitte eines Bildes verwendet werden, um das darunter liegende Bild unscharf zu machen. Vielleicht sollte ich Unschärfe hier nicht als Begriff verwenden. Ich suche Milchglasoptik.

Ich versuche, dieses Bild in meine iOS-App zu importieren. Verwenden Sie dazu einen Ansichtshintergrund. Wenn sich diese Ansicht über anderen Ansichten befindet (Kartenansicht, Foto usw.), sind sie alle mattiert. Ich versuche, den Effekt dieses Bildes von iOS 7 aus zu erstellen. Und nein, ich möchte die neuen iOS 7-Designfunktionen nicht verwenden, da die meisten meiner Benutzer noch iOS 5 verwenden. Und nein, ich möchte sie nicht zum Upgrade zwingen.

Sie können nicht einfach ein "verschwommenes" Bild überlagern, das das zufällige Bild dahinter verwischt. Der Weichzeichnungseffekt muss das Bild hinter sich abtasten, um die Pixel zu transponieren / zu verteilen. Daher muss es dort angewendet werden.

Sie können jedoch eine sandige / körnige Textur erstellen und diese als Multiplikationsebene verwenden, um die körnige Textur zu erhalten.

Update - Wie Derek in einer anderen Antwort vorschlägt, können Sie eine zerstörungsfreie Unschärfe erzeugen, indem Sie die Bildebene in ein intelligentes Objekt konvertieren und die Unschärfe darauf anwenden. Sie können dann das Smart-Objekt eingeben und es unabhängig von der Unschärfe bearbeiten.

Wenn Sie sich das zweite von Ihnen bereitgestellte Bild ansehen, ist dies mit einem PNG-Overlay nicht möglich. Das ist in gewisser Weise programmgesteuert und nicht mit einem PNG-Overlay möglich. Ich habe einige der anderen Vorschläge ausprobiert, die hier veröffentlicht wurden. Keiner kam in die Nähe (aber vielleicht haben Sie mehr Glück).

Dies wird außerhalb Ihrer Anforderungen wirklich, aber nicht diese haben mit einem Overlay zu tun? Ich bin mir nicht sicher, ob Sie mit einer solchen Methode den gewünschten Effekt erzielen werden. Wenn Sie die Fähigkeit haben, würde ich dies stattdessen programmgesteuert tun.

Ich habe keine Ahnung, wie Ihre Anwendung eingerichtet ist, aber eine Möglichkeit, dies zu tun, ist ein CSS3-Filter:

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[Hinweis zur Verdeutlichung: Der Vorgang ist ein Vordergrundbild des Produkts mit einer Alphamaske und ein Hintergrundbild, das mithilfe eines CSS-Filters unscharf dargestellt wird.]

Vor

Nach

^{Bildnachweis: Philip Leara}

Hier können Sie sich eine Live-Demo ansehen

In Zukunft wird dies mit dem vorgeschlagenen backdrop-filterCSS-Stil möglicherweise viel einfacher , die derzeitige Unterstützung dafür gibt es jedoch so gut wie nicht .

Eine weitere Option besteht darin, ein Smart-Objekt zu erstellen und Ihre Unschärfen und Effekte auf das Smart-Objekt anzuwenden. Wenn Sie dies auf diese Weise tun, können Sie das Smart-Objekt dennoch öffnen und das Innere ändern.

---Bearbeiten---

Da ich meine obige Antwort gepostet habe, wurde die Frage bearbeitet und leicht geändert. Die Anforderung ist, jetzt eine Unschärfe in einer iOS-App zu erzielen. Ich würde vorschlagen, die Unschärfe mit Code zu machen, so dass jedes gewünschte Bild davon betroffen sein kann.

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

Weitere Informationen hierzu finden Sie hier: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

In Dribble gibt es ein paar gute Filter, die zeigen, wie man in Photoshop Unschärfen erzeugt. Vielleicht könnten diese auch für Sie hilfreich sein. Mir gefällt vor allem diese zerstörungsfreie Art, Wirkung zu erzielen. Ich weiß, dass es bereits etwas zu diesem Thema gibt, aber hier sind die Links:

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

Wenn dies immer noch notwendig ist, habe ich versucht, den gleichen Effekt zu erzielen und konnte es nicht.

Ich habe es mit einem Plugin namens html2canvas und stackBlur gemacht, das ich hier gefunden habe: http://jsfiddle.net/WtQjY/201/ .

Ich bin nicht der Autor der Plugins. Und das ist nur ein Ausschnitt aus dem Code. Ich habe es geändert, um es einfacher und schneller zu machen:

.verwischen{
    -Webkit-Filter: Unschärfe (7px);
-Moz-Filter: Unschärfe (7px);
-o-Filter: Unschärfe (7px);
-ms-Filter: Unschärfe (7px);
Filter: Unschärfe (7px);

}

////////////////////////////////////
// JQuery Bibliothek einbinden
// jQuery
$ (document) .ready ({
$ ('# YourButton'). Click ({

$ ('# YourContainer'). ToggleClass ('blur');

});
});

Es ist immer noch sehr langsam, aber es funktioniert.

Also habe ich meine eigene Version dieses Skripts erstellt, von dem ich dachte, ich würde es teilen. Ich habe zwei Hintergrundbilder erstellt und eine davon an die Kinderdiv und dann eine klare Version an den primären Hintergrund angehängt. Stellen Sie einfach die Hintergründe der beiden Objekte fest und zentriert ein und sie stimmen überein.

Hier ist eine Demo: http://www.palandforsale.us/frosted-glass/

Wenn ich Ihre Frage richtig verstehe, denke ich nicht, dass Sie können. "Unschärfe" ist eine Operation, die in einer Software ausgeführt wird, und zwar jede auf ihre eigene Art und Weise. Das Anwenden von Unschärfe auf Skizzen unterscheidet sich möglicherweise von dem in Photoshop oder Google Chrome.

Daher können Sie ein Bild nicht mit "Weichzeichnen" exportieren. Blur interagiert immer mit dem, was dahinter steckt, und kann nicht aus der Anwendung exportiert werden, in der Sie es erstellen.

1. Machen Sie eine 50% ige graue Schicht über der Schicht, die Sie als verschwommene und gefrostete Schicht erzeugen möchten.
2. Füllen Sie es mit Lärm, dessen Höhe von Ihrem Bedarf abhängt
3. Verwischen Sie es mit Gaußscher Unschärfe nach Bedarf.
4. Über dieser Ebene können Sie eine Kurvenebene hinzufügen und die Weiß- und Schwarzwerte anpassen, indem Sie das weiße Ende nach unten ziehen oder das schwarze Ende der Kurvenebene nach oben schieben.

Diese beiden Schichten sollten einen frostigen und verschwommenen Effekt ergeben. Die Reihenfolge dieser beiden Ebenen kann geändert werden.

Erstellen Sie eine Aktion, die das Bild dupliziert und eine Gaußsche Unschärfe anwendet. Dies ist die einzige Möglichkeit, dies zu tun, glaube ich.