Cara membuat ulang efek blur iOS7 ini

Jawaban:

29

Bagian bawahnya buram dan memiliki lapisan putih semitransparan .

Langkah1: Pilih area overlay di latar belakang (gambar asli) dan terapkan gaussian blur radius 12px.

Step2: Buat layer baru, pilih bagian yang sama untuk overlay, isi dengan putih, dan beri layer ini opacity 66%

Diproduksi ulang dengan bagian atas gambar referensi Anda:
EDIT: parameter baru yang cocok dengan aslinya

masukkan deskripsi gambar di sini

Peter Walser
sumber
Saya berasumsi ini dilakukan dengan kode, jika ini screenshot. Saya kira itu turun ke apakah dia meminta untuk melakukan ini dalam komposisi atau maket, atau menerapkannya secara online.
Eric
@Peter Walser cara membuat area overlay yang akan diterapkan Gaussian jika ada lebih banyak layer? Perlu terlebih dahulu untuk menggabungkannya?
Fred Collins
1
@FredCollins: ya, Anda menggabungkannya terlebih dahulu dan mengaburkan pilihan, atau Anda membuat layer baru dengan salinan dari seleksi yang digabung (yang perlu diciptakan kembali setiap kali sebuah layer diubah).
Peter Walser
@ PeterWalser terima kasih. Pertanyaan terakhir. Untuk membuat layer transparan baru dengan opacity 66% saya menggunakan alat persegi panjang tapi saya merasa ada cara yang lebih baik. Seperti membuat topeng / kliping topeng untuk lapisan kabur atau sejenisnya. Apa yang Anda sarankan?
Fred Collins
Dengan lapisan terpisah, Anda dapat dengan cepat mengatur opacity keseluruhan. Solusi topeng opacity memiliki hasil yang sama, di sini Anda bahkan dapat menyesuaikan opacity per piksel. Dan, tentu saja Anda dapat menggabungkan kedua pendekatan (topeng + transparansi lapisan). Mana yang paling cocok untuk Anda.
Peter Walser
7

Anda tidak menentukan program atau teknologi apa yang Anda gunakan. Jadi, sementara Peter menjelaskan cara yang bagus untuk melakukannya dengan Photoshop , saya ingin menambahkan bahwa efek ini juga dapat dibuat menggunakan CSS3.

Inilah puncak ke dalam CSS yang dibutuhkan:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Tidak mengatakan bahwa ini adalah bagaimana Anda harus melakukannya ... pada kenyataannya, saya pribadi akan menggunakan prosedur Peter.

e-sushi
sumber