การแต่งภาพด้วยโปรแกรมคืออะไร และทำไมโปรแกรมเมอร์ต้องเข้าใจ
ถ้าคุณเคยใช้แอปแต่งรูปแล้วกดเลือกฟิลเตอร์เพื่อเปลี่ยนโทนสีให้ภาพดูอุ่นขึ้นหรือเย็นลง นั่นคือสิ่งที่เราเรียกว่า Image Tinting (การย้อมสีภาพ) ซึ่งไม่ใช่แค่เรื่องของดีไซเนอร์เท่านั้น แต่เป็นพื้นฐานสำคัญที่โปรแกรมเมอร์สายเว็บหรือแอปพลิเคชันควรเข้าใจ เพราะการจัดการรูปภาพเป็นส่วนหนึ่งของการสร้างประสบการณ์ใช้งานที่ดี
การ Tinting (การย้อมสี) คือการนำสีพื้นสีเดียวมาวางทับลงบนรูปภาพเดิม แล้วใช้กฎการผสมสีที่เรียกว่า Blend Modes (โหมดการผสมผสาน) มากำหนดว่าสีที่วางทับกับภาพต้นฉบับจะรวมตัวกันออกมาเป็นแบบไหน เปรียบเหมือนการเอาแผ่นพลาสติกใสสีต่างๆ ไปวางทับรูปถ่ายจริง เพื่อเปลี่ยนอารมณ์ของภาพโดยไม่ทำลายรายละเอียดเดิม
ในฐานะคนที่กำลังฝึกเขียนโค้ด การเข้าใจเรื่องนี้จะช่วยให้คุณสร้างเครื่องมือแต่งภาพใช้เองได้ หรือแม้แต่ช่วยให้แอปของคุณมีลูกเล่นที่ดูเป็นมืออาชีพมากขึ้นโดยไม่ต้องพึ่งพาไลบรารีขนาดใหญ่ คุณสามารถควบคุมสี ความเข้ม และอารมณ์ของภาพได้ด้วยโค้ดเพียงไม่กี่บรรทัด ซึ่งเป็นก้าวแรกที่ดีในการทำความเข้าใจการจัดการพิกเซล (หน่วยย่อยที่สุดของภาพ) บนหน้าจอ
รู้จักกับส่วนประกอบสำคัญของสูตรการย้อมสี
ก่อนจะเริ่มเขียนโค้ด เราต้องเข้าใจก่อนว่าการย้อมสีภาพไม่ใช่การสุ่มทำ แต่เป็นการผสมส่วนประกอบ 3 อย่างเข้าด้วยกัน คือ Color (สีที่เลือกใช้) Blend Mode (วิธีการผสมสี) และ Strength (ความเข้มของสีที่ย้อม) ซึ่งเปรียบเหมือนการทำอาหารที่มีสูตรที่แน่นอน
Color คือสีที่คุณต้องการย้อม เช่น รหัสสีแบบ Hex (รหัสสีที่ใช้ในเว็บ) ส่วน Blend Mode คือหัวใจสำคัญที่จะบอกว่าสีนั้นจะไป "ทำปฏิกิริยา" กับภาพข้างล่างอย่างไร เช่น ทำให้มืดลง ทำให้สว่างขึ้น หรือเปลี่ยนแค่สีโดยคงรายละเอียดภาพไว้ สุดท้ายคือ Strength หรือค่าความเข้ม ซึ่งจะช่วยให้คุณปรับจูนได้ว่าอยากให้สีที่ย้อมแสดงผลออกมามากน้อยแค่ไหน
ความสวยงามของวิธีนี้คือมันเป็น Deterministic (สิ่งที่ให้ผลลัพธ์แน่นอน) คือถ้าคุณใช้สีเดิม โหมดเดิม และความเข้มเดิม กับรูปภาพเดิม ผลลัพธ์ที่ได้จะออกมาเหมือนเดิมเสมอ นี่คือเหตุผลที่แบรนด์ต่างๆ ใช้เทคนิคนี้สร้างความสม่ำเสมอให้กับรูปภาพในแอปพลิเคชันหรือหน้าเว็บของตัวเอง เพื่อให้ดูเป็นไปในทิศทางเดียวกันทั้งหมด
เข้าใจ Blend Modes ผ่านภาษาที่เข้าใจง่าย
Blend Modes อาจจะดูเหมือนเวทมนตร์ แต่จริงๆ แล้วมันคือสูตรคณิตศาสตร์ที่คำนวณค่าสีของแต่ละพิกเซลระหว่างภาพต้นฉบับกับสีที่เราวางทับลงไป โดยโหมดที่นิยมใช้และมือใหม่ควรรู้จักมีอยู่ไม่กี่ตัวที่ครอบคลุมการใช้งานเกือบทั้งหมด
- Multiply (การคูณสี): จะทำให้ภาพมืดลงเหมือนสีซึมเข้าไปในส่วนที่มืด เหมาะสำหรับทำภาพโทนวินเทจ
- Screen (การกรองแสง): จะทำให้ภาพสว่างขึ้นเหมือนมีแสงเรืองออกมาจากส่วนที่สว่าง เหมาะกับภาพที่ดูฟุ้งฝัน
- Overlay (การซ้อนทับ): จะเป็นการรวมความมืดของ Multiply และความสว่างของ Screen เข้าด้วยกัน ช่วยรักษาความคมชัดของภาพไว้ได้ดี
กฎเหล็กที่อยากให้จำคือ Screen จะทำให้ภาพสว่างขึ้น ส่วน Multiply จะทำให้ภาพมืดลงและดูมีมิติมากขึ้น ส่วนโหมดอื่นๆ มักจะอยู่ระหว่างสองโหมดนี้ การเลือกใช้ให้เหมาะสมกับอารมณ์ของภาพจะช่วยให้งานของคุณดูมีรสนิยมและสื่อสารความรู้สึกออกมาได้ชัดเจนตามที่ตั้งใจไว้
// ตัวอย่างการตั้งค่าโหมดผสมสี
const mode = "screen"; // ทำให้ภาพสว่างขึ้น
const color = "#5B8DF0"; // สีฟ้าโทนเย็น
const strength = 0.45; // ความเข้มปานกลางในตัวอย่างข้างต้น เรากำหนดค่าพื้นฐาน 3 อย่างเพื่อเตรียมไปใช้งานต่อ ส่วนผลลัพธ์ที่ได้จะเป็นการเตรียมตัวแปรเพื่อส่งไปให้ฟังก์ชันจัดการภาพต่อไป โดยตัวแปร mode จะถูกนำไปใช้ใน globalCompositeOperation (คุณสมบัติของ Canvas ที่ใช้กำหนดวิธีวาดทับ) เพื่อบอกเบราว์เซอร์ว่าให้คำนวณการแสดงผลอย่างไร
ลงมือเขียนโค้ดด้วย Canvas API
การจัดการรูปภาพในเบราว์เซอร์ทำได้ง่ายที่สุดผ่าน Canvas (พื้นที่วาดรูปบนหน้าเว็บ) ซึ่งเป็นเครื่องมือมาตรฐานที่ติดมากับเบราว์เซอร์ทุกตัว คุณไม่ต้องติดตั้งอะไรเพิ่มก็สามารถเริ่มเขียนโค้ดได้ทันที โดยเราจะใช้ context (พื้นที่การวาด) ในการจัดการภาพ
ขั้นตอนการทำงานคือ วาดภาพต้นฉบับลงไปก่อน แล้วค่อยวางสีที่ต้องการย้อมทับลงไปโดยตั้งค่า Blend Mode ตามที่เลือกไว้ จากนั้นจึงปรับความเข้มโดยใช้ globalAlpha (ค่าความโปร่งใส) เพื่อผสมภาพสีที่ย้อมกับภาพต้นฉบับเข้าด้วยกันอย่างเป็นธรรมชาติ
นี่คือตัวอย่างโค้ดที่รวบรวมทุกขั้นตอนเข้าด้วยกัน เพื่อให้คุณเห็นภาพรวมของการทำงานทั้งหมด:
function tintImage(img, { color, mode, strength }) {
const canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext("2d");
// วาดภาพต้นฉบับลงบนผืนผ้าใบ
ctx.drawImage(img, 0, 0);
// ตั้งค่าโหมดผสมสีแล้ววาดสีทับ
ctx.globalCompositeOperation = mode;
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// ปรับความเข้มโดยใช้ค่าความโปร่งใส
ctx.globalCompositeOperation = "source-over";
ctx.globalAlpha = 1 - strength;
return canvas;
}คำอธิบายโค้ดทีละส่วน: บรรทัดที่ 2 สร้างองค์ประกอบ canvas ขึ้นมาในหน่วยความจำ บรรทัดที่ 7 วาดภาพลงไป บรรทัดที่ 10-12 คือหัวใจหลักที่ใช้โหมดผสมสีวาดสีทับลงไปเต็มพื้นที่ บรรทัดที่ 15-16 คือการปรับค่า globalAlpha เพื่อผสมสีที่ย้อมเข้ากับภาพจริง ผลลัพธ์ที่ได้คือออบเจกต์ canvas ที่มีภาพที่ย้อมสีเรียบร้อยแล้วพร้อมนำไปแสดงผลบนหน้าเว็บ
ข้อควรระวังและเทคนิคสำหรับมือใหม่
สิ่งที่มือใหม่มักพลาดคือการเลือกค่า Strength ที่สูงเกินไป จนทำให้ภาพดูแบนและเสียรายละเอียดไปหมด ค่าที่แนะนำสำหรับจุดเริ่มต้นคือประมาณ 35% ถึง 70% ซึ่งมักจะให้ผลลัพธ์ที่สวยงามและยังคงความเป็นธรรมชาติของภาพต้นฉบับไว้ได้
อีกเรื่องคือความอิ่มตัวของสี (Saturation) ในภาพต้นฉบับ ถ้าภาพเดิมมีสีจัดจ้านมาก การย้อมสีทับอาจจะทำให้สีดูตีกันจนดูไม่สวยงาม เทคนิคที่มืออาชีพนิยมใช้คือการลดค่าความอิ่มตัวของภาพต้นฉบับลงก่อนย้อมสี เพื่อให้ได้โทนสีที่สะอาดและชัดเจนเหมือนภาพแนว Duotone (ภาพที่มีโทนสีหลักสองสี)
การจัดการกับ Alpha Channel (ช่องข้อมูลความโปร่งใสของรูปภาพ) ก็สำคัญมาก ถ้าคุณกำลังแต่งภาพที่มีพื้นหลังโปร่งใส เช่น โลโก้ อย่าลืมระมัดระวังในการวาดทับ เพราะถ้าทำไม่ดีพื้นหลังที่ควรจะใสอาจจะกลายเป็นสีทึบได้ การใช้ Canvas ช่วยให้คุณสามารถจัดการเฉพาะส่วนที่มีพิกเซลอยู่ได้โดยไม่ทำลายความโปร่งใสเดิม
สรุป: เริ่มต้นสร้างเครื่องมือแต่งภาพของคุณเอง
การเข้าใจเรื่อง Tinting ไม่ใช่แค่การรู้วิธีเปลี่ยนสีภาพ แต่มันคือการเรียนรู้พื้นฐานของ Compositing (การนำข้อมูลภาพมาซ้อนทับกัน) ซึ่งเป็นทักษะที่ใช้ต่อยอดไปสู่การสร้างฟิลเตอร์รูปภาพ เครื่องมือแก้ไขภาพออนไลน์ หรือแม้แต่การจัดการกราฟิกในเกมบนเว็บได้
ลองนำโค้ดที่ให้ไปปรับใช้ดูครับ เริ่มจากลองเปลี่ยนสีและเปลี่ยนโหมดไปเรื่อยๆ เพื่อดูความแตกต่างของผลลัพธ์ การได้เห็นภาพเปลี่ยนไปตามคำสั่งของเราเป็นวิธีฝึกเขียนโค้ดที่สนุกและเห็นผลทันตาที่สุด ซึ่งจะช่วยสร้างความมั่นใจให้คุณพัฒนาโปรเจกต์ที่ซับซ้อนขึ้นได้ในอนาคต
จำไว้ว่าโปรแกรมเมอร์ที่เก่งไม่ได้เกิดจากการจำโค้ด แต่เกิดจากการลองผิดลองถูก ลองสร้างฟังก์ชัน tintImage นี้ขึ้นมาในโปรเจกต์ส่วนตัวของคุณ แล้วลองนำไปใช้กับรูปภาพหลายๆ แบบ จะทำให้คุณเข้าใจว่าทำไมการเลือกโหมดผสมสีที่ต่างกัน ถึงส่งผลต่ออารมณ์ของรูปภาพได้มหาศาลครับ
ที่มา: How Image Tinting Works: Blend Modes, Explained with Code — DEV Community
