การออกแบบ Blinkie สำหรับ Flash CS3 Animation

• อาจ 18, 2024

เจ้าของ J3 Designs ขอให้ฉันสร้าง blinkie โฆษณาสำหรับเว็บไซต์ scrapbooking ดิจิตอลของเธอ เธอต้องการรักษาความสง่างามแบบคลาสสิกของแบรนด์ บริษัท และให้ชุดกราฟิกที่ฉันใช้กับโลโก้ของเธอไปแล้ว เหล่านี้ประกอบด้วยจี้, ลูกไม้, พื้นหลังกรันจ์, โบว์, ดอกไม้แห้งและ Ladybugs สอง เดิมกราฟิกเหล่านี้ถูกสร้างที่ 300 dpi และมีขนาดใหญ่มาก ดังนั้นงานแรกของฉันคือลดกราฟิกแต่ละอันให้เป็น 72 dpi และมีขนาดเล็กพอที่จะใช้ในพริบตาขนาด 150 x 50 พิกเซล จากการทดสอบนี้ฉันสามารถระบุได้ว่าองค์ประกอบใดบ้างที่สามารถใช้ในขนาดที่เล็กเช่นนี้โดยไม่ทำให้รายละเอียดมากเกินไป

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

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

รากฐานของอนิเมชั่นนั้นประกอบไปด้วยอนิเมชั่นข้อความมากมาย แต่ Ladybugs เหล่านั้นยังคงมองมาที่ฉันดังนั้นฉันตัดสินใจที่จะเพิ่มภาพเคลื่อนไหวที่สองที่นำแสดงโดย Ladybugs หนึ่งเต่าทองจะปรากฏในระหว่างการเคลื่อนไหวของข้อความและจากนั้น Ladybug ที่สองจะปรากฏขึ้นจากภายใต้จี้ ในที่สุดพวกเขาก็จะคลานไปด้วยกัน เพื่อที่จะทำสิ่งนี้ฉันต้องแยกเลเยอร์พื้นหลังออกเป็นหลายเลเยอร์ เลเยอร์พื้นหลังแรกจะเป็นกราฟิกกรันจ์ ที่สองจะเป็นลูกไม้และจี้ แน่นอนฉันต้องการ PNG ทั้ง ladybugs ลูกไม้และจี้เพื่อรักษาความโปร่งใสใน Flash

ดังนั้นตอนนี้ฉันมีสี่ชั้นที่กะพริบตาของฉันนอกเหนือจากเลเยอร์ภาพเคลื่อนไหวข้อความซึ่งฉันจะเพิ่มในภายหลัง

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

การออกแบบ J3

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, Bridge, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ