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

25

¿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:

Ejemplo de imagen borrosa
Click en la imagen para resolución completa

ingrese la descripción de la imagen aquí

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.

jgervin
fuente
66
"Desenfocar" no es algo genérico que puede almacenar en un PNG, es un efecto aplicado a una imagen y depende completamente del contenido de la imagen. Sin embargo, puede almacenar uno actionque aplique un efecto de desenfoque. Si hace lo que se describe en los tutoriales y la discusión sobre las preguntas y respuestas vinculadas, mientras graba una acción , es posible que tenga lo que necesita. Lo más probable es que uno cree manualmente la máscara de selección y luego automatice el resto del proceso mediante una acción.
Horacio
La edición realmente no cambia la pregunta. La respuesta es, como menciona Horatio: No, no puedes tener un desenfoque en una capa separada. La imagen de iOS es solo un desenfoque más grande.
Yisela
1
Esto está lleno de preguntas de codificación si me preguntas. Lo más cerca que estarás de algo como tu segundo ejemplo usando imágenes es esto: jsfiddle.net/lollero/DE4qn ... por supuesto, esto es súper estático y requiere que tengas 2 versiones de la misma imagen (por supuesto esto Lo mismo podría hacerse con el método de filtro css3).
Joonas

Respuestas:

11

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.

John
fuente
¿Cómo puedo hacer la textura arenosa granulada? Estoy pensando que esto funcionaría juntos. Dos exactamente iguales, pero uno es un píxel hacia arriba y un píxel a la derecha del primero y eso lo haría granulado (en capas, si lo desea).
jgervin
1
Cree una capa rellena de blanco y filtre> ruido> agregue ruido para agregar el grano. A partir de ahí, puede desenfocarlo un poco para suavizarlo un poco, configurar la capa como multiplicar y reducir la opacidad a algo así como 10%.
John
9

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

¡Nuestro producto!

Después

¡Nuestro producto!
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 .

JohnB
fuente
2
Si esta es una opción, es una buena ruta ya que el usuario o desarrollador puede cambiar el estilo a voluntad.
Horacio
1
Algo a tener en cuenta es que esto funcionará en dispositivos iOS, y probablemente en la mayoría de los dispositivos móviles, pero no es un enfoque viable para el diseño web no móvil porque su soporte es extremadamente limitado. caniuse.com/css-filters
Eric
Todos somos nativos Y la programación no es una opción, ya que podría tener 3 vistas que se muestran o 2 o 1, pero la vista superior debe permitir todas las vistas inferiores, sin importar cuántas haya, para mostrar un poco.
jgervin
@jgervin No creo que lo que intentas lograr sea posible con solo una superposición PNG, ¡pero me encantaría que alguien demuestre que estoy equivocado porque aprendería algo nuevo! En cambio, me enfocaría en cómo puedes lograr esto de otra manera, tal vez Stack Overflow podría llevarte en la dirección correcta.
JohnB
@Eric si es una aplicación de iOS, las plataformas web no importan.
Ctrl Alt Design
6

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/


fuente
3

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.

Verde Mc
fuente
2

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/

Shawn6078
fuente
La página de demostración parece estar inactiva. ¿Se puede encontrar la demostración en otro lugar o es posible crear un JSFiddle?
Praxis Ashelin
2

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.

Vincent
fuente
Gracias por la respuesta, eso tiene sentido. Entonces, si quiero usarlo en la aplicación, tengo que crearlo mediante programación.
Dilip
Sí, para cada aplicación por separado. CSS tiene opciones de desenfoque en estos días, por ejemplo.
Vincent
0
  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.

usuario13452
fuente
1
Hola. Si ha intentado esto, ¿puede agregar una imagen del resultado? Realmente no veo cómo daría un efecto de desenfoque como el que está buscando el OP sin afectar los colores de la imagen ...
Yisela
Esto solo le daría una neblina borrosa sobre la imagen nítida original.
DA01
No funcionó. Pero tal vez lo hice mal.
jgervin
0

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

McIvor
fuente