¿Cómo crear un efecto de vidrio borroso / esmerilado no destructivo y reutilizable?

¿Cómo puedo crear un fondo borroso genérico que se pueda usar en varias imágenes similares al ejemplo a continuación?

Necesito un png de vidrio esmerilado blanco que pueda configurar para usar sobre capas de imágenes regulares para darles a todos un aspecto de vidrio esmerilado (como si casi pudieras distinguir lo que hay detrás; tal vez algunos colores).

Ejemplos:

^{Click en la imagen para resolución completa}

Tal vez un fondo blanco con textura (textura granulada) luego Gaussiano lo desenfoque y luego lo use como una capa sobre todas mis imágenes.

Sé que el enlace que publiqué arriba es probablemente solo una imagen borrosa, pero necesito una capa que pueda reutilizarse en un proyecto de iOS. De esta manera, se puede usar una capa de vista sobre secciones de una imagen y hacer que la imagen debajo se vea borrosa. Tal vez no debería usar desenfoque como el término aquí. Estoy buscando un aspecto de vidrio esmerilado.

Lo que intento hacer con esta imagen es importarla a mi aplicación iOS y usarla como vista de fondo. Luego, cuando esta vista está sobre otras vistas (una vista de mapa, una foto, etc.), todas se congelan. Estoy tratando de crear el efecto de esta imagen desde iOS 7. Y no, no quiero usar las nuevas características de diseño de iOS 7, porque la mayoría de mis usuarios todavía están en iOS 5. Y no, no quiero obligarlos a actualizar.

No puede simplemente superponer una imagen 'borrosa' que difumina la imagen aleatoria detrás de ella. El efecto de desenfoque debe muestrear la imagen detrás para transponer / extender los píxeles, por lo que debe aplicarse allí.

Sin embargo, puede hacer una textura arenosa / granulada y usarla como una capa múltiple para obtener el aspecto de textura granulada.

Actualización: como Derek sugiere en otra respuesta, puede hacer un desenfoque no destructivo al convertir su capa de imagen en un objeto inteligente, luego aplicar el desenfoque a eso. Luego puede ingresar el objeto inteligente y editarlo independientemente del desenfoque.

Echando un vistazo a la segunda imagen que ha proporcionado, algo como esto no es posible con una superposición PNG. Eso se hace absolutamente de manera programática de alguna manera y no con una superposición PNG. He intentado algunas de las otras sugerencias publicadas aquí, ninguna estuvo cerca (pero quizás tengas mejor suerte)

Esto realmente va más allá de sus requisitos, pero ¿ tiene que hacerse esto con una superposición? No estoy seguro de que obtendrás el efecto que esperas lograr usando ese tipo de método. Si tiene la capacidad, lo haría programáticamente en su lugar.

No tengo idea de cómo está configurada su aplicación, pero una forma de hacerlo es con un filtro CSS3:

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

[Nota para mayor claridad: el proceso es una imagen de primer plano del producto con una máscara alfa y una imagen de fondo que se desenfoca con un filtro CSS]

antes de

Después

^{Crédito de imagen: Philip Leara}

Puedes ver una demostración en vivo de esto aquí

En el futuro, esto puede hacerse mucho más fácil usando el backdrop-filterestilo CSS propuesto , pero el soporte actual para esto es casi inexistente .

Otra opción es crear un objeto inteligente y aplicar sus desenfoques y efectos al objeto inteligente. Al hacerlo de esta manera, aún le permitirá abrir el objeto inteligente y cambiar lo que está dentro de él.

---Editar---

Desde que publiqué mi respuesta anterior, la pregunta ha sido editada y modificada ligeramente. La solicitud ahora es lograr un desenfoque en una aplicación de iOS, sugeriría hacer el desenfoque con código, de esa manera puede afectar cualquier imagen que desee.

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

Más información sobre esto aquí: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Hay un par de buenos filtros en Dribble sobre cómo hacer desenfoque en Photoshop. Quizás estos podrían ser útiles también para usted. Me gusta especialmente esta forma no destructiva de hacer efecto. Sé que ya hay algo sobre esto, pero aquí están los enlaces:

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

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

Si esto sigue siendo necesario, estaba tratando de lograr el mismo efecto y no pude.

Lo hice con un complemento llamado html2canvas y stackBlur, que encontré aquí: http://jsfiddle.net/WtQjY/201/ .

No soy el autor de los complementos. Y esto es simplemente un fragmento del código. Lo cambié para que sea más simple y rápido:

.difuminar{
    -webkit-filter: desenfoque (7px);
-moz-filter: desenfoque (7px);
-o-filtro: desenfoque (7px);
-ms-filter: desenfoque (7px);
filtro: desenfoque (7px);

}

// ////////////////////////////////
// incluye la biblioteca jquery
// jQuery
$ (documento) .ready ({
$ ('# YourButton'). Haga clic en ({

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

});
});

Todavía es muy lento pero funciona.

Así que creé mi propia versión de este script que pensé que compartiría. Hice dos imágenes de fondo y adjunté una de ellas al div infantil y luego una versión nítida y clara al fondo principal. Simplemente configure los fondos de ambos objetos como fijos y centrados y coincidirán.

Aquí hay una demostración: http://www.palandforsale.us/frosted-glass/

Si entiendo tu pregunta correctamente, no creo que puedas. 'Blur' es una operación que se ejecuta en una pieza de software, cada uno a su manera. La forma en que el boceto aplica el desenfoque puede ser diferente a la forma en que Photoshop o Google Chrome lo hacen.

Por lo tanto, no puede exportar una imagen con 'desenfoque'. Blur siempre está en interacción con lo que está detrás, y no se puede exportar desde la aplicación en la que lo está creando.

1. Haga una capa gris del 50% sobre la capa que desea crear la capa borrosa y esmerilada.
2. Llénalo de ruido, la cantidad depende de tu necesidad
3. Desenfoque con desenfoque gaussiano como lo necesite.
4. Sobre esta capa, puede agregar una capa de curvas y ajustar los valores de blanco y negro tirando hacia abajo el extremo blanco o empujando hacia arriba el extremo negro de la capa de curvas.

Estas dos capas deberían dar un efecto helado y borroso. El orden de estas dos capas se puede cambiar.

Cree una acción que duplique la imagen y aplique un desenfoque gaussiano. Esta es la única forma de PS para hacer esto, creo.