Como criar um efeito de vidro fosco / fosco não destrutivo e reutilizável?

Como posso criar um fundo desfocado genérico que pode ser usado em várias imagens semelhantes ao exemplo abaixo?

Preciso de um vidro fosco branco com aparência de png que eu possa usar para passar sobre as imagens comuns para dar a todos um visual de vidro fosco (como se você quase conseguisse entender o que está por trás; talvez algumas cores).

Exemplos:

^{Clique na imagem para resolução máxima}

Talvez um fundo branco com textura (textura granulada), em seguida, Gaussian desfoque isso e use-o como uma camada sobre todas as minhas imagens.

Sei que o link que publiquei acima provavelmente é apenas uma imagem borrada, mas preciso de uma camada que possa ser reutilizada em um projeto iOS. Dessa forma, pode-se usar uma camada de vista sobre seções de uma imagem e fazer com que a imagem embaixo pareça borrada. Talvez eu não deva usar blur como o termo aqui. Estou à procura de aparência de vidro fosco.

O que estou tentando fazer com esta imagem é importá-la para o meu aplicativo iOS e usá-la como plano de fundo. Então, quando essa visualização estiver sobre outras visualizações (uma visualização de mapa, uma foto, etc ...), todas elas serão congeladas. Estou tentando criar o efeito dessa imagem no iOS 7. E não, não quero usar os novos recursos de design do iOS 7, porque a maioria dos meus usuários ainda está no iOS 5. E não, eu não quero forçá-los a atualizar.

Você não pode simplesmente sobrepor uma imagem 'embaçada' que desfoca a imagem aleatória por trás dela. O efeito de desfoque precisa amostrar a imagem para trás para transpor / espalhar os pixels, portanto, ela deve ser aplicada lá.

No entanto, você pode criar uma textura arenosa / granulada e usá-la como uma camada de multiplicação para obter a aparência da textura granulada.

Atualização - como Derek sugere em outra resposta, você pode fazer um desfoque não destrutivo convertendo a camada da imagem em um objeto inteligente e aplicando o desfoque a ele. Você pode inserir o objeto inteligente e editá-lo independentemente do desfoque.

Olhando para a segunda imagem que você forneceu, algo como isso não é possível com uma sobreposição PNG. Isso é absolutamente feito de forma programática de alguma forma e não com uma sobreposição PNG. Eu tentei algumas das outras sugestões postadas aqui, nenhuma chegou perto (mas talvez você tenha melhor sorte)

Isso realmente está indo além dos seus requisitos, mas isso precisa ser feito com uma sobreposição? Não tenho certeza de que você obterá o efeito que espera alcançar usando esse tipo de método. Se você tiver a capacidade, eu faria isso programaticamente.

Não tenho informações sobre como o aplicativo é configurado, mas uma maneira de fazer isso é com um filtro CSS3:

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

[observação para maior clareza: o processo é uma imagem de primeiro plano do produto com uma máscara alfa e uma imagem de segundo plano embaçada usando um filtro CSS]

Antes

Depois de

^{Crédito de imagem: Philip Leara}

Você pode conferir uma demonstração ao vivo disso aqui

No futuro, isso pode ser muito mais fácil usando o backdrop-filterestilo CSS proposto , mas o suporte atual para isso é quase inexistente .

Outra opção é criar um objeto inteligente e aplicar seus borrões e efeitos ao objeto inteligente. Fazendo dessa maneira, ainda permitirá que você abra o objeto inteligente e altere o que está dentro dele.

---Editar---

Desde que publiquei minha resposta acima, a pergunta foi editada e alterada levemente. A solicitação agora é obter um desfoque em um aplicativo iOS, sugiro que faça o desfoque com código, para que possa afetar qualquer imagem que você desejar.

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

Mais informações sobre isso aqui: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Existem alguns bons filtros no Dribble sobre como fazer desfoque no Photoshop. Talvez estes possam ser úteis também para você. Eu gosto especialmente dessa maneira não destrutiva de obter efeito. Eu sei que já existe algo sobre isso, mas aqui estão os links:

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

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

Se isso ainda for necessário, eu estava tentando obter o mesmo efeito e não consegui.

Fiz isso com um plug-in chamado html2canvas e stackBlur, que encontrei aqui: http://jsfiddle.net/WtQjY/201/ .

Eu não sou o autor dos plugins. E este é apenas um trecho do código. Eu mudei para ser mais simples e rápido:

.borrão{
    -webkit-filter: borrão (7px);
-moz-filter: desfoque (7px);
-o-filtro: desfoque (7px);
-ms-filter: desfoque (7px);
filtro: desfoque (7 px);

}

////////////////////////////////////
// inclui biblioteca jquery
// jQuery
$ (document) .ready ({
$ ('# YourButton'). Click ({

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

});
});

ainda é muito lento, mas funciona.

Então, eu criei minha própria versão deste script que imaginei compartilhar. Fiz duas imagens de plano de fundo e anexei uma delas à div criança e, em seguida, uma versão nítida e clara ao plano de fundo principal. Basta definir os planos de fundo de ambos os objetos como fixos e centralizados e eles corresponderão.

Aqui está uma demonstração: http://www.palandforsale.us/frosted-glass/

Se entendi sua pergunta corretamente, acho que não. 'Borrão' é uma operação executada em um software, cada um à sua maneira. Como o esboço aplica o desfoque pode ser uma maneira diferente da do Photoshop ou do Google Chrome.

Portanto, você não pode exportar uma imagem com 'blur'. O desfoque está sempre em interação com o que está por trás dele e não pode ser exportado do aplicativo em que você está criando.

1. Faça uma camada cinza de 50% sobre a camada que deseja criar na camada embaçada e fosca.
2. Encha-o com ruído, cuja quantidade depende da sua necessidade
3. Desfoque com o Gaussian Blur conforme necessário.
4. Acima dessa camada, você pode adicionar uma camada de curvas e ajustar os valores de branco e preto puxando a extremidade branca para baixo ou empurrando a extremidade preta da camada de curvas.

Essas duas camadas devem dar um efeito gelado e embaçado. A ordem dessas duas camadas pode ser alterada.

Crie uma ação que duplique a imagem e aplique um desfoque gaussiano. Esta é a única maneira do PS de fazer isso, acredito.