Bagaimana cara membuat efek kaca buram / buram yang tidak merusak dan dapat digunakan kembali?

Bagaimana saya bisa membuat latar belakang buram generik yang dapat digunakan pada banyak gambar yang mirip dengan contoh di bawah ini?

Saya membutuhkan kaca putih yang terlihat png yang dapat saya gunakan untuk melapisi gambar biasa untuk memberi mereka semua tampilan kaca buram (seperti Anda hampir bisa melihat apa yang ada di baliknya; mungkin beberapa warna).

Contoh:

^{Klik pada gambar untuk resolusi penuh}

Mungkin latar belakang putih dengan tekstur (tekstur kasar) kemudian Gaussian mengaburkan itu dan kemudian menggunakannya sebagai lapisan di atas semua gambar saya.

Saya tahu tautan yang saya posting di atas mungkin hanya gambar yang buram, tapi saya perlu lapisan yang dapat digunakan kembali dalam proyek iOS. Dengan cara ini dapat digunakan lapisan tampilan di atas bagian gambar dan membuat gambar di bawahnya tampak kabur. Mungkin saya seharusnya tidak menggunakan blur sebagai istilah di sini. Saya mencari tampilan kaca buram.

Apa yang saya coba lakukan dengan gambar ini adalah mengimpornya ke aplikasi iOS saya menggunakan latar belakang tampilan. Kemudian ketika tampilan ini melebihi tampilan lain (tampilan peta, foto, dll ...) semuanya buram. Saya mencoba membuat efek gambar ini dari iOS 7. Dan tidak, saya tidak ingin menggunakan fitur desain iOS 7 yang baru, karena sebagian besar pengguna saya masih menggunakan iOS 5. Dan tidak, saya tidak ingin memaksa mereka untuk meningkatkan.

Anda tidak bisa hanya overlay gambar 'buram' yang mengaburkan gambar acak di belakangnya. Efek blur perlu mengambil sampel gambar di belakang untuk mengubah / menyebar piksel, sehingga perlu diterapkan di sana.

Namun Anda dapat membuat tekstur berpasir / kasar dan menggunakannya sebagai lapisan berlipat ganda untuk mendapatkan tampilan tekstur kasar.

Pembaruan - Seperti yang disarankan Derek dalam jawaban lain, Anda dapat membuat blur non-destruktif dengan mengubah layer gambar Anda menjadi objek pintar, lalu menerapkan blur pada itu. Anda kemudian dapat memasukkan objek pintar dan mengeditnya secara terpisah dari blur.

Melihat gambar kedua yang Anda berikan, sesuatu seperti ini tidak dimungkinkan dengan overlay PNG. Itu benar-benar dilakukan secara terprogram dalam beberapa cara dan tidak dengan overlay PNG. Saya telah mencoba beberapa saran lain yang diposting di sini, tidak ada yang mendekati (tetapi mungkin Anda akan memiliki keberuntungan yang lebih baik)

Ini benar-benar melampaui persyaratan Anda, tetapi apakah ini harus dilakukan dengan overlay? Saya tidak yakin Anda akan mendapatkan efek yang ingin Anda capai menggunakan metode semacam itu. Jika Anda memiliki kemampuan, saya akan melakukan ini secara terprogram.

Saya tidak memiliki wawasan tentang cara mengatur aplikasi Anda, tetapi satu cara Anda bisa melakukan ini adalah dengan filter CSS3:

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

[catatan untuk kejelasan: prosesnya adalah gambar latar depan produk dengan masker alpha, dan gambar latar belakang yang dikaburkan menggunakan filter CSS]

Sebelum

Setelah

^{Kredit Gambar: Philip Leara}

Anda dapat melihat demo langsung ini di sini

Di masa depan, ini dapat dibuat lebih mudah menggunakan backdrop-filtergaya CSS yang diusulkan , tetapi dukungan saat ini untuk ini di samping tidak ada .

Pilihan lain adalah membuat objek pintar, dan menerapkan kekaburan dan efek Anda ke objek pintar. Melakukannya dengan cara ini, masih akan membiarkan Anda membuka objek pintar dan mengubah apa yang ada di dalamnya.

--- Edit ---

Karena saya telah memposting jawaban saya di atas, pertanyaannya telah diedit dan sedikit berubah. Permintaan adalah sekarang mencapai blur dalam aplikasi iOS, saya sarankan untuk melakukan blur dengan kode, dengan cara itu dapat mempengaruhi gambar yang Anda inginkan.

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

Info lebih lanjut tentang ini di sini: http://notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Ada beberapa filter bagus pada Dribble tentang cara membuat blur di Photoshop. Mungkin ini bisa bermanfaat juga untuk Anda. Saya suka terutama cara non-destruktif ini untuk mendapatkan efek. Saya tahu sudah ada sesuatu tentang ini, tetapi di sini adalah tautannya:

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

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

Jika ini masih perlu, saya berusaha untuk mencapai efek yang sama dan saya tidak bisa.

Saya melakukannya dengan sebuah plugin bernama html2canvas dan stackBlur, yang saya temukan di sini: http://jsfiddle.net/WtQjY/201/ .

Saya bukan penulis plugin. Dan ini hanyalah potongan kode. Saya mengubahnya menjadi lebih sederhana dan lebih cepat:

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

}

////////////////////////////----//
// sertakan perpustakaan jquery
// jQuery
$ (dokumen) .ready ({
$ ('# YourButton'). Klik ({

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

});
});

masih sangat lambat tapi berhasil.

Jadi saya membuat versi saya sendiri dari skrip ini yang saya pikir akan saya bagikan. Saya membuat dua gambar latar belakang dan melampirkan salah satunya ke div anak dan kemudian versi yang jernih dan jelas ke latar belakang utama. Hanya mengatur latar belakang kedua objek untuk diperbaiki dan terpusat dan mereka akan cocok.

Berikut ini demo: http://www.palandforsale.us/frosted-glass/

Jika saya memahami pertanyaan Anda dengan benar, saya pikir Anda tidak bisa. 'Blur' adalah operasi yang dijalankan dalam perangkat lunak, masing-masing dengan caranya sendiri. Bagaimana sketsa berlaku blur mungkin cara yang berbeda dari cara Photoshop atau Google Chrome lakukan.

Karenanya, Anda tidak dapat mengekspor gambar dengan 'blur'. Blur selalu berinteraksi dengan apa yang ada di belakangnya, dan itu tidak dapat diekspor dari aplikasi tempat Anda membuatnya.

1. Buatlah lapisan abu-abu 50% di atas lapisan yang ingin Anda buat lapisan buram dan buram.
2. Isi dengan kebisingan, jumlah yang tergantung pada kebutuhan Anda
3. Blur dengan Gaussian blur yang Anda butuhkan.
4. Di atas lapisan ini Anda dapat menambahkan lapisan kurva dan menyesuaikan nilai-nilai putih dan hitam dengan menarik ujung putih atau mendorong ujung hitam dari lapisan kurva.

Kedua lapisan ini harus memberikan efek dingin dan buram. Urutan kedua lapisan ini dapat diubah.

Buat tindakan yang menduplikasi gambar dan menerapkan blur Gaussian. Ini adalah satu-satunya cara PS untuk melakukan ini saya percaya.