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

25

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:

Beispiel unscharfes Bild
Klicken Sie auf das Bild, um es in voller Auflösung anzuzeigen

Bildbeschreibung hier eingeben

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.

jgervin
quelle
6
"Unschärfe" ist keine generische Sache, die Sie in einem PNG speichern können. Es handelt sich um einen Effekt, der auf ein Bild angewendet wird und der vollständig vom Inhalt des Bildes abhängt. Sie können jedoch einen speichern, actionder einen Unschärfeeffekt anwendet. Wenn Sie während der Aufzeichnung einer Aktion die in den Tutorials und in der Diskussion zu den verknüpften Fragen und Antworten beschriebenen Schritte ausführen, haben Sie möglicherweise das, was Sie benötigen. Höchstwahrscheinlich würde man die Auswahlmaske manuell erstellen und dann den Rest des Prozesses mithilfe einer Aktion automatisieren.
Horatio
Die Bearbeitung ändert nicht wirklich die Frage. Die Antwort ist, wie Horatio erwähnt: Nein, Sie können keine Unschärfe in einer separaten Ebene haben. Das iOS-Image ist nur eine größere Unschärfe.
Yisela
1
Dies ist voll auf Codierungsfrage, wenn Sie mich fragen. Das nächste Beispiel, das Sie mit Bildern erreichen, ist das folgende: jsfiddle.net/lollero/DE4qn ... natürlich ist dies super statisch und erfordert, dass Sie 2 Versionen desselben Bildes haben (natürlich dieses) Dasselbe könnte mit der css3-Filtermethode geschehen.
Joonas

Antworten:

11

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.

John
quelle
Wie kann ich die sandige körnige Textur machen? Ich überlege mir, ob das zusammen funktionieren würde. Zwei sind genau gleich, aber eines ist ein Pixel höher und ein Pixel rechts vom ersten und das würde es körnig machen (geschichtet, wenn Sie so wollen).
Jgervin
1
Erstellen Sie eine weiß gefüllte Ebene und filtern Sie> Rauschen> Rauschen hinzufügen, um die Körnung hinzuzufügen. Von dort aus kann es leicht verwischen, um es etwas weicher zu machen, die Ebene so einzustellen, dass sie sich vervielfacht, und die Opazität auf etwa 10% zu senken.
John
9

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

Unser Produkt!

Nach

Unser Produkt!
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 .

JohnB
quelle
2
Wenn dies eine Option ist, ist dies ein guter Weg, da der Benutzer oder Entwickler das Styling nach Belieben ändern kann.
Horatio
1
Es ist zu beachten, dass dies auf iOS-Geräten und wahrscheinlich auf den meisten Mobilgeräten funktioniert, jedoch kein praktikabler Ansatz für nicht-mobiles Webdesign ist, da dessen Unterstützung äußerst begrenzt ist. caniuse.com/css-filters
Eric
Wir sind alle einheimisch. Das Programmieren ist keine Option, da es möglicherweise 3 Ansichten oder 2 oder 1 zeigt. In der Draufsicht müssen jedoch alle darunter liegenden Ansichten, egal wie viele es gibt, angezeigt werden, um ein wenig zu werfen.
Jgervin
@jgervin Ich glaube nicht, dass das, was du erreichen willst, mit nur einer PNG-Überlagerung möglich ist, aber ich würde mich freuen, wenn jemand mich als falsch beweist, weil ich etwas Neues lernen würde! Ich würde mich stattdessen darauf konzentrieren, wie Sie dies auf eine andere Weise erreichen können. Vielleicht könnte ein Stapelüberlauf Sie in die richtige Richtung führen.
JohnB
@Eric Wenn es sich um eine iOS-App handelt, spielen Webplattformen keine Rolle.
Ctrl Alt Design
6

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/


quelle
3

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.

Verde Mc
quelle
2

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/

Shawn6078
quelle
Die Demoseite scheint ausgefallen zu sein. Kann die Demo an einem anderen Ort gefunden werden oder ist es möglich, eine JSFiddle davon zu erstellen?
Praxis Ashelin
2

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.

Vincent
quelle
Vielen Dank für die Antwort, das macht Sinn. Wenn ich es also in einer Anwendung verwenden möchte, muss ich es programmgesteuert erstellen.
Dilip
Ja, für jede Anwendung separat. CSS bietet heutzutage beispielsweise Optionen zum Verwischen.
Vincent
0
  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.

user13452
quelle
1
Hallo. Wenn Sie dies versucht haben, können Sie ein Bild des Ergebnisses hinzufügen? Ich verstehe nicht wirklich, wie es einen Unschärfeeffekt geben würde, nach dem das OP sucht, ohne die
Bildfarben
Dies würde Ihnen nur einen verschwommenen Dunst über dem ursprünglichen scharfen Bild geben.
DA01
Funktioniert nicht. Aber vielleicht habe ich es falsch gemacht.
Jgervin
0

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.

McIvor
quelle