ก่อน(ภาพซ้าย) และ หลังตัด(ภาพขวา)

ส่วนประกอบที่สำคัญ

1. Photoshop CS+ (บทความนี้ใช้ CS3 ครับ)

 *Note : ภาพประกอบบางภาพถูกย่อไว้ คลิกที่ภาพเพื่อขยายนะครับ

เริ่ม

1. คลิกเืลือกเครื่องมือ Polygonal Lesso Tool(L) (ในภาพจุดที่ 1)

ปรับ Feather: 0 ( ในภาพจุดที่ 2 )
ติ๊กที่ Anti-Alias ( ในภาพจุดที่ 3 )

2. ทำการลากเส้นเพื่อตัดขอบขอบรูปภาพครับ ตัวอย่างการลากเส้นที่ดีและไม่ดี

3. เมื่อทำการลากเส้นตัดขอบทั้งหมดเรียบร้อยแล้วให้คลิกที่ Add Layer Mask (ในภาพจุดที่ 1)

4. ที่ด้านหลังรูปภาพจะมี Layer Mask โผล่ขึ้นมาดังภาพในจุดที่ 1 ตอนนี้พื้นหลังบางส่วนได้หายไปแล้ว เหลือแต่ตัวภาพที่เราตัดไว้เท่านั้น แต่สังเกตดีดี รอบ ๆ ขอบของภาพยังมีเม็ดสีของพื้นหลังติดอยู่ด้วย

5. ที่เลเยอร์ให้คลิกเลือกมาที่รูปภาพครับ

6. ขั้นตอนนี้เราจะมาแต่งขอบภาพที่ตัดให้ดูเนียนขึ้นครับ เริ่มจากแขนของคูม่าเป็นตัวอย่าง เห็นได้ว่ารอบ ๆ สีผิวของคูม่ายังมีสีฟ้าปนอยู่เล็กน้อย

6.1 คลิกเลือกเครื่องมือ Eyedropper Tool(I)(เครื่องมือดูดสีนั้นเอง)(ในภาพจุดที่ 1)
6.2 คลิกเลือกสีที่ผิวช่วงบริเวณแขนของคูม่าครับ เราจะกลบช่วงแขนก็ต้องเลือกสีช่วงแขน จะกลบช่วงไหนก็เลือกสีของช่วงนั้น (ไม่งงเนอะ)

7. คลิกเลือกเครื่องมือ Brush Tool(B) ปรับขนาดหัวแปรงตามความเหมาะสม จากนั้นให้ระบายบริเวณขอบแขน เพื่อกลบสีฟ้าที่เห็น สังเกตได้ว่าตรงบริเวณแขนของคูม่าตอนนี้ไม่มีเม็ดสีฟ้าแล้ว

เก็บรายละเอียดของขอบรูปโดยทำตามขั้นตอนที่ 6.1, 6.2, 7 เช่นนี้ไปจนหมดครับ

8. ตอนนี้แต่งขอบรูปเสร็จหมดแล้ว

9. ขั้นตอนนี้จะมาเก็บรายละเอียดของขอบรูปที่เป็นเหลี่ยม หรือลบส่วนที่เกินออกไป

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

9.3 ให้คลิกเลือกเครื่องมือ Brush Tool(B) ปรับสีหัวแปรงเป็น สีดำ/ขาว และลองระบายลงไปใน Layer Mask ดูครับ (ต้องลองเดี๋ยวรู้เอง) เมื่อเก็บรายละเอียดแต่งขอบที่เป็นเหลี่ยม ๆ ออกไปเท่านี้ก็เรียบร้อย

จากผู้เขียน

          เป็นบทความเก็บตกที่เคยลงไว้ที่บอร์ดปังย่าเมื่อปีที่แล้ว นอกจากจะนำไปใช้ในการตัดตัวละครในเกมส์แล้ว ยังสามารถนำไปประยุกต์ใช้ในการตัดแบล็คกราวน์ในด้านอื่น ๆ ได้อีกด้วย

จากตัวอย่างด้านล่าง

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

Image + Mask texture = Transparent Image

ส่วนประกอบที่สำคัญ

1. Photoshop (CS, CS2, CS3, CS4) บทความนี้ใช้ CS3 ครับ
2. ไฟล์ประกอบบทความนี้ [ Download ] [ Mirror ]

*Note : ภาพประกอบในบทความบางภาพถูกย่อไว้ คลิกที่ภาพเพื่อขยายนะครับ

วิธีการทำ

1. เปิดไฟล์ Logo.jpg และ LogoMask.jpg ขึ้นมาครับ ดังรูป

2. ที่ภาพ Logo.jpg ให้คลิกเลือกคำสั่ง Add vector mask (ในภาพจุดที่ 1)
จะปรากฎ Layer Mask ขึ้นมา (ในภาพจุดที่ 2)

3. เลือกคำสั่ง Apply Image โดยเรียกได้จากเมนู Image > Apply Image…
ที่ Source เลือก LogoMask.jpg (ไฟล์ Mask Texture นั้นเอง) (ในภาพจุดที่ 1)
ที่ Blending ปรับเป็น Normal หรือ Multiply ก็ได้ครับ (ในภาพจุดที่ 2)
จากนั้นกด OK ได้เลย

4. ผลลัพธ์ที่ได้ พื้นหลังจะหายไปเหลือไว้แต่ตัวโลโก้เท่านั้น
เพราะตัว Layer Mask ทำหน้าที่ในการแสดงเฉพาะส่วนที่ต้องการ
โดยใช้ Mask Texture เป็นตัวกำหนดขอบเขตของการแสดงผลนั้นเอง

ประยุกต์ใช้

ทดลองในการตัดเอฟเฟคของไม้ในเกมส์ปังย่าครับ

ตัวรูปปกติ

ตัว Mask Texture

เมื่อนำมาเข้าวิธีข้างต้น ผลที่ได้

ผู้เขียนบ่น

บทความสั้น ๆ ที่ 3 ของปี เป็นเทคนิคการใช้ Layer Mask อีกวิธีหนึ่ง
สั้น ๆ ง่าย ๆ แต่นำไปประยุกต์ใช้ได้อีกหลายอย่างครับ

Download

Download .PSD Source file : [ LINK 1 ]

ตัวอย่างงานที่เราจะทำกัน เมื่อพร้อมแล้วก็อ่านขั้นตอนภายในบทความนี้ได้เลยครับ

ส่วนประกอบที่สำคัญ

1. โปรแกรม Autodesk 3Ds Max 2009
2. โปรแกรม Metasequoia [ Download ]
   *สำหรับเปิดดูไฟล์นามสกุล .MQO
3. PAK Tools&Convert .MPET,.PET to .MQO/PangyaTo3DS?ax scripts [ Download ]
   *ใช้สำหรับแตกข้อมูลออกจากไฟล์นามสกุล .PAK
   *และสำหรับการแปลงไฟล์ .MPET, .PET ให้เป็น .MQO
   *สคริปที่ใช้ในการนำไฟล์ .MQO เข้าสู่ 3Ds Max
4. ไฟล์ตัวอย่างประกอบการสอนในบทความนี้ [ Download ]
   *ดาวน์โหลดและแตกไฟล์ไว้ที่ใดก็ได้ เพื่อความเข้าใจตรงกันในบทความ

*Note : ภาพประกอบบางภาพถูกย่อไว้ คลิกที่ภาพเพื่อขยายนะครับ

เริ่ม

ทำความรู้จักกับส่วนต่าง ๆ ในโปรแกรม Autodesk 3Ds Max 2009

จุดที่ 1(ในภาพ) Main Toolbar เป็นที่เก็บเครื่องมือพื้นฐานต่าง ๆ เอาไว้
จุดที่ 2(ในภาพ) Viewport แสดงพื้นที่งานในมุมมองต่าง ๆ
จุดที่ 3(ในภาพ) Command Panel ส่วนแสดงคุณสมบัติ/แก้ไข งานของเรา

หลัก ๆ มีประมาณนี้ครับที่อยากให้ทำความเข้าใจไว้เพื่อใช้อ้างอิงในบทความต่อไป

เริ่มติดตั้งสคริปในการทำงาน

1. ที่ Command Panel คลิกเลือกไปที่แท๊บ Utilities(ในภาพจุดที่ 1)
คลิกเลือกที่ MAXScript(ในภาพจุดที่ 2) และคลิกเลือกที่ Run Script(ในภาพจุดที่ 3)

2. คลิกเลือกที่สคริป PangyaTo3DSmax.ms จากนั้นกด Open (ตามลำดับในภาพ)

3. เมื่อกลับมาที่ Panel ที่ Utilities จะมีสคริปของ PangyaTo3DSMax ให้เลือก

เมื่อคลิกเลือก PangyaTo3DSMax แล้ว
Panel PangyaTo3DSMax จะปรากฏขึ้นมาดังภาพ

Tip : เราสามารถติดตั้งสคริปให้เรียกขึ้นมาตอนเปิดโปรแกรมได้ทันที
โดยการนำตัวไฟล์สคริป PangyaTo3DSMax.ms ไปไว้ที่
C:\Program Files\Autodesk\3ds Max 2009\Scripts\Startup
(แล้วทำไมไม่บอกไว้ตั้งแต่แรกวะ = =”)

ส่วนการทำงานหลัก

4. ที่โปรแกรม 3Ds Max คลิกเลือกเมนู Files > Open เลือกเปิดไฟล์ Kooh_Bone.Max
จากนั้นกด Open (ในภาพตามลำดับ 1,2)

5. เมื่อเปิดไฟล์ Kooh_Bone.max ขึ้นมาแล้วที่ Viewport จะเห็นชิ้นส่วนกระดูกจำนวนมากมาย ชิ้นส่วนกระดูกภายในนี้ได้รับการเชื่อมต่อเข้ากันเป็นที่เรียบร้อยแล้ว และจะนำมาใช้ในการทำงานในขั้นตอนต่อไป

Note : ไฟล์กระดูกตัวละครอื่น ๆ สามารถดาวน์โหลดได้จากท้ายบทความนี้

6. ในขั้นตอนนี้เราจะเริ่มนำชิ้นส่วนแต่ละชิ้นของตัวละครเข้ามาผูกเข้ากับกระดูก

• 6.1 ที่ Panel PangyaTo3DSMax คลิกเลือกที่ Load File…

6.2 คลิกเลือกชิ้นส่วนที่ต้องการ ในที่นี้เริ่มจากชิ้นส่วน e_fc_def (ในภาพจุดที่ 1)
จากนั้นกด Open (ในภาพจุดที่ 2)

6.3 หน้าต่างจะแสดงการโหลดชิ้นส่วนที่เลือกจากนั้นกด OK ได้เลย

6.4 เมื่อทำการโหลดชิ้นส่วนที่ต้องการเป็นที่เรียบร้อยแล้ว ที่ Panel PangyaTo3DSMax ให้เลือกคำสั่ง Import hierachy(ในภาพจุดที่ 1) จากนั้นกดปุ่ม Start(ในภาพจุดที่ 2)

6.5 เมื่อทำการ Import hierachy สำเร็จ จะแสดงข้อความ Done
แสดงว่าการเชื่อมชิ้นส่วนเข้ากับกระดูกผ่านไปได้ด้วยดี ^^”

6.6 เมื่อเชื่อมชิ้นส่วนเข้ากับกระดูกเป็นแล้ว ต่อไปจะเป็นการนำชิ้นส่วนเข้ามาในตัวงาน
ที่ Panel PangyaTo3DSMax ให้เลือกคำสั่ง Add part(ในภาพจุดที่ 1)
จากนั้นกดปุ่ม Start(ในภาพจุดที่ 2) สคริปจะเริ่มนำชิ้นส่วนเข้ามาในตัวงานของเรา

6.7 ชิ้นส่วนของตัวละครที่เราเลือกไว้ เข้ามาอยู่ในพื้นที่งานของเราแล้ว

ให้ย้อนกลับไปทำขั้นตอนที่ 6.1 – 6.6 อีกครั้งโดยเลือกชิ้นส่วนอื่น ๆ ที่เหลือให้ครบ

7. ผ่างงงง!! เมื่อทำการเพิ่มชิ้นส่วนที่ต้องการทั้งหมดแล้วก็จะได้ดังภาพ เมื่อถึงขั้นตอนนี้แล้ว จะเข้าสู่ขั้นตอนการดัดกระดูกของตัวละครให้มีท่าทางตามที่เราต้องการ

แต่ก่อนจะเริ่มทำการดัดกระดูก ผมมีข้อเสร่อแนะนำเล็กน้อยดังนี้ครับ
ที่ Command Panel ให้คลิกเลือกที่แท๊บ Display(ในภาพจุดที่ 1)
จากนั้นให้ดูในส่วนของ Panel Hide by Category ในหมวดคำสั่งนี้จะเป็นการ
ซ่อน/แสดง วัตถุต่าง ๆ ใน Viewport ของเราครับ ในดูตรง Geometry(ในภาพจุดที่ 2)

เมื่อเราทำการติ๊กเลือกที่ Geometry ส่วนที่เป็นชิ้นส่วนของตัวละครทั้งหมดจะถูกซ่อนเอาไว้ ทำให้เราสามารถคลิกเลือกชิ้นกระดูกได้ง่ายขึ้นครับ เมื่อติ๊กออกก็จะแสดงชิ้นส่วนของตัวละครเหมือนเดิม เป็นข้อเสร่อแนะนำเล็ก ๆ น้อย ๆ ครับ สำหรับคนที่ยังไม่ทราบ(ใครทราบแล้วหรือมีวิธีการอื่น ก็ผ่านไปครับ)

8. เริ่มการดัดกระดูกครับ ให้คลิกเลือกชิ้นส่วนกระดูกที่เราต้องการ หมุน/ปรับ(ในภาพจุดที่ 1) โดยใช้เครื่องมือ Select and Move , Select and Rotate ที่อยู่ในส่วนของ Main Toolbar(ในภาพจุดที่ 2)

Note : Select and Move คือเครื่องมือในการย้ายวัตถุ
Select and Rotate คือเครื่องมือในการหมุนวัตถุ

โดยหลัก ๆ ใช้เครื่องมือ 2 ตัวนี้ครับ

9. จากนั้นก็เริ่มปรับแต่งท่าทางที่ต้องการได้ตามใจชอบเลยครับ

10. เมื่อจัดท่าทางที่ต้องการเรียบร้อยแล้วก็ลอง Render ชิ้นงานของเราดูครับ
โดยเลือกเมนู Rendering > Render คีย์ลัด (Shift + Q) , (F9)

ตอนนี้งานที่ได้จะออกมาประมาณนี้ครับ ในหัวข้อต่อไปจะกล่าวถึงการใส่แสงกับงานและการเรนเดอร์งานให้ออกมาสวยงามยิ่งขึ้น

การใส่แสงและการเรนเดอร์ชิ้นงาน

11. เริ่มจาการเลือกเมนู Create > Standard Primitives > Plane

12. ทำการสร้างตัว plane ไปที่งานครับ(ในภาพจุดที่ 1) โดยสร้างในระนาบแนวนอน(แกน y,x) ดูในส่วน Top View จะเห็นได้ชัด จากนั้นทำการเปลี่ยนสีตัว plane ครับ
โดยคลิกเลือกที่ตัว plane ที่เราสร้างไว้ จากนั้นคลิกเลือกที่ Object Color(ในภาพจุดที่ 2) เลือกสีขาว และกด OK (ในภาพตามลำดับ 3,4)

13. ขั้นตอนนี้จะเริ่มใส่แสง(SkyLight)ให้กับงานครับ

13.1 ที่ Command Panel ให้เลือกที่แท๊บ Create(ในภาพจุดที่ 1)
13.2 คลิกเลือกที่ Lights(ในภาพจุดที่ 2) และเลือกด้านล่างเป็น Standard
13.3 คลิกเลือกที่ SkyLight(ในภาพจุดที่ 3)
13.4 ปรับค่า Multiplier เป็น 0.8 (ในภาพจุดที่ 4)
13.5 จากนั้นทำการสร้างตัว SkyLight ไว้เหนือตัวละครครับ(ในภาพจุดที่ 5)

14. ขั้นตอนนี้จะเป็นการใส่แสงอีกตัวนึง(mr Area Omni)

14.1 ที่ Command Panel ให้เลือกที่แท๊บ Create(ในภาพจุดที่ 1)
14.2 คลิกเลือกที่ Lights(ในภาพจุดที่ 2) และเลือกด้านล่างเป็น Standard
14.3 คลิกเลือกที่ mr Area Omni(ในภาพจุดที่ 3)
14.4 ในส่วนของ Intensity/Color/Attenuation ปรับค่า Multiplier เป็น 0.4
(ในภาพจุดที่ 4)
14.5 จากนั้นทำการสร้างตัว mr Area Omni ไว้เหนือตัวละครครับ
(ในภาพจุดที่ 5)

Note : เราสามารถเคลื่อนย้ายตำแหน่งของ mr Area Omni ได้ครับ โดยเงาที่ตกกระทบจะขึ้นอยู่กับ ตำแหน่ง/ความสูง ของตัว mr Area Omni ให้ลองนึกภาพ mr Area Omni เป็นคล้าย ๆ กับดวงอาทิตย์หรือแสงไฟที่ส่องผ่านวัตถุ หรือไม่ก็ลองดูภาพตอนที่เรนเดอร์งานแล้วจะเข้าใจได้มากกว่าครับ

15. เมื่อทำการสร้างแสงให้กับงานเรียบร้อยแล้วต่อไปเราจะมาตั้งค่าการเรนเดอร์งานครับ เริ่มที่เลือกที่เมนู Rendering > Environment… คีย์ลัด (8)

ปรับสีของ Background ให้เป็นสีที่ต้องการในที่นี้ขอเลือกสีขาวครับ(ในภาพจุดที่ 1)
จากนั้นปิดหน้าต่างของ Environment and Effects ไปได้เลย

16. ต่อไปให้เลือกเมนู Rendering > Render Setup… หรือกด (F10) เพื่อเรียกหน้าต่างการตั้งค่าการเรนเดอร์ขึ้นมา

16.1 คลิกเลือกที่แท๊บ Common(ในภาพจุดที่ 1)
16.2 คลิกเลือกขนาดของงานที่จะเรนเดอร์ออกมาครับ(ในภาพจุดที่ 2)
16.3 ติ๊กเลือก Force 2-Sided(ในภาพจุดที่ 3)

16.4 คลิกเลือกแท๊บ Renderer(ในภาพจุดที่ 1)
16.5 ที่ Filter เลือก Catmull-Rom(ในภาพจุดที่ 2)
16.6 กดที่ปุ่ม Render(ในภาพจุดที่ 3) หรือกด (Shift + Q),(F9)
เพื่อดูผลงานครับ

* Note : ในขั้นตอนที่ 16.5 เราสามารถเลือกฟิลเตอร์แบบอื่น ๆ นอกจาก Catmull-Rom ได้ครับ ลองเลือกฟิลเตอร์แบบอื่น ๆ แล้ว Render ดูจะให้ผลการเรนเดอร์ที่ต่างกันออกไป

17. เมื่อเรนเดอร์ผลงานแล้ว เราก็สามารถเซฟงานออกมาเป็นรูปภาพได้โดยคลิกที่ปุ่มเซฟ (ในภาพจุดที่ 1) แล้วเลือกนามสกุลภาพ/นามสกุลอื่น ๆ ตามต้องการ

เสร็จเรียบร้อย…

บทเสริม

ถาม(เอง)-ตอบ(เอง)

1. แตกข้อมูลออกจากไฟล์นามสกุล .PAK ได้อย่างไร?
   - สามารถทำได้โดยการลากไฟล์ *.PAK เข้าไปที่ตัว pangupk.exe ตัวโปรแกรมจะทำการแตกไฟล์ข้อมูล โดยไฟล์ข้อมูลที่แตกนั้นจะอยู่ในโฟลเดอร์ที่ชื่อ data ที่ถูกสร้างขึ้น สำหรับนักแงะไฟล์ .PAK มืออาชีพคงเข้าใจขั้นตอนดีอยู่แล้ว
2. ชิ้นส่วนของตัวละครแต่ละชิ้นจะหาได้อย่างไร?
   - โดยส่วนมากเมื่อทำการแตกข้อมูลทั้งหมดจาก .PAK เรียบร้อยแล้ว เราสามารถหาชิ้นส่วนของตัวละครได้จากโฟลเดอร์ data > avatar ภายในโฟลเดอร์ avatar จะพบโฟลเดอร์ที่มีชื่อตามตัวละครต่าง ๆ เช่น e_kooh , i_lucia และภายในโฟลเดอร์ย่อยของแต่ตัวละครนี่เองจะเก็บไฟล์ชิ้นส่วนของตัวละครเอาไว้ ในรูปของไฟล์ .MPET และรวมไปถึง Texture ต่าง ๆ ของแต่ละตัวละคร
3. จะแปลงไฟล์นามสกุล .MPET , .PET ให้เป็น .MQO ได้อย่างไร?
   - สามารถทำได้โดยการลากไฟล์ *.MPET , *.PET เข้าไปที่ตัว MpetMqo.exe ตัวโปรแกรมจะทำการแปลงไฟล์ให้อยู่ในรูปนามสกุล .MQO ในชื่อเดิม โดยไฟล์นามสกุล .MQO สามารถเปิดดูได้กับโปรแกรม Metasequoia เพื่อใช้ดูชิ้นส่วนแต่ละชิ้น ก่อนนำไปใช้ใน 3Ds Max ต่อไป

เสร่อแนะ

1. ในการนำชิ้นส่วนที่ไม่มีการผูกเชื่อมหรือเกี่ยวโยงกับตัวกระดูก เช่น ไม้กอล์ฟ, ถ้วย เราสามารถใช้คำสั่ง Load เพื่อเลือกชิ้นส่วนที่ต้องการ จากนั้นเลือกเป็น Import static object แล้วกด Start ได้เลย (ในภาพตามลำดับ 1,2,3)

   

2. แนะนำให้ใช้โปรแกรม Autodesk 3Ds Max เวอร์ชั่น 2009 ครับ เวอร์ชั่น 9 กับ 2009 คนละเวอร์ชั่นกันนะครับ เพราะเท่าที่เคยลองมา เหมือนว่าเวอร์ชั่น 9 จะมีปัญหากับตัวสคริปในขั้นตอนการเชื่อมชิ้นงานเข้ากับตัวกระดูก

ผู้เขียนบ่น

ในบล็อกบทความต้นฉบับ http://pangyato3dsmax.blogspot.com นั้น ในส่วนหนึ่งได้กล่าวถึงการเชื่อมกระดูกของตัวละครเอาไว้ โดยขั้นตอนการทำนั้นซับซ้อนและยุ่งยากเกินกว่าจะเขียนให้เข้าใจ เพราะขั้นตอนการเชื่อมกระดูกนั้นเป็นขั้นตอนที่ยากที่สุดในบรรดาขั้นตอนทั้งหมด ทางผู้เขียนเองจึงได้ทำการเชื่อมกระดูกของตัวละครทั้งหมดเอาไว้แล้วเพื่อความสะดวก โดยผู้ที่สนใจสามารถนำตัวกระดูกของแต่ตัวละครไปใช้งานได้ทันที โดยสามารถดาวน์โหลดไฟล์กระดูกได้ที่ท้ายบทความนี้ครับ

สรุปได้ดังนี้

1. ดาวน์โหลดไฟล์กระดูกของตัวละครที่ต้องการ(ดาวน์โหลดได้ท้ายบทความนี้)
2. เปิดไฟล์กระดูกขึ้นมาในโปรแกรม 3Ds Max
3. ทำการ เพิ่มชิ้นส่วนของตัวละครที่ต้องการลงไป
4. ดัดท่าทางของตัวละครตามต้องการ
5. เรนเดอร์งาน

ภายบทความนี้มีส่วนใดอธิบายผิดพลาดไปต้องขออภัยมา ณ. ตรงนี้ด้วยครับ เนื่องจากผู้เขียนเองขอยอมรับว่าขณะที่เริ่มเขียนบทความนี้ เพิ่งหัดจับ 3Ds Max ได้ 3 อาทิตย์กว่า ๆ อาจจะยังขาดข้อมูลและเทคนิคหลาย ๆ อย่างอยู่มาก และขอยอมรับอีกว่าที่เริ่มจับ 3Ds Max ก็เพราะจะเอามาดัดตัวละครปังย่านี่แหละ ^^ มีข้อเสนอแนะ ติ ชม ใด ๆ ยินดีรับไว้ครับ

Download

ดาวน์โหลดกระดูกของตัวละครต่าง ๆ

ตัวละครหญิง : [ Hana ] [ Cesillia ] [ Kooh ] [ Arin ] [ Lucia ] [ Nell ]
ตัวละครชาย : [ Nuri ] [ Arthur ] [ Max ] [ Kaz ]
Caddie : [ Bongdori ] [ Big Bongdori ] [ Titan Boo ] [ Cadie ] [ Dolphine ] [ Loro ] [ Pipin ] [ Kuma ] [ Tiki & Minty ] [ Raman Cup ]

Credit & Thanks

1. ขอบคุณสคริปดีดี http://pangyato3dsmax.blogspot.com
2. ให้เนื้อความขั้นตอนการทำภาคภาษาไทยและเชื่อมกระดูกโดย Xenogenesis

ส่วนประกอบที่สำคัญ

1. โปรแกรม Photoshop CS+ (ที่จริงจะเวอร์ชั่นไหนก็ได้นะ)
2. โปรแกรม Adobe Flash 8,CS2,CS3 ได้หมด บทความนี้ใช้ CS3 ครับ
3. ความตั้งใจ และใจเย็น ๆ อย่า งงกับบทความ ( อันนี้สำคัญ ฮ่า ๆ )
4. มีทุกข้อที่กล่าวมา ^^

เริ่ม

1. ที่โปรแกรม Photoshop สร้างเอกสารใหม่ขึ้นมา กำหนดขนาดพื้นที่งานประมาณนี้ครับ

Width : 300 px
Height : 300 px

2. ใช้เครื่องมือ Ellipse Tool ( U ) เลือกเป็นแบบ Shape(ในภาพจุดที่ 1) แล้วเลือกลักษณะของ Shape เป็นวงกลม(ในภาพจุดที่ 2)

3. ทำการวาด Shape วงกลมลงไปบนพื้นที่งานจะได้ดังภาพครับ

4. ในขั้นตอนที่ 4 นี้เราจะมาทำให้วงกลมอยู่กึ่งกลางของพื้นที่งาน

4.1 กด Ctrl ค้างไว้แล้วคลิกเลือกเลเยอร์ Background ,Shape 1 (ในภาพจุดที่ 1)
4.2 คลิกเลือกที่ Move Tools(V) (ในภาพจุดที่ 2)
4.3 มองดูที่ properties ด้านบน
จากนั้นกดที่ Align vertical centers(ในภาพจุดที่ 3)
และกดที่ Align horizontal centers(ในภาพจุดที่ 4)

Shape วงกลมของเราก็จะอยู่กึ่งกลางของพื้นที่งานแล้ว(ในภาพจุดที่ 5)

5. ในขั้นตอนนี้เราจะมาพิมพ์ข้อความกัน

5.1 ให้คลิกเลือกที่ Shape 1 ก่อนครับ(ในภาพจุดที่ 1)
5.2 จะสังเกตเห็นเส้น Path ปรากฏขึ้นรอบ ๆ วงกลมที่เราวาดไว้(ในภาพจุดที่ 2)
(ถ้าเห็นเส้น Path ขึ้นแบบในรูปตัวอย่างเป็นอันว่าใช้ได้ครับ)
5.3 คลิกเลือกที่เครื่องมือ Horizontal Type Tool(T)(ในภาพจุดที่ 3)
5.4 จากนั้นให้เลื่อนเคอร์เซอร์มาใกล้ ๆ เส้นขอบของวงกลมครับ
ตัวเคอร์เซอร์จะเปลี่ยนเป็น (ในภาพจุดที่ 4)
แล้วเริ่มพิมพ์ข้อความที่ต้องการได้เลย

** ในขั้นตอนนี้ถ้าเราไม่คลิกให้เส้น Path ของ Shape 1 ปรากฏขึ้นมาก่อน ตัวเคอร์เซอร์จะไม่เปลี่ยนครับ และเราก็จะพิมพ์ข้อความรอบ ๆ วงกลมไม่ได้

6. ข้อความที่เราพิมพ์ จะพิมพ์เรียงไปตามแนวเส้น Path ของวงกลมดังรูปด้านล่างครับ

7. ขั้นตอนนี้จะทำการลบเลเยอร์ที่ไม่จำเป็นต้องใช้ออกไปครับ

7.1 กด Ctrl ค้างไว้แล้วคลิกเลือกเลเยอร์ Background ,Shape 1 (ในภาพจุดที่ 1)
7.2 แล้วกดปุ่มถังขยะ(ในภาพจุดที่ 2) เพื่อลบสองเลเยอร์นี้ทิ้งได้เลยครับ
ตอนนี้ก็จะเหลือแต่เลอร์ที่เราพิมพ์ข้อความไว้เท่านั้น

8. ในขั้นตอนนี้เราจะมาแปลงสภาพของข้อความที่ได้พิมพ์ไว้ให้เป็น Shape ครับ เพื่อนำไปใช้ในขั้นตอนถัด ๆ ไป

8.1 ให้เลือกที่เมนู Layer > Type > Convert to Shape (ในภาพจุดที่ 1,2,3) ตามลำดับ ตอนนี้ข้อความที่เราพิมพ์ไว้ก็จะเปลี่ยนเป็น Shape แล้ว

9. เมื่อทำการเปลี่ยนข้อความเป็น Shape เรียบร้อยแล้ว ก็ให้ทำการเซฟครับ
โดยตั้งชื่อไฟล์เป็น Text (หรือชื่ออะไรก็ได้ตามสะดวก) Format เป็น .psd
แล้วก็เซฟได้เล้ย จบขั้นตอนนี้ก็ปิดโปรแกรม Photoshop ไปได้เลย (ดังภาพ)

เข้าสู่ช่วงที่ 2 เราจะทำงานกันต่อบนโปรแกรม Flash ครับ

10. ที่โปรแกรม Flash ให้สร้างงานใหม่ขึ้นมา 1 งานกำหนด Properties คร่าว ๆ ดังนี้ครับ

Width : 300 px
Height : 300 px
Frame Rate : 24 fps (กำหนดให้เป็นสัก 24 เพื่อความนุ่มนวลเวลาโมชั่น)

11. เมื่อสร้างงานขึ้นมาแล้ว ต่อไปเราจะนำข้อความที่ได้พิมพ์ไว้แล้วใน Photoshop มาใช้กัน

ให้เข้าไปที่เมนู File > Import > Import to Library… (ในภาพจุดที่ 1,2,3 ตามลำดับ)

12. คลิกเลือกไฟล์ Text.psd ที่เราได้ทำการเซฟไว้ในขั้นตอนที่ 9 แล้วกด Open ได้เลย

13. ขั้นตอนการ Import ข้อความวงกลมเข้าสู่ Flash

13.1 ติ๊กเลือกข้อความวงกลม (ในภาพจุดที่ 1)
13.2 คลิกเลือกที่ Editable paths and layer styles (ในภาพจุดที่ 2)
13.3 คลิก OK ได้เลย

ตอนนี้ ข้อความวงกลมที่ทำไว้ก็จะเข้ามาอยู่ใน Library เราแล้ว

14. เมื่อทำการ Import ข้อความเข้ามาแล้ว ขั้นตอนต่อไปเราจะมาสร้าง Movie Clip กัน

14.1 ให้ไปที่เมนู Insert > New Symbol (Ctrl + F8) จะปรากฏไดอะล๊อกดังภาพ
14.2 ที่ช่อง Name ตั้งชื่อว่า Motion (ในภาพจุดที่ 1)
ที่ Type : เลือกเป็น Movie Clip(ในภาพจุดที่ 2)
14.3 แล้วกด OK ได้เลย

15. เมื่อทำกด OK แล้ว ตอนนี้เราจะมาทำงานอยู่ในส่วนของ Movie Clip ที่ได้ตั้งชื่อไว้ครับนั้นคือ “Motion” นั้นเอง (สังเกตในภาพจุดที่ 1)

15.1 ต่อไปให้เปิดหน้าต่าง Library ขึ้นมาครับ ถ้าใครไม่ขึ้นให้กด(Ctrl + L)
จากนั้นลาก Text.psd เข้ามาไว้ที่พื้นที่งานเลยครับ(ในภาพจุดที่ 2)

เมื่อเราลากข้อความวงกลมเข้ามาในพื้นที่งานแล้ว ข้อความที่ลากเข้ามาอาจจะยังไม่อยู่กึ่งกลางของพื้นที่งาน เราจะมาทำให้มันอยู่กึ่งกลางกัน เพราะขั้นตอนนี้สำคัญมาก และมีผลต่อการหมุนของข้อความ เรียกง่าย ๆ ว่า ทำ/ปรับจุดหมุน นั้นเอง = =”

15.2 คลิกเลือกข้อความวงกลมบนพื้นที่งานก่อน จากนั้นเปิดหน้าต่าง Align ขึ้นมา
ถ้าไม่มีให้กด(Ctrl + K) หรือไปที่เมนู Window > Align
15.3 จากนั้นให้กดที่ Align/Distribute to stage(ในภาพจุดที่ 3)
(ถ้าปุ่ม Align/Distribute to stage นี้กดอยู่แล้วให้ทำขั้นตอน 15.4 เลย)
15.4 กดที่ Align Horizontal Center(ในภาพจุดที่ 4)
15.5 กดที่ Align Vertical Center(ในภาพจุดที่ 5)

จบขั้นตอนนี้ข้อความวงกลมของเราก็จะอยู่กึ่งกลางแล้ว

16. เริ่มทำการสร้างโมชั่น #1

16.1 ที่ Timeline ให้คลิกขวาที่ Frame 1(ในภาพจุดที่ 1)
16.2 จากนั้นเลือกคำสั่ง Create Motion Tween

17. เริ่มทำการสร้างโมชั่น #2

17.1 คลิกขวาที่ Frame 30(ในภาพจุดที่ 1)
17.2 จากนั้นเลือกคำสั่ง Insert Keyframe(ในภาพจุดที่ 2)

18. ถ้าลักษณะบนไทม์ไลน์จะออกมาเป็นดังนี้ เป็นอันว่าใช้ได้

19. ขั้นตอนนี้เราจะทำให้ข้อความวงกลมหมุนได้

19.1 คลิกเลือกที่ Frame 2(ในภาพจุดที่ 1)(คลิกเลือกเฉย ๆ นะ)
19.2 มาดู Properties ด้านล่าง ที่ Rotate ให้เลือก CW ครับ(ในภาพจุดที่ 2)
(CW = หมุนตามเข็มนาฬิกา/CCW = หมุนทวนเข็มนาฬิกา)
19.3 ให้ลองกด Enter ดู จะเห็นว่าข้อความวงกลมหมุนได้แล้ว

20. ต่อไปทำให้การหมุนของข้อความมีความต่อเนื่อง ไม่สะดุด

20.1 คลิกเลือกที่เฟรมสุดท้ายของโมชั่นนั้นคือ Frame ที่ 30(ดังภาพในจุดที่ 1)
20.2 เปิดหน้าต่าง Action ขึ้นมา โดยไปที่เมนู Window > Actions หรือกด (F9)
20.3 ใส่สคริปไปดังนี้ gotoAndPlay(1); (ในภาพจุดที่ 3)
20.4 จากนั้นกดที่ Scene 1(ในภาพจุดที่ 4) เพื่อออกจากการทำงานในส่วนของ Movie Clip “Motion” และกลับสู่พื้นที่งานหลักของเรา

21. ให้ลาก Movie clip “Motion” ที่เราเพิ่งทำเสร็จ เข้ามาวางบนพื้นที่งานหลักของเราเลย
(ในภาพจุดที่ 1)

22. จากนั้นให้คลิกเลือกเครื่องมือ Free Tranform Tools(Q)(ในภาพจุดที่ 1)
แล้วทำการปรับ ย่อ/ขยาย/ดัด/หมุน ตัวอักษรวงกลมได้ตามต้องการเลยครับ

23. เมื่อเรียบร้อยแล้วให้ลองกด Ctrl + Enter เพื่อดูผลกรรมที่เราสร้างไว้ได้เลยครับ

เพิ่มเติม

ถ้าข้อความวงกลมหมุนเร็วเกินไปให้ย้อนกลับไปที่ขั้นตอน 17.1 ครับ แล้วขยายปลายทางของโมชั่น จาก 30 ให้เป็นสัก 170 – 200 ก็ได้ครับ ยิ่งขยายเฟรมออกไปมาก การหมุนของข้อความก็จะช้าลงเรื่อย ๆ ครับ

Download .PSD & .SWF Source File : [ LINK 1 ]
(.SWF สำหรับ Flash CS3 นะครับ ยังไม่ได้แปลงฟอแมตให้เปิดกับ Flash 8 ได้)

เตรียมตัวก่อนทำ
1. โปรแกรม Macromedia Flash 8 ( ตอนนี้ต้องบอกว่า Adobe Flash แล้วสิเนอะ แต่ชอบ Macromedia มีไรอ่ะเปล่า ) เวอร์ชั่น MX,MX2004 ใช้ได้เปล่าผมไม่แน่ใจต้องลองดูแล้วกัน
2. ความตั้งใจ และทำใจเย็น ๆ อย่างงกับบทความ ( อันนี้สำคัญ ฮ่า ๆ )
3. มีทั้งข้อ 1 และ 2

เริ่ม

1. สร้างงาน flash ขึ้นมาใหม่ กำหนดขนาดของพื้นที่งานตามที่ต้องการครับ
- กำหนด Frame Rate : 18 ( อาจจะสัก 18 – 25 ก็ได้ครับเพื่อความนุ่มนวลของตัวเยลลี่ ^^ )
- เปิดหน้าต่าง Library ขึ้นมาโดยไปที่เมนู Window > Library หรือกด Ctrl + L
- เมื่อหน้าต่าง Library โผล่มาแล้วให้คลิกที่ปุ่ม + ด้านล่างซ้ายของ Library เพื่อสร้าง MovieClip
( ดูภาพประกอบในจุดที่ 3 )

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

2.เมื่อคลิกแล้วจะโผล่ไดอะล๊อก Create New Symbol ขึ้นมา
- ตั้งชื่อ Symbol ว่าอะไรก็ได้ ( ผมตั้งเป็น My Symbol )
- ติ๊กเลือกประเภทของ Symbol เป็น Movie Clip
( ตามภาพ )

3.ตอนนี้เราจะทำงานอยู่ในส่วนของ Movie Clip ที่เราสร้างขึ้นมาแล้วครับ ( ในภาพจุดที่ 1 )
- ทำการวาดภาพ,ข้อความหรือโลโก้ อะไรก็แล้วแต่ที่เราต้องการลงไปใน Movie Clip ( อันนี้อยู่ที่ท่าน ๆ จะวาดแล้วครับขึ้นกับความสามารถเฉพาะหน้า เอ้ย เฉพาะตัว ส่วนผมหากินกับโลโก้ตัวเองง่ายสุด ^^ )
- เมื่อได้รูปที่ต้องการเป็นที่เรียบร้อยแล้วก็ให้คลิกที่ Scene 1 เพื่อกลับไปหน้า Stage ทำงานหลักของเรา ( ในภาพจุดที่ 2 )

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

4.เมื่อกลับมาที่ Stage ทำงานหลักของเราเป็นที่เรียบร้อยแล้วก็ลุยกันต่อ
- ลาก Movie Clip ที่เราได้สร้างไว้เรียบร้อยแล้วจาก Library มาวางที่ Stage ( ในภาพจุดที่ 1 )
- ตั้งชื่อ Movie Clip ว่า mc1 ( ในภาพจุดที่ 2 )

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

5.เมื่อตั้งชื่อให้กับ Movie Clip แล้วก็ให้คลิกที่ Filters เพื่อกำหนดเงาให้กับ Movie Clip เราซะหน่อย( ในภาพจุดที่ 1 )
- คลิกที่ + แล้วเลือก Filter : Drop Shadow ( ในภาพจุดที่ 2 )
- จากนั้นกำหนด Properties ตามภาพ ( ในภาพจุดที่ 3 )
*** แท๊บคำสั่ง Filters รู้สึกว่าจะมีใน Flash8 ขึ้นไปนะครับถ้าจำไม่ผิด MX,MX2004 จะไม่มี

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

6.เมื่อกำหนด Filters เป็นที่เรียบร้อยแล้วมาถึงขั้นตอนสำคัญที่จะทำให้งานของเราเด้งได้ (^^)
- เปิดหน้าต่าง Action ขึ้นมาโดยไปที่เมนู Window > Actions หรือกด F9
- คลิกเลือกที่ Frame1 ( ในภาพจุดที่ 1 )
***เน้นว่าต้องคลิกที่ Frame1 ก่อนนะครับ ถ้าคลิกเลือกแล้วที่หน้าต่าง Action จะขึ้นเป็น
Action – Frame ( ในภาพจุดที่ 2 ) เป็นอันว่าถูกต้องเพราะเราจะเขียน Action Script กันที่ Frame
- ใส่ Action Script ลงไปดังนี้ครับ ( ในภาพจุดที่ 3 )( copy ไปวางเลยไม่ต้องเกรงใจ )

// Jelly
// Code By Xenogenesis
// http://xenstudio.wordpress.com

var mcWidth = _root.mc1._width;
var mcHeight = _root.mc1._height;
var mcRotation = _root.mc1._rotation;
this.stop();
import mx.transitions.*;
import mx.transitions.easing.*;

mcr = new Tween(mc1, “_rotation”, mx.transitions.easing.Elastic.easeOut, mcRotation-10, mcRotation + 10, 5.5, true);

mcr.onMotionFinished = function()
{
mcr.yoyo();
};

mc1.onRollOver = function()
{
mcw = new Tween(mc1, “_width”, mx.transitions.easing.Elastic.easeOut, mcWidth, mcWidth + 20, 3, true);
mch = new Tween(mc1, “_height”, mx.transitions.easing.Elastic.easeOut, mcHeight, mcHeight + 20, 2, true);
};

mc1.onRollOut = function()
{
mcw = new Tween(mc1, “_width”, mx.transitions.easing.Elastic.easeOut, mc1._width, mcWidth, 3, true);
mch = new Tween(mc1, “_height”, mx.transitions.easing.Elastic.easeOut, mc1._height, mcHeight, 2, true);
};

ถ้าต้องการให้งานของเราสามารถคลิกแล้วลิ้งไปที่ต่าง ๆ ได้ด้วยก็ใส่ Script นี้เพิ่มไปด้วยเลยครับ

mc1.onRelease = function() {
getURL(“ลิ้งที่เราต้องการ”, _blank);
};

[ รูปมันบีบคลิกขยายดูหน่อยน๊า ]

7.เมื่อใส่ Action Script เป็นที่เรียบร้อยแล้วให้เราเทส Movie ดูได้เลยครับโดยไปที่เมนู
Control > Test Movie หรือกด Ctrl + Enter
และก็ทดลองดูผลกรรมที่เราได้สร้างไว้ดู เสร็จแล้ว…

ไอ้งานนี้เคยทำเอาไว้นานแล้วแล้วก็เขียนบทความไปทีที่ www.nsitez.net แต่ไม่ได้ละเอียดเท่าไรก็เลยเอามาหากินใหม่ที่นี้ ตัวผมเองก็ไม่ได้ชำนาญ Action Script มากได้แค่คำสั่งพื้น ๆ ส่วนมากก็จะเปิด Help ที่ติดมากับ Flash8 แล้วก็ลองมามั่ว ๆ ผสมกันดู ( ลองเปิดดูสิแล้วจะรู้ว่า Help ช่วยคุณได้ เอิ๊กๆ ) ยังไงก็ลองทำกันดูนะครับไม่ยากเลยใช่ม้า ( ไม่ยากทั้งปี )

ไม่ลืมสำหรับไฟล์ต้นแบบตัวอย่างสำหรับบทความนี้
( สำหรับ Flash8 ขึ้นไปนะครับ MX,MX2004 รู้สึกจะเปิดไม่ได้ ลองดูแล้วกัน)

Download .FLA Source file : [ LINK 1 ]

1. สร้างงานขึ้นมา 1 ชิ้น WIdth : 200/Height : 200/Back Ground : White

2. ใช้เครื่องมือ Ellipse Tool ( U ) เลือกเป็นแบบ Shape แล้ววาดวงกลมลงไปในพื้นที่งานของเรา

3. ตั้งชื่อเลเยอร์ว่า Orb จากนั้นคลิกขวาที่เลเยอร์ Orb แล้วเลือก Blending Options…

กำหนด Styles ต่าง ๆ ดังนี้

4. คลิกที่แท๊บ Stoke แล้วปรับค่าตามภาพ

5. คลิกที่แท๊บ Gradient Overlay นั้นปรับค่าตามภาพ จากนั้นกดที่ Gradient เพื่อทำการไล่เฉดสี

6.ที่ Gradient Editor กำหนด Color ตามภาพครับ

7.ติ๊กที่แท๊บ Inner Glow แล้วปรับตามภาพ

8.ติ๊กที่แท๊บ Outer Glow แล้วปรับตามภาพอีกเช่นเคย

9.ติ๊กที่แท๊บ Inner Shadow กำหนดค่าต่าง ๆ ตามภาพเหมือนเคย

10.ติ๊กที่แท๊บ Drop Shadow แล้วปรับค่าต่าง ๆ ตามภาพ จากนั้นกด OK ได้เลยครับ

11. ตอนนี้ผลงานจะออกมาประมาณนี้ครับ

12. ใช้เครื่องมือ Ellipse Tool (U) เลือกเป็นแบบ Shape แล้ววาดลงไปในพื้นที่งาน
วาดให้มีขนาดเล็กกว่าตัวเลเยอร์ Orb อยู่นิดหน่อย ดังรูป

13. ตั้งชื่อเลเยอร์ที่วาดเมื่อขั้นตอนที่แล้วว่า Shade ( กันงง )

14.ใช้เครื่องมือ Ellipse Tools วาดลงกลมเพิ่มไปในเลเยอร์ Shade โดยการกดปุ่ม Shift ค้าง
( จะมีเครื่องหมายลูกศรเล็ก ๆ โผล่มาด้วย เมื่อวาดไปแล้วจะเห็นว่า Shape สองอันนี้ทับกันอยู่ในเลเยอร์ Shade )

15. เลือกไปที่เครื่องมือ Path Selection Tool (A)

16.ใช้เครื่องมือ Path Selection Tool (A) คลิกเลือกวงกลมแรกที่เราวาดไว้
( ตามภาพประกอบครับ )

17.มองขึ้นไปด้านจากนั้นกดไปตามรูปเลยครับ ปุ่ม ( Intersect Shape Areas )

**** ขั้นตอนที่ 16 ถ้าคลิกวงกลมใหญ่และเลือก ( Intersect Shape Areas ) แล้วผลที่ได้ไม่เป็นอย่างภาพด้านล่างให้ลองคลิกวงกลมเล็กที่วาดขึ้นมาใหม่แทนดูครับ
**** ส่วนขั้นตอนที่ 17 อาจจะไม่จำเป็นคลิกเลือกที่ปุ่ม ( Intersect Shape Areas ) ก็ได้ครับ ลองเลือกปุ่มอื่นที่อยู่ใกล้ ๆ กันก็ได้ ขอให้ได้ผลลัพธ์ออกมาเป็นดังภาพด้านล่างเป็นโอเค
ขอบคุณ น้องแมว สุดสวย ด้วยครับ

18.ผลที่ได้

19.คลิกขวาที่เลเยอร์ Shade แล้วเลือกคำสั่ง Blending Options…

20.ติ๊กที่แท๊บ Gradient Overlay แล้วประค่าตามสะบายเลยครับ( แท๊บนี้ขายดีใช้บ่อยวุ้ย )

21.ที่ Gradient Editor กำหนด Color และ Opcity ตามรูปเลยครับ

**** เพิ่มเติมครับ ****
หลังจากปรับ Gradient Editor เรียบร้อยแล้ว
ให้ติ๊กเลือกที่แท๊บ Blending Options : Custom และปรับ Fill Opacity เป็น 0% ด้วยครับ ตามรูปเลย

ขอบคุณ น้องแมว สุดขี้เหร่(ต้อง สวยสิ)  มา ณ. ที่นี้เป็นอย่างสูง

22.ได้ออกมาเป็นรูปร่างแล้ว

ต่อไปเป็นการนำรูปภาพ หรือรูปโลโก้ที่ต้องการ มาใช้งาน ++

23. วาดรูปที่ต้องการลงไปในพื้นที่งาน ให้อยู่ระหว่างเลเยอร์ Orb และ Shade ( ตามภาพ )
( ในที่นี้ผมใช้เครื่องมือ Custom Shape Tool (U) ในการวาดนะครับ )
แล้วตั้งชื่อว่า Logo ( กันหลงกันลืม )

24.คลิกขวาที่เลเยอร์ Logo แล้วเลือกคำสั่ง Blending Options…

25.ติ๊กที่แท๊บ Stoke แล้วปรับค่าตามรูปเลยครับ

26.ติ๊กที่แท๊บ Drop Shadow แล้วปรับค่าตามรูปเลยครับ จากนั้นกด OK ได้เลย

27.เสร็จเรียบร้อย

ขั้นตอนในการเปลี่ยนสีให้กับชิ้นงาน ++

1. คลิกปิดตาที่เลเยอร์ 1 ออกก่อน แล้วคลิกเลือกที่เลเยอร์ Shade
จากนั้นกดปุ่ม Ctrl + Shift + E
เพื่อทำการรวมเลเยอร์ที่มีการเปิดตาอยู่ทั้งหมด

2.เห็นมั๊ยว่ารวมเฉพาะเลเยอร์ที่เปิดตาอยู่จริง ๆ ไม่ได้โม้

3. จากนั้นไปที่เมนู Images > Adjustments > Hue/Satulation หรือกดคีย์ลัด Ctrl + U
เพื่อเรียกหน้าต่าง Hue/Saturation ขึ้นมา
ให้ปรับในส่วนของ Hue ตามที่เราต้องการครับ ( ซ้าย ๆ ขวา ๆ ลองปรับดู ๆ )
สีของชิ้นงานเราจะเปลี่ยนไป

4.สีเปลี่ยนไปแล้ว ตอนนี้เปิดตาที่เราปิดไว้ได้แล้วครับ

กว่าจะงมปรับ Styles ออกมาเป็นแบบนี้ก็เล่นเอานานอยู่เหมือนกัน ตาลาย
งานดูง่าย ๆ แต่ทำไมขั้นตอนเยอะจัง( ฟร่ะ ) อาจจะไม่เหมือนแก้วใส ๆ มากเท่าไรแต่ก็พอใช้ได้เนอะ ( หรือว่าใช้ไม่ได้เลย ) เอาหล่ะในส่วนของรูปแบบอื่น ๆ ที่ให้ดูข้างต้นก็ใช้วิธีการเดียวกันอย่างนี้แหละครับ จะรูปดาว( ความชอบส่วนตัวกับโลโก้ครับ วงโปรด ๆ ) หรือรูปอะไรก็แล้วแต่ใช้วิธีการขั้นตอนเดียวกันหมดเปลี่ยนแค่ตัวพื้น Orb กับตอนไล่เฉดเงาสะท้อนแค่นั้นเอง ในส่วนของตอนปรับ Style ก็ดัดแปลงได้อีกหลายแบบครับไม่แน่นอนและตายตัว ลองติ๊ก ๆ เรียก Style อื่น ๆ เข้ามาทำดูด้วยก็ได้ อาจจะได้งานแปลก ๆ ออกมา งานส่วนใหญ่ผมจะเน้นใช้เป็น Shape แทนที่จะทำแบบ Bitmap นะครับเพราะเวลาย่อหรือขยายงาน ภาพจะได้ไม่แตกและจะได้คงความคมชัดของงานเอาไว้ได้ 100% เต็ม ^^

Tutorial By : Xenogenesis

และก็ไม่ลืมสำหรับไฟล์ตัวอย่าง ในนั้นผมใส่ Filter Style ที่ใช้ในงานชิ้นนี้ไว้ให้ด้วยนะครับ
Load เรียกใช้จากหน้า Style ได้เลย

Download .PSD Source file : [ LINK 1 ]

พร้อมรึยัง ?? ถ้ายังไม่พร้อมก็ ลุย ( – - )

1.สร้างงานขึ้นมาใหม่ 1 ชิ้น
Width : 300 ( ตามต้องการ )
Height : 200 ( ตามต้องการ )
Background Contents : White ตามรูป

2.พื้นที่ทำงานของเราจะประมาณนี้ครับ

3.ใช้เครื่องมือ Horizontal Type Tool (T) ( พิมพ์ข้อความนั้นเอง )

4. พิมพ์ข้อความที่ต้องการลงไปในพื้นที่งานของเรา
( อาจจะเปลี่ยนจากข้อความเป็นรูปภาพที่เราต้องการก็ได้ในขั้นตอนนี้ )

5. ตั้งชื่อเลเยอร์นี้ใหม่ว่า Reflection จากนั้นคลิกขวาแล้วเลือกคำสั่ง Duplicate Layer…

6.ตั้งชื่อเลเยอร์ที่จะ Duplicate ใหม่ ว่า Base ดังรูปครับ

7.จะได้สองเลเยอร์ Base และ Reflection ตามลำดับ ดังภาพ
จากนั้นคลิกเลือกที่เลเยอร์ Reflection

8.ไปที่เมนู Edit > Tranform > Flip Vertical
( เพื่อกลับด้านในแนวตั้งให้กับเลเยอร์ Reflection ของเรา )

9. เมื่อเสร็จเรียบร้อยจะเห็นว่าเลเยอร์ Reflection จะถูกพลิกให้กลับหัวอย่างนี้แหละ
( แต่มันทับกันอยุ่ มองลำบากนิด)

10.เราจะมาจัดทำแหน่งของเลเยอร์ Reflection ให้เข้าที่เข้าทาง
โดยการใช้เครื่องมือ Move Tool (V)

ติ๊กที่สองอันนี้ด้วย Auto Select Layer / Show Tranform Controls
จะได้มองเห็นเส้นขอบของพื้นที่งานที่ถูกเลือก

11.ทำการย้ายข้อความในเลเยอร์ Reflection ให้ขอบด้านบนของเลเยอร์ Reflecttion ชนกับขอบล่างของเลเยอร์ Base ( ดูรูปประกอบจะเข้าใจได้ง่ายกว่า หรือว่าคนสอนอธิบายงงเอง -*- ) ประมาณนี้ ๆ

12.จากนั้นคลิกขวาที่เลเยอร์ Blending Options…

13.ติ๊กเลือกที่แท๊บ Gradient Overlay กำหนดตามภาพเลยครับ และคลิกที่ Gradient เพื่อกำหนดการไล่เฉดสี
*** ส่วนของ Angle และ Scale อาจจะปรับเปลี่ยนได้ตามความเหมาะในการใช้งาน
หลังจากที่กำหนด Gradient แล้ว

14.กำหนด Color เป็น #FFFFFF ตามภาพครับ ส่วน Opacity ด้านขวาปรับเหลือประมาณ 65% ( 45% – 65% ขึ้นอยู่กับการใช้งานครับ ไม่ตายตัว ) แล้วก็ OK/OK ได้เลย

15.เสร็จแล้วผลงานที่ได้ ทำโคตรง่ายเลยใช่ม๊า…

กรณีที่พื้นหลังเป็นสีดำหรือสีอื่น ๆ ล่ะ??

ในกรณีที่สีพื้นหลังของเราเป็นสีอื่นนอกจากนี้ก็ทำได้ไม่ยากครับ
ในขั้นตอนที่ (14.) ให้ปรับตรง Color เป็นสีตามพื้นหลังที่เราต้องการครับ ในที่นี้คือสีดำก็ตามภาพเลยส่วน Opacity เป็นสัก 45% ก็ได้บอกแล้วว่าไม่ตายตัวขึ้นอยู่กับการใช้งานของเราและผลลัพธ์ที่ออกมา

ผลที่ได้

ประยุกต์ใช้กับรูปภาพก็ได้แค่เปลี่ยนจากข้อความมาเป็นรูปภาพที่ต้องการ
หลักการง่าย ๆ คือ
1.Flip ภาพหรือข้อความในแนวตั้ง
2.ปรับและขยับตำแหน่ง ( โยกย้าย ๆ )
3.ไล่เฉดสี ( ง่ายม่ะ )

วิธีนี้ค่อนข้างเหมาะกับงานที่เป็นลักษณะ 1 มิติ และ 2 มิติ เพราะการทำสะท้อนของเงาจะง่ายมาก แต่ถ้างานที่มีความลึกสูงแบบ 3 มิติ จะต้องมีขั้นตอนอยู่อีกมากเพราะมันจะแค่ Flip แล้วไล่สี คงจะไม่เหมือนแน่ ๆ รายละเอียดเยอะกว่าว่าอย่างนั้น ( อันนี้ฝีมือยังไม่ถึงขอผ่านไปก่อน ) ส่วนงานจะ Reflection ออกมาเหมือนไม่เหมือนก็อยู่ที่เราจะปรับในส่วนของ Gradient แล้วล่ะครับ อาจจะขึ้นอยู่กับตัวข้อความหรือรูปภาพเองด้วย ที่เหลือก็อยู่ที่จะเอาไปใช้แล้วล่ะครับ จะพลิกแพลงตะแคงยังไงก็ต้องลองดู เผื่อจะได้งานที่บรรเจิดแบบที่ไม่เหมือนชาวบ้านชาวช่องเค้า ฮ่า ๆ ( หากินง่ายวุ้ย วันนี้ )

Download .PSD Source file : [ LINK 1 ]

1. สร้างงานใหม่ขึ้นมาโดยกด (CTRL + N) หรือเลือกเมนู File > New
กำหนด Properties ดังรูป แล้ว OK

2. พื้นที่ชิ้นงานที่เราจะทำประมาณนี้

3. เลือกเครื่องมือ Rounded Rectangle Tool (U) ดังภาพ

4.ที่ด้านบนเลือกการวาดเป็นแบบ Shape และกำหนด Radius = 0.2 cm ดังรูป

5.วาดลงไปในพื้นที่ให้มีขนาดตามที่ต้องการ

6.ตั้งชื่อเลเยอร์ที่เราวาดไว้เมื่อขั้นตอนที่แล้วเป็น base ดังรูป ( กันงงทั้งคนทำคนสอน ) จากนั้นคลิกขวาที่เลเยอร์ base แล้วเลือกคำสั่ง Blending Options…

7.ติ๊กเลือกที่ Gradient Overlay แล้วกำหนด Properties ดังภาพ จากนั้นคลิกที่ Gradient ( ข้าง ๆ คำว่า Reverse ) เพื่อกำหนดการไล่สี

8.ที่ Gradient Editor กำหนดค่าต่าง ๆ ดังรูป จากนั้นกด OK..OK ตามลำดับ

9.เราจะได้ฐานของแท่งแก้วเป็นประมาณภาพด้านล่าง

10.ใช้เครื่องมือ Rounded Rectangle Tool (U) และกำหนดค่าต่าง ๆ ดังรูป ( เช่นเดียวกับขั้นตอนในข้อ 4. นั้นเอง )

11.วาดลงไปในพื้นที่งานแต่ให้มีขนาดเล็กกว่าเลเยอร์ base เล็กหน่อย

12.ตั้งชื่อเลเยอร์นี้ว่า Base2 ( กันงงอีกเช่นเคย ) ตามภาพ

13.นำรูปที่ต้องการจะนำมาทำเป็น Background ของปุ่มแล้วก็ลากเข้ามาไว้ในพื้นที่งานเรา

14.ตั้งชื่อเลเยอร์ภาพนี้ว่า Picture ตามรูป จากนั้นคลิกขวาที่เลเยอร์ Picture แล้วเลือกคำสั่ง Create Clipping Mask
***ข้อสังเกต เลเยอร์ Picture จะอยู่เหนือบนเลเยอร์ Base2 ตามภาพ

15.หลังจากเราเลือกคำสั่ง Create Clipping Mask เรียบร้อยแล้วจะมีลูกศรเล็ก ๆ โผล่ขึ้นมาที่หน้าเลเยอร์ Picture ( เป็นอันว่าใช้ได้ )

16.และผลงานที่ได้ก็จะเป็นตามภาพด้านล่าง
*** คำสั่ง Create Clipping Mask จะทำให้เลเยอร์ที่อยู่ข้างใต้ของภาพทำหน้าที่เป็นตัว Mask(หน้ากาก) ให้แสดงเฉพาะส่วนของงานที่ต้องการเท่านั้น ในที่นี้เลเยอร์ Base2 ถูกทำให้เป็นตัว Mask และแสดงในส่วนที่เลเยอร์ Base2 เห็นเท่านั้น ( หวังว่าผู้อ่านคงจะเข้าใจและพยายามเข้าใจ เพราะคนทำเองมันก็ไม่รู้จะอธิบายยังไงดี )

…พักตรงนี้ไว้ก่อนต่อไปจะมาทำในส่วนของ Pattern กัน

17.สร้างงานขึ้นมาใหม่โดยกด (CTRL +N) หรือเมนู File > New กำหนดขนาดและคุณสมบัติต่าง ๆ ตามรูปเลย

18.ใช้เครื่องมือ Pencil Tool(B) กำหนดขนาดหัวดินสอเป็น 1px

19. วาดลงไปดังภาพเลยครับ สีดำนี้ทำให้เห็นภาพว่าต้องวาดลงจุดไปยังไงแต่เวลาใช้จริง ๆ ต้องเป็นสีขาวครับ (ขยายงาน 1600% ไปเลยเพราะพื้นที่งานเล็กมาก )

เวลาใช้จริง ๆ ต้องเปลี่ยนจุดดำ ๆ ให้เป็นขาวตามภาพด้านล่าง (หรือกดคีย์ลัด CTRL + I(ไอ) เพื่อกลับสีให้เป็นสีตรงข้าม)

20.ไปที่เมนู Edit > Define Pattern… ดังรูป

21.ตั้งชื่อ Pattern ที่เราสร้างเอาไว้เป็นชื่ออะไรก็ได้ จากนั้นกด OK

กลับมาที่ชิ้นงานหลักของเราต่อ..

22. คลิกขวาที่เลเยอร์ Base2 แล้วเลือกคำสั่ง Blending Options…

23.ติ๊กเลือกที่แท๊บ Pattern Overlay แล้วกำหนด Opacity = 75% และเลือก Pattern ที่เราได้สร้างไว้เมื่อขั้นตอนที่ 19.

Pattern ที่สร้างเอาไว้จะอยู่แถว ๆ นี้แหละ

24.ผลงานที่ได้จะออกมาตามภาพด้านล่าง

25.ใช้เครื่องมือ Rounded Rectangle Tool (U) และกำหนดค่าต่าง ๆ ตามข้อ (4.) และวาดลงไปในพื้นที่งานของเราเลยแต่ให้มีขนาดเล็กกว่าเลเยอร์ Base2 เล็กน้อย

26.และตั้งชื่อเลเยอร์นี้ว่า shade ( กันงงอีกตามเคย )

27.คลิกเลือก Shape ที่เลเยอร์ shade ให้เกิดเส้นขอบพื้นที่รอบ ๆ Shape ขึ้นก่อน ( ตรงนี้ต้องสังเกตดีดี )
ใช้เครื่องมือ Rounded Rectangle Tool (U)
จากนั้นกด Shift ค้างไว้และวาดลงไปตามภาพ
** ข้อสังเกต(อย่างแรง) ในขณะที่วาด Shape เพิ่มเข้าไปที่เลเยอร์ shade ตรงเคอเซอร์ตัววาดจะมีเครื่องหมายบวก (+) ปรากฎขึ้นมาด้วย ซึ่งแสดงว่าเรากำลังจะวาด Shape เพิ่มเข้าไปใน Shape เดิม ถ้าไม่มีเครื่องหมาย ( + ) โผล่ขึ้นมาให้ลองคลิกเลือกที่ Shape เพื่อให้เกิดเส้นพื้นที่รอบ ๆ Shape เสียก่อน

28.เมื่อวาดแล้วก็จะได้ตามภาพด้านล่าง ( สังเกตุว่า Shape ที่วาดเพิ่มเข้ามาจะอยู่รวมที่เดียวกันกับเลเยอร์ shade ไม่ได้ถูกแยกเลเยอร์ขึ้นมาใหม่ )

29.ใช้เครื่องมือ Path Selection Tool (A) ( ลูกศรสีดำ )

30. คลิกเลือกไปที่ shape ที่เราวาดเพิ่มขึ้นมาเมื่อขั้นตอนที่ 28. ( สังเกตว่าจะมีจุด หนา ๆ โผล่ขึ้นมาแสดงว่า shape เมื่อกี้ที่วาดไว้ได้ถูกเลือกแล้ว )

31.ที่ด้านบนคลิกเลือก Subtract From Shape area (-) ตามรูปครับ

32.ผลที่ได้มันจะตัดส่วนที่เราวาดทับกันออกไป ^^

33. ต่อไปคลิกขวาที่เลเยอร์ shade แล้วเลือกคำสั่ง Blending Options…

34. ติ๊กเลือกที่แท๊บ Gradient Overlay แล้วกำหนด Properties ต่าง ๆ ดังภาพครับ จากนั้นคลิกเลือกที่ Gradient เพื่อกำหนดการไล่สี

35.ที่ Gradient Editor กำหนดค่า Opacity และ Color ดังรูปเลยครับ

35.เลือกที่แท๊บ Blending Options : Custom และปรับ Fill Opacity เป็น 0% ดังรูป
จากนั้นกด OK

36. เสร็จแล้ว ดูผลกรรมที่เราได้สร้างไว้ครับ

ประยุกต์ใช้กับงานหลาย ๆ อย่างอาจจะลองเปลี่ยนเส้น Pattern เป็นแบบอื่น หรือ Background แบบอื่น ๆ ดูบ้างก็ได้นะ กรณีที่พื้นสี Background เป็นสีอื่นนอกจากสีขาวในขั้นตอนการไล่สีในเลเยอร์ base ก็อาจจะต้องมีการเปลี่ยนแปลงไปด้วยตามความเหมาะสมครับ ทำเสร็จกันแล้วเป็นยังไงเอามาอวดกันบ้างก็ได้นะ เอิ๊ก ๆ แล้วจะพยายามหาวีธีทำงานอื่น ๆ มาลงให้อีกนะ ( ถ้ามีเวลา )

Download .PSD Source file : [ LINK 1 ]