¿Cómo crear desenfoque en una capa vacía en Photoshop? [duplicar]

Estoy tratando de crear una especie de imagen de filtro de desenfoque semitransparente que puedo usar sobre algunos fondos en un sitio web. Pero Photoshop no me permite hacerlo en una capa vacía. ¿Hay un trabajo alrededor? ¿O tal vez podría lograr un efecto similar de manera deferente?

Respuestas (1)

En pocas palabras, no puede desenfocar una capa vacía. Nunca ha sido posible desdibujar lo que no está. Blur interactúa con los píxeles existentes para crear un efecto de dispersión de esos píxeles que da como resultado el desenfoque.

Puede convertir imágenes en objetos inteligentes y luego usar filtros inteligentes para conservar la versión nítida. Luego, simplemente edite el contenido del objeto inteligente para modificar la imagen base. Pero no hay forma de guardar "solo el desenfoque" sin una imagen.

La mayoría de los sitios web que utilizan fondos borrosos desenfocan la imagen o aplican filtros de hoja de estilo en cascada (CSS) a la imagen para que el CSS haga el desenfoque.

Simplemente agregue una clase a la imagen:

<img src="path/to/img.jpg" width="100" height="100" border="0" alt="image" class="blur" />

Luego crea la regla CSS para difuminar:

img.blur { 
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px); 
  -o-filter: blur(2px); 
  -ms-filter: blur(2px); 
  filter: blur(2px); }

Puedes ver una demostración en vivo aquí: jsFiddle

Tenga en cuenta que esto requiere CSS3 y no funcionará con navegadores más antiguos. Este sitio afirma que su método funciona en todos los navegadores, pero yo mismo no lo he probado.

Y también debe tener en cuenta que el desenfoque de CSS puede afectar bastante el tiempo de carga de la página.

caniuse es un buen lugar para verificar la compatibilidad del navegador para este tipo de cosas.