Sadece gölgeleri ve açıktonları koruyarak doygunluğu azaltılmış bir görüntüyü şeffaf yapın

Bunu birkaç gündür yapmaya çalışıyorum ve ihtiyacım olan sonuçları elde edemedim. Başlıkta doğru terminolojiyi kullandığımdan emin değilim, eğer değilse, lütfen beni düzeltmekten çekinmeyin ve güncelleyeceğim.

Bundan gitmek istiyorum:

Buna (yardımcı olması durumunda k değerini göstermek için saydamlığın bir alanını örnekledim). Gölgelerin / vurguların orada olduğuna dikkat edin, ancak başka bir şey yok:

Bu, saydam görüntünün altına düz renkle dolu bir katman yerleştirmeme izin veriyor. Sonuç farklı bir renk gömlek ve gölgeler / vurgulamalar görülür:

şeffaf gömlek katmanının altına yerleştirilmiş mavi ile doldurulmuş katman

şeffaf gömlek katmanının altına yerleştirilmiş siyahla doldurulmuş katman

Bunu nasıl başarabileceğim konusunda herhangi bir fikrim var mı? Sonuca yaklaşabildim, ancak şeffaflığım ya yeterli değil ya da çok fazla. Gölge / açık ton ayrıntısının çoğunu kaybediyorum. Başlangıç ​​resmi JPG dosya türündendir.

GÜNCELLEME:

Bunun gibi bir PNG olması için nihai sonuca ihtiyacım var:

Bu PNG beyaz bir arka plana sahip gibi görünüyor, ancak Photoshop veya GIMP içine alarak gömleğin şeffaf olduğunu göreceksiniz. Bunun nasıl yapıldığını tersine çevirmem gerekiyor, böylece diğer kıyafetlere de yapılabilir.

Yukarıdaki PNG ile ilgili ilginç olan şey, görüntünün saydam kısmındaki Gölgeler, Vurgular ve Ortatonların tümü ayrı ayrı seçilebilir. Photoshop :-> Renk Aralığı-> Gölgeler, Açıktonlar veya Orta Tonlar'ı seçin. Ne demek istediğimi göstermek için aşağıdaki resim:

Saydamlık için beyazı alfa kanalı olarak atarken, tanım başına bunlar beyaz olacağından opak vurgulara sahip olamayacağız, dolayısıyla tamamen şeffaf olacaktır.

Vurgulanan beyaz alanları ve siyah gölgeleri koruyan bir alfa kanalına sahip olmak için alfa atamak için gri bir renk seçmeliyiz.

• Efekti daha net göstermek için önce orijinal görüntünüzü daha koyu ve kontrastı artırdım. Her ikisini de ayarlamanız, kaynak kontrastını ayarlamanız ve daha iyi sonuçlar için ihtiyaçlarınıza en uygun gri düzeyi seçmeniz gerekir.

• Sonra bir alfa kanalı 'gri' renk (beyaz yerine) atadı:

  

Şimdi bu resmi örten yeşil bir arka planla kapladığımızda hem vurguların hem de gölgelerin korunduğunu görebiliriz.

Koyu renklerde kullanıldığında orijinal görüntünün beyaz alanlarının istenen efekt için hala çok parlak olabileceğini görebiliyoruz. Alfa kanalı şablonumuzu oluşturmak için beyaz bir kaynak yerine gri seçtiğimizde bu aşılabilir.

Aşağıda (sol üstte) Beyaz orijinalde% 20 opaklığa sahip gri bir kova dolgusu kullandım. Griye (sağ üst) bir şeffaflık alfa kanalı atadıktan sonra, alt çizgi efektlerini elde etmek için renkli bir arka planı (sol siyah, orta koyu kırmızı, sağ fildişi beyaz) kaplayabiliriz.

Bunun için en iyi gölgeler ve açıktonlar için ayrı kanallar oluşturabilirsiniz .

Gölgeler direkt olarak beyaz bir tişört alınabilir ve bir olarak kullanılabilir Multiplikatör gömlek renk için (% 0-100) (tabaka modu: çarpı)

Vurgulamalar gelince , bu gerçekten malzemeye bağlıdır. Kumaş yüzeyde fazla ışık yansıtmaz, bu nedenle renginin çoğu dağınık ışıktan (gömleğin rengi) gelir. Aynasal ışığı çıkarmak için , beyaz gömlek görüntüsünde yüksek geçişli bir filtre (histogram uyarlaması: sadece parlak renkler ve koyu renklerin hiçbiri) kullanmam ve gömleği aydınlatmak için bunu kullanırım, ancak sadece% 20 ile (düşük yansıma).

Katmanlar:

Ortaya çıkan görüntüler:

Daha kolay bir yol var - beyaz arka planı seçin, ters çevirin, fırça ön ayarını tanımlayın, şeffaf, gri tonlamalı yeni dosya oluşturun - ve bu. Listedeki son fırça olan fırçayı seçin ve siyah dört noktalı renk örneğiyle bir kez tıklayın. İşte bu kadar! Web olarak kaydedebilirsiniz - PNG.

Birden Çok Görüntüden ziyade CSS Filtreleri Kullan

Bir web sitesinin resmini renklendirmek için CSS filtreleri kullanmalısınız .

Faydaları aşağıdaki gibidir.

1. Yalnızca bir resim gerekir.
2. Daha küçük resim dosyası boyutu.
3. Bir resim düzenleyici kullanmak zorunda kalmadan renkleriniz üzerinde daha fazla kontrol.
4. Mobil uyumlu.
5. Daha hızlı yükleme süreleri.
6. Daha iyi SEO.

İçin Hue Bu CSS filtreyi kullanın:

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

İçin Parlaklık kullanım:

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

For Doygunluk kullanım:

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

For Greyscale kullanım:

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