Photoshop ทำภาพเคลื่อนไหวแต่ง Blog ง่ายนิดเดียว

เทคนิคนี้มาตามคำเรียกร้องของแฟนๆนะขอรับ ที่จะให้ช่วยแนะนำการทำภาพเคลื่อนไหว(Animation) เพื่อนำมาตกแต่งเวปครับซึ่งภาพเคลื่อนไหวเหล่านี้ได้รับความนิยมอย่างมากในการตกแต่งเวปไซต์ครับ เพราะว่ามันเคลื่อนไหวนั่นเองมันจึงสะดุดตาและทำให้ผู้ที่ชมเวปไซต์ต้องหยุดดูซักนิดว่ามันคืออะไร นิยมมากในการทำ Bannerโฆษณา เป็นเพราะว่ามันมีขนาดข้อมูลน้อยมากทำให้ผู้ชมเวปไซต์โหลดได้เร็วไม่ต้องรอนานเหมือน Streaming ประเภท Flash หรือ Shockwave ครับ ก่อนเข้าเรื่องวิธีทำ ผมอยากทำความเข้าใจแบบไม่เน้นวิชาการนะครับเพราะคิดว่าผู้อ่านสามารถหาอ่านได้ทั่วไป แต่ผมจะอธิบายแบบง่ายๆพร้อมยกตัวอย่างหน้าเวปไซต์หลักของ OKnation นะครับ ถ้าเราเห็นรูปเคลื่อนไหวแล้วเราคลิกขวาที่รูป แล้วมีคำว่า Save Picture As... แสดงว่าภาพเคลื่อนไหวนั้นเป็นภาพครับ(นามสกุล.gif) เราสามารถเซฟลงเครื่องเราได้ครับ และแม้ว่าเราจะเปิดจากเครื่องเรามันก็จะยังเคลื่อนไหวอยู่ครับ ดังรูปประกอบคำอธิบาย

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

ทีนี้เรามาดูข้อดีข้อเสียกันเพราะจำเป็นมากที่ ถ้าหากว่าเราจะแต่งเวปไซต์เรา เราก็ควรเอาภาพเคลื่อนไหวแบบไหนไปลง
1.ภาพ.gif ไฟล์ ขนาดจะเล็กมาก ผู้อ่านโหลดไว เนตเต่าก็โหลดได้ไม่กระตุก เข้าถึงลูกค้าแทบจะ 100% แล้วข้อเสียล่ะ มีครับ ข้อเสียคือ ภาพมันจะไม่สวยครับ เพราะตัวของมันสามารถแสดงสีได้แค่ 256สี ถ้าเป็นภาพถ่ายคุณภาพสูง มันจะถูกทอนสีลงเหลือแค่ 256 สีครับจึงทำให้บางทีรูปที่ได้อาจไม่ชัดเท่าต้นฉบับครับ  และภาพเคลื่อนไหวมันจะกระโดดจากภาพหนึ่งไปอีกภาพหนึ่งค่อนข้างแข็งแบบรู้สึกได้

2.ภาพแบบ Streaming ซึ่งมีโปรแกรมมากมายในการสร้าง มักมีนามสกุลประเภท *.flv, *.swf , *.wma และอีกมากมายครับ ภาพพวกนี้ได้ทั้งรูปและเสียงเหมือนดูภาพยนต์ ดึงดูดความสนใจกลุ่มเป้าหมายได้มาก แต่ข้อเสียคือ จะสูญเสียลูกค้ากลุ่มเนตเต่าไปครับ เพราะพอเปิดเวปปุ๊บ กว่าจะโหลดเสร็จนานมากๆๆ บางทีเครื่องค้างไปเลย ส่งผลให้บางคนพาลกดปิดไปเลย ข้าพเจ้าก็เป็นหนึ่งในนั้น

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

1.ผมจะนำโลโก้ของ OKnation มาเป็นแบบอย่างนะครับ เพราะเป็นผู้มีพระคุณให้พื้นที่แก่ผมในการทำ Blog จึงอยากช่วยโปรโมตครับ ผมจะทำ Layer แยกคำแต่ละอักษร  ออกจากกันเพื่อจะสร้างภาพเคลื่อนไหวให้มีอัษรค่อยๆโผล่มาทีละชุดครับ แล้วคลิกเรียกโปรแกรมทำภาพเคลื่อนไหวของPhotoshop ตรง Tool Box ล่างสุดที่เขียนว่า Edit in Image Ready(คงแปลว่าเรามาใช้เครื่องมือนี้เมื่อรูปเราพร้อมแล้วนั่นเองครับ) 2.โปรแกรมจะเปลี่ยนไปทำใน Image Ready จะมีหน้าต่าง animation ขึ้นมา ถ้าไม่ขึ้นมาให้เลือก Windows > animation ดังรูปครับ 3.ผมปิดตาไว้ทุกรูปเปิดตาแต่เพียง Layer Background ภาพนี้จะไปโผล่ในเฟรมแรกของ Animation ครับ ทีนี้ผมต้องการภาพเหตุการณ์ที่จะเกิดขึ้นในเฟรมที่ 2 ก็ให้เราคลิกเลือกตรงมุมขวาของหน้าต่าง เลือก New Frame ก็จะมีเฟรมที่ 2 ขึ้นมาให้ ดังรูปครับ 4.ที่เฟรม 2 ผมจะเปิดดวงตาที่ Layer 1 เพื่อให้เกิด เอฟเฟค อักษร O ดังรูปครับ 5.ถัดมาผมจะเพิ่มเฟรมที่ 3 ด้วยวิธีเดียวกันและเปิดตาทีละLayer จนหมด Layer สุดท้ายที่ผมต้องการ 6.แล้วผมจะคลิกใต้รูปแต่ละรูปเพื่อเลือกเวลาในการแสดงภาพกี่วินาทีแล้วเปลี่ยนเฟรมทำอย่างนี้ครบทุกรูป โดยให้เฟรมสุดท้ายใช้เวลานานหน่อย ดังรูปครับ 7.ถ้าคนที่ไม่ต้องการแต่งเอฟเฟค ที่จุดนี้ถือว่าเสร็จแล้วครับ สามารถนำไปใช้ได้เลยโดยลองกดปุ่ม Play เพื่อดูภาพที่เราจะได้ครับ แต่ทีนี้ผมจะแนะให้ลึกไปหน่อยนึงครับ เพื่อแนะวิธีการเพิ่มเฟรมย่อยเพื่อให้การเปลี่ยนเฟรมดูนุ่มนวลขึ้น ใกล้ๆปุ่ม Play เราจะเห็นรูปห่วงโซ่จางๆชื่อ Tween... ดังรูปครับ 8.ให้คลิกที่เฟรมแรกแล้วคลิก Tween และเซตค่าดังรูปนะครับ (Frame to Add หมายถึงจำนวนเฟรมที่ถูกแทรกโดยโปรแกรมเพื่อให้ดูนุ่มนวลขึ้นในการ เปลี่ยนเฟรม ค่ายิ่งมากยิ่งนุ่มนวลมากเหมือนภาพยนต์ครับ ทำอย่างนี้กับทุกๆเฟรมนะครับ 9.ทดลองเล่นโดยกดปุ่ม Play จนพอใจแล้วค่อยเซฟออกมาเพื่อนำไปใช้งานด้วยคำสั่ง File > Save Optimize As... เท่านั้นครับ แล้วตั้งชื่อให้มันดังรูปครับ เราก็ได้ภาพที่พร้อมจะใช้งานแล้วครับ การนำไปใช้ก็เหมือนการอัพรูปแบบ .jpg ทั่วไปครับ เพียงแต่ภาพของเรามันเคลื่อนไหวได้ สนุกไหมล่ะครับ ลองดูนะครับ ผลงานที่ได้ครับ