kapook_43408.gif12469_0.gifclip_image002.jpg12469_0.gif





คำนำ

Gif Animation (กิฟ อนิเมชั่น) คือ ภาพเคลื่อนไหว ที่เกิดจากการนำรูปภาพหลายๆรูปภาพมาแสดงอย่างต่อเนื่องกัน โดยไฟล์ที่แสดงจะเป็น *.gif สร้างได้จากหลายโปรแกรม วันนี้ผมจะมาแนะนำให้ทำจากโปรแกรม โฟโต้ ชอป เพราะคิดว่า ดอมพิวเตอร์ส่วนใหญ่น่าจะมีการติดตั้งมาแล้ว เผื่อคุณอยากสร้างภาพของคุณเอง ไม่ซ้ำกับคนอื่นเอาไว้ดูเล่น ประดับหน้าเว็บ หรือใช้เป็นรูปภาพประจำตัวคุณตามเว็บบอร์ดต่างๆ

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


เริ่มแรกก็ควรรู้จักการสร้างงานใหม่ก่อนเลย

เปิดโปรแกรมขึ้นมา ไปที่ File > New จากนั้นที่หน้าต่างก็จะมีการกำหนดรายละเอียดต่างๆ เช่น ชื่องาน, ขนาด, ความละเอียด, ขนิดสีของงาน, แบ็กกราวนด์ของงาน ฯลฯ

ผมกำหนดไว้แบบกลางๆนะครับ ขนาด 300 X 300, สี RGB,ความละเอียด 72 Pixels/Inch ที่สำคัญคือ เลือก Background Contents คือ Transparent ซึ่งก็คือทำให้พื้นงานเป็นสีใส หรือ ถ้าหากต้องสร้างให้มีแบ็กกราวน์สีเดียวกับพื้นเว็บ หรือเอาภาพมาใส่พื้นหลัง ก็ใส่แบ็กกราวนด์ทีหลังก็ได้ครับ

new.gif

เครื่องมือในโฟโต้ ชอป และ อิมเมจ เรดดี้

โปรแกรม โฟโต้ ชอป จะมีโปรแกรม อิมเมจ เรดดี้ ติดตั้งมาด้วยพร้อมกัน ยกเว้นใน โฟโต้ ชอป เอเลเม้นท์ (Photoshop Element) จะรวมอยู่ด้วยกัน การใช้งานและเครื่องมือจะคล้ายๆกัน ดังนั้น ผมขอแนะนำในโปรแกรม โฟโต้ ชอป ซึ่งสามารถนำไปใช้กับ โปรแกรมอื่นได้เช่นกัน โปรแกรมที่ผมนำมาเป็นตัวอย่างคือ Photoshop CS แต่การใช้งานทั่วๆไป ไม่แตกต่างจาก Photoshop 7 ครับ (ลองแล้วส่วนใหญ่เหมือนๆกันครับ)
เครื่องมือใน โฟโต้ ชอป มีเยอะมาก มากจนผมคิดว่าคงมีคนไม่มากนัก ที่จะเข้าใจแล้วใช้งานเป็นได้อย่างครบถ้วน นอกจากนี้ เครื่องมือหลายตัวสามารถประยุกต์ใช้ร่วมกันได้อีก ทำให้การสร้างงานต่างๆกว้างขวางมากยิ่งขึ้น ถ้าอยากเก่ง ต้องขยันศึกษา และลองใช้งานเอาเองครับ


คำสั่งที่ใช้บ่อยๆของโปรแกรมก็ควรรู้จักบ้างคือ

- File -> New <Ctrl + N> สร้างงานใหม่ (ด้านหลัง คือชอร์ทคัท)
- Edit -> Copy <Ctrl + C> ก้อปปี้
- Edit -> Cut <Ctrl + X> ตัด
- Edit -> Paste <Ctrl + P> วาง
- Edit -> Step Backward <Ctrl + Alt + Z> ถอยกลับขั้นตอน ใช้เพื่อการแก้ไขงาน
- Edit -> Step Backward < Ctrl + Z > ถอยกลับขั้นตอนใน อิมเมจเรดดี้ (ทำไมไม่ทำให้เหมือนกันก็ไม่รู้ครับ)
- Edit -> Step Forward <Ctrl + Shift + Z> เดินหน้าขั้นตอน
- เมื่อใดที่ทำงานแล้ว กดคำสั่งอื่นๆแต่โปรแกรมไม่ยอมทำให้ นั่นเพราะคำสั่งเดิมยังไม่ได้ Apply
ต้องกด Marquee Tool ก่อน หรือ อาจจะ เลือกผิดเลเยอร์ ก็ได้
- เครื่องมือแต่ละชนิด มักมี Tool Options Bar ให้ปรับแต่งการใช้งานด้วย อยู่ที่ ด้านล่างของเมนูบาร์
(เปลี่ยนตามเครื่องมือที่เลือกใช้)

Window

ด้วยความที่เครื่องมือมีมากมายทำให้การจัดวางเครื่องมือต้องใช้พื้นที่มาก ผู้สร้างโปรแกรมจึงใช้วิธีซ่อนกลุ่มเครื่องมือบางส่วนไว้ การเรียกใช้งาน ผู้ใช้สามารถเลือกเปิด / ปิด ตามความต้องการที่จะใช้งาน การเรียกใช้งาน เรียกใช้ได้จาก Menu Bar > Window > ทำเครื่องหมายภูก ที่เครื่องมือที่ต้องการใช้ และเอาเครื่องหมายถูกออก ในส่วนของเครื่องมือที่ไม่ต้องการ

การเลือกใช้งานก็คือ คลิกที่ Tab ของเครื่องมือที่ต้องการใช้งาน Tab มักจะปรากฎที่กลุ่มเครื่องมือด้านขวามือ หรือ ด้านบน - ขวา ของโปรแกรม ส่วนมากมักเป็นกลุ่มเครื่องมือใช้ทำงานร่วมกับเครื่องมือในส่วน Tool Box และเกี่ยวกับการทำงานในส่วนของงานของเรา


เครื่องมือใน Tool Box

Tool Box คือชุดเครื่องมือที่ใช้งานกับงานของเรา จะถูกจัดอยู่ในส่วนที่แยกออกมาต่างหาก ถ้าหากไม่มี เปิดการใช้งานที่ Menu > Window > Tool ใช้งานร่วมกับ Menu Tools Option Bar (อยู่ด้านล่างของ เมนูบาร์) จะเป็นส่วนปรับแต่งในราบละเอียดต่างๆของ เครื่องมือที่เลือกใช้ ผมจะค่อยๆแนะนำในส่วนที่จะใช้ไปเรื่อยๆ ส่วนไหนที่ยังไม่ได้แนะนำ ก็ลองใช้ดูเล่นๆไปก่อนก็ได้ครับ

Marquee Tools
marquee.gif

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

การวาด และ ลบ

bruth.gif
ที่ Tools Box คลิกที่เครื่องมือ Brush Tool ใช้เพื่อการวาดภาพ ถ้าคลิกค้างจะสามารถเลือกเปลี่ยนเป็น Pencil Tool ได้ด้วย สามารถเลือกสีโดยคลิกที่ แท็บ Switch คลิกที่สีเพื่อเปลี่ยนสีตามต้องการ สามารถเปลี่ยนขนาดได้โดย คลิกขวาที่ไฟล์งาน เลือกปรับแต่งขนาดตามต้องการ
erazer.gif
ส่วนการลบ เลือกที่ Eraser Tool แล้วไปใช้ในส่วนที่ต้องการลบ สามารถปรับขนาดได้ เหมือนกับ Brush Tool ถ้าเลือกที่ BackGround Eraser Tool จะเป็นการเลือกลบในส่วน แบ็กกราวนด์ ที่ไม่ต้องการออกจากรูป ถ้าเลือกในส่วน Magic Eraser Tool จะทำการลบสีที่ต่อเนื่องกับสีที่เราเลือกไว้ทั้งผืน


Paint
paint.gif


คือการลงสี หลังจากเลือกสีที่ต้องการแล้ว ก็เลือกเครื่องมือนี้ ไปที่ๆต้องการจะเติมสี แล้วก็คลิก

การใช้ Move Tool

move.gif
Move Tool คือ เครื่องมือเพื่อการเคลื่อนย้ายตำแหน่ง เรียกใช้งานได้ที่ Tools Box ที่ เครื่องหมาย ลูกศรและมีเครื่องหมายทิศทางอยู่ ใช้โดยการใช้เม้าส์ลากไปตำแหน่งที่ต้องการ (หรือใช้ปุ่มลูกศรแทนก็ได้)

ถ้าทำเครื่องหมายถูกที่ Show Bounding Box ของ Tools Option (อยู่ด้านล่างของ เมนูบาร์) ยังสามารถ ขยาย-ย่อ ขนาดรูปได้อีกด้วย โดยการลากที่บริเวณขอบของไฟล์ ปรับขนาดได้ตามต้องการ ถ้าหากต้องการให้สัดส่วนคงที่ กด Shift ค้าง แล้วลากที่บริเวณมุมของไฟล์ นอกจากนี้ยังสามารถหมุนทิศทางของไฟล์ได้อีกด้วย โดยการเลื่อนเม้าส์ไปบริเวณด้านข้างของไฟล์ จนลูกศรของเม้าส์เปลี่ยนเป็นเส้นทิศทางแบบโค้ง ก็ใช้เม้าส์ลากไปตามทิศทางที่ต้องการได้ หรือเรียกการใช้งานได้ที่ Edit > Free transform ก็ได้
freetrans.gif

Zoom Tool
zoom.gif

มีให้ใช้ทั้ง ซูมอิน และ ซูมเอ้าท์ เลือกได้ที่ Tool Option Bar ครับ แต่ให้ง่ายคือ กด < Ctrl + Space Bar> เพื่อ ZOOM IN แล้วก็กด < Ctrl + Shift + Space Bar> เพื่อ ZOOM OUT

Lasso Tools
lasso.gif

เป็นเครื่องมือสำหรับเลือกบางส่วนของภาพที่ต้องการ อันแรกคือการลากตามส่วนที่ต้องการ (ต้องอาศัยฝีมือกันหน่อยแหละ) อันที่ 2 คือใช้คลิก โดยระหว่างจุดทีเลือกจะเป็นเส้นตรง (อันนี้ง่ายหน่อย คลิกถี่ๆหน่อย ก็เป็นโค้งได้) อันที่ 3 อันนี้จะเลือกจากความแตกต่างของสีให้โดยอัตโนมัติ โดยคอยสร้างจุดที่กำหนดไว้ได้เอง(บางทีก็เซ่ออีก) อันแรกนี่เริ่มแล้ว ปล่อยคลิกเมื่อไหร่ มันจะวิ่งไปหาจุดเริ่มต้นทันทีนะครับ ส่วนอีก 2 อัน ค่อยๆคลิกได้ อันไหนผิด กด Delete เพื่อลบจุดที่กำหนดไว้ได้ครับ


Crop
crop.gif


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


Mask / Standard
mask.gif

Quick Mask / Standard เป็นเครื่องมือสำหรับเลือกส่วนที่ต้องการปกป้อง ไม่ให้ถูกแก้ไข ในขณะที่เราทำงาน แต่ก็สามารถใช้เป็นเครื่องมือช่วยเลือกส่วนที่เราต้องการทำงานได้

การใช้งาน คลิกที่ Quick Mask Mode จากนั้นใช้เครื่องมือ Brush กำหนดจุดที่เราต้องการ ถ้าคลุมพื้นที่กว้างๆ อาจใช้ Paint ช่วยในการลง เมื่อครบแล้ว คลิกที่ Edit in Standard Mode จะเห็นว่า ส่วนที่เราลงสีไว้ จะถูกปกป้อง การทำงานกับภาพ จะไม่ถูกทำในส่วนนี้ได้ แต่ถ้าหากต้องการใช้เป็นส่วนที่ทำงาน ก็สั่งได้ที่ Select > Inverse หรือกด <Shift + Ctrl + I> ตอนนี้เราก็สามารถทำงานในส่วนที่เลือก โดยส่วนที่ไม่ถูกเลือกจะถูกปกป้องไว้


Blur Tool Group
blur.gif


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

การใช้งานคือ คลิก แล้วลาก สามารถปรับขนาดโดย คลิกขวา เหมือน Brush Tool ส่วนออฟชั่นอื่นๆ ปรับได้ที่ Tool Option Bar


Stamp / Healing Group
stamp.gif


ขอเอาเครื่องมือ 2 กลุ่มมาแนะนำพร้อมๆกัน เนื่องจากใช้งานคล้ายๆกัน Clone คือการก้อปปี้บริเวณที่เลือก ไปวางทับส่วนที่ต้องการ ใช้งานโดยเลือก กด Alt ค้างไว้ แล้วเลือกบริเวณที่ต้องการจะ โคลน กดคลิกซ้ายค้าง แล้วลากเม้าส์ไปบริเวณที่เราต้องการจะโคลนทับ ปล่อย ALT ลากเม้าส์ทับส่วนที่ต้องการ ส่วน Pattern คือการเลือกจากส่วนที่สร้างไว้แล้วไปวางทับแทน
heal.gif


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


Jump to ... หรือ Edit in...
editin.gif


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


Preview in Default Browser... (Image Ready)
ie.gif


Preview in Default Browser คือทดสอบงานที่เราสร้างขึ้นใน เว็บบราวน์เซอร์ ที่เรากำหนดไว้ โดยปกติจะถูกกำหนดไว้โดย Internet Explorer เพื่อดูว่างานที่เราสร้างขึ้นมา เมื่อแสดงผลบนเน็ตแล้วเป็นอย่างไร


เครื่องมือส่วน TAB

ส่วนนี้ส่วนมากมักเป็นกลุ่มการทำงานร่วมกับเครื่องมือในส่วน Tool Box และเกี่ยวกับการทำงานในส่วนของงานของเรา เปิดเรียกใช้ส่วนที่ต้องการได้จาก Menu Bar > Window > ทำเครื่องหมายภูก ที่เครื่องมือที่ต้องการใช้ และเอาเครื่องหมายถูกออก ในส่วนของเครื่องมือที่ไม่ต้องการ มักจะอยู่ทางด้านขวาของหน้า หรือ บางส่วนก็จะอยู่ที่ด้านบน เมื่อคลิกที่ Tab ก็จะเปิดส่วนดังกล่าวให้ใช้งาน


การใช้ History
history.gif

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


รู้จักกับการทำงานกับ เลเยอร์ (Layers)

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

เมื่อสร้างงานแล้ว จะมีหน้าต่างแสดงเลเยอร์แสดงอยู่ ถ้าไม่มีไปที่ เมนูบาร์ > Window > ทำเครื่องหมายถูกหน้า Layers จากนั้นดูที่แท็บเครื่องมือ คลิกที่แท็บ Layers ก็จะเห็นเลเยอร์งานที่ทำอยู่

การสร้างเลเยอร์เพิ่ม ที่ด้านล่างของส่วนเลเยอร์ คลิกที่เครื่องหมายสัญญลักษณ์ สี่เหลี่ยมพับมุม ถ้าต้องการจะก้อปปี้เลเยอร์ ให้คลิกซ้ายค้างที่เลเยอร์ที่ต้องการ ลากไปที่ สัญญลักษณ์ สี่เหลี่ยมพับมุม ส่วนการลบ ก็ใช้การลากเลเยอร์ที่ไม่ต้องการไปที่ สัญญลักษณ์ ถังขยะ
layer02.gif
Opacity (ลดความเข้มของภาพลง)

opacity.gif

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


Swatches (เครื่องมือช่วยเลือกสี)
swatch.gif

Swatches เป็นเครื่องมือช่วยเลือกสี ใช้ได้กับการวาด และการลงสี การใช้งานง้าย...ง่าย อยากได้สีไหน ก็คลิกเลย


Optimize (Image Ready)

เป็นส่วนในการปรับแต่งเพื่อการแสดงผลและเซฟงาน ในที่นี้เราจะเลือกเป็น *.gif อย่างเดียวนะครับ เนื่องจากไฟล์ภาพอื่นๆ ไม่สามารถแสดงในลักษณะเคลื่อนไหวได้

optimized.gif

งาน

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


งานที่ทำจากภาพที่วาดขึ้นเอง

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

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


Basic

redball.gif

เริ่มแนะนำงานจากภาพเดี่ยว เลเยอร์เดี่ยวก่อนนะครับ

เปิดโปรแกรม PhotShop สร้างงานใหม่ (New) กำหนดพื้นที่ 150 X 150 pixels เลือกพื้นแบบใส เลือกเครื่องมึอ Pencil Tool กำหนดขนาดเป็น 50 pixels คลิก 1 ครั้งที่มุมซ้ายล่างของงาน เสร็จแล้ว ง่ายไหมครับ

จากนั้น Jump ไป อิมเมจ เรดดี้ เปิดส่วน Optimize ขึ้นมา เซ็ตให้เป็น GIF (ถ้าส่วน Optimize ไม่ได้สั่งให้แสดง เปิดได้ที่ Window > Optimize) ที่ส่วน Animation จะเห็นจุดแดงของเรา (ถ้าไม่มี เปิดได้จาก Window > Animation) ไปที่ด้านล่างๆของ Animation จะเห็นสัญญลักษณ์ สี่เหลี่ยมพับมุม กด 1 ครั้ง เพื่อสร้าง เฟรมใหม่ ขึ้นมา ไปเลือกที่เครื่องมือ Move Tool จากนั้นกดที่แป้น ลูกศร เพื่อเคลื่อนย้ายจุดแดงตามต้องการ กดที่สัญลักษณ์ สี่เหลี่ยมพับมุม สร้างอีกเฟรม ทำซ้ำไปเรื่อยๆ จนครบตามต้องการ ส่วนถ้าเฟรมไหนที่เราไม่ต้องการ ลบได้โดยการ ลากเฟรมที่ไม่ต้องไปที่ สัญญลักษณ์ถังขยะ

จากนั้น ไปที่ด้าน ล่าง-ซ้าย ของส่วน Animation จะมีส่วนให้เลือกว่า จะให้แสดงภาพในลักษณะใด (Looping) ถ้าเลือก Forever คือการแสดงภาพแบบชนิดที่แสดงภาพแบบวนไปเรื่อยๆ, Once คือการแสดงแบบเที่ยวเดียว หรือ เลือกเองว่าจะให้แสดงกี่รอบก็ได้ที่ Other

ที่แต่ละเฟรมของเรา ด้านล่างจะเห็นส่วนที่ สามารถกำหนดเวลา (Delay) ได้ด้วยว่าเฟรมไหนต้องการให้แสดงเวลาเท่าไหร่ เลือกได้เป็นเฟรมๆ ถ้าจะเลือกในหลายๆเฟรมที่ต่อกัน คลิกที่เฟรมแรก และกด Shift ค้างไว้ คลิกที่เฟรมสุดท้าย จะสามารถเลือกเวลาในทุกเฟรมที่เลือกไว้พร้อมๆกัน

ที่ด้านล่างของ Animation ยังมีเครื่องมือ Tween คือ การสร้างภาพแบบต่อเนื่อง หากต้องการใช้ คลิกเลือก เฟรมที่ต้องการ แล้วกดที่ Tween จะเห็นหน้าต่างว่าต้องการให้สร้างเฟรมไปยังตำแหน่งใด Next คือ เฟรมต่อไป, Previous คือ เฟรมก่อนหน้า และ First คือ กลับไปที่เฟรมแรก ส่วนต่อมาคือกำหนดว่าจะให้สร้างเป็นจำนวนกี่เฟรม เลือกได้จากช่องตัวเลข และสามารถเลือกว่า คำสั่งมีผลในทุกเลเยอร์ หรือ เฉพาะเลเยอร์ที่เลือกไว้ ในส่วนล่างสุด กำหนดได้ว่ามีผลกับงานในด้านใดได้อีกด้วย

หลังจากสร้างงานเสร็จแล้ว บางครั้งอาจไม่พอใจในขนาดของรูป ถ้าหากรูปที่ได้มีพื้นที่ว่าง ไม่มีส่วนของรูปเลย เราก็อาจใช้เครื่องมือ Corp เพื่อเลือกแต่ส่วนที่มีงานออกมาได้ หรือภาพมีขนาดที่เราไม่พอใจก็คลิกที่ Menu > Image > Image Size... ปรับเอาตามต้องการ

เราจะทดสอบงานที่สร้างได้ที่ปุ่ม Play ไม่พอใจแก้ได้ในเฟรมที่ต้องการจนพอใจ จากนั้นก็ถึงขั้นตอน เซฟงาน ไปที่ Menu > File ถ้าสั่งเซฟ ธรรมดา (Save) จะเซฟไฟล์เป็น *.psd ซึ่งเป็นไฟล์ของ Photoshop สามารถกลับมาแก้ได้ทุกเมื่อ และถ้าหากต้องการเซฟเป็นไฟล์ *.gif ต้องเลือกเซฟที่ Save Optimized As ... เลือกเป็น Image Only...(*.gif) หรือ ตอนที่ต้องการทดสอบงาน เลือกทดสอบที่ Preview in Default Browser... ถ้าหากพอใจงานที่ทำก็คลิกขวาสั่ง Save Picture As... ก็เสร็จเรียบร้อยแล้วครับ


งานจากหลายภาพ เลเยอร์เดี่ยว (ลูกชิ้น)
job.gif

ต่อด้วยการสร้างภาพจากภาพหลายๆภาพ เริ่มโดย ต้องวางแผนล่วงหน้าก่อน ว่าต้องการภาพแบบไหน ในตอนนี้ผมต้องการสร้างภาพ ลูกชิ้นกระโดด (กรุณาจินตนาการว่าเป็น ลูกชิ้น ประกอบด้วย) เราจะเริ่มกันที่ PhotoShop นะครับ เปิดงานใหม่ขึ้นมา เอาซัก 200 X 200 ก็ได้ (ไม่แน่ใจในฝีมือ สร้างรูปคร่าวๆในเลเยอร์ก่อน รูปจริงสร้างในเลเยอร์ใหม่อีกอัน เดี๋ยวค่อยปิดทิ้งก็ได้) ถ้าหากวาดแล้วไม่ชอบ ใช้ Edit > Step Backward เพื่อวาดใหม่ จากนั้นก็ลงมือวาดลูกชิ้นในจังหวะกระโดดก่อน เลือกสี และ ลงสี ได้ที่ Swatches คลิกที่ชื่อไฟล์ที่เลเยอร์ ตั้งชื่อว่า mid ครับ (รูปลูกชิ้นยาว) จากนั้นก็สร้างเลเยอร์ใหม่ขึ้นมา เขียนรูปลูกชิ้นกลม ตั้งชื่อเป็น top แล้วก็สร้างเลเยอร์ลูกชิ้นแบบแบน ตั้งชื่อว่า bot ครับ เสร็จแล้ว
Jump ไป Image Ready เปิดเลเยอร์ mid และปิดเลเยอร์อื่นๆก่อนครับ ขยับรูปไปที่ด้านล่างด้วย Move Tool ที่ส่วน Animation สร้างเฟรมใหม่ แล้วใช้ Move Tool ส่งรูปไปด้านบน สร้างสัก 2 - 3 เฟรมตามชอบ ให้ค่อยๆเคลื่อน ไปด้านบน ใช้เครื่องมือ Tween ช่วยก็ได้ครับ (ไม่เป็น กลับไปอ่านที่ เบสิก เลย) สร้างเฟรมใหม่ เปลี่ยนรูปเป็น top โดยคลิกเปิดรูปตา เลื่อนรูปไปให้ต่อเนื่องกับเฟรมที่แล้ว ปิดเลเยอร์ mid สร้างเฟรมใหม่ ใช้ Move Tool เลื่อนไปที่ด้านล่าง สร้างจำนวนเฟรมให้เท่ากับตอนขึ้น จากนั้นเข้าสู่ท่าลงพื้น ฮ่าๆๆๆๆๆ ก็สร้างเฟรมใหม่ เปิดเลเยอร์ bot เลื่อนไปให้ต่อเนื่องกับรูปสุดท้าย ปิดเลเยอร์ top เสร็จแล้วครับ หมูจริงๆ ทดสอบ แก้ไข แล้วเซฟตามอัธยาศัยครับ

ภาพที่ใช้เป็นตัวอย่าง ผมทำให้สวยๆก็ได้ครับ แต่แกล้งทำแบบง่ายๆ เดี๋ยวคุณๆจะไม่กล้าทำตาม อิอิอิ (ขี้โม้จริงๆเลย) ถ้าทำไม่ได้
makeit104.gif

งานจากหลายภาพ หลายเลเยอร์

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

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



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

Jump ไป อิมเมจ เรดดี้ ที่เลเยอร์เปิดส่วนที่ต้องการแสดง (มีรูปตาแสดง) และเลือกเลเยอร์ส่วนทึ่ต้องการให้เคลื่อนไหว (จะกลายเป็นสีเข้ม และมีรูปพู่กันแสดงอยู่) คลิกที่เครื่องมือ Move Tool จากนั้นไปที่ส่วน Animation สร้างเฟรมใหม่ ดูว่าที่ Move Tool ถูกสั่งใช้งาน ใช้ปุ่มลูกศร เพื่อสร้างการเคลื่อนไหว ถ้าต้องแค่แลบลิ้น ก็เสร็จแล้วครับ เลือกจังหวะเวลาที่ชอบ แล้วเซฟ แต่ถ้าต้องการการเคลื่อนไหวเพิ่ม ก็สร้างเฟรมใหม่ เปลี่ยนการเคลื่อนไหว เปิด + ปิด เลเยอร์ตามต้องการ ด้วยวิธีอย่างข้างต้นไปเรื่อยๆ ทดสอบงาน พอใจก็เซฟ

งานที่ทำเสร็จแล้ว ผมได้เพิ่มเฟรม, รูป และการเคลื่อนไหว ลงไปอีกครับ (รูปนี้ เคยเอาไปโพสต์ที่ ไทยแวร์ แล้วครับ ไม่ต้องประหลาดใจถ้ารู้สึกคุ้นๆ) ถ้าต้องการเพิ่มรูป ต้อง Jump กลับไป โฟโต้ ชอป สร้างเลเยอร์ใหม่ แล้วก็สร้างรูปเพิ่มเท่าที่ต้องการ เพิ่มเสร็จแล้วก่อนจะ Jump ไปอิมเมจ เรดดี้ ควรจะปิดการแสดง (ปิดตา) เพื่อไม่ให้ไปรบกวนงานเก่าที่เราทำไว้แล้ว แล้วค่อยไปเปิดตาในเฟรมที่ต้องการ
dogfull.gif

ลองสร้างการ์ตูนกันเลยดีกว่า

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

ลองสร้างการ์ตูนกันเลยดีกว่า

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

ratandpac02.gif



เทคนิคที่จะแนะนำเพิ่มเติม คือ

- การสร้างรูปใน เลเยอร์กลับด้าน ก้อปปี้เลเยอร์ที่ต้องการใช้ แล้วไปที่ Menu > Edit > Transform > Flip Canvas Horizontal หรือ อื่นๆที่ต้องการ

- การขยายรูปโดย Free Transform จะมีอัตราส่วนเป็น เปอร์เซ็นต์แสดงอยู่ที่ Tool Option Bar (อยู่ด้านล่างของ Menu Bar) ถ้าคุณขยายหลายๆเลเยอร์ ใช้อัตราส่วนเดียวกันได้ที่นี่

- สร้างเลเยอร์งานเก่าเพียงบางส่วน แนะนำให้ใช้เครื่องมือ Lasso Tool กำหนดส่วนที่ต้องการ เมื่อได้ส่วนที่เลือกแล้ว กด <Ctrl + C> เพื่อก้อปปี้แล้วกด <Ctrl + V> เพื่อวาง (เช่น จาก - ภาพการ์ตูนที่ผมสร้างขึ้น แบ็กกราวนด์คือ ส่วนพื้นและกำแพงมีรู หนูจะไม่ยอมวิ่งเข้ารู ต้องสร้างเลเยอร์กำแพงครึ่งอันใหม่นี้ขึ้นมา เพื่อให้ทับรูปหนู เมื่อวางแล้ว ต้องลากเลเยอร์นี้ขึ้นให้สูงกว่ารูปหนูนะครับ)

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


งานจากไฟล์ภาพนิ่ง

บางครั้งไปเจอภาพที่ถูกใจ เอามาทำเป็นอนิเมชั่นเล่นก็ได้ครับ โฟโต้ ชอป มีเครื่องมือใช้ตกแต่งรูปเยอะแยะ เราก็เอาเครื่องมือนั้นมาช่วยสร้างความแตกต่างระหว่างรูป แล้วเอามาใช้ทำอนิเมชั่นอีกที ผมได้ลองใช้อยู่ 2 - 3 ตัว เลยเอามาแนะนำกัน ถ้าคุณว่างๆ ก็ลองใช้เครื่องมืออื่นดูนะครับ

ก่อนอื่นเลย เพื่อเป็นการปกป้องภาพต้นฉบับ เมื่อคุณเปิดภาพแล้ว ให้กด <Ctrl + A> และกด <Ctrl + N> แล้วกด <Ctrl + V> เพื่อเป็นการก้อปปี้ > สร้างงานใหม่ > วาง ตามลำดับ ไฟล์ต้นฉบับ ปิดทิ้งไปเลยครับ ควรจะทำทุกครั้งที่ทำงานกับไฟล์ภาพด้วยนะครับ ทีนี้บรรเลงเต็มที่ ไม่ต้องกลัวไฟล์เก่าพัง หลังจากนี้ผมจะข้ามขั้นตอนนี้ ถือว่าเราได้ตกลงกันแล้วนะครับ


สร้างการเคลื่อนไหวด้วย Smudge
Smudge
เป็นเครื่องมือที่ทำให้ถาพดูเป็นภาพเคลื่อนไหว ผมเลยลองเอามาทำให้ภาพนิ่ง กลายเป็นภาพเคลื่อนไหว โดยให้ภาพจาก Smudge 2 รูป (รูปตัวอย่างเริ่มแสดงความเป็นโรคจิตหน่อยๆแล้ว อิอิอิ)

เริ่มที่ หลังจากทำการสร้างไฟล์ภาพจากไฟล์ต้นฉบับ เราจะทำงานบนไฟล์ที่สร้างใหม่กัน เริ่มคือ ก้อปปี้เลเยอร์ใหม่อีก 2 เลเยอร์ ตั้งชื่อว่า left และ right ที่เลเยอร์ right ใช้เครื่องมือ Mask เลือก Brush ควรเลือกแบบขอบเบลอ ระบายสีลงบนส่วนที่เราจะต้องการให้เคลื่อนไหวให้ครบ ในที่นี้คือรูปน้องกระต่าย และบางส่วนของน้องหนู เมื่อครบแล้ว กดที่เครื่องมือ Standard ข้างๆ Mask นั่นแหละ

ที่ภาพเราจะเห็นว่ากลายเป็นจุดไข่ปลากระพริบที่ส่วนที่เราระบายสีไว้จนถึงขอบเฟรม นั่นคือ เราได้เลือกส่วนที่จะปกป้องไว้เรียบร้อยแล้ว จากนั้นสั่ง Menu > Select > inverse หรือกด <Shift + Ctrl + I> เพื่อสลับเป็นเลือกน้องกระต่าย ตอนนี้จะกลายเป็นจุดไข่ปลาล้อมน้องกระต่ายอย่างเดียว ซึ่งเป็นส่วนที่เราต้องการทำงาน

ไปที่ Blur > Smudge ตอนนี้จุดไข่ปลาต้องแสดงอยู่นะครับ จากนั้นคลิกขวา เลือกขนาด แปรง เอาให้ใหญ่คุมได้ทั้งหมดของส่วนที่เลือกเลย เลือกเลเยอร์บน left คลิกแล้วลากไปซ้ายนิดเดียวนะครับ แล้วก็เลือกทำกับ right แต่ลากไปทางขวานิดเดียวเหมือนกัน (ถ้าลากเยอะ จะกลายเป็นมัว ดูไม่รู้เรื่องครับ)

Jump ไปอิมเมจ เรดดี้ สร้างเฟรม 2 เฟรม เลือกโชว์ left - right อย่างละเฟรม กำหนดเวลา ทดลอง พอใจก็เซฟ เสร็จแล้ว

งานที่ผมทำ ได้ลองเพิ่มเลเยอร์หลับตาขึ้นมาอีกอัน โดยก้อปปี้ไฟล์ต้นฉบับก่อนครับ จากนั้นไปแก้ที่ตาให้หลับ ด้วยเครื่องมือ Clone Stamp Tool และใช้เครื่องมือ Lasso เลือกเฉพาะ ส่วนบริเวณตา กด <Ctrl + C> แล้วกด <Ctrl + V> จะได้เลเยอร์ตาขึ้นมาอีกอัน ลากไปไว้บนสุด แล้วปิดเลเยอร์ทั้งหมดก่อนครับ แล้วค่อย Jump ไป อิมเมจ เรดดี้

เลือกเปิดเลเยอร์ left ก้อปปี้เฟรมซัก 12 เฟรม จากนั้น เลือกเปิดเฟรม right สลับ ตอนนี้อยากให้หลับตาเฟรมไหนบ้าง ก็เลือกเอาได้แล้วครับ เลือกเวลา ทดสอบ เซฟ เสร็จแล้ว
สร้างการเคลื่อนไหวด้วย Transform
kl.gif

จากไฟล์ต้นฉบับ รูปแมวตาแป๋ว (จากของคุณ kalumpok ในไทยแวร์ เนื่องจากเคยทำไว้ เลยเอามาเป็นตัวอย่าง เพราะขี้เกียจทำอันใหม่ ฮ่าๆๆๆ) เพียงรูปเดียวเอามาสร้างการเคลื่อนไหวด้วย Edit > Transform > ... ในที่นี้ผมทำด้วย Perspective นะครับ เพื่อจะทำให้ดูเหมือนแมวหัน ซ้าย และ ขวา

เมื่อได้สร้างรูปจากไฟล์ต้นฉบับมาแล้ว ก็ก้อปปี้เลเยอร์ออกมาเลยครับ แล้วปิดเลเยอร์ต้นฉบับก่อน เราจะเอาแต่ส่วนหัวแมวออกมาก่อนเลย ใช้เครื่องมือที่สามารถตัดรูปออกมาได้ ถ้าใช้ไม่เป็นเลยผมขอแนะนำ ยางลบ (Eraser Tool) ครับ ปรับขนาดให้เหมาะสมแล้วค่อยๆลบ ในพื้นที่เล็กๆ ใช้ขนาดเล็ก ให้เหลือแต่ส่วนหัวแมว ตั้งชื่อเป็น head std จากนั้น ก้อปปี้ เลเยอร์หัวแมว (haed std) ออกมาอีกเท่าที่ต้องการในการขยับ ขยับ 2 แบบก็ 2 อัน ปิดเลเยอร์หัวอื่นให้หมดก่อนเหลือก้อปปี้ไว้แค่ 1 อัน แล้วก็ไปที่ Edit > Transform > Perspective จัดการให้หันไปซ้าย จากนั้นก็ตั้งชื่อว่า head left แล้วก็ปิดไป เปิดเลเยอร์ก้อปปี้ อีกอันขึ้นมา ทำแบบเดิม แต่ให้หันไปทางขวา และตั้งชื่อว่า head right ทำให้ครบทุกหัวเท่าที่ต้องการครับ ตอนนี้ส่วนหัวแมวก็เสร็จหมดแล้ว ปิดเลเยอร์หัวแมวทั้งหมดไปก่อนครับ

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

Jump ไป อิมเมจเรดดี้ เลือกเปิด แบ็กกราวนด์ และส่วนหัวทีละส่วน ในแต่ละเฟรม ตามต้องการ เสร็จแล้ว ง่ายไหมครับ
kl01.gif

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

การเริ่มต้นคือ เปิดโปรแกรม สั่ง New เลือกพื้นที่เผื่อไว้ซักหน่อย จากนั้นเปิดรูปที่ต้องการทั้งหมด ค่อยๆลากมาวางทีละเลเยอร์ ขยับ + ปรับขนาด + ทิศทาง ให้สอดคล้องต่อเนื่องกัน Jump ไป อิมเมจเรดดี้ สร้างเฟรม เปิด / ปิดเลเยอร์ตามลำดับ จากนั้นทดสอบดูว่าภาพที่ได้ตรงความต้องการหรือยัง ถ้าตรงแล้ว ใช้เครื่องมือ Crop ตัดรูปให้ได้ตามต้องการ สั่งปรับขนาดรูปตามต้องการ เสร็จจ้า ...



Font

Font หรือ การใช้ตัวอักษร ในการทำ อนิเมชั่น ใช้บ่อยๆในการสร้างแบนเนอร์,ชื่อ,เมนู หรือวางไว้เพื่อสร้างความน่าสนใจ การสร้าง ถ้าจะว่าง่ายก็ง่าย แต่สามารถใส่ลูกเล่นเพิ่มเติมได้มากมาย หากต้องการภาษาไทยหรือตัวหนังสือแปลกๆ อาจต้องหา Font มาเพิ่ม


ตัวอักษรกระพริบ / Fade / เปลี่ยนสี

external image fontfade.gif

ขอแนะนำพร้อมๆกันเลย เนื่องจากการทำไม่แตกต่างกันมาก เอากระพริบก่อนนะครับ เปิดงานใหม่ เลือกสีที่ต้องการ ใช้เครื่องมือ Type พิมพ์คำที่ต้องการ Jump ไปอิมเมจเรดดี้ สร้างเฟรมใหม่ ที่เฟรมใหม่ปิดเลเยอร์ตัวอักษร เสร็จแล้วครับ ทดสอบดูเลย ถ้าต้องการให้กระพริบ แต่ไม่หาย(เอาแค่จางๆ) ก็ใช้การ ก้อปปี้แทน แล้วสั่ง Opacity แล้วเลือกซัก 33 % เปิด - ปิด เฟรมละ 1 เลเยอร์ครับ

(ตัวอย่าง)

external image jasonfsh.gif

Fade หรือ การทำให้ตัวอักษรค่อยๆจางลง หรือค่อยๆปรากฎ ผมอยากให้ลองทำจากไฟล์เดิมดูความแตกต่างด้วย ที่เฟรมที่ 2 ใช้ Tween ไปไฟล์ก่อนหน้า (Previous Frame) เลือกสัก 5 เฟรมก็ได้ เสร็จแล้วไปที่เฟรมสุดท้าย สั่ง Tween อีกครั้ง แต่เลือกไปเฟรมแรกแทน (First Frame) ทดสอบ เลือกเวลาที่ต้องการ เสร็จแล้วครับ

(ตัวอย่าง)

external image jasonfd.gif
ตัวอักษรเปลี่ยนสี ใช้เครื่องมือ Type แต่เลือกที่ตัวใส (Type Mask Tool) พิมพ์อักษรที่ต้องการ เลือกสี ใช้เครื่องมือ Paint เทสีลงไป จากนั้นสร้างเลเยอร์ใหม่ (New นะครับ ไม่ใช่ก้อปปี้) เลือกสีอีกครั้ง เทสีลงไป ทำเหมือนเดิมตามสีที่ต้องการ Jump ไปอิมเมจเรดดี้ ทำตามด้านบนครับ


รูปภาพวิ่งในอักษร

external image fontwow.gif

การเอาภาพใส่ตัวอักษร ถ้ารู้เทคนิคจะง่ายมากครับ (เมื่อก่อนผมไม่รู้ ทำแล้ววุ่นวายมากๆ) ขั้นแรกคือใช้เครื่องมือ Type พิมพ์อักษรที่ต้องการจัดการขนาดที่ต้องการให้เรียบร้อยก่อนเลย จากนั้นเปิดรูปที่ต้องการ กด Ctrl ค้างไว้ แล้วลากรูปที่เราต้องการมาใส่ที่งานตัวอักษรของเรา ใช้ Move Tool วางตำแหน่งที่ต้องการให้เรียบร้อย จากนั้นกด Ctrl + G (Layers > Group with Previous) ตอนนี้อักษรของเราก็จะถูกแทนด้วยภาพแล้วครับ

Jump ไปอิมเมจเรดดี้ สังเกตว่าที่ เลเยอร์รูปภาพยังถูกเลือกอยู่ สร้างเฟรมใหม่ ที่เฟรมใหม่เลื่อนรูปภาพไปตำแหน่งที่ต้องการ ใช้เครื่องมือ Tween ช่วยตามต้องการ เสร็จแล้วครับ

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


อักษรแบบแยกกันอิสระ

external image fontjsmulti.gif

วิธีนี้ ต้องแปลงจากตัวอักษรที่ทำมาทุกแบบ ให้กลายเป็นไฟล์ภาพก่อน (เช่น อักษรที่เป็นภาพ ที่ทำจากขั้นตอนก่อน เราต้องสั่ง Layers > Merge Layers หรือกด <Ctrl + E> เลเยอร์จะถูกรวมเป็นเลเยอร์เดียว) จากนั้นทำให้แต่ละตัวอักษรกลายเป็นเลเยอร์ โดยการใช้เครื่องมือ Marquee Tools หรือ Lasso ตามถนัด เลือกคลุมแต่ละตัวอักษรของเลเยอร์แรก แล้วกด <Ctrl + C> แล้วกด <CTRL + V> ให้ครบทุกตัว จากนั้นกดเครื่องมือ Move Tool เพื่อจัดตำแหน่งตัวอักษรให้เรียบร้อยซะก่อน จากนั้นปิด เลเยอร์แรก ไปครับ (อันที่อักษรครบ)

Jump ไป อิมเมจเรดดี้ สร้างเฟรมใหม่ จากนั้นก็แล้วแต่เราจะจัดให้ตัวอักษรว่าจะให้วิ่งไปทางไหนแล้วครับ ถ้าจะจัดแบบกลุ่ม ก็ใช้ลิ้งค์ของเลเยอร์ช่วย (จำได้ไหมเอ่ย ...สัญญลักษณ์รูปโซ่ไงครับ) สั่ง Tween ช่วยก็ได้ ง่ายดี ถ้าจากนั้นจะให้ Tween กลับก็เลือก First อีกครั้ง เสร็จแล้ว ทดสอบ เลือกเวลา (ตอนที่มารวมกันครบ เลือกเวลาเยอะๆหน่อย เดี๋ยวอ่านไม่ออก) เสร็จแล้วครับ


บทส่งท้าย

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








38909.gif