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


25

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:

Contoh gambar buram
Klik pada gambar untuk resolusi penuh

masukkan deskripsi gambar di sini

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.


6
"blur" bukan hal umum yang dapat Anda simpan di PNG, ini adalah efek yang diterapkan pada gambar dan sepenuhnya tergantung pada konten gambar. Namun, Anda dapat menyimpan actiondan menerapkan efek blur. Jika Anda melakukan apa yang diuraikan dalam tutorial dan diskusi tentang tanya jawab terkait, saat merekam tindakan , Anda mungkin memiliki apa yang Anda butuhkan. Kemungkinan besar seseorang akan secara manual membuat topeng pemilihan, dan kemudian mengotomatiskan seluruh proses menggunakan tindakan.
horatio

Hasil edit tidak benar-benar mengubah pertanyaan. Jawabannya adalah, seperti yang disebutkan Horatio: Tidak, Anda tidak dapat memiliki blur di lapisan terpisah. Gambar iOS hanya blur yang lebih besar.
Yisela

1
Ini penuh dengan pertanyaan pengkodean jika Anda bertanya kepada saya. Yang paling dekat Anda akan mendapatkan sesuatu seperti contoh kedua Anda dengan menggunakan gambar adalah ini: jsfiddle.net/lollero/DE4qn ... tentu saja ini sangat statis dan mengharuskan Anda untuk memiliki 2 versi gambar yang sama (tentu saja ini hal yang sama dapat dilakukan dengan metode filter CSS3).
Joonas

Jawaban:


11

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.


Bagaimana saya bisa melakukan tekstur kasar berpasir? Saya berpikir untuk bersama-sama ini akan berhasil. Dua sama persis, tetapi satu adalah satu piksel ke atas dan satu piksel ke kanan dari yang pertama dan itu akan membuatnya kasar (berlapis jika Anda mau).
jgervin

1
Buat layer diisi putih dan filter> noise> tambah noise untuk menambahkan gandum. Dari sana mungkin mengaburkannya sedikit untuk melunakkannya sedikit, atur layernya menjadi berlipat ganda dan turunkan opacity menjadi sekitar 10%.
John

9

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

Produk kami!

Setelah

Produk kami!
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 .


2
Jika ini pilihan, ini adalah rute yang baik untuk diambil karena pengguna atau pengembang dapat mengubah gaya sesuai keinginan.
horatio

1
Yang perlu diperhatikan adalah ini akan berfungsi pada perangkat iOS, dan mungkin sebagian besar perangkat seluler, tetapi bukan pendekatan yang layak untuk desain web non-seluler karena dukungannya sangat terbatas. caniuse.com/css-filters
Eric

Kita semua asli. Dan pemrograman itu bukan pilihan karena mungkin memiliki 3 tampilan yang menunjukkan atau 2 atau 1, tetapi tampilan atas harus memungkinkan semua tampilan di bawahnya, tidak peduli berapa banyak yang ada, untuk menunjukkan sedikit lemparan.
jgervin

@ jgervin Saya tidak berpikir apa yang Anda coba capai adalah mungkin hanya dengan overlay PNG, tapi saya ingin seseorang membuktikan kesalahan saya karena saya akan belajar sesuatu yang baru! Saya lebih suka fokus pada bagaimana Anda bisa melakukan ini dengan cara lain, mungkin Stack Overflow dapat membawa Anda ke arah yang benar.
JohnB

@ Eric jika ini aplikasi iOS, platform web tidak masalah.
Ctrl Alt Design

6

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/



3

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.


2

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/


Halaman demo tampaknya turun. Bisakah demo ditemukan di tempat lain, atau apakah mungkin untuk membuat JSFiddle?
Praxis Ashelin

2

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.


Terima kasih untuk jawaban, Itu masuk akal. Jadi jika saya ingin menggunakannya dalam aplikasi saya harus membuatnya secara terprogram.
Dilip

Ya, untuk setiap aplikasi secara terpisah. CSS memiliki opsi kabur saat ini, misalnya.
Vincent

0
  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.


1
Hai yang disana. Jika Anda sudah mencoba ini, dapatkah Anda menambahkan gambar hasilnya? Saya tidak benar-benar melihat bagaimana itu akan memberikan efek blur seperti yang dicari OP tanpa mempengaruhi warna gambar ...
Yisela

Ini hanya akan memberi Anda kabut kabur pada gambar tajam asli.
DA01

Tidak bekerja. Tapi mungkin saya salah melakukannya.
jgervin

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.