วันอังคารที่ 17 มิถุนายน พ.ศ. 2557

ตัวอักษรลุกเป็นไฟ

มาจุดไฟให้ตัวอักษรกัน

Post on 05-Jan-10
by jobsDB

การทำตัวอักษรให้เหมือนไฟลุก โดยใช้เครื่องมือที่เป็น Photoshop CS2 นั้นไม่ยาก มาฝึกทำไปพร้อม ๆ กันตามวิธีต่อไปนี้

1. File --> New เซตขนาด 300 x 300 pixels จากนั้นสร้างเลเยอร์ใหม่ขึ้นมา กด Alt+Delete เพื่อเป็นการเทสีดำลงไป

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

3. เลือกทำงานที่เลเยอร์ Text1 หรือเลเยอร์ตัวอักษร แล้วคลิกขวาเลือกคำสั่ง Raterize Type ตัวอักษรนั้นจะเป็นกราฟิก ซึ่งจะพิมพ์แก้ไขใหม่ไม่ได้อีกแล้ว

4. คลิกขวาอีกครั้งที่เลเยอร์ Text 1 เลือกคำสั่ง Duplicate Layer เปลี่ยนชื่อให้เป็น Text 2 แล้วปิดตาเก็บไว้

5. กลับมาทำงานต่อที่เลเยอร์ Text 1 เลือกเมนู Filter > Blur > Guassian Blur ปรับค่า Radius 2.4

6. ถึงขั้นตอนสำคัญแล้วจ้า เลือกเครื่องมือ Smudge Tool ปรับขนาดหัวบรัช ประมาณ 18 px และที่ Strength ให้ปรับไว้ที่ 70% จากนั้นให้เรานำเมาส์ค่อย ๆ ถูที่ตัวอักษร ทำให้เหมือนกับเปลวไฟ ตรงนี้คงต้องใช้ความพยายามกันนิดหนึ่ง จะออกมาสวยไม่สวยก็อยู่ตอนนี้แหละ

7. เมื่อทำจนเสร็จครบทุกตัวแล้ว ให้เรารวมเลเยอร์ Text 1 กับ Layer 1 เข้าด้วยกันวิธีก็คือ คลิกขวาที่เลเยอร์ Text 1 แล้วเลือกคำสั่ง Merge Down

8. เมื่อรวมเลเยอร์กันแล้ว คลิกขวาเลือก Duplicate Layer อีกครั้ง จะได้เป็น Layer 1 Copy

9. มาใส่สีสันได้แล้วค่ะ เริ่มที่ Layer 1 ก่อนเลือกเมนู Image > Adjustment > Hue/saturation หรือกดคีย์ลัด Ctrl + U ให้เราติ๊กถูกที่ Colorize ก่อนเลยอันเดับแรก จากนั้นปรับค่าตามกันได้เลย Hue: 45 Saturation : 100

10. ต่อด้วย Layer 1 Copy กด Ctrl + U อย่าลืมติ๊กถูกที่ Colorize ก่อนแล้วปรับค่า Saturation: 100

11. มาถึงขั้นตอนสุดท้ายแล้วค่ะ ที่ Layer 1 copy ให้ปรับค่า blending mode เป็น overlay ทันใดนั้นตัวอักษรของเราจะลุกเป็นไฟขึ้นมา... คงจะถูกใจกันไม่มากก็น้อย ลองเอาไปประยุกต์ดูนะคะ

วันพุธที่ 4 มิถุนายน พ.ศ. 2557

2.2การสร้างวัตถุด้วย Pen Tool

การสร้างวัตถุด้วย Pen Tool

Pen Tool เป็นเครื่องมือที่ใช้สำหรับวาดเส้น ตรง และเส้นโค้งแบบเที่ยงตรง หรือที่เรียกกันว่า พาธ (path) ซึ่งหากลากครบรอบจะมีการใส่ Fill ให้อัตโนมัติ นอกจากนี้ยังเพิ่มหรือลบจุดบนเส้นโค้งได้อีกด้วย

Tips : การกด <Shift> ช่วยให้ลากเส้นมุม 45 องศาง่ายขึ้น

ขั้นตอนการใช้เครื่องมือ

ขั้นที่ 1 คลิกเลือกเครื่องมือที่ Tool Box

ขั้นที่ 2 กำหนดสีเส้น และสีพื้น ดังภาพ

ขั้นที่ 3 คลิกเมาส์ที่ stage พร้อมทั้งดึง หรือดัดแฮนเดิล จนกว่าเส้นจะบรรจบที่จุดเริ่มต้น

หมายเหตุ : เมื่อลากเส้นบรรจบเส้นเริ่มต้น โปรแกรมจะเทสีเส้น และสีพื้นให้อัตโนมัติ

ตัวอย่างงานที่สร้างจาก Pen Tool

แบบฝึกสร้างวัตถุด้วย Pen Tool

2.1 การสร้างวัตถุ (Object) ด้วยเครื่องมือ Line Tool

การสร้างวัตถุ (Object) ด้วยเครื่องมือ Line Tool

Line Tool คือเครื่องมือสำหรับวาดเส้นตรง โดยเราสามารถกำหนดสี ความหนา และลวดลาย ต่างๆโดยกำหนดได้ที่หน้าต่าง properties ขั้นตอนการสร้าง ดังนี้

ขั้นที่ 1 คลิกเลือกเครื่องมือที่ Tool Box ดังภาพ

ขั้นที่ 2 กำหนดลักษณะของเส้นที่หน้าต่าง Properties กรณีหน้าต่างถูกปิด เปิดได้โดยคลิก Window > Properties > Properties ดังภาพ

กำหนดลักษณะของเส้นตามต้องการ (ตำแหน่งด้านล่างจอภาพ)

ขั้นที่ 3 ใช้เมาส์ลากเส้น ปรับขนาด เปลี่ยนสี ตามต้องการ

ตัวอย่างการประยุกต์ใช้งาน

1. ลากเส้นตามต้องการ
2. คลิกลูกศรสีดำ (Selection Tool)
3. คลิกเส้นที่ไม่ต้องการแล้วลบทิ้งโดยกดปุ่ม Delete ที่ Keyboard
4. เลือกภาพวัตถุ โดยดับเบิลคลิกหรือลากคลุมภาพวัตถุ
5. ตกแต่งเส้นโดยกำหนดที่ หน้าต่าง Properties

ตัวอย่างงานที่สร้างจาก Line Tool

แบบฝึกสร้างวัตถุด้วย Line Tool

1.อ้างอิงจาก Flash cs3 ส่วนเวอร์ชั่นอื่นจะคล้ายกัน ต่างกันนิดหน่อย ลองเดาๆ ดูได้

อ้างอิงจาก Flash cs3 ส่วนเวอร์ชั่นอื่นจะคล้ายกัน ต่างกันนิดหน่อย ลองเดาๆ ดูได้

นี่คือหน้าต่างแรกที่เปิดโปรแกรมแฟลชขึ้นมา ที่วงกลมไว้จะเป็นการสร้างเอกสารเปล่าๆ โดยจะแบ่งออกเป็น

1.เอกสารที่เขียนด้วย Actionscript 3.0
2.เอกสารที่เขียนด้วย Actionscript 2.0
3.เอกสารสคริปแฟลชอื่นๆ

หรือจะเลือกที่ file แล้ว new ก็ได้

การ save file

เริ่มจากเรากำหนดสร้างไฟล์ที่ทำงานกับ ActionScript 2.0 กันก่อน เพราะ tutor ชุดนี้จะสอน as2.0

การ save ไฟล์ไปใช้งานนั้น เรามาดูกันก่อนว่าไฟล์หลักๆแล้ว Flash จะมีไฟล์อะไรบ้างที่เราต้องใช้งาน

ในการใช้งาน Flash นั้น เราจะมีไฟล์งาน สองแบบหลักๆคือที่มีนามสกุล Fla และ Swf
1.FLA เป็นไฟล์งานต้นฉบับ เก็บงาน Flash ต้นฉบับของเราไว้แก้ไขต่อภายหลัง
2.SWF เป็น ไฟล์งานสำเร็จ ที่เราทำการ publish ออกมาแล้ว พร้อมสำหรับนำไปใช้งานบนเว็ปไซท์ หรืองานอื่นๆของเรา ไฟล์นี้จะไม่สามารถทำกลับมาแก้ไขได้อีก(ยกเว้นวิชามารต่างๆ)

เรามาดูเมนู File ที่เราจะใช้ save งานกันบ้างดีกว่า หลักๆมีอะไรบ้าง

1.NEW ไว้สำหรับสร้างเอกสารแฟลชเปล่าๆ ใครจะทำการ์ตูน ทำเกม ทำพรีเซนท์อะไรก็แล้วแต่ เลือกสร้างเอกสารเปล่าได้เลย

2.SAVE ต่างๆ มีไว้ save ไฟล์งานต้นฉบับของเราออกมาเป็นไฟล์ FLA

3.import , export
-เมนู import มีไว้โหลดไฟล์อื่นๆเข้ามาในเอกสารแฟลชเปล่าๆของเรา เช่น รูปภาพ jpg หรือเสียงเพลง mp3 หรือไฟล์ vdo ต่างๆ สรุปคือไฟล์ทุกไฟล์ที่แฟลชใช้งานได้ เราอยากใช้งานมันในแฟลชของเรา เรา import เข้ามาได้ที่เมนูนี้
-เมนู export ไว้สำหรับเอาไฟล์งานแฟลชของเรา ที่ทำเสร็จแล้ว ออกมาใช้งานในรูปแบบอื่นๆ ที่ไม่ใช่ SWF เช่น ออกมาเป็น jpg , png , gif animation ,VDO

4.publish มีไว้สร้างไฟล์ swf ที่เราจะเอามาใช้งานในเว็ปไซท์ เกม หรือพรีเซนท์ โดยไฟล์จะออกมาเป็น swf หรือไฟล์อื่นๆเช่น HTML หรือ EXE ตามที่เรากำหนดใน publish setting โดยถ้าเราไม่กำหนด ไฟล์จะออกมาเป็น swf และ HTML ซึ่งเป็นค่าปรกติที่โปรแกรมตั้งไว้

เมื่อเราสร้างเอกสารใหม่ขึ้นมา เราจะพบเครื่องมือเยอะแยะมากมาย

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

2.ส่วน นี้เค้าเรียกว่า Stage(สเตจ) มีไว้สำหรับงานของเรา เราวาดการ์ตูน รูปภาพ อะไรก็ไว้ที่ Stage เป็นพื้นที่การทำงาน เราจะเห็นผลงานของเราวิ่งอยู่บน Stage นี่แหละ Stage มีขนาดกว้างและสูงที่สามารถปรับได้ ให้เล็กหรือใหญ่ตามต้องการ

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

4.Time line มีไว้สำหรับกำหนดการเคลื่อนไหวต่างๆ เวลาที่เราทำการเคลื่อนไหวอนิเมชั่นของเรา คล้ายๆกับฟิล์มภาพยนต์ ที่ 1 ช่องมี 1 ภาพ เป็นเรื่องของอนิเมชั่นเบื้องต้น ที่เราจะทำการเล่นภาพหลายๆภาพต่อเนื่องกัน จนหลอกตาคน ให้มองเป็นภาพเคลื่อนไหว
เช่นเราวาดรูปแต่ละเฟรม เป็นแต่ละ step ต่างกันไป พอเรา play ไป ถาพก็เล่นต่อเนื่องจนเกิดเป็นการเคลื่อนไหว
สำหรับการวาดภาพเฟรมละภาพ จนเกิดเป็นภาพเคลื่อนไหวนั้น เราจะเรียกว่าเป็นอนิเมชั่นแบบ เฟรมบายเฟรม (Frame by Frame)
แต่สำหรับแฟลชแล้ว เราสารมารถทำภาพเคลื่อนไหวง่ายๆ เช่นการย้ายวัตถุ ย่อขนาดวัตถุ เปลี่ยนสีวัตถุ โดยไม่ต้องวาดทีละภาพก็ได้
ซึ่งนั่นจะสอนต่อไป

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

6.เครื่องมี color ไว้สำหรับกำหนดสีที่เราจะวาดแบบละเอียด โดยจะสังเกตว่า color ก็มีอยู่ในเมนู window เช่นกัน

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

3.การทำวัตถุเคลื่อนไหว การที่เราจะทำวัตถุให้เคลื่อนไหวนั้นใน Flash ถือได้ว่าใช้งานได้ง่ายมากโดยที่เราไม่ต้องมานั่งวาดภาพทีละภาพ มาดูขั้นตอนการทำ

การทำวัตถุเคลื่อนไหว การที่เราจะทำวัตถุให้เคลื่อนไหวนั้นใน Flash ถือได้ว่าใช้งานได้ง่ายมากโดยที่เราไม่ต้องมานั่งวาดภาพทีละภาพ มาดูขั้นตอนการทำ

ขั้นตอนการทำ

1. วาดวัตถุที่เราต้องการทำภาพเคลื่อไหว

2. หลังจากที่เราวาดถัตถุเรียบร้อยแล้วให้เรามากำหนด Key Frame เพื่อระบุตำแหน่งเริ่ม - สิ้นสุดของวัตถุ ในที่นี้ผมจะกำหนดความยาว 40 Frame ให้เราคลิกขวาที่ Key Frame ที่ 40 แล้วเลือก Insert KeyFrame ดังภาพ

3. หลังจากที่เราใส่ Key Frame ลงไปแล้วจะสังเกตุที่ Frame จะมีเส้นทึบสีดำรอบภาพวงกลมและมีจุดเล็กๆคลุมทั่ววงกลม ดังภาพ

4. หลังจากนั้นให้เรานำ Mouse เลือก Frame ทั้งหมดตั้งแต่ 1 - 30 แล้วคลิกขวาเลือก Create Motion Tween ดังภาพ

5. หลังจากที่เราใส่ Motion Tween แล้วสังเกตุว่า Frame จะเป็นสีม่วงมีลูกศรชี้หัวท้าย ดังภาพ

6. หลังจากนั้นให้คลิกที่ Frame ที่ 30 แล้วนำ Mouse มาลากวัตถุไปยังตำแหน่งที่เราต้องการ

7.จากนั้นเมื่อเราลากวัตถุเสร็จก็จะปรากฎดังรูป

7. จากนั้นลองทดสอบโดยกด Ctrl+Enter ผลปรากฎว่าภาพจะเคลื่อนที่ไปมา

2.PolyStar Tool

การเปลี่ยนสีวัตถุ บทเรียนแรกเป็นบทเรียนเกี่ยวกับการใส่สีให้กับวัตถุที่เราวาดขึ้นมา โดยปกติแล้วสีที่ใช้ในงาน Vector นั้นจะมี 2 ส่วนคือ
1. สีขอบของวัตถุ Stroke Color
2. สีของวัตถุด้านใน Fill Color

ขั้นตอนการทำ
1. วาดถัตถุขึ้นมาโดยใช้เครื่องมือ

เลือกวัตถุวาดตามใจชอบ ดังภาพ

2. หลังจากที่เราวาดเสร็จแล้วสังเกตที่วัตถุจะมี 2 สีอย่างในภาพคือ ดำ, ฟ้า ถ้าเราต้องการเปลี่ยนสีฟ้าเป็นสีที่เราต้องการโดยนำ Mouse ไปชี้ที่สีที่เราต้องการเปลี่ยน และเลือกเปลี่ยนได้จาก Fill color ดังภาพ

3. หลังจากนั้นสีที่เราเลือกจะถูกเทลงในวัตถุที่เราเลือก

4. แต่ถ้าเราต้องการเปลี่ยนสีขอบวัตถุ ให้เราเลือกที่ขอบของวัตถุ แล้วเลือกเปลี่ยนสีได้จาก Stroke Color ได้เลย
* ถ้าวัตถุมีเหลี่ยมการคลิกเลือกที่ของ 1 ครั้งเราจะได้เพียงด้านเดียว ดังนั้นให้เรา Double ที่ขอบแล้วเราจะสามารถเลือกได้ทุกด้านพร้อมๆ กัน

5. หลังจากที่เราเลือกสี Stroke แล้วสีจะถูกเทลงในเส้นที่เราต้องการ

6. ลองเปลี่ยนสีวัตถอื่นๆ

การเปลี่ยนขนาดเส้นขอบของวัตถุ โดยปกติที่เราวาดถัตถุขึ้นมานั้น โปรแกรมจะกำหนดขนาดความหนาของวัตถุให้มา 1 px แต่ถ้าเราต้องการให้ขนาดเพิ่มขึ้นโดยมีขั้นตอนดังนี้

ขั้นตอนการทำ

1. วาดวัตถุที่เราต้องการ

2. หลังจากนั้นคลิกเลือกที่เส้นขอบ แล้วเลือกเปลี่ยนขนาดจาก Properties ของตัวโปรแกรมได้เลย

---------------------------------------------------------------------------------------------------------------------------------

ขั้นตอนการทำ

1. เริ่มจากการเลือกใช้เครื่องมือ PolyStar Tool