วิธีเพิ่มเอฟเฟกต์แสงนีออนให้กับรูปภาพใดก็ได้

คำตอบสั้น ๆ: วิธีเพิ่มเอฟเฟกต์แสงนีออนได้อย่างไร?

เริ่มต้นด้วยภาพถ่ายที่มีพื้นหลังมืด ขอบที่มองเห็นได้ หรือแหล่งกำเนิดแสงที่ชัดเจน ทำการทำซ้ำวัตถุหรือรูปร่างของแสง เบลอส่วนที่ทำซ้ำนั้น ระบายสีให้เป็นสี cyan, pink, violet, หรือ green จากนั้นนำมาผสมกลับด้วยโหมด Screen, Linear Dodge, หรือ Add โดยคงแกนกลางด้านในที่คมชัดและรัศมีภายนอกที่นุ่มนวลไว้

สำหรับภาพส่วนใหญ่ ควรใช้เลเยอร์แสง (glow layers) สองชั้น:

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

อะไรที่ทำให้เอฟเฟกต์แสงนีออนดูสมจริง?

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

ใช้รายการตรวจสอบรูปภาพนี้ก่อนการแก้ไข:

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

สำหรับลุคที่ใกล้เคียงกัน คู่มือเอฟเฟกต์ภาพขัดข้อง (image glitch effect guide) จะครอบคลุมการบิดเบือนแบบดิจิทัล และคู่มือแสงรั่ว (light leak effect guide) จะครอบคลุมโทนสีอนาล็อกที่อ่อนโยนกว่า แสงนีออนอยู่ระหว่างสองสิ่งนี้: มีความเป็นกราฟิกเหมือนกับ glitch แต่ยังคงผูกติดอยู่กับแสง

ภาพถ่ายประเภทใดที่เหมาะที่สุดสำหรับการสร้างเอฟเฟกต์แสงนีออน?

ภาพต้นฉบับที่มีแหล่งกำเนิดแสงนีออนที่ดีควรมีคอนทราสต์ (contrast) ภาพบุคคลที่ถ่ายภายใต้แสงสี ป้ายร้านค้า ซอยในเมือง ผลิตภัณฑ์สีดำบนฉากหลังมืด หรือโปสเตอร์สไตล์เกม มักจะใช้ความพยายามน้อยกว่าภาพถ่ายกลางวันแบบเรียบ ๆ

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

วิธีการสร้างเอฟเฟกต์ทีละขั้นตอน

ใช้ลำดับนี้ใน Photoshop, Photopea, GIMP หรือโปรแกรมแก้ไขใด ๆ ที่มีเลเยอร์, blur, blend modes และ masks Adobe ได้จัดทำเอกสาร Outer Glow และสไตล์เลเยอร์อื่น ๆ ใน Photoshop layer effects guide และ MDN's blend mode reference เป็นแหล่งข้อมูลที่เป็นประโยชน์เกี่ยวกับวิธีการที่ Screen, Overlay และโหมดการผสมผสาน (compositing modes) ที่เกี่ยวข้องเปลี่ยนแปลงพิกเซล

1. ทำความสะอาดภาพพื้นฐาน ครอบตัดก่อน ลบฝุ่นหรือสิ่งรบกวน และแก้ไขค่าแสงก่อนที่จะเพิ่ม glow

2. เลือกแหล่งกำเนิดของ glow สิ่งนี้อาจเป็นป้าย, เส้นขอบ, ขอบวัตถุ, เส้นทางที่เขียนด้วยมือ หรือขอบของวัตถุที่ทำซ้ำ

3. สร้างแกนหลักที่คมชัด เติมสีหรือลากเส้นตามรูปทรงที่เลือกด้วยสีอิ่มตัว รักษาเลเยอร์นี้ให้มีความคมชัด

4. ทำสำเนาแกนหลัก ทำให้ภาพสำเนานี้เบลอด้วยรัศมีขนาดเล็กสำหรับ inner glow

5. ทำซ้ำอีกครั้ง ทำให้สำเนาถัดไปเบลอด้วยรัศมีที่กว้างขึ้นสำหรับ outer halo

6. ตั้งค่า blend mode ลองใช้ Screen สำหรับ glow ที่ควบคุมได้, Linear Dodge/Add สำหรับผลลัพธ์ที่ร้อนแรงกว่า และ Overlay เมื่อคุณต้องการเพียงแค่สีโทน (tint)

7. Mask ส่วนที่เลอะเทอะ ระบาย glow ออกจากดวงตา, ไฮไลต์ผิวหนัง, ฉลากผลิตภัณฑ์ และข้อความที่สามารถอ่านได้

8. เพิ่มสีสะท้อน ใช้แปรงแต้มสีโทนที่มีความโปร่งใสต่ำลงบนพื้นผิวใกล้เคียงที่จะรับแสง

9. ปรับภาพรวมทั้งหมด ทำให้เงาลึกขึ้น, ปรับพื้นหลังให้เย็นลง, และป้องกันไม่ให้ไฮไลต์เกิดการคลิปปิ้ง (clipping)

10. ส่งออกและตรวจสอบ ดูขนาดสุดท้ายบนโทรศัพท์และเดสก์ท็อปก่อนโพสต์

อย่าเริ่มด้วยความเข้มสูงสุด สร้าง glow เป็นเลเยอร์ การมี outer halo ที่ละเอียดอ่อนบวกกับ inner line ที่คมชัดมักจะดูแพงกว่าการเบลอครั้งใหญ่เพียงอย่างเดียว

ควรเลือกสีและรัศมีของแสงเรืองอย่างไรดี?

ให้เลือกสีตามหน้าที่ที่ภาพนั้นต้องทำ สี Cyan และ magenta ให้ความรู้สึกแบบดิจิทัลและมีพลังงาน สีแดงให้ความรู้สึกรุนแรงและอาจเกิดการคลิปได้ง่าย สีเขียวสามารถดูเหมือนแนว sci-fi หรือทางการแพทย์ ส่วนสีม่วงจะอ่อนโยนกับภาพบุคคลเพราะโอกาสที่จะทำให้ผิวดูป่วยนั้นน้อยกว่าสีเขียว

รัศมีขึ้นอยู่กับขนาดเอาต์พุต แสงเรืองขนาด 50 px อาจดูเหมาะสมบนโปสเตอร์ขนาด 3000 px แต่จะดูเกินจริงมากเมื่อเทียบกับภาพขนาดย่อ 600 px ให้ตัดสินผลกระทบที่ขนาดที่ผู้คนจะเห็นจริงๆ

ใช้ภาพเมืองแบบนี้เป็นตัวอ้างอิงพาเลท สังเกตว่าสีที่เข้มที่สุดอยู่ในส่วนของแสงและเงาสะท้อน ขณะที่เงามืดหลายส่วนยังคงใกล้เคียงกับสีดำ ความยับยั้งชั่งใจนั้นคือสิ่งที่ป้องกันไม่ให้สีนีออนกลายเป็นสัญญาณรบกวน

ต้องทำอย่างไรให้ใบหน้า ผลิตภัณฑ์ และข้อความดูสะอาดตา?

มาสก์คือส่วนที่ทำให้เอฟเฟกต์สามารถใช้งานได้จริง ภาพบุคคลสามารถรองรับแสงขอบสี (colored rim light) ได้ แต่ดวงตาและฟันควรยังคงอ่านออกได้ รูปภาพเปิดตัวผลิตภัณฑ์สามารถใช้โครงร่างเรืองแสงได้ แต่พื้นผิวของผลิตภัณฑ์และเครื่องหมายการค้ายังต้องมีรายละเอียด พื้นที่กราฟิกสำหรับโซเชียลสามารถใช้ข้อความเรืองแสงได้ แต่หัวข้อข่าวจะต้องไม่เบลอ

ใช้ขั้นตอนการมาสก์นี้:

• ซูมไปที่ 100% และลบแสงเรืองออกจากรูม่านตา ฟัน โลโก้เล็กๆ และเครื่องประดับชั้นดี
• เหลือขอบบาง ๆ ไว้ที่เส้นผม ไหล่ แว่นตา หรือขอบผลิตภัณฑ์
• ลดความทึบแสงเรือง (glow opacity) บริเวณไฮไลต์ผิวสีอุ่น
• เพิ่มการหกของสีเล็กน้อยบนผนัง ทางเท้า เสื้อผ้า หรือบรรจุภัณฑ์ที่อยู่ใกล้เคียง
• สลับกลุ่มแสงเรือง (glow group) เปิดและปิด หากภาพพื้นฐานดูพังโดยไม่มีมัน ให้แก้ไขพื้นฐานก่อน
• แปลงโพสต์สุดท้ายเป็น WebP จากนั้นเปรียบเทียบกับงานแก้ไขแบบไม่บีบอัดเพื่อตรวจสอบการเกิดแถบสี

สำหรับงานผลิตภัณฑ์ ให้อ่าน product photography guide ก่อนใช้เอฟเฟกต์หนัก ๆ สำหรับโพสต์และโฆษณา ให้ปรับขนาดภาพให้ตรงกับ social media image sizes guide ก่อนที่คุณจะปรับค่ารัศมี (radius) เนื่องจากการครอปแบบสี่เหลี่ยมจัตุรัสและการครอปสำหรับสตอรี่ต้องการพื้นที่ฮาโลที่แตกต่างกัน

ข้อผิดพลาดทั่วไปในการทำเอฟเฟกต์นีออนเรืองแสงมีอะไรบ้าง?

การแก้ไขแบบนีออนที่ไม่ดีส่วนใหญ่มักจะสว่างเกินไป สม่ำเสมอเกินไป หรือหลุดจากฉากมากเกินไป แก้ไขจุดเหล่านี้ก่อนที่จะเพิ่มสีใด ๆ เข้าไป

หลังจากแก้ไขแล้ว ควรปรับปรุงผลลัพธ์ให้เหมาะสม เกรเดียนต์นีออนอาจเกิดแถบ (band) ได้หากมีการบีบอัดมากเกินไป ในขณะที่พื้นหลังสีเข้มอาจแสดงสิ่งผิดปกติแบบบล็อก (block artifacts) บทความ image compression deep dive อธิบายว่าทำไมเกรเดียนต์ที่ราบรื่นและขอบที่คมชัดจึงต้องการการตั้งค่าส่งออกที่แตกต่างกัน

คุณควรใช้การตั้งค่าส่งออกแบบใด?

ฉันได้ทดสอบรูปภาพตัวอย่างในบทความนี้โดยการส่งออกเป็น WebP หลังจากปรับขนาดด้านยาวให้เหลือ 1600 px พื้นหลังสีเข้มจะคงสภาพได้ดีกว่าเมื่อเอฟเฟกต์เรืองแสงยังอยู่ในเลเยอร์มาสก์แยกกันจนถึงขั้นตอนสุดท้ายของการส่งออก การรวมเลเยอร์เร็วเกินไปทำให้การแก้ไขแถบ (banding) รอบรัศมีภายนอกทำได้ยากขึ้น

ให้ส่งออกจากงานแก้ไขที่สมบูรณ์ที่สุด แต่ปรับขนาดให้ตรงกับจุดหมายปลายทางจริง สำหรับหน้าเว็บ WebP เป็นค่าเริ่มต้นที่ใช้งานได้จริง เพราะมันจัดการภาพถ่ายและเกรเดียนต์แบบนุ่มนวล (soft gradients) ได้ดีแม้ในขนาดที่เล็กลง ควรเก็บไฟล์ต้นฉบับเป็น PNG หรือ PSD ไว้ หากคุณอาจต้องเปิดเลเยอร์เหล่านั้นอีกครั้ง

ใช้จุดเริ่มต้นเหล่านี้:

1. ปรับขนาดให้ตรงกับความกว้างของการแสดงผลก่อนการบีบอัด
2. ส่งออก WebP ที่คุณภาพประมาณ 80-86 สำหรับภาพพอร์ตเทรตและโปสเตอร์แนวนีออน
3. ใช้ PNG สำหรับไฟล์ต้นฉบับ, การทับซ้อนแบบโปร่งใส (transparent overlays), หรือกราฟิกที่มีข้อความจำนวนมากที่คุณจะแก้ไขอีกครั้ง
4. ตรวจสอบเกรเดียนต์สีเข้มสำหรับแถบ (banding) หลังการบีบอัด
5. ตรวจสอบรูปภาพบนโทรศัพท์ เพราะหน้าจอขนาดเล็กทำให้เอฟเฟกต์เรืองแสงเกินจริงสังเกตได้ง่าย
6. ตั้งชื่อไฟล์ให้สื่อความหมาย เช่น neon-portrait-blue-rim.webp

หากรูปภาพนั้นสำหรับบล็อกหรือหน้าร้านค้า ควรเพิ่มข้อความ alt text ที่สื่อความหมายและมีการบีบอัดแบบสำรอง (fallback) ด้วย รายการตรวจสอบ SEO สำหรับรูปภาพ จะครอบคลุมการตั้งชื่อ, alt text, และการตรวจสอบประสิทธิภาพ

เครดิตและแหล่งที่มาของรูปภาพ

• ภาพเหมือนปก - ถ่ายโดย Dmitry บน Pexels, แปลงเป็น WebP.
• ป้ายไฟนีออน - ถ่ายโดย Jakub Zerdzicki บน Pexels, แปลงเป็น WebP.
• ตรอกเมือง - ถ่ายโดย kaio ryan บน Pexels, แปลงเป็น WebP.
• ภาพเหมือนแนวไฟนีออน - ถ่ายโดย Alessandro Alves บน Pexels, แปลงเป็น WebP.
• แหล่งอ้างอิงทางเทคนิค: เอกสาร [Photoshop layer effects documentation] ของ Adobe และ [CSS blend mode reference] ของ MDN.

เอฟเฟกต์เรืองแสงนีออน