[CG]How to-แยกน้ำแยกเส้น

posted on 24 Jan 2011 23:37 by prema-ja
จากการอบรม CG ที่ ม.สวนสุนันทา วันที่ 22 ที่ผ่านมา มีหัวข้อนึงที่อาจจะงงๆหน่อย เลยมาเขียนเป็น How to อัพเอาไว้ทีละขั้นตอนแบบละเอียดจ้ะ
 
"การแยกเส้นออกจากพื้นขาว" (แต่ตั้งชื่อเอนทรี่ซะยังกะไปสั่งก๋วยเตี๋ยว - -)
 
-------------------------
หมายเหตุ
- How to นี้เป็นเรื่องของเทคนิคคอมพิวเตอร์ ไม่ใช่ทักษะศิลปะนะคะ
- โปรแกรมที่ใช้คือ Photoshop 7 ค่ะ (เก่าได้อีก) หน้าตาหน้าต่างอาจประหลาดหน่อย แต่ฟังชั่นพวกนี้ใน CS ก็มีอยู่ครบค่ะ เพราะฉะนั้นเรื่องเวอร์ชั่นต่างกันก็ไม่มีปัญหา
- เป็นเทคนิคที่เราคิดว่ามีประโยชน์และสะดวกมากค่ะ สามารถประยุกต์และพัฒนาเอาไปใช้ประโยชน์อย่างอื่นได้อีก เลยอยากนำมาเผยแพร่ไว้ แรกๆอาจจะรู้สึกยุ่งยากหน่อย แต่ถ้าทำไปเรื่อยๆแล้วมันอยู่ในหัวได้โดยอัตโนมัติ
 
 
INTRO
ปกติเวลาเราลง CG เผื่อไม่ให้สีทับเส้นนั้น สามารถแก้ปัญหาได้โดยใช้ Layer Mode เข้ามาช่วย โดยเอา layer เส้นไว้ด้านบน แล้วปรับ Layer Mode ให้เป็น Multiply
เวลาเราทำงาน CG ถ้าเป็นแนวน่ารักใสๆ ก็มักใช้เส้นเป็นสีๆแทนที่จะเป็นสีดำทั้งหมด เพราะเส้นสีดำเราคิดว่างานมันดูแข็งๆไปนิด เห็นหลายๆคนก็เปลี่ยนสีเส้นเวลาทำงานเหมือนกัน
แต่เปลี่ยนสีเส้นในการทำงานแบบ layer เส้นเป็น Multiply จะพบปัญหาใหญ่ๆอยู่ 2 ข้อคือ
1. ด้วยเหตุที่ Multiply เป็นคุณสมบัติที่ทำให้ layer ใสมองไปเห็น layer ด้านล่างได้ จึงอาจมีจุดทำให้เส้นที่เราเปลี่ยนสีไว้มีสีของ layer ด้านล่างเหลื่อมเข้ามา ดังภาพด้านล่าง
 
 
ซูมเข้าดูใกล้ๆ
 
 
แทนที่จะได้เป็นเส้นสีเดียวแบบนี้
 
 
2. การเปลี่ยนสีเส้นเป็นสีเดียวกันทั้งหมดอาจไม่มีปัญหา(สามารถกด Ctrl+U ติ๊กตรงช่อง colorize แล้วปรับค่าต่างๆตามชอบ) แต่ถ้าอยากให้เส้นในส่วนต่างๆเป็นสีต่างกัน(แบบภาพตัวอย่างนี้) ก็จะลำบากพอดู เพราะต้องค่อยๆทำ selection ทีละส่วนเอา
 
 
ยิ่งเป็นภาพที่มีรายละเอียดยิบนี่เลือดตาแทบกระเด็นกันเลยทีเดียว
แต่ปัญหาทั้ง 2 ข้อนี้จะหมดไป!!!
ด้วยเทคนิคแยกน้ำแยกเส้นนี้ (สำนวนเหมือนจะขายของทาง TV  - -")
 
ถาม: เทคนิคนี้แตกต่างกับการปรับ layer เส้นให้เป็น Multiply ยังไง?
ตอบ: การปรับ layer เส้นให้เป็น Multiply เลเยอร์จะใสทะลุเห็นสีที่ทาไว้ด้านล่างก็จริง แต่ที่ layerเส้นนี้ก็จะยังมีส่วนของสีขาวอยู่
 
 
แต่เทคนิคแยกน้ำแยกเส้นนี้สามารถทำให้ layerเส้น เหลือเพียงเส้นล้วนๆเท่านั้น ทำให้สามารถลงสีได้โดยไม่ต้องปรับให้layerเส้นเป็น Multiply
 
 
 
 
 
 
 
STEP BY STEP มาแยกเส้นกันเถอะ
1. เตรียมภาพลายเส้นให้เรียบร้อย (ทำความสะอาด ลบรอยสกปรกจากการแสกน ปรับน้ำหนักให้โอเค)
- ตอนนี้เราจะมี layerเพียงแผ่นเดียวเท่านั้น คือภาพลายเส้นนี่แหละ
- ถ้าภาพเราอยู่ในโหมด RGB ให้เปลี่ยนเป็นโหมด Grayscale จ้ะ โดยไปที่เมนูด้านบน Image>Mode>Grayscale
 
 
ถาม: ทำไมต้องเป็นโหมด Grayscale ด้วย
ตอบ: ภาพที่แสกนเข้ามาในโหมด RGB แม้ตาเราจะเห็นเป็นสีดำ แต่แท้จริงแล้วมันจะมีเม็ดสีพิกเซลเล็กๆแทรกอยู่ ทำให้เส้นไม่สวย (ซูมเข้าไปดูใกล้ๆจะเห็น) การเปลี่ยนให้เป็นโหมด Grayscale จะทำให้ภาพเรามีแค่สีขาว เทา ดำ เท่านั้น
 
 
 
 
2. ไปที่ Channels เชื่อว่ามีหลายคนใช้ Photoshop มานานแต่ไม่เคยย่างกรายมาในหน้าต่างของ Channels นี้เลย ฮา (เราก็เป็นหนึ่งในนั้น orz)
 
ถาม: Channels ใช้ทำอะไร
ตอบ: เราเองก็ยังรู้ไม่หมด แต่หนึ่งในประโยชน์ของ Channels คือการช่วยทำ Selection ที่พวกเครื่องมือ lasso หรือ magic wand ทำไม่ได้จ้ะ
 
ถ้าหาหน้าต่าง Channels ไม่เจอ สามารถไปเปิดออกมาได้ที่เมนูด้านบน Window>Channels
ก็อปปี้ Channels เพิ่มขึ้นมาอีก 1 อัน โดยลากอันที่มีอยู่นี้ไปที่ไอคอนในวงกลมสีแดง
เราก็จะได้ Channels "Gray copy" ขึ้นมาอีก 1 อัน
 
 
 
3. ที่ Channels ที่ก็อปปี้ขึ้นมาใหม่นี้ เราจะ Inverse สีมันซะ ทำได้โดยการกด Ctrl+I
ผลที่ได้ก็คือสีกลายเป็นแบบ Negative (ดำเป็นขาว ขาวเป็นดำ)
 
 
 
 
 
4. จากนั้นทำ selection โดยการลาก Chanel ที่เรา Inverse สีนี้ไปที่ไอคอนด้านล่างที่วงสีแดงไว้
 
 
 
 
5. หลังจากทำ selection ก็กลับไปที่หน้าต่าง Layer(1) แล้วสร้างเลเยอร์ใหม่ขึ้นมาโดยกดที่ไอคอนที่วงเอาไว้ (2)
แล้ว Fill สีดำลงไปใน selection บนเลเยอร์ที่สร้างใหม่นี้ ทำได้ง่ายๆโดยการเลือกสีดำ แล้วกด Alt+backspace
 
เมื่อเติมสีดำไปแล้วก็เอา selectionออกได้เลย (กด Ctrl+d)
เป็นอันว่าเรียบร้อยในการคัดเส้นออกมาไว้บนเลเยอร์ใหม่
 
 
 
 
6. ลบภาพลายเส้นที่เลเยอร์เก่าทิ้ง(ไม่ได้ใช้แล้ว) อาจเติมสีขาวทับให้หมด หรือไม่ก็ลากทิ้งถังขยะไปเลยก็ได้
อยากรู้ว่าที่ทำมาทำถูกหรือเปล่า ลองปิดเลเยอร์พื้นขาวของเราดู (กดที่รูปดวงตาจะเป็นการปิดเลเยอร์ชั่วคราว)
ถ้าภาพที่ปรากฎออกมาเป็นแบบนี้ ก็ถือว่าโอเคแล้วจ้ะ (รอยตารางในโฟโต้ช็อปถือว่าเป็นพื้นที่โปร่งใส)
 
เท่านี้เราก็สามารถลงสีใต้เลเยอร์เส้นได้ โดยที่เส้นอยู่ในโหมด Normal
*** จะลงสีก็เปลี่ยนภาพกลับเป็นโหมด RGB จ้ะ แต่คราวนี้พอกดเปลี่ยน จะมีวินโดว์ขึ้นมาถามเราว่าจะ Flatten Image หรือเปล่า ให้ตอบว่า Don't flatten (แปล=อย่ามาเจือกกับภาพของตรู - -+) ไม่เช่นนั้นโปรแกรมมันจะจัดการรวมเลเยอร์ให้เรา แล้วที่ทำมาทั้งหมดก็เปล่าประโยชน์
 
 
 
 
 
TIPS ความแจ่มของการคัดเส้นออกจากพื้นขาว
หลังจากที่คัดเอาแต่เส้นออกมาแล้ว เราสามารถเปลี่ยนสีเส้นได้สะดวกมากๆ โดยการไปที่เลเยอร์เส้นแล้วกด "Lock" ตามไอคอนที่วงสีแดงไว้จ้ะ
 
หลังจากนั้นก็ใช้เครื่องมือ Brush เลือกสีแล้วทาที่เส้นได้เลย ไม่ต้องกลัวเลอะออกมา
 
อยากให้ส่วนไหนเป็นเส้นสีอะไรทาได้ตามใจชอบ สะดวกรวดเร็วมากจ้ะ ไม่ต้องมา่ค่อยๆทำ selection ทีละส่วนแบบเมื่อก่อน
 
 
(^_^)/ หวังว่าจะเป็นประโยชน์กับคนที่สนใจงานด้าน CG จ้ะ
 
 
- บล็อคดูมีสาระหลังจากที่ปลอดสาระมาเนิ่นนาน ฮา
- ตรงไหนไม่เข้าใจคอมเม้นต์ถามไว้ได้จ้ะ บางทีเราเขียนอาจมึนๆข้ามบางจุดไป
 

Comment

Comment:

Tweet

ขอบคุณมากเลย กราบ กราบ กราบ 

#107 By ป้าจอย (124.120.69.162) on 2015-11-06 21:24

ขอบคุณมากนะคะ
กำลังหาวิธีอยู่พอดีเลยcry
Hot! Hot!

#106 By white-witch on 2013-08-06 18:19

เทคนิคแหล่มมากเลยพี่แป้ง
อ่านชื่อเอนทรี่แล้วหิวนะ เรายังไม่ได้กินข้าวYY
Hot! Hot! Hot!

#105 By itsmetoon on 2012-04-03 19:56

Thanks for the article. I read the above post.

#104 By Chicgraphic on 2012-03-30 17:11

สุดยอดเลยค่ะ ขอบคุณนะคะ

Channels คือที่ๆไม่เคยไปจริงๆด้วย ฮ่าาา

ปล.รูปน่ารักมากค่ะ

#103 By vg_jan on 2012-03-25 20:59

Hot! Hot! Hot!
ขอบคุณค่าา

#102 By +decAei+ on 2012-02-21 15:57

นี่มันใช่อ่ะ! ขอบคุณมกานะคะcry Hot!

#101 By projectZORO on 2012-01-21 06:36

Hot! Hot! Hot! Hot! Hot!
ขอบคุณค่ะอาจารย์ =w=

#100 By Finan'Ze Lanzo on 2011-12-03 18:51

ขอบคุณมากค่ะ>_<
ปกติลงเส้นดำตลอดเลย แหะๆ
Hot! Hot! Hot!

#98 By KoonPoonk on 2011-10-12 11:33

Hot! Hot! Hot!
มีประโยชน์อย่างยิ่งเลยล่ะคะ
แอบยากส์...

#97 By 2i2p on 2011-08-30 13:05

I appreciate your idea here.Thanks for posting

#96 By Cheap Air Jordan (69.90.60.116) on 2011-07-21 12:07

ชาบูๆๆๆๆๆๆๆ! ; w ;
ชอบวิธีแยกเส้นมากเลยครับ ขอคาราวะ! และขอนำไปใช้นะครับHot! Hot! Hot!

#95 By ผีแอบ on 2011-06-06 10:10

สาระ! Hot! Hot! Hot! Hot! Hot!
เรื่องที่น่าจะได้ใช้บ่อยๆแต่ไม่เคยเข้าสมอง

ขอบคุณฮับconfused smile

#94 By Kyoki on 2011-05-17 01:01

-ขอบคุณมากหลายๆคัีบบบ ขันน้ำ

#93 By กร (58.137.105.146) on 2011-04-19 15:26

ขอบคุณมากค่ะ เป็นประโยชน์มากค่ะ

#92 By aonorn on 2011-04-15 22:21

ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ

#91 By อวดดี on 2011-04-14 10:39

สุดยอด~ ละเอียดดีจัง ช่วยได้มากๆเลยค่า ><b ขอบคุณนะคะ ^^

ป.ล. ขออนุญาต Add นะคะ

Hot! Hot! Hot! Hot! Hot!

#90 By Milkchan ^๐^ on 2011-01-29 23:32

เพิ่งได้อ่านโดยละเอียด

ขอบคุณมากเลยค่ะ ได้วิธีที่สุดยอดมาใช้แล้ว หมดกังวลกับเส้นเปื้อนสี >_<

#89 By saisuna on 2011-01-29 01:59

Hot! Hot! Hot!
ขอบคุณมากค่ะ รู้สึกเล่นกับภาพได้มากขึ้นจริงๆ

#88 By ต่ายม่วง on 2011-01-28 21:39

แจ่มมากกกกHot! Hot! Hot! Hot! Hot!

#87 By Thai_RF_Engineer on 2011-01-28 06:55

โอ้วสุโก้ยมากค่ะ Hot! Hot! Hot! Hot!
เป็นประโยชน์มั่ก

#86 By EinniF™ on 2011-01-28 03:45

Hot! Hot! Hot! ขอบคุณมากจริงๆนะคะ อยากรู้มานานแล้ว!!!!!

ชอบบลอคนี้มากเลยละค่ะ >w<

#85 By ☂ YukiUsagi ★ on 2011-01-27 17:39

Hot! Hot!

#84 By myosotid on 2011-01-27 16:39

Hot! Hot! Hot!

เข้าใจแล้ว ขอบคุณมากกกกกcry

#83 By ✖ALONES COMMU ONLY✖ on 2011-01-27 11:29

ลืมกดดาวค่ะHot! Hot!

#82 By MEISANMUI™ on 2011-01-26 23:39

fix link ค่ะ
http://bit.ly/foMbqj

#81 By MEISANMUI™ on 2011-01-26 23:38

มีประโยชน์มากค่ะ ทำให้พี่นึกถึงวิธีเก่าๆที่เคยใช้ มีอีกวิธีนะคะ เขียนไว้ให้

[url]http://bit.ly/foMbqj/url]

#80 By MEISANMUI™ on 2011-01-26 23:37

Hot!

#79 By Maew : แหมว on 2011-01-26 22:57


มีประโยชน์ดีครับ

แต่ที่สำคัญที่สุดคือชอบ ทีน่า มาก55
คิดถึงไฟนอล6อ้ะ

#78 By เด็กซิ่ว on 2011-01-26 22:24

Hot! Hot! Hot! Hot!

#77 By SOSTimer on 2011-01-26 20:17

นึกไม่ถึงว่าจะมีวิธีแบบนี้ด้วย
ขอบคุณค่ะbig smile Hot! Hot! Hot!

#76 By ICEgotcha! on 2011-01-26 20:08

wink โอ้ววว สุดยอด ปาดาว Hot! Hot! Hot!

#75 By Art By Ice on 2011-01-26 19:26

สุดยอดดดดดด
สึโค่ยยยย !!!
จะขอยืมไปใช้มั่งละ โฮกกกกกก
Hot! Hot! Hot! Hot! Hot!
Hot! Hot! Hot! Hot! Hot!

#74 By MuMu2 on 2011-01-26 18:59

แจ่มเลย ขอบคุณมากๆจ้า สำหรับความรู้ดีๆconfused smile Hot! Hot! Hot! Hot! Hot!

#73 By Shinju on 2011-01-26 14:51

ชัดเจนเปลี่ยน^^ Hot! Hot! Hot!
ขอบคุนสำหรับฮาวทูดีๆครับ
วันหลังจะลองนำเทคนิคนี้ไปใช้ดู
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#71 By iTOY on 2011-01-26 13:42

ลายละเอียดสวยมากเลย confused smile

#70 By วิหคสีคราม on 2011-01-26 12:10

Hot! Hot! Hot!
สุดยอดดดดดเลยค่ะ!!! cry cry
ขอบคุณสำหรับวิธีมากมายเลยค่ะ cry cry

ป.ล.ขอแอดบล็อกนะคะ XD!

#69 By Janiform on 2011-01-26 12:05

Hot! Hot! Hot!

#68 By lim_liew on 2011-01-26 04:54

เป็นเทคนิคที่สุดยอดมากๆเลยคร๊า~!!!
ไม่เคยรู้อะไรแบบนี้มาก่อนเลย ฮา~
ขอบคุณสำหรับเทคนิคดีๆนะคะพี่แป้ง ^^g

#67 By lim_liew on 2011-01-26 04:52

Hot! Hot! Hot! Hot! Hot!

#66 By tAii...* on 2011-01-25 22:45

ขอบคุณมากค่าาา สุดยอดไปเลย
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#65 By Shiori_Lee_ jeng on 2011-01-25 22:19

heu Prema j'ai rien compris à tes explications!(jean louis)

#64 By (78.119.135.32) on 2011-01-25 22:01

โอ้ววว ยุ่งยากจริงๆด้วย -/นอนตาย

#63 By [kyo-yo] on 2011-01-25 21:45

Hot! Hot! Hot!

#62 By บาบิโลน on 2011-01-25 21:42

เป็นเทคนิคที่กู้ชีพช่วยชีวิตมากๆเลยค่า เวลาลืมก็จะได้กลับมาทบทวน โว้ววcry
// โดนพี่แป้งเสยคาง แอร่กก

#61 By บาบิโลน on 2011-01-25 21:42

ไม่ได้ไปอบรม เสียดายมากค่ะ
ขอบคุณสำหรับเทคนิคนะคะ
Hot! Hot! Hot! Hot! Hot!

#60 By giri on 2011-01-25 21:41

ชื่อเอนทรี่ อ่านแว่บแรกนึกว่าสั่งก๋วยเตี๋ยว (ฮา)

ขอบคุณสำหรับเทคนิกคับผม ^^ Hot!

#59 By EGUANAฟ้าประทาน on 2011-01-25 20:45

Hot! Hot! Hot!

สุดยอดดดดดดดดดดดด ค่ะ!!