จากบทเรียนก่อนหน้านี้ เราได้เรียนรู้วิธีสร้างภาพเคลื่อนไหวโดยใช้การเปลี่ยนคีย์เฟรมและการใช้เลเยอร์อิสระ สามารถใช้เพื่อสร้างภาพเคลื่อนไหวแบบวัตถุเดียวแบบง่ายๆ และเป็นเวลานานที่วิธีนี้เป็นวิธีเดียวที่จะสร้างภาพเคลื่อนไหวใน Photoshop วันนี้เราจะมาเรียนรู้วิธีใหม่ ในการสร้างภาพเคลื่อนไหวโดยใช้ไทม์ไลน์ วิธีไทม์ไลน์ใช้กันอย่างแพร่หลายในซอฟต์แวร์การผลิตภาพยนตร์และโทรทัศน์จำนวนมาก เช่น Premiere, AfterEffects ฯลฯ รวมถึง Flash ที่ใช้วิธีนี้ด้วย
มีการดำเนินการหลายอย่างในแอนิเมชั่นการเปลี่ยนคีย์เฟรมที่เราไม่ได้กล่าวถึง เนื่องจากการดำเนินการเหล่านี้ไม่เกี่ยวข้องกับวิธีไทม์ไลน์ และไทม์ไลน์จะเป็นวิธีหลักในการสร้างแอนิเมชั่นในอนาคต ดังนั้นเราจะข้ามการดำเนินการเหล่านั้นไป
หากต้องการรวมวัสดุเข้าด้วยกัน โปรดคลิกที่นี่เพื่อดาวน์โหลดไฟล์วัสดุ แตกไฟล์ PSD และเปิดใน Photoshop นี่เป็นไฟล์ที่ไม่มีการตั้งค่าเฟรม (คุณสามารถใช้ไฟล์ของคุณเองแทนได้) ดังที่แสดงด้านล่าง เนื่องจากการใช้เลเยอร์ข้อความ ตัวเลือกการแทนที่อาจปรากฏขึ้นเนื่องจากแบบอักษรหายไปหลังจากเปิดขึ้น เพียงเลือกที่จะแทนที่ด้วยแบบอักษรเริ่มต้น แม้ว่าแบบอักษรเริ่มต้นจะไม่สวยงามเพียงพอ แต่เอฟเฟกต์การสอนก็ยังเหมือนเดิม
ไฟล์ PSD มี 3 เลเยอร์ (ไม่นับเลเยอร์พื้นหลัง) 2 เลเยอร์เป็นเลเยอร์ข้อความ และอีก 1 เลเยอร์เป็นรูปร่างเวกเตอร์ หากคุณไม่รู้ว่าเลเยอร์รูปร่างเวกเตอร์คืออะไร นั่นหมายความว่าคุณยังไม่เข้าใจพื้นฐานเป็นอย่างดี
คลิก ที่มุมขวาล่างของแผงภาพเคลื่อนไหว
ปุ่มเพื่อสลับไปยังโหมดไทม์ไลน์ ดังแสดงในรูปด้านล่าง ผู้อ่านที่ระมัดระวังจะสังเกตเห็นว่าชื่อของจานสีได้เปลี่ยนเป็น "แอนิเมชั่น (ไทม์ไลน์)" ในขณะที่ชื่อก่อนหน้าคือ "แอนิเมชั่น (เฟรม)" ปุ่มที่มุมขวาล่างจะเปลี่ยนเป็น
การคลิกจะสลับไปที่โหมดเฟรมดั้งเดิม
ควรสังเกตว่าทั้งสองวิธีนี้เข้ากันไม่ได้ดังนั้นอย่าสลับระหว่างกระบวนการผลิต หากคุณเปลี่ยนโดยไม่ได้ตั้งใจ คุณสามารถใช้คำสั่งเลิกทำ [CTRL+ALT+Z] เพื่อกู้คืนได้
ในไทม์ไลน์ เราเห็นชื่อเลเยอร์คล้ายกับชื่อในพาเล็ตเลเยอร์ และตำแหน่งสูงและต่ำของพวกมันก็เหมือนกับชื่อในพาเล็ตเลเยอร์เช่นกัน การคลิกเครื่องหมายลูกศรทางด้านซ้ายของเลเยอร์จะขยายรายการภาพเคลื่อนไหวทั้งหมดของเลเยอร์ ซึ่งก็คือองค์ประกอบที่สามารถเคลื่อนไหวได้ ในเลเยอร์ที่มีลักษณะต่างกัน ไอเท็มแอนิเมชันก็จะแตกต่างกันเช่นกัน คุณสมบัติที่แตกต่างกันที่เรียกว่าหมายถึงเลเยอร์ธรรมดา เลเยอร์ธรรมดาพร้อมมาสก์ เลเยอร์ข้อความ เลเยอร์การปรับแต่ง ฯลฯ ทั้งหมดนี้ล้วนเป็นคุณสมบัติที่แตกต่างกัน ดังที่แสดงในภาพด้านซ้ายด้านล่าง โปรเจ็กต์แอนิเมชั่นหลังจากเลเยอร์ข้อความ "Go and Stay" และเลเยอร์รูปร่างเวกเตอร์ "Shape 1" จะถูกขยายตามลำดับ สิ่งที่เหมือนกันคือตำแหน่ง ความทึบ และสไตล์ ข้อแตกต่างก็คือเลเยอร์ข้อความมีรายการ "การเปลี่ยนรูปข้อความ" อีกหนึ่งรายการ และเลเยอร์รูปร่างเวกเตอร์มีรายการที่เกี่ยวข้องกับมาสก์อีกสองรายการ
การผลิตแอนิเมชั่นต้องไม่เกินโปรเจ็กต์แอนิเมชั่นของเลเยอร์นั้นเอง ตัวอย่างเช่น ไม่สามารถดำเนินการ "การเปลี่ยนรูปข้อความ" บนเลเยอร์รูปร่างได้ อย่างไรก็ตาม สามารถเพิ่มรายการภาพเคลื่อนไหวบางรายการได้ในภายหลัง ตัวอย่างเช่น หลังจากเพิ่มมาสก์ลงในเลเยอร์ข้อความแล้ว ก็จะมีรายการภาพเคลื่อนไหวที่มาสก์
มีชุดตัวเลข 0:00:00:00 ที่มุมซ้ายบนของจานสี ซึ่งเป็นรหัสเวลาปัจจุบัน จากด้านขวาสุดจะเป็นมิลลิวินาที วินาที นาที และชั่วโมง โดยทั่วไปจะใช้เพียงไม่กี่วินาทีเท่านั้น นอกจากนี้ยังมี 30.00fps หลังไทม์โค้ดซึ่งเป็นอัตราเฟรมระบุจำนวนเฟรมต่อวินาที โดยทั่วไป ค่าจะเป็นจำนวนเต็ม และอัตราเฟรมทศนิยมจะใช้เฉพาะในการตัดต่อภาพยนตร์และโทรทัศน์เท่านั้น
คลิก ที่มุมขวาบนของแผงภาพเคลื่อนไหว คลิกปุ่มและเลือก "การตั้งค่าเอกสาร" จากนั้นการตั้งค่าไทม์ไลน์ที่แสดงทางด้านขวาด้านล่างจะปรากฏขึ้น ที่นี่คุณสามารถระบุระยะเวลาภาพเคลื่อนไหวทั้งหมดและอัตราเฟรมได้ ตามการตั้งค่าเริ่มต้น ความยาวทั้งหมดคือ 10 วินาที และ 30 เฟรมต่อวินาที ดังนั้นจำนวนเฟรมทั้งหมดจึงเท่ากับ 300 เฟรม นี่เป็นค่าที่ค่อนข้างมากสำหรับเว็บแอนิเมชั่น ซึ่งจะใช้พื้นที่จำนวนมากเมื่อสร้าง ไม่เอื้อต่อการส่งสัญญาณผ่านเครือข่าย ตอนนี้เราเปลี่ยนระยะเวลาเป็น 5 วินาทีและอัตราเฟรมเป็น 5fps เมื่อยืนยันแล้ว คุณจะเห็นตัวบ่งชี้อัตราเฟรมใหม่ในแผงภาพเคลื่อนไหว
ดังที่แสดงในภาพด้านล่าง หากคุณขยายชุดสีภาพเคลื่อนไหวในแนวนอน คุณจะเห็นเครื่องหมายเวลา เช่น 01:00 และ 02:00 น. ในหน่วยวินาที จุดสิ้นสุดด้านขวาสุดของไทม์ไลน์คือระยะเวลาทั้งหมด 5 วินาทีที่เพิ่งตั้งไว้ ลากแถบเลื่อนที่ลูกศรสีแดงชี้ไปทางขวาเพื่อขยายรายละเอียดของไทม์ไลน์ที่ขยายจะอยู่ภายในพื้นที่กล่องสีแดง คุณจะเห็นว่ามีสัญญาณเช่น 01f และ 02f ระหว่างวินาที นี่คือเฟรม การตั้งค่าที่เราเพิ่งตั้งไว้คือ 5fps ดังนั้นจึงมี 5 เฟรมทุกๆ สองวินาที แม้ว่าเราจะเห็นเฉพาะค่าสูงสุด 04f แต่เราต้องรู้ว่าจริง ๆ แล้ว 05f ทับซ้อนกับ 01:00 ดังนั้นจึงแสดงเป็น 01:00f ซึ่งหมายความว่าเป็นทั้งวินาทีแรกและเฟรม
โปรดทราบว่ามีเส้นบางๆ ที่เห็นได้ชัดเจนน้อยกว่าระหว่างลูกศรสีส้มสองอัน นี่คือตัวบ่งชี้บัฟเฟอร์การเรนเดอร์ ซอฟต์แวร์ตัดต่อภาพยนตร์และโทรทัศน์อื่นๆ ก็มีตัวบ่งชี้นี้เช่นกัน แต่บทบาทของมันไม่สำคัญมากใน Photoshop .