Web Motion สำหรับผู้เริ่มต้นภาพรวมโดย Tom Green

• อาจ 7, 2024

ในชุด lynda.com นี้ของหลักสูตรตามโครงการสิทธิ Web Motion สำหรับผู้เริ่มต้นTom Green สอนการใช้กราฟิกเคลื่อนไหวบนเว็บตั้งแต่ต้นจนจบ ในระหว่างกระบวนการคุณจะสร้างห้าโครงการทั้งหมด

ภาพรวม

กรีนเริ่มต้นภาพรวมของการพิจารณาที่สำคัญสำหรับโครงการที่ประสบความสำเร็จ

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

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

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

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

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

หลังจากภาพรวมสั้น ๆ นี้คุณพร้อมที่จะเริ่มบทเรียนวิดีโอที่ใช้หนึ่งในห้าโครงการใด ๆ

สร้างเอฟเฟกต์ Parallax - สร้างความลึกและการเคลื่อนไหวด้วยเอฟเฟกต์ Parallax กับ Google Web Designer^R, Flash CC^R และ Edge Animate^R.

สร้างภาพเคลื่อนไหว CSS Sprite Sheet - Sprite ชีทเป็นวิธีหนึ่งในการเพิ่มประสิทธิภาพการเคลื่อนไหวสำหรับอุปกรณ์เว็บและแท็บเล็ต

สร้าง Preloader - สร้างโหลดไว้ล่วงหน้าโดยใช้ After Effects^R, Photoshop^R หรือดอกไม้ไฟ^R และ Edge Animate

สร้างโฆษณาแบนเนอร์เคลื่อนไหว - สร้างเว็บแบนเนอร์พร้อมการเคลื่อนไหวและการโต้ตอบ

โครงการสุดท้าย - โครงการสุดท้ายนี้รวมเทคนิคทั้งหมดที่ได้เรียนรู้ในโครงการก่อนหน้านี้เมื่อคุณสร้างโฆษณาแบนเนอร์โดยใช้ Illustrator^R, Photoshop และ Edge Animate

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

วิดีโอสอนการใช้งานอื่น ๆ ของ Tom Green ใน lynda.com ได้แก่ ทำงานกับวิดีโอ HTML5, การสร้างโครงงานแบบอินเตอร์แอคทีฟด้วย Edge Animate, การประชุมเชิงปฏิบัติการดอกไม้ไฟ CS6 และ Fireworks CS3 Essential Training.

//www.lynda.com/Video-Motion-Graphics-tutorials/Web-Motion-Beginners-Overview/149124-2.html

การเปิดเผย: ฉันไม่ได้รับการชดเชยทางการเงินสำหรับบทความนี้ ความคิดเห็นเป็นของตัวเองอย่างสมบูรณ์ตามประสบการณ์ของฉัน