Jadikan gambar desaturasi transparan dengan hanya membuat bayangan & highlight

17

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: masukkan deskripsi gambar di sini

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: gambar hasil

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 masukkan deskripsi gambar di sini

lapisan penuh dengan hitam ditempatkan di bawah lapisan baju transparan masukkan deskripsi gambar di sini

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: masukkan deskripsi gambar di sini

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: masukkan deskripsi gambar di sini

aMMT
sumber
2
Mengapa tidak melakukan Layer Blend dengan mode Multiply? Sepertinya bentuk Anda memiliki tepian yang cukup jelas sehingga Anda dapat menutupinya dengan mudah.
ckpepper02
1
Karena OP ingin mengekspor gambar sebagai PNG transparan. Multiply mengandalkan warna yang ada di belakangnya.
Hanna
Multiply + mask adalah cara untuk melakukannya.
John
Bisakah Anda mengembangkannya, John?
Hanna

Jawaban:

13

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):

    masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

Takkat
sumber
Saya pemula dalam hal ini dan saya mengalami masalah dengan saluran alpha. Metode saya untuk mendapatkan efek transparansi sampai sekarang telah pergi ke tab saluran dan mengontrol + mengklik saluran RGB. Saya kemudian menggunakan topeng cepat dan menyesuaikan level, tetapi sepertinya saya tidak bisa sampai ke tempat Anda berada di gambar pertama yang Anda posting. Bagaimana Anda menetapkan saluran alpha ke abu-abu?
aMMT
@Phonetic: Saya cepat-cepat melakukan ini dengan Gimp (ada entri menu untuk memilih warna apa saja untuk transparansi). Ini membuat saya percaya ada (atau seharusnya) juga ada opsi seperti itu di PS atau aplikasi apa pun yang Anda gunakan. Namun pendekatan yang jauh lebih baik diberikan oleh Peter jawaban yang sangat bagus , yaitu memisahkan highlight dan bayangan. Ini akan memungkinkan penyesuaian yang jauh lebih baik.
Takkat
Aku mengerti sekarang. Telah mencapai apa yang saya butuhkan dengan mengikuti instruksi ini. Terima kasih banyak
aMMT
Bisakah saya memiliki psd untuk tutorial ini, saya mengalami kesulitan mendapatkan transparansi.
@Takkat dapatkah Anda menyebutkan langkah-langkah untuk titik kedua - "Lalu saya menetapkan saluran alfa ke warna 'abu-abu' (bukan putih)"?
Vishal
13

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:

masukkan deskripsi gambar di sini

Gambar yang dihasilkan:

masukkan deskripsi gambar di sini

Peter Walser
sumber
Ini bagus. Apakah ada cara untuk mendapatkan gambar akhir sebagai PNG transparan? Tujuan akhirnya di sini adalah menggunakan 1 gambar png tunggal di situs web, dan dengan mengubah warna latar belakang html div yang berisi gambar, warna baju akan berubah secara efektif.
aMMT
Saya mengalami kesulitan mendapatkan sorotan. Saya pikir saya kehilangan langkah karena setelah menerapkan filter high-pass, kemeja di lapisan yang saya terapkan filter high-pass terlihat sangat abu-abu (tidak ada banyak kontras seperti yang saya lihat di layer Highlight Anda) . Saya menggunakan radius 20 pixel pada filter high-pass pada awalnya dan kemudian mencoba beberapa nilai radius yang berbeda, tapi saya tidak mendekati apa yang terlihat di layer highlight Anda. Apa yang bisa saya lewatkan?
aMMT
Gunakan metode yang sama, isi latar belakang / luar gambar Anda dalam warna putih dan biarkan css Anda bertindak sebagai lapisan bawah. Kemeja itu akan menjadi jendela semi-transparan.
John
Saya berharap saya memahami jawaban ini dengan lebih baik karena kedengarannya sangat keren.
Hanna
Efek ini membutuhkan campuran mode (multiply, brighten), sedangkan HTML hanya menggunakan blending normal (melukis gambar transparan satu sama lain). HTML5 + SVG akan menjadi pilihan, tetapi mode campuran SVG tampaknya belum didukung oleh browser. Lihat dev.w3.org/SVG/modules/compositing/master/… . Cara efektif untuk melakukan efek ini di browser adalah dengan program java kecil (mode campuran Java2d) tertanam di halaman.
Peter Walser
1

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.

Valentina Yototva
sumber
1

Gunakan Filter CSS Daripada Banyak Gambar

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

masukkan deskripsi gambar di sini

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);
}
Perubahan Invarian
sumber