Jadikan gambar desaturasi transparan dengan hanya membuat bayangan & highlight

Saya sudah mencoba melakukan ini selama beberapa hari sekarang dan belum mendapatkan hasil yang saya butuhkan. Saya tidak yakin saya menggunakan terminologi yang benar dalam judul, jika tidak, jangan ragu untuk memperbaiki saya, dan saya akan memperbaruinya.

Saya ingin beralih dari ini:

untuk ini (saya telah mencicipi area transparansi untuk menunjukkan nilai k jika itu membantu). Perhatikan bayangan / highlight ada di sana, tetapi tidak ada yang lain:

Ini memungkinkan saya untuk menempatkan lapisan yang diisi dengan warna solid di bawah gambar transparan. Hasilnya adalah kemeja warna yang berbeda, dan bayangan / highlight terlihat:

lapisan diisi dengan warna biru ditempatkan di bawah lapisan baju transparan

lapisan penuh dengan hitam ditempatkan di bawah lapisan baju transparan

Apakah ada yang punya ide tentang bagaimana saya bisa mencapai ini? Saya sudah bisa mendekati hasilnya, tetapi transparansi saya tidak cukup atau terlalu banyak. Saya kehilangan banyak detail bayangan / highlight. Gambar awal adalah dari tipe file JPG.

MEMPERBARUI:

Saya membutuhkan hasil akhir untuk menjadi PNG seperti ini:

PNG ini terlihat seperti memiliki latar belakang putih tetapi dengan Photoshop atau GIMP, Anda akan melihat kemeja itu transparan. Saya perlu merekayasa balik cara ini dilakukan sehingga bisa dilakukan ke pakaian lain.

Apa yang menarik tentang PNG di atas adalah Bayangan, Sorotan, dan Midtone di bagian transparan gambar semuanya dapat dipilih secara individual. Photoshop: Pilih-> Rentang Warna-> Bayangan, Sorotan atau Midtone. Gambar di bawah ini untuk menunjukkan apa yang saya maksud:

Ketika menetapkan putih sebagai saluran alfa untuk transparansi, kami tidak akan dapat memiliki highlight buram, karena ini per definisi akan menjadi putih, maka sepenuhnya transparan.

Untuk memiliki saluran alfa yang menghemat area putih yang disorot, dan bayangan hitam sebaiknya kita memilih warna abu-abu untuk menetapkan alpha.

• Untuk menunjukkan efek lebih jelas, saya pertama-tama membuat gambar asli Anda lebih gelap, dan meningkatkan kontras. Anda perlu keduanya, menyesuaikan kontras sumber, dan memilih tingkat abu-abu yang paling sesuai dengan kebutuhan Anda untuk hasil yang lebih baik.

• Lalu saya menetapkan saluran alfa ke warna 'abu-abu' (bukan putih):

  

Sekarang ketika kita overlay gambar ini dengan misalnya latar belakang hijau yang bisa kita lihat, bahwa kedua highlight, dan bayangan dipertahankan.

Kita dapat melihat, bahwa ketika digunakan pada warna-warna gelap, area putih dari gambar asli mungkin masih terlalu terang untuk efek yang diinginkan. Ini dapat diatasi ketika kita memilih sumber abu-abu daripada sumber putih untuk membuat templat saluran alfa.

Di bawah (kiri atas) saya menggunakan isian abu-abu dengan opacity 20% pada dokumen asli putih. Setelah menetapkan saluran alpha transparan ke abu-abu (kanan atas) kita dapat overlay latar belakang berwarna (hitam kiri, merah tua tengah, putih gading kanan) untuk mencapai efek garis bawah.

Untuk ini, Anda sebaiknya membuat saluran terpisah untuk bayangan dan sorotan .

The bayangan bisa langsung diambil dari putih T-Shirt, dan digunakan sebagai multiplicator (0-100%) untuk warna kemeja ini (layer mode: multiply)

Adapun highlight , ini sangat tergantung pada materi. Kain tidak memantulkan banyak cahaya di permukaan, sehingga sebagian besar warnanya berasal dari cahaya yang menyebar (warna baju). Untuk mengekstrak cahaya specular, saya akan menggunakan filter high-pass (adaptasi histogram: hanya warna-warna cerah, dan tidak ada warna gelap) pada gambar kemeja putih dan menggunakannya untuk mencerahkan kemeja, tetapi hanya dengan mungkin 20% (refleksi rendah).

Lapisan:

Gambar yang dihasilkan:

Ada cara yang lebih mudah - pilih latar belakang putih, balikkan, tentukan brush preset, buat file baru berbasis transparan, skala abu-abu - dan ini. Pilih kuas, yang merupakan yang terakhir dalam daftar dan klik sekali dengan carikan fourground hitam. Voila! Daripada Anda dapat menyimpan sebagai web - png.

Gunakan Filter CSS Daripada Banyak Gambar

Anda harus menggunakan filter CSS untuk mewarnai gambar untuk situs web.

Manfaatnya adalah sebagai berikut.

1. Hanya satu gambar yang dibutuhkan.
2. Ukuran file gambar lebih kecil.
3. Lebih mengontrol warna Anda tanpa harus menggunakan editor gambar.
4. Ramah ponsel.
5. Waktu muat lebih cepat.
6. SEO yang lebih baik.

Untuk Hue gunakan filter CSS ini:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Untuk penggunaan Brightness :

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Untuk penggunaan Saturasi :

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

Untuk penggunaan skala abu - abu :

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}