Come creare un effetto vetro sfocato / smerigliato non distruttivo e riutilizzabile?

Come posso creare uno sfondo sfocato generico che può essere utilizzato su più immagini simili all'esempio seguente?

Ho bisogno di un vetro smerigliato bianco dall'aspetto png che posso usare per sovrapporre immagini normali per dare a tutti un aspetto di vetro smerigliato (come se quasi riuscissi a capire cosa c'è dietro; forse alcuni colori).

Esempi:

^{Clicca sull'immagine per la massima risoluzione}

Forse uno sfondo bianco con trama (trama granulosa) quindi sfocatura gaussiana e quindi usarlo come strato su tutte le mie immagini.

So che il link che ho pubblicato sopra è probabilmente solo un'immagine sfocata, ma ho bisogno di un livello che può essere riutilizzato in un progetto iOS. In questo modo può essere utilizzato un livello di visualizzazione su sezioni di un'immagine e rendere l'immagine sottostante sfocata. Forse non dovrei usare la sfocatura come termine qui. Sto cercando un look in vetro smerigliato.

Quello che sto cercando di fare con questa immagine è importarlo nella mia app iOS, usarlo come sfondo di visualizzazione. Quindi, quando questa vista è sopra altre viste (una vista mappa, una foto, ecc ...) sono tutti glassati. Sto cercando di creare l'effetto di questa immagine da iOS 7. E no, non voglio usare le nuove funzionalità di progettazione di iOS 7, perché la maggior parte dei miei utenti è ancora su iOS 5. E no, non voglio forzarli ad aggiornare.

Non puoi semplicemente sovrapporre un'immagine "sfocata" che sfuma l'immagine casuale dietro di essa. L'effetto di sfocatura deve campionare l'immagine dietro per trasporre / diffondere i pixel, quindi deve essere applicato lì.

Puoi comunque creare una trama sabbiosa / granulosa e usarla come strato multiplo per ottenere l'aspetto di una trama granulosa.

Aggiornamento - Come Derek suggerisce in un'altra risposta, puoi creare una sfocatura non distruttiva convertendo il livello dell'immagine in un oggetto intelligente, quindi applicare la sfocatura a quello. È quindi possibile inserire l'oggetto smart e modificarlo indipendentemente dalla sfocatura.

Dando un'occhiata alla seconda immagine che hai fornito, qualcosa del genere non è possibile con un overlay PNG. Ciò è assolutamente programmato in qualche modo e non con un overlay PNG. Ho provato alcuni degli altri suggerimenti pubblicati qui, nessuno si è avvicinato (ma forse avrai più fortuna)

Questo è davvero al di fuori dei tuoi requisiti, ma deve essere fatto con un overlay? Non sono sicuro che otterrai l'effetto che speri di ottenere usando quel tipo di metodo. Se hai le capacità, lo farei invece a livello di codice.

Non ho idea di come sia configurata la tua applicazione, ma un modo per farlo è con un filtro CSS3:

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

[nota per chiarezza: il processo è un'immagine in primo piano del prodotto con una maschera alfa e un'immagine di sfondo che è sfocata usando un filtro CSS]

Prima

Dopo

^{Credito di immagine: Philip Leara}

Puoi vedere una demo live di questo qui

In futuro, questo potrebbe essere reso molto più semplice usando lo backdrop-filterstile CSS proposto , ma l'attuale supporto per questo è quasi inesistente .

Un'altra opzione è quella di creare un oggetto intelligente e applicare le sfocature e gli effetti all'oggetto intelligente. Farlo in questo modo, ti consentirà comunque di aprire l'oggetto intelligente e di modificare ciò che è al suo interno.

---Modificare---

Da quando ho pubblicato la mia risposta sopra, la domanda è stata modificata e leggermente modificata. La richiesta è ora di ottenere una sfocatura in un'app iOS, suggerirei di fare la sfocatura con il codice, in modo che possa influenzare qualsiasi immagine desideri.

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

Maggiori informazioni al riguardo qui: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Ci sono alcuni buoni filtri su Dribble su come rendere sfocato in Photoshop. Forse questi potrebbero essere utili anche per te. Mi piace soprattutto questo modo non distruttivo per ottenere effetto. So che c'è già qualcosa a riguardo, ma ecco i link:

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

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

Se questo è ancora necessario, stavo cercando di ottenere lo stesso effetto e non ci sono riuscito.

L'ho fatto con un plugin chiamato html2canvas e stackBlur, che ho trovato qui: http://jsfiddle.net/WtQjY/201/ .

Non sono l'autore dei plugin. E questo è solo uno snippet del codice. L'ho cambiato per essere più semplice e veloce:

.blur {
    -webkit-filter: sfocatura (7px);
-moz-filter: sfocatura (7px);
-o-filtro: sfocatura (7px);
-ms-filter: sfocatura (7px);
filtro: sfocatura (7px);

}

//////////////////////////////////
// include la libreria jquery
// jQuery
$ (Document) .ready ({
$ ( '# YourButton'). Cliccare ({

$ ( '# YourContainer') toggleClass ( 'sfocatura.');

});
});

è ancora molto lento ma funziona.

Così ho creato la mia versione di questo script che ho pensato di condividere. Ho realizzato due immagini di sfondo e ne ho collegato uno al div figlio e quindi una versione nitida e chiara allo sfondo principale. Basta impostare gli sfondi di entrambi gli oggetti su fissi e centrati e corrisponderanno.

Ecco una demo: http://www.palandforsale.us/frosted-glass/

Se capisco correttamente la tua domanda, non penso che tu possa farlo. 'Sfocatura' è un'operazione che viene eseguita in un software, ognuno a modo suo. Il modo in cui lo schizzo applica la sfocatura può essere diverso rispetto a Photoshop o Google Chrome.

Pertanto, non è possibile esportare un'immagine con 'sfocatura'. La sfocatura è sempre in interazione con ciò che sta dietro e non può essere esportata dall'applicazione in cui la stai creando.

1. Crea un livello grigio al 50% sul livello che desideri creare il livello sfocato e smerigliato.
2. Riempilo di rumore, la cui quantità dipende dalle tue necessità
3. Sfocatura con sfocatura gaussiana di cui hai bisogno.
4. Sopra questo livello è possibile aggiungere un livello curve e regolare i valori bianco e nero tirando verso il basso l'estremità bianca o spingendo verso l'alto l'estremità nera del livello curve.

Questi due strati dovrebbero dare un effetto gelido e sfocato. L'ordine di questi due livelli può essere modificato.

Crea un'azione che duplica l'immagine e applica una sfocatura gaussiana. Questo è l'unico modo di PS per farlo credo.