ทำให้ภาพที่ไม่อิ่มตัวทำให้เกิดเงาและไฮไลต์เท่านั้น

ฉันพยายามทำสิ่งนี้มาสองสามวันแล้วและยังไม่ได้ผลลัพธ์ที่ต้องการ ฉันไม่แน่ใจว่าฉันใช้คำศัพท์ที่ถูกต้องในชื่อหากไม่โปรดแก้ไขให้ถูกต้องและฉันจะอัปเดต

ฉันต้องการไปจากนี้:

ถึงสิ่งนี้ (ฉันได้ลองพื้นที่โปร่งใสเพื่อแสดงค่า k ในกรณีที่ช่วยได้) สังเกตุเห็นเงา / ไฮไลท์อยู่ที่นั่น แต่ไม่มีอะไรอื่น:

สิ่งนี้ทำให้ฉันวางเลเยอร์ที่เต็มไปด้วยสีทึบด้านล่างของภาพโปร่งใส ผลที่ได้คือเสื้อสีที่แตกต่างกันและเงา / ไฮไลท์จะเห็น:

เลเยอร์ที่เต็มไปด้วยสีน้ำเงินอยู่ด้านล่างเลเยอร์เสื้อโปร่งใส

ชั้นที่เต็มไปด้วยสีดำวางอยู่ใต้ชั้นเสื้อโปร่งใส

ไม่มีใครมีความคิดใด ๆ เกี่ยวกับวิธีที่ฉันสามารถทำได้ ฉันสามารถเข้าใกล้ผลลัพธ์ แต่ความโปร่งใสของฉันไม่เพียงพอหรือมากเกินไป ฉันเสียรายละเอียดของเงา / ไฮไลต์ไปมาก ภาพเริ่มต้นเป็นไฟล์ JPG

UPDATE:

ฉันต้องการผลลัพธ์สุดท้ายเพื่อเป็น PNG เช่นนี้:

PNG นี้ดูเหมือนจะมีพื้นหลังสีขาว แต่นำไปใช้กับ Photoshop หรือ GIMP คุณจะเห็นว่าเสื้อโปร่งใส ฉันต้องย้อนกลับวิศวกรว่าวิธีนี้ทำได้เพื่อให้สามารถทำกับเสื้อผ้าชิ้นอื่น ๆ

สิ่งที่น่าสนใจเกี่ยวกับ PNG ด้านบนคือเงา, ไฮไลท์และ Midtones ในส่วนที่โปร่งใสของภาพทั้งหมดสามารถเลือกได้ทีละอัน Photoshop: เลือก -> Color Range-> Shadows, Highlights หรือ Midtones ภาพด้านล่างเพื่อแสดงสิ่งที่ฉันหมายถึง:

เมื่อกำหนดสีขาวเป็นช่องอัลฟาเพื่อความโปร่งใสเราจะไม่สามารถมีไฮไลต์ทึบแสงเนื่องจากคำจำกัดความเหล่านี้จะเป็นสีขาวจึงโปร่งใสอย่างสมบูรณ์

หากต้องการให้ช่องอัลฟาเว้นพื้นที่สีขาวที่ไฮไลต์และเงาดำเราควรเลือกสีเทาสำหรับการกำหนดอัลฟา

• เพื่อแสดงเอฟเฟกต์ที่ชัดเจนยิ่งขึ้นฉันได้ทำให้ภาพต้นฉบับของคุณเข้มขึ้นและเพิ่มคอนทราสต์ให้มากขึ้น คุณจะต้องปรับความคมชัดของแหล่งที่มาและเลือกระดับสีเทาที่เหมาะสมกับความต้องการของคุณเพื่อผลลัพธ์ที่ดีที่สุด

• จากนั้นฉันกำหนดช่องอัลฟาเป็นสี 'สีเทา' (แทนที่จะเป็นสีขาว):

  

ตอนนี้เมื่อเราวางซ้อนภาพนี้ด้วยเช่นพื้นหลังสีเขียวที่เราสามารถเห็นได้ว่าทั้งไฮไลท์และเงายังคงอยู่

เราสามารถเห็นได้ว่าเมื่อใช้กับสีเข้มพื้นที่สีขาวของภาพต้นฉบับอาจยังสว่างเกินไปสำหรับเอฟเฟกต์ที่ต้องการ สิ่งนี้สามารถเอาชนะได้เมื่อเราเลือกสีเทาแทนที่จะเป็นแหล่งสีขาวเพื่อสร้างเทมเพลตช่องอัลฟาของเรา

ด้านล่าง (ซ้ายบน) ฉันใช้ถังสีเทาเติมความทึบ 20% บนต้นฉบับสีขาว หลังจากกำหนดช่องสัญญาณอัลฟาโปร่งใสให้เป็นสีเทา (บนขวา) เราสามารถซ้อนทับพื้นหลังสี (ซ้ายดำ, แดงเข้มกลาง, ขาวงาช้างขวา) เพื่อให้ได้เอฟเฟกต์บรรทัดล่าง

สำหรับนี้คุณที่ดีที่สุดในการสร้างช่องแยกต่างหากสำหรับเงาและไฮไลท์

เงาสามารถนำมาโดยตรงจากเสื้อยืดสีขาวและนำมาใช้เป็นmultiplicator (0-100%) สำหรับสีเสื้อของ (โหมดชั้น: คูณ)

สำหรับไฮไลท์สิ่งนี้ขึ้นอยู่กับวัสดุ ผ้าไม่สะท้อนแสงมากบนพื้นผิวดังนั้นสีส่วนใหญ่มาจากแสงแบบกระจาย (สีของเสื้อ) ในการสกัดแสงแบบ specular ฉันจะใช้ฟิลเตอร์ high-pass (การปรับฮิสโตแกรม: เฉพาะสีสดใสและไม่มีสีเข้ม) บนภาพของเสื้อเชิ้ตสีขาวและใช้เพื่อเพิ่มความสว่างให้กับเสื้อ แต่อาจมีเพียง 20% (การสะท้อนแสงต่ำ)

ชั้น:

ภาพที่เกิด:

มีวิธีที่ง่ายกว่า - เลือกพื้นหลังสีขาวคว่ำมันกำหนดแปรงที่ตั้งไว้ล่วงหน้าสร้างไฟล์ใหม่ที่โปร่งใสสีเทา - และนี่คือ เลือกแปรงซึ่งเป็นตัวสุดท้ายในรายการและคลิกหนึ่งครั้งด้วยแถบสีดำสี่อัน Voila! กว่าที่คุณสามารถบันทึกเป็นเว็บ - png

ใช้ตัวกรอง CSS แต่แทนที่จะเป็นหลายภาพ

คุณควรใช้ตัวกรอง CSSเพื่อระบายสีรูปภาพให้กับเว็บไซต์

ประโยชน์มีดังนี้

1. ต้องการภาพเดียวเท่านั้น
2. ขนาดไฟล์ภาพที่เล็กลง
3. ควบคุมสีของคุณได้มากขึ้นโดยไม่ต้องใช้โปรแกรมแก้ไขภาพ
4. เป็นมิตรกับมือถือ
5. เวลาโหลดเร็วขึ้น
6. SEO ที่ดีขึ้น

สำหรับเว้ใช้ตัวกรอง CSS นี้:

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

เพื่อความสว่างใช้:

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

สำหรับความอิ่มตัวใช้:

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

สำหรับการใช้Greyscale :

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