งานที่ได้รับมอบหมายในบทเรียนที่แล้วไม่ใช่เรื่องยากในทางเทคนิค สิ่งเดียวที่ต้องมีคือการสังเกตอย่างรอบคอบและการคิดอย่างอดทน ดังนั้นเราจะไม่ให้รีวิวโดยละเอียด แต่จะเป็นเพียงการแนะนำสั้นๆ เท่านั้น และแนบไฟล์ต้นฉบับ PSD เพื่อเป็นข้อมูลอ้างอิงของคุณ
วิธีเปลี่ยนข้อความจากสีดำเป็นสีขาวคือการสร้างเลเยอร์ข้อความสีขาวและทำให้การเติมความทึบของเลเยอร์ข้อความเคลื่อนไหวเพื่อสร้างเอฟเฟกต์จากสีดำเป็นสีขาว ในความเป็นจริง มันควรจะเป็นเอฟเฟกต์เฟดอินที่ค่อยๆ ปรากฏขึ้น เพียงเพราะพื้นหลังเป็นสีดำ เอฟเฟกต์ของขอบข้อความคือเส้นขีด โดยใช้เส้นขีดรูปแบบ สามารถปรับจังหวะของรูปแบบได้ด้วยการลากเมาส์ และตำแหน่งนี้เองที่สร้างเอฟเฟกต์ภาพเคลื่อนไหว เอฟเฟกต์การกะพริบของขอบส่วนใหญ่สามารถสร้างขึ้นได้ด้วยวิธีนี้ นอกจากนี้คุณยังสามารถลองทำให้การปรับขนาดของรูปแบบเคลื่อนไหวได้ และเอฟเฟกต์จะคล้ายกัน หากคำเตือนเกี่ยวกับฟอนต์ที่หายไปปรากฏขึ้นหลังจากเปิด คุณสามารถใช้ฟอนต์อื่นได้โดยไม่มีผลกระทบต่อผลสุดท้ายมากนัก
ในบรรดาเนื้อหาของแอนิเมชั่น Photoshop แนวคิดที่สำคัญที่สุดคือไทม์ไลน์พื้นฐาน คีย์เฟรม และแนวคิดอื่นๆ บนพื้นฐานนี้ เพื่อให้แอนิเมชั่นสวยงามและมีรายละเอียด คุณต้องพึ่งพาสไตล์ ดังนั้นความชำนาญในการใช้สไตล์เลเยอร์จึงเป็นเงื่อนไขที่สำคัญเช่นกัน บทเรียนนี้จะแนะนำให้คุณรู้จักกับแอนิเมชันพื้นฐานอื่นๆ โดยใช้มาสก์ในแอนิเมชัน แน่นอนว่า ก่อนหน้านี้ ทุกคนจะต้องมีความรู้เกี่ยวกับส่วนของหน้ากากในบทช่วยสอนพื้นฐานอย่างถ่องแท้ ดังนั้นเราจะไม่แนะนำมันอีกที่นี่ หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้
ในโปรเจ็กต์ไทม์ไลน์ ทุกคนเคยเห็นโปรเจ็กต์มาสก์ ซึ่งแบ่งออกเป็นมาสก์ดอทเมทริกซ์ธรรมดาและมาสก์เวกเตอร์ แต่ละรายการมีรายการแอนิเมชันสองรายการ รายการแรกคือตำแหน่งของมาสก์ และอีกรายการคือการเปิดใช้งานมาสก์
สิ่งที่เรียกว่าการเปิดใช้งานหมายถึงประสิทธิภาพของมาสก์ ซึ่งก็คือ เปิดหรือปิด สามารถใช้เพื่อควบคุมลักษณะที่ปรากฏหรือการหายไปของวัตถุได้ แต่ไม่สามารถมีผลกระทบต่อการเปลี่ยนแปลงได้ กล่าวอีกนัยหนึ่ง มันมีอยู่ตรงนั้นอย่างสมบูรณ์หรือไม่เลย แต่ไม่มีการเปลี่ยนแปลงระหว่างทั้งสอง มูลค่าในทางปฏิบัตินั้นไม่ได้ดีนักนัก เนื่องจากเราสามารถบรรลุผลแบบเดียวกันได้โดยตรงโดยใช้ความทึบของเลเยอร์และ "คงการแก้ไขการแก้ไข"
ตำแหน่งมาส์กเป็นรายการที่มีประโยชน์มากหากเราต้องการสร้างภาพเคลื่อนไหวที่จำลองแถบความคืบหน้า ดังแสดงในรูปด้านล่าง เนื่องจาก Photoshop ไม่รองรับแอนิเมชั่นการเสียรูป จึงไม่สามารถทำได้ง่ายๆ ผ่านคำสั่งการแปลง แม้ว่าจะสามารถผลิตผ่าน "เลเยอร์อิสระ" ที่แนะนำก่อนหน้านี้ได้ แต่ก็ยุ่งยากเกินไปและแก้ไขได้ไม่ดีในระยะหลัง
ง่ายมากที่จะใช้มาสก์เพื่อสร้างภาพเคลื่อนไหวนี้ วาดรูปสี่เหลี่ยมผืนผ้าในเลเยอร์ใหม่ สร้างมาสก์สีขาวทั้งหมด เติมด้วยสีดำ แล้วปล่อยลิงก์ระหว่างมาสก์กับเลเยอร์ ดังที่แสดงในภาพด้านซ้าย ด้านล่าง. . จากนั้นคุณสามารถตั้งค่ารายการภาพเคลื่อนไหวของตำแหน่งมาส์กได้ กระบวนการนี้ง่ายมาก กล่าวคือ ทำให้มาส์กเป็นสีดำสนิทตั้งแต่เริ่มต้น และเลื่อน (ปรับแต่งไปทางซ้ายหรือขวา) ในตอนท้ายจนกระทั่งสีขาวเผยออกจนหมด นั่นคือ จนกว่าเนื้อหาของเลเยอร์จะไม่ถูกบล็อกอีกต่อไป . ไฟล์ภาพเคลื่อนไหวถูกตั้งค่าเป็น 1 วินาทีและ 15fps
มาสก์ยังสามารถสร้างด้วยการไล่ระดับสีได้ ดังที่แสดงในภาพด้านขวาด้านล่าง ซึ่งจะทำให้จุดสิ้นสุดของแถบความคืบหน้าดูราบรื่นขึ้น
นอกจากการย้ายตำแหน่งของมาสก์แล้ว คุณยังสามารถย้ายเนื้อหาในเลเยอร์โดยที่ยังคงไม่เปลี่ยนแปลงมาสก์อีกด้วย สร้างเลเยอร์ข้อความและใช้เครื่องมือไล่ระดับสีเพื่อมาสก์ด้วยเอฟเฟกต์การไล่ระดับสีแบบสมมาตร เอฟเฟ็กต์ภาพจะแสดงอยู่ในภาพด้านซ้ายด้านล่าง และเลเยอร์พาเล็ตจะแสดงอยู่ในภาพด้านขวาด้านล่าง เมื่อยกเลิกการลิงก์มาสก์แล้ว คุณสามารถทำให้ตำแหน่งของเลเยอร์เคลื่อนไหวได้ โปรดทราบว่านี่ไม่ใช่รายการตำแหน่งมาส์กอีกต่อไป แต่เป็นตำแหน่งเลเยอร์ที่เราเรียนรู้ก่อนหน้านี้ ไฟล์ภาพเคลื่อนไหวถูกตั้งค่าเป็น 2 วินาทีและ 15fps
แม้ว่ามาสก์จะไม่ถูกย้ายโดยตรงในเวลานี้ แต่แอนิเมชันจะต้องทำให้เสร็จสิ้นด้วยความช่วยเหลือของเอฟเฟกต์การบดบังของมาสก์ ดังนั้นจึงยังคงจัดประเภทเป็นแอนิเมชันของมาสก์
แตกต่างจากการเคลื่อนไหวข้อความที่เราเคยทำก่อนหน้านี้ เอฟเฟกต์ข้างต้นสามารถเรียกว่าการเลื่อนข้อความ ความแตกต่างที่สำคัญระหว่างทั้งสองคือเนื้อหาข้อความของข้อความแรกจะแสดงแบบเต็มในขณะที่ข้อความหลังปรากฏขึ้นตามลำดับ หากคุณต้องการให้ข้อความเลื่อนมีเอฟเฟกต์แบบวนซ้ำ คุณต้องมีทักษะบางอย่าง การตั้งค่าแบบโต้ตอบไม่เหมาะกับสิ่งนี้ เนื่องจากนิสัยการอ่าน จึงไม่เหมาะที่จะเลื่อนข้อความไปในทิศทางตรงกันข้ามแล้วเลื่อนกลับในลักษณะเดียวกัน ไม่สามารถอ่านประโยคแบบย้อนกลับได้ แม้ว่าการเล่นวนซ้ำเริ่มต้นจะเป็นวิธีแก้ปัญหา แต่จะเว้นช่องว่างไว้หลังตัวอักษรตัวสุดท้ายของข้อความ
เราสามารถสร้างเอฟเฟกต์แบบวนซ้ำโดยไม่มีช่องว่างได้โดยการคัดลอกเนื้อหาข้อความ คัดลอกเนื้อหาข้อความออกเป็นสองชุดและเชื่อมต่อหลังจากข้อความต้นฉบับนั่นคือ "Photoshop" กลายเป็น "Photoshop_Photoshop_Photoshop" ในช่วงเริ่มต้น ให้วางรอยต่อระหว่างคำสองคำแรก "p_P" ตรงกลาง (หรือที่ไหนสักแห่ง) ของเลเยอร์ และในตอนท้าย ให้ย้ายข้อต่อที่สองไปยังตำแหน่งเดียวกันโดยประมาณ ความแตกต่างเล็กๆ น้อยๆ จะสังเกตเห็นได้น้อยลงในแอนิเมชั่น ดังนั้นความคลาดเคลื่อนจึงเป็นเรื่องปกติ หากคุณต้องการให้แม่นยำ คุณสามารถสร้างเส้นอ้างอิงเพื่อการจัดตำแหน่งที่แม่นยำโดยอิงตามเส้นขีดของตัวอักษรตัวใดตัวหนึ่ง (เช่น เส้นแนวตั้งด้านซ้ายของ P)
ณ จุดนี้ เอฟเฟกต์ลูปได้ถูกสร้างขึ้น แต่มีเฟรมในสถานะเดียวกันที่ช่วงเวลาเริ่มต้นและสิ้นสุด เนื่องจากนี่ไม่ใช่ภาพเคลื่อนไหวแบบลูกสูบที่สมมาตร คุณจึงสามารถย้ายคีย์เฟรมของช่วงเวลาสิ้นสุด (01:14) ไปที่ 02:00 ได้โดยตรง ดังแสดงในรูปด้านล่าง หากคุณเชี่ยวชาญสิ่งที่คุณได้เรียนรู้มาก่อน คุณจะเข้าใจได้ว่าช่วงเวลา 02:00 น. จริงๆ แล้วไม่ได้อยู่ในกระบวนการแอนิเมชัน
ไม่เพียงแต่ข้อความเท่านั้น แต่ยังสามารถสร้างสัญลักษณ์กราฟิกต่างๆ ให้เป็นภาพเคลื่อนไหวแบบวนซ้ำทางเดียวตามวิธีนี้ได้อีกด้วย
นี่เป็นเนื้อหาทางเทคนิคของแอนิเมชั่นมาสก์ ไม่ใช่ขั้นสูง แต่ถ้าคุณรวมเข้ากับความรู้เดิม คุณสามารถสร้างเอฟเฟกต์ได้มากมาย ตัวอย่างเช่น ก่อนหน้านี้เราได้เรียนรู้แอนิเมชั่นการไล่ระดับสีแบบมุมในแอนิเมชั่นสไตล์เลเยอร์ ซึ่งสามารถผลิตเพิ่มเติมได้โดยใช้มาสก์ การไล่ระดับสีมุมธรรมดาจะแสดงอยู่ในภาพด้านซ้ายด้านล่าง และเราได้เพิ่มเวกเตอร์มาสก์เข้าไป ดังที่แสดงในภาพด้านขวาด้านล่าง คุณสามารถทำให้แถบความคืบหน้าเป็นวงกลมเคลื่อนไหวได้ คลิกที่นี่เพื่อดาวน์โหลดไฟล์ต้นฉบับ PSD ของภาพเคลื่อนไหวนี้ เพื่อให้ทุกคนวิเคราะห์ได้ด้วยตัวเอง
แม้ว่าจะใช้มาสก์แรสเตอร์ได้ที่นี่ แต่มาสก์เวกเตอร์จะปรับให้เข้ากับขนาดภาพได้ดี ทำให้ง่ายต่อการเปลี่ยนภาพเคลื่อนไหวเป็นขนาดใดก็ได้เพื่อให้เหมาะกับความต้องการที่แตกต่างกัน มีการแนะนำความแตกต่างระหว่างแลตทิซและเวกเตอร์และการวาดเส้นทางเวกเตอร์ในส่วนบทช่วยสอนพื้นฐาน บทเรียนต่อๆ ไปจะแนะนำผลกระทบของขนาดแอนิเมชั่นต่อจำนวนไบต์
เปลี่ยนมาสก์ด้านบนเป็นวงแหวนหรือเปลี่ยนสไตล์การไล่ระดับสีเพื่อรับเอฟเฟกต์ภาพเคลื่อนไหวเพิ่มเติม
นอกจากนี้ การไล่ระดับสีของการหยุดสีเดียวกันสามารถกระตุ้นการเปลี่ยนแปลงตำแหน่งการหยุดสีได้ ดังแสดงในรูปด้านล่าง มันสามารถสร้างเอฟเฟกต์ของการไล่ระดับสีแบบค่อยเป็นค่อยไป
คุณอาจคิดว่าตัวอย่างแอนิเมชันจะเป็นขาวดำและเป็นโทนสีเทาเสมอ ซึ่งจริงๆ แล้วนี่เป็นวิธีการที่เรานำมาใช้จากมุมมองของการสอน ประการแรก ระดับสีเทาสามารถแสดงเนื้อหาได้อย่างชัดเจนโดยไม่มีการรบกวนของสี นำมาผสมกันในรูปแบบต่างๆ เราได้แนะนำสิ่งนี้ไปแล้วในบทที่ 11 ส่วนที่ 6 ของบทช่วยสอนพื้นฐาน คุณสามารถคลิกเพื่อดูวิดีโอบทแนะนำในส่วนนี้ บทช่วยสอนแบบข้อความมีอยู่ในหนังสือตีพิมพ์ "The Master's Road-Complete Analysis of the Chinese Version of Photoshop" เท่านั้น
เราเพิ่มเงาด้านบน แสงภายนอก ฯลฯ ให้กับภาพเคลื่อนไหว และเปลี่ยนสีของการเติมและวิธีการซ้อนทับของการไล่ระดับสี และเราได้เอฟเฟกต์ภาพดังที่แสดงด้านล่าง โปรดทราบว่าการตั้งค่าเอกสารของภาพเคลื่อนไหวนี้เปลี่ยนเป็น 10fps แล้ว สาเหตุของการเปลี่ยนแปลงจะแจ้งให้ทราบในภายหลัง
จนถึงตอนนี้ โดยพื้นฐานแล้วเราใช้เลเยอร์เดียวเป็นวัตถุของแอนิเมชั่น แต่ไม่ได้หมายความว่าเราจะต้อง "ประหยัด" ขนาดนั้นในการผลิตจริง คุณสามารถใช้หลายเลเยอร์เพื่อสร้างภาพเคลื่อนไหวที่สมบูรณ์ยิ่งขึ้น อย่างไรก็ตาม เรายังคงต้องปฏิบัติตามหลักการนี้ ซึ่งก็คือการใช้เลเยอร์น้อยที่สุดเท่าที่จะเป็นไปได้ในการสร้าง เพราะการมีเลเยอร์มากเกินไปอาจทำให้เกิดความสับสนได้ง่ายและไม่เอื้อต่อการแก้ไขในภายหลัง หลักการอีกประการหนึ่งถูกกล่าวถึงในบทช่วยสอนพื้นฐาน ซึ่งก็คือการใช้เวกเตอร์ให้ได้มากที่สุด
ด้านล่างนี้เป็นภาพเคลื่อนไหวของเราที่ประกอบด้วยสองชั้น เนื่องจากขนาดของภาพเคลื่อนไหวนี้ใหญ่เกินไป จึงไม่สามารถแสดงบนหน้าเว็บได้ คุณสามารถถือเป็นการบ้านได้ และเรามีไฟล์ต้นฉบับให้ทุกคนได้ศึกษา
Photoshop ยังสามารถทำให้กลุ่มเลเยอร์เคลื่อนไหวได้ แต่จะทำได้เฉพาะความทึบโดยรวมของกลุ่มเลเยอร์และมาสก์กลุ่มเลเยอร์เท่านั้น ไม่รองรับภาพเคลื่อนไหวตำแหน่งกลุ่มเลเยอร์ ซึ่งค่อนข้างน่าเสียดาย หากเราสามารถรองรับแอนิเมชันตำแหน่งกลุ่มเลเยอร์ได้ เราก็สามารถสร้างการเคลื่อนไหวที่สัมพันธ์กันได้อย่างง่ายดาย ตัวอย่างเช่น ขั้นแรกให้ข้อความเคลื่อนที่ในแนวนอนบนปุ่ม จากนั้นสร้างกลุ่มเลเยอร์ด้วยข้อความและปุ่ม จากนั้นกำหนดภาพเคลื่อนไหวการเคลื่อนไหวในแนวตั้งสำหรับกลุ่มเลเยอร์ จากนั้นคุณสามารถทำงานข้างต้นให้เสร็จสิ้นได้