Comment créer un effet de verre flou / dépoli non destructif et réutilisable?

Comment puis-je créer un arrière-plan flou générique qui peut être utilisé sur plusieurs images similaires à l'exemple ci-dessous?

J'ai besoin d'un verre dépoli blanc à la recherche de png que je peux configurer pour superposer des images régulières pour leur donner un aspect de verre dépoli (comme vous pouvez presque distinguer ce qui se trouve derrière, peut-être quelques couleurs).

Exemples:

^{Cliquez sur l'image pour la pleine résolution}

Peut-être un fond blanc avec une texture (texture granuleuse) puis un flou gaussien et ensuite l'utiliser comme couche sur toutes mes images.

Je sais que le lien que j'ai publié ci-dessus n'est probablement qu'une image floue, mais j'ai besoin d'un calque qui peut être réutilisé dans un projet iOS. De cette façon, il peut être utilisé un calque de vue sur des sections d'une image et rendre l'image en dessous floue. Peut-être que je ne devrais pas utiliser le flou comme terme ici. Je recherche un aspect verre dépoli.

Ce que j'essaie de faire avec cette image est de l'importer dans mon application iOS et de l'utiliser comme arrière-plan. Ensuite, lorsque cette vue est au-dessus d'autres vues (une vue de carte, une photo, etc.), elles sont toutes givrées. J'essaie de créer l'effet de cette image à partir d'iOS 7. Et non, je ne veux pas utiliser les nouvelles fonctionnalités de conception d'iOS 7, car la plupart de mes utilisateurs sont encore sur iOS 5. Et non, je ne veux pas les forcer à mettre à niveau.

Vous ne pouvez pas simplement superposer une image «floue» qui brouille l'image aléatoire derrière elle. L'effet de flou doit échantillonner l'image derrière pour transposer / étaler les pixels, il doit donc y être appliqué.

Vous pouvez cependant créer une texture sablonneuse / granuleuse et l'utiliser comme couche de multiplication pour obtenir une texture granuleuse.

Mise à jour - Comme Derek le suggère dans une autre réponse, vous pouvez faire un flou non destructif en convertissant votre couche d'image en objet intelligent, puis appliquer le flou à cela. Vous pouvez ensuite saisir l'objet intelligent et le modifier indépendamment du flou.

En regardant la deuxième image que vous avez fournie, quelque chose comme ça n'est pas possible avec une superposition PNG. Cela se fait absolument par programmation d'une certaine manière et non avec une superposition PNG. J'ai essayé certaines des autres suggestions publiées ici, aucune ne s'est rapprochée (mais peut-être aurez-vous plus de chance)

Cela va vraiment en dehors de vos besoins, mais que cela a à faire avec une superposition? Je ne suis pas sûr que vous obtiendrez l'effet que vous espérez obtenir en utilisant ce genre de méthode. Si vous en avez la capacité, je le ferais plutôt par programme.

Je n'ai aucune idée de la configuration de votre application, mais vous pouvez le faire avec un filtre CSS3:

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

[note pour plus de clarté: le processus est une image de premier plan d'un produit avec un masque alpha et une image d'arrière-plan floue à l'aide d'un filtre CSS]

Avant

Après

^{Crédit d'image: Philip Leara}

Vous pouvez voir une démo en direct de ceci ici

À l'avenir, cela pourrait être rendu beaucoup plus facile en utilisant le backdrop-filterstyle CSS proposé , mais le support actuel pour cela est pratiquement inexistant .

Une autre option consiste à créer un objet intelligent et à appliquer vos flous et effets à l'objet intelligent. En procédant de cette façon, vous pourrez toujours ouvrir l'objet intelligent et modifier ce qu'il contient.

---Modifier---

Depuis que j'ai posté ma réponse ci-dessus, la question a été modifiée et modifiée légèrement. La demande est maintenant de réaliser un flou dans une application iOS, je suggérerais de faire le flou avec le code, de cette façon il peut affecter n'importe quelle image que vous souhaitez.

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

Plus d'informations à ce sujet ici: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Il existe quelques bons filtres sur Dribble sur la façon de rendre le flou dans Photoshop. Peut-être que ces informations pourraient également vous être utiles. J'aime particulièrement cette façon non destructrice d'obtenir un effet. Je sais qu'il y a déjà quelque chose à ce sujet, mais voici les liens:

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

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

Si cela est toujours nécessaire, j'essayais d'obtenir le même effet et je ne pouvais pas.

Je l'ai fait avec un plugin appelé html2canvas et stackBlur, que je l'ai trouvé ici: http://jsfiddle.net/WtQjY/201/ .

Je ne suis pas l'auteur des plugins. Et ce n'est qu'un extrait du code. Je l'ai changé pour être plus simple et plus rapide:

.brouiller{
    -webkit-filter: flou (7px);
-moz-filtre: flou (7px);
-o-filtre: flou (7px);
-ms-filter: flou (7px);
filtre: flou (7px);

}

////////////////////////////////////
// inclut la bibliothèque jquery
// jQuery
$ (document) .ready ({
$ ('# YourButton'). Cliquez sur ({

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

});
});

c'est encore très lent mais ça marche.

J'ai donc créé ma propre version de ce script que je pensais partager. J'ai fait deux images d'arrière-plan et attaché l'une d'entre elles à la div enfant, puis une version nette et claire à l'arrière-plan principal. Définissez simplement l'arrière-plan des deux objets sur fixe et centré et ils correspondront.

Voici une démo: http://www.palandforsale.us/frosted-glass/

Si je comprends bien votre question, je ne pense pas que vous puissiez. 'Blur' est une opération qui s'exécute dans un logiciel, chacun à sa manière. La façon dont l'esquisse applique le flou peut être différente de celle utilisée par Photoshop ou Google Chrome.

Par conséquent, vous ne pouvez pas exporter une image avec «flou». Le flou est toujours en interaction avec ce qui se trouve derrière, et il ne peut pas être exporté depuis l'application dans laquelle vous le créez.

1. Créez un calque gris à 50% sur le calque que vous souhaitez créer le calque flou et dépoli.
2. Remplissez-le de bruit, dont la quantité dépend de vos besoins
3. Flou avec un flou gaussien selon vos besoins.
4. Au-dessus de ce calque, vous pouvez ajouter un calque de courbes et ajuster les valeurs de blanc et de noir en abaissant l'extrémité blanche ou en poussant l'extrémité noire du calque de courbes.

Ces deux couches devraient donner un effet givré et flou. L'ordre de ces deux couches peut être modifié.

Créez une action qui duplique l'image et applique un flou gaussien. Je crois que c'est la seule façon pour le PS de le faire.