วันนี้เรามีบทเรียน Adobe Illustrator ที่ไม่ธรรมดา เพราะครั้งนี้เราจะไม่สร้างภาพนิ่ง แต่เป็นแอนิเมชั่นจริง ลองนึกภาพปรากฎว่าคุณสามารถวาดการ์ตูนโดยใช้ Adobe Illustrator ได้ :)
และสำหรับสิ่งนี้เราไม่ต้องการอะไรเลย การจัดระเบียบเลเยอร์อย่างเหมาะสมและส่งออกงานขั้นสุดท้ายเป็นรูปแบบ swf โดยแต่ละเลเยอร์จะถูกแปลงเป็นเฟรมแอนิเมชั่น ในบทช่วยสอนวันนี้ เราจะวาดแอนิเมชั่นนับถอยหลังสไตล์ภาพยนตร์ย้อนยุค ผลลัพธ์ควรเป็นวิดีโอแฟลชที่มีการนับถอยหลังเดียวกันนี้
สิ่งแรกที่คุณต้องทำคือวาดองค์ประกอบที่จำเป็นทั้งหมดสำหรับแอนิเมชั่นในอนาคต ในการทำเช่นนี้ ในเอกสารที่แยกออกมา ฉันได้สร้างกรอบฟิล์มสองตำแหน่ง วงกลมสำหรับอ้างอิง ซึ่งถูกตัดออกเป็นส่วนที่แยกจากกัน พื้นผิวและรอยขีดข่วนแนวตั้งเพื่อเพิ่มเอฟเฟกต์ของสมัยโบราณ เช่นเดียวกับตัวเลขและ จารึก
เมื่อทุกส่วนของการ์ตูนของเราพร้อมแล้ว เราก็สามารถเริ่มสร้างแอนิเมชั่นได้เลย เพื่อความสะดวก ควรทำเช่นนี้ในเอกสารใหม่ ในกรณีนี้ เลเยอร์ของเราจะมีบทบาทเป็นเฟรมแอนิเมชั่น และในชั้นแรกคุณเพียงแค่ต้องคัดลอกเฟรมฟิล์ม วางไว้ตรงกลางพื้นที่ทำงานของคุณ
ตอนนี้สร้างเลเยอร์ที่สองแล้วคัดลอกเฟรมฟิล์มลงไป โดยที่รูตามขอบจะทำโดยใช้ออฟเซ็ต ต้องวางไว้ตรงกลางด้วย
จากสองชั้นนี้ คุณจะได้รับแอนิเมชันของภาพยนตร์ที่กำลังเคลื่อนไหวอยู่แล้ว แต่ต่อมาเราจะต้องมีเลเยอร์เพิ่มอีกหลายชั้น ดังนั้นเลือกสองชั้นแรก ไปที่ตัวเลือกพาเนลและทำสำเนาเลเยอร์ต่างๆ
ในทำนองเดียวกัน เราจำเป็นต้องสะสมเฟรมฟิล์ม 12 ชั้นเพื่อกำหนดการเคลื่อนไหว
ตอนนี้เรามีเลเยอร์จำนวนมากและมองเห็นได้ทั้งหมด ในแง่ที่ว่าชั้นบนปิดกั้นชั้นล่างซึ่งไม่สะดวกในการทำงานโดยสิ้นเชิง ดังนั้นคุณสามารถปิดบางเลเยอร์ได้โดยคลิกที่ไอคอนโดยให้ตาทางด้านซ้ายของชื่อเลเยอร์ หากต้องการปิดหรือเปิดเลเยอร์ทั้งหมดพร้อมกัน ให้กดปุ่ม Alt ค้างไว้พร้อมกับคลิกที่ไอคอนรูปตา ด้วยการเปิดและปิดเลเยอร์ คุณจะเห็นได้อย่างชัดเจนว่ามีอะไรอยู่ในเฟรมเฉพาะของแอนิเมชั่นในอนาคตของเรา และตอนนี้ เพื่อที่จะเพิ่มความกระวนกระวายใจเล็กน้อยให้กับการเคลื่อนไหวของภาพยนตร์ เราจำเป็นต้องย้ายเฟรมผลลัพธ์เล็กน้อยไปในทิศทางที่ต่างกัน ในการดำเนินการนี้ ให้เปิดเฉพาะเลเยอร์ที่คุณจะใช้งานในขณะนี้ จากนั้นเลื่อนเฟรมไปสองสามพิกเซลในทิศทางใดก็ได้
เมื่อคุณผ่านเลเยอร์ทั้งหมดและเพิ่มการเปลี่ยนแปลงเล็กน้อยแล้ว คุณสามารถเริ่มสร้างแอนิเมชั่นของวงกลมที่กำลังเคลื่อนที่ได้ ในการดำเนินการนี้ ให้คัดลอกวงกลมที่ประกอบด้วยส่วนต่างๆ จากเอกสารพร้อมส่วนการ์ตูน และวางไว้บนชั้นแรกที่ด้านบนของกรอบฟิล์ม
หากคุณยกเลิกการเลือกวงกลม วงกลมนั้นจะมีลักษณะเป็นวงกลมเดียว นี่คือสิ่งที่เราต้องการ
แต่เนื่องจากประกอบด้วยแต่ละส่วน คุณจึงสามารถสร้างแอนิเมชั่นได้อย่างรวดเร็วและง่ายดายด้วยการเปลี่ยนสี เมื่อต้องการทำเช่นนี้ ให้คัดลอกวงกลมนี้ไปยังเลเยอร์ที่สอง และทำให้เซกเตอร์แรกสว่างขึ้น คุณจำได้ว่าฟิล์มของเราจะสั่นขณะเคลื่อนไหว ดังนั้นจึงไม่จำเป็นต้องวางวงกลมไว้ตรงกลางเฟรมพอดีเลย วางตำแหน่งด้วยสายตา
ในทำนองเดียวกัน คุณต้องคัดลอกวงกลมลงในแต่ละเลเยอร์ถัดไป ในขณะที่ทาสีอีกหนึ่งเซกเตอร์ด้วยสีที่สว่างกว่าครั้งก่อน เลเยอร์ทั้ง 12 เลเยอร์เหล่านี้รวมกันเป็นแอนิเมชั่นของภาพยนตร์ที่เคลื่อนไหวเป็นวงกลม
ต่อไปเราต้องเพิ่มพื้นผิวให้กับเลเยอร์ของเรา เปิดเลเยอร์แรกและคัดลอกพื้นผิวจากไฟล์ต้นฉบับพร้อมอะไหล่
จากนั้นเปิดเลเยอร์ถัดไปทีละเลเยอร์แล้วคัดลอกพื้นผิวเดียวกันที่นั่น หากต้องการทำให้แต่ละเฟรมดูแตกต่าง เพียงหมุน 90 องศา ตามที่คุณอาจเดาได้ เราต้องเพิ่มพื้นผิวให้กับทั้ง 12 เฟรม
หากคุณเบื่อกับการคัดลอกแล้วฉันช่วยคุณได้ - เหลือน้อยมาก ส่วนที่ยากที่สุดจบลงแล้ว สิ่งที่เหลืออยู่คือการเพิ่มรอยขีดข่วนในแนวตั้งและเกือบจะเท่านั้น ในการทำเช่นนี้เราจะคัดลอกรอยขีดข่วนต้นฉบับอีกครั้งและวางไว้ในตำแหน่งที่ต้องการในหลายชั้น ในกรณีของฉัน รอยขีดข่วนปรากฏเพียงสองชั้นเท่านั้น
ตอนนี้วงจรหลักที่มีแอนิเมชั่นภาพยนตร์พร้อมแล้ว สิ่งที่เหลืออยู่คือการเพิ่มตัวเลข เนื่องจากการนับถอยหลังของเราเปลี่ยนจาก 3 เป็น 1 บวกกับคำว่า Go!!! เราจึงต้องมีเลเยอร์มากกว่านี้ ไม่ใช่ 12 แต่มากถึง 48 ในการทำเช่นนี้คุณต้องสร้างเลเยอร์สำเร็จรูปพร้อมแอนิเมชั่นภาพยนตร์อีกสามชุด
แล้วทุกอย่างก็เรียบง่าย เปิดเลเยอร์แรกแล้วใส่หมายเลขสามลงไป
จากนั้นคุณจะต้องคัดลอกรูปภาพนี้ไปยังเลเยอร์ถัดไปจนกว่าแอนิเมชั่นวงกลมจะสิ้นสุด เมื่อคุณไปถึงสำเนาเลเยอร์ถัดไปโดยที่วงกลมจะเต็มอีกครั้งคุณจะต้องใส่หมายเลขสอง ในทำนองเดียวกัน ให้คัดลอกหมายเลข 1 ไปยังเลเยอร์ที่ต้องการ และเมื่อคุณไปถึงเลเยอร์สุดท้ายของคำจารึก Go!!! เพียงลบวงกลมออกก่อนที่จะคัดลอกคำจารึกไปยังเลเยอร์ที่ต้องการ
นั่นคือทั้งหมดสำหรับแอนิเมชั่น สิ่งสำคัญที่นี่คืออย่าสับสน คุณสามารถตั้งชื่อที่สะดวกให้กับเลเยอร์ต่างๆ ได้ แต่ฉันค่อนข้างขี้เกียจ :) และเมื่อคุณทำงานเสร็จแล้ว อย่าลืมเปิดเลเยอร์ทั้งหมดอีกครั้งโดยคลิกที่ไอคอนรูปตา
ในหน้าต่างการตั้งค่าการส่งออก อย่าลืมตั้งค่าส่งออกเป็น: เลเยอร์ AI เป็น SWF Frames นี่คือตัวเลือกที่จะเปลี่ยนเลเยอร์ Illustrator ให้เป็นเฟรมแอนิเมชั่น จากนั้นคลิกปุ่มขั้นสูง
การตั้งค่าเพิ่มเติมจะเปิดขึ้น ที่นี่คุณต้องตั้งค่าอัตราเฟรม ฉันมี 12 เฟรมต่อวินาที ช่องทำเครื่องหมายวนซ้ำมีหน้าที่รับผิดชอบในการเคลื่อนไหวแบบวนรอบ ด้วยเหตุนี้วิดีโอจึงเล่นเป็นวงกลม และตัวเลือก Layer Order: จากล่างขึ้นบน จะสร้างเลเยอร์ของนักวาดภาพประกอบจากล่างขึ้นบนในแผง นี่คือวิธีที่เราสร้างแอนิเมชั่นของเรา
ผลลัพธ์เป็นวิดีโอแฟลชพร้อมภาพเคลื่อนไหวของเรา
ตอนนี้คุณจะเห็นแล้วว่าการสร้างแอนิเมชั่นอย่างง่ายใน Adobe Illustrator นั้นไม่ใช่เรื่องยากอย่างที่คิดเมื่อเห็นแวบแรก
แต่หากต้องการสร้างวิดีโอขนาดยาวหรือแอปพลิเคชันเชิงโต้ตอบ ยังดีกว่าถ้าใช้ Adobe Flash หรือโปรแกรมแก้ไขแฟลชอื่นๆ ตัวอย่างเช่น ฉันสร้างแมวตัวนี้ด้วย Macromedia Flash ตัวเก่าที่ฉันขุดขึ้นมาจากงานของฉัน
นอกจากนี้ เมื่อเร็ว ๆ นี้มีการใช้ HTML5 และ CSS3 เพื่อสร้างแอนิเมชั่นมากขึ้น รหัสนี้รองรับโดยเบราว์เซอร์รุ่นใหม่และไม่ต้องใช้โปรแกรมเล่นแฟลช
Roman aka dacascas โดยเฉพาะอย่างยิ่งสำหรับบล็อก
สมัครรับจดหมายข่าวของเราเพื่อให้คุณไม่พลาดข่าวสารใหม่ๆ:
การเพิ่มประสิทธิภาพกราฟิกเว็บ
ข้อมูลกราฟิกจะถูกถ่ายโอนช้ากว่าข้อมูลข้อความมาก และเวลาในการโหลดรูปภาพจะแปรผันตามขนาดของไฟล์กราฟิก ดังนั้น การโหลดหน้าเว็บอย่างรวดเร็วต้องใช้รูปภาพกราฟิกขนาดเล็กที่ฝังอยู่ในหน้าเว็บ ซึ่งทำได้โดยการเพิ่มประสิทธิภาพ การปรับให้เหมาะสมของภาพนั้นเข้าใจว่าเป็นการเปลี่ยนแปลง โดยรับประกันขนาดไฟล์ขั้นต่ำในขณะที่ยังคงรักษาคุณภาพของภาพที่ต้องการในกรณีนี้ ซึ่งทำได้โดยการลดจำนวนสีในภาพกราฟิกโดยใช้รูปแบบไฟล์บีบอัดและพิเศษ และปรับพารามิเตอร์การบีบอัดให้เหมาะสมสำหรับแต่ละบุคคล เศษรูปภาพ
Illustrator มีเครื่องมือเพิ่มประสิทธิภาพรูปภาพในตัวที่ทำให้กระบวนการปรับให้เหมาะสมรวดเร็วและมีประสิทธิภาพด้วยวิธีแสดงตัวอย่างที่หลากหลาย การแสดงตัวอย่างให้แนวคิดที่ค่อนข้างแม่นยำว่าภาพที่ปรับให้เหมาะสมจะมีลักษณะอย่างไรแบบเรียลไทม์ ซึ่งช่วยให้คุณประเมินผลการปรับให้เหมาะสมและเลือกการตั้งค่าที่เหมาะสมได้สำเร็จ และคุณสามารถปรับแต่งทั้งรูปภาพที่สร้างขึ้นโดยตรงในโปรแกรม Illustrator และอื่นๆ ได้ เช่น รูปภาพที่ควรนำไปวางบนเว็บไซต์
พารามิเตอร์การปรับให้เหมาะสมถูกตั้งค่าในหน้าต่างบันทึกสำหรับเว็บซึ่งเรียกโดยคำสั่งที่มีชื่อเดียวกันจากเมนูไฟล์ โปรแกรมแนะนำให้ใช้หนึ่งในสี่โหมดแสดงตัวอย่าง แต่สองโหมดเหมาะที่สุดสำหรับการประเมินคุณภาพของการปรับให้เหมาะสม:
- 2-Up (สองตัวเลือก) การดูภาพต้นฉบับและภาพที่ได้รับการปรับปรุงพร้อมกันตามการตั้งค่าที่ระบุ (รูปที่ 1)
- 4-Up (สี่ตัวเลือก) ในโหมดนี้ วิวพอร์ตจะแบ่งออกเป็นสี่หน้าต่าง (รูปที่ 2) เพื่อแสดงภาพต้นฉบับและเวอร์ชันที่ปรับให้เหมาะสมที่สุดสามเวอร์ชัน: เวอร์ชันแรกจะถูกสร้างขึ้นตามค่าการปรับให้เหมาะสมที่ตั้งไว้ และ อีกสองรูปแบบคือการตั้งค่าการปรับให้เหมาะสมในปัจจุบัน
ทั้งสองโหมดช่วยให้คุณประหยัดเวลาได้อย่างมากในการค้นหาตัวเลือกการปรับให้เหมาะสมที่ดีที่สุด เนื่องจากไม่จำเป็นต้องบันทึกภาพด้วยการตั้งค่าการปรับให้เหมาะสมที่แตกต่างกันและการเปรียบเทียบภาพในภายหลัง นอกจากนี้ ยังสามารถประเมินไม่เพียงแต่คุณภาพของภาพที่ปรับให้เหมาะสมเท่านั้น แต่ยังรวมถึงขนาดและเวลาในการโหลดด้วยตัวเลือกการเชื่อมต่อที่แตกต่างกัน สำหรับการเปรียบเทียบ โหมดที่สะดวกที่สุดคือ 4-Up (สี่ตัวเลือก) ซึ่งช่วยให้คุณประเมินผลกระทบของการบีบอัดหรือการลดจานสีต่อคุณภาพของภาพและขนาดของภาพและกำหนดพารามิเตอร์การปรับให้เหมาะสมที่สุดในที่สุด
Illustrator ช่วยให้คุณสามารถปรับแต่งกราฟิกบนเว็บได้ไม่เพียงแต่ในรูปแบบ GIF, JPG, PNG-8 และ PNG-24 เท่านั้น แต่ยังรวมถึง SWF และ SVG อีกด้วย รูปภาพที่จัดทำดัชนีซึ่งมีจำนวนสีน้อยจะถูกบันทึกในรูปแบบ GIF รูปแบบ JPG ใช้เพื่อบันทึกรูปภาพ ภาพถ่าย และกราฟิกที่มีสีเต็มรูปแบบและระดับสีเทา เช่น การเติมไล่ระดับสี สำหรับภาพสีเต็มรูปแบบที่มีพื้นที่โปร่งใส จะใช้รูปแบบ PNG ซึ่งช่วยให้คุณสามารถบันทึกทั้งภาพที่จัดทำดัชนีและภาพสีเต็มได้ ในขณะที่ในรูปแบบ PNG-8 จำนวนสีสูงสุดที่เป็นไปได้ของภาพที่ปรับให้เหมาะสมคือ 256 และใน PNG-24 รูปภาพสามารถมีได้หลายล้านสีดังนั้นจึงคล้ายกับรูปแบบ JPEG ความแตกต่างระหว่าง PNG-24 และ JPEG คือวิธีการบีบอัดที่ใช้ในการปรับภาพให้เหมาะสมในรูปแบบ PNG-24 ไม่ได้ทำให้คุณภาพลดลง แต่ส่งผลให้ขนาดไฟล์เพิ่มขึ้น รูปแบบ SVG และ SWF เป็นการผสมผสานระหว่างกราฟิก ข้อความ และส่วนประกอบเชิงโต้ตอบ และยังสามารถปรับให้เหมาะสมได้อีกด้วย
มาดูตัวอย่างเฉพาะของการเพิ่มประสิทธิภาพรูปภาพกัน สมมติว่าโลโก้เว็บไซต์ได้รับการพัฒนาใน Illustrator (รูปที่ 3) ซึ่งเริ่มแรกบันทึกในรูปแบบ AI ความพยายามที่จะปรับให้เหมาะสมสำหรับเว็บทันทีจะไม่นำไปสู่สิ่งที่ดีเนื่องจากในกรณีนี้รูปภาพจะถูกครอบตัดโดยอัตโนมัติซึ่งจะไม่คำนึงถึงตำแหน่งที่แท้จริงของคำจารึกที่เกิดขึ้นอันเป็นผลมาจากการเสียรูป (รูปที่ 4 และ 5).
ดังนั้นเรามาลองส่งออกโลโก้เป็นรูปแบบ PSD ด้วยคำสั่ง File=>ส่งออก (File=>ส่งออก) ขนาดของรูปภาพที่สร้างขึ้นจะเป็น 143 KB เปิดไฟล์ PSD ที่เป็นผลลัพธ์แล้วใช้คำสั่ง File=>Save for Web เมื่อพิจารณาถึงจำนวนสีที่จำกัดในภาพ ในกรณีนี้ รูปแบบ GIF จะเหมาะสมที่สุด ซึ่งจำเป็นต้องตัดสินใจตั้งค่าเฉพาะ เมื่อทดลองใช้การตั้งค่า คุณจะมั่นใจได้ว่าคุณภาพที่ดีที่สุดจะเกิดขึ้นจากอัลกอริธึมการบีบอัดเริ่มต้นของโปรแกรม Selective สำหรับการปรับให้เรียบเนื่องจากการเติมแบบไล่ระดับสีจะเป็นการดีกว่าถ้าเลือกอัลกอริธึมที่มีการสร้างเสียงรบกวน สัญญาณรบกวน (รูปที่ 6) ขนาดของไฟล์การปรับให้เหมาะสมที่ได้จะเป็น 6.729 KB (รูปที่ 7) ในขณะที่ความโปร่งใสของพื้นหลังจะถูกรักษาไว้ ซึ่งสามารถตรวจสอบได้อย่างง่ายดายโดยการบันทึกรูปภาพในรูปแบบ GIF พร้อมกับไฟล์ HTML (รูปที่ 8) ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ emblem.html และ emblem.gif ในโฟลเดอร์ Primer1
องค์ประกอบเฉพาะที่ขาดไม่ได้ในการออกแบบเว็บเพจคือปุ่มควบคุมแบบกราฟิก เป็นไปไม่ได้เลยที่จะจินตนาการถึงหน้าเว็บที่ไม่มีพวกเขา การวาดปุ่มกลายเป็นประเภทพิเศษในปัจจุบัน และ Illustrator ช่วยให้คุณสร้างตัวเลือกที่ซับซ้อนที่สุดได้ ตัวอย่างเช่น ปุ่มที่ออกแบบให้เป็นวัตถุตารางและ/หรือมีมาสก์ซ้อนทับจะดูน่าประทับใจมากกว่าปุ่มปกติมาก
พิจารณาตัวเลือกในการสร้างปุ่มกลมและนูนใน Illustrator วาดวัตถุเวกเตอร์ในรูปแบบของวงกลมที่เต็มไปด้วยสีที่กำหนดเอง (รูปที่ 9) แล้วแปลงเป็นตาข่ายด้วยคำสั่ง Object => Create Gradient Mesh (Object => Create aไล่ระดับ mesh) โดยระบุสี่แถวและสี่ คอลัมน์และในรายการลักษณะที่ปรากฏให้เลือกตัวเลือก ถึงกึ่งกลาง ไฮไลต์เท่ากับ 60 (รูปที่ 10) เลือกเครื่องมือ Direct Selection และคลิกที่มุมซ้ายบนของวัตถุ เลือกจุดยึดที่อยู่ตรงนั้น (รูปที่ 11) เปลี่ยนสีของเซลล์ที่เกี่ยวข้องให้เป็นสีขาวโดยเลือกในพาเล็ต Swatches (รูปที่ 12)
ใช้เครื่องมือวงรี วางเครื่องหมายของเมาส์ไว้ที่กึ่งกลางของวงกลมที่สร้างขึ้นก่อนหน้านี้ และกดปุ่ม Alt และ Shift ค้างไว้ ยืดวงกลมใหม่ทับวงกลมเก่าเพื่อให้มีขนาดใหญ่กว่าวงกลมเก่า 1-2 พิกเซล ด้านข้าง กำหนดเส้นขอบสีดำ (เส้นขีด) กว้าง 1-2 พิกเซลแล้วเติมด้วยการไล่ระดับสีในแนวรัศมีในทิศทางจากสีแดงเป็นสีขาว (รูปที่ 13) ลากวัตถุเวกเตอร์ที่สร้างขึ้น 1-2 พิกเซลไปทางขวาและลง จากนั้นโดยไม่ต้องลบส่วนที่เลือกออก ให้คลิกขวาที่วัตถุนั้นแล้วเลือก Arrange=>Send To Back จากเมนูบริบท ผลลัพธ์จะเป็นช่องว่างสำหรับปุ่ม ดังแสดงในรูปที่ 1 14.
ตามกฎแล้วบนหน้าเว็บใด ๆ จะมีปุ่มประเภทเดียวกันหลายปุ่มที่แตกต่างกันเช่นเฉพาะในทิศทางของลูกศรที่วาดไว้ซึ่งระบุทิศทางการเคลื่อนที่ไปรอบ ๆ ไซต์ ลองพิจารณากรณีที่ง่ายที่สุดของการมีสองปุ่ม โดยปุ่มหนึ่งที่มีลูกศรลงหมายถึงการเลื่อนไปยังหน้าถัดไป และปุ่มที่มีลูกศรขึ้นจะหมายถึงการเลื่อนไปยังหน้าก่อนหน้า ในฐานะเทมเพลตลูกศร ลองใช้สามเหลี่ยมปกติที่วาดด้วยเครื่องมือรูปหลายเหลี่ยม ทาสีดำ และเพื่อให้ได้ผลดียิ่งขึ้น ออกแบบให้เป็นวัตถุแบบตาข่ายด้วย เลื่อนลูกศรไปที่ปุ่มและปรับตำแหน่งของวัตถุทั้งหมดที่สัมพันธ์กันโดยใช้ปุ่มที่เกี่ยวข้องในพาเล็ต Align ปุ่มผลลัพธ์ปุ่มแรกจะแสดงในรูปที่ 1 15. มาสร้างสำเนาของเลเยอร์ด้วยปุ่มโดยเลือกคำสั่ง Duplicate Layer Layers ดังนั้นเราจะได้เลเยอร์ที่เหมือนกันสองชั้น จากนั้นเลือกลูกศรบนสำเนาของเลเยอร์แล้วหมุน 180° โดยเลือกคำสั่ง Transform=>Rotate Transformation=>Rotate จากเมนูบริบท เราจะได้ปุ่มเดียวกันดังแสดงในรูปที่ 1 16. โปรดทราบว่าจะสะดวกกว่ามากในการจัดเก็บปุ่มประเภทเดียวกันทั้งหมดสำหรับโปรเจ็กต์เดียวในไฟล์เดียวบนเลเยอร์ที่แตกต่างกัน ซึ่งแสดงให้เห็นในกรณีนี้
ตอนนี้คุณต้องบันทึกเวอร์ชันที่ปรับให้เหมาะสมของแต่ละปุ่ม ขั้นแรกให้ทำให้มองไม่เห็นเลเยอร์ด้านล่าง ในกรณีนี้ ปุ่มบนชั้นบนสุดจะยังคงอยู่ เลือกคำสั่ง File=>Save for Web กำหนดค่าพารามิเตอร์การปรับให้เหมาะสมของปุ่ม เช่น ดังแสดงในรูป 17. คลิกปุ่มบันทึกแล้วป้อนชื่อไฟล์ ปุ่มที่บันทึกไว้ในท้ายที่สุดจะแสดงในรูป 18. ตอนนี้กลับมองเห็นเลเยอร์ด้านล่าง ทำให้ชั้นบนสุดมองไม่เห็นและบันทึกปุ่มที่สองในลักษณะเดียวกัน โดยตั้งชื่ออื่น ผลลัพธ์จะแสดงในรูป 19.
ตอนนี้สิ่งที่เหลืออยู่คือต้องแน่ใจว่าปุ่มต่างๆ ดูเป็นที่ยอมรับบนเว็บเพจและวางไว้บนเพจที่กำหนดเอง (รูปที่ 20) ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ Primer2.html และรูปภาพกราฟิกสองภาพในโฟลเดอร์รูปภาพ (โฟลเดอร์ Primer2)
หากต้องการ ในระหว่างกระบวนการปรับให้เหมาะสม คุณสามารถเปลี่ยนปุ่มให้เป็นชิ้นได้อย่างง่ายดาย ในกรณีนี้ หลังจากเลือกคำสั่ง File => บันทึกสำหรับเว็บ (ไฟล์ => บันทึกสำหรับเว็บ) และตั้งค่าพารามิเตอร์การปรับให้เหมาะสม คุณควรเลือกเครื่องมือ Slice Select จากแผงเครื่องมือและดับเบิลคลิกที่รูปภาพ ซึ่งในที่สุดจะ เปลี่ยนเป็นชิ้นที่มีหมายเลขซีเรียล 1 โดยอัตโนมัติ (รูปที่ 21) การดับเบิลคลิกอีกครั้งจะเป็นการเปิดหน้าต่าง Slice Options ซึ่งคุณจะต้องระบุลิงค์และเลือกเปลี่ยนชื่อของ Slice (รูปที่ 22) จากนั้นจึงบันทึกภาพที่ปรับให้เหมาะสม ผลลัพธ์ในกรณีนี้คือไฟล์ Primer3.html (รูปที่ 23) และ Primer3.gif (โฟลเดอร์ Primer3)
วิธีหนึ่งในการทำให้เพจมีชีวิตชีวาคือการแนะนำองค์ประกอบการออกแบบที่เปลี่ยนรูปลักษณ์ (หรือสถานะ) ขึ้นอยู่กับพฤติกรรมของเมาส์ หรือในกรณีอื่นๆ เกิดขึ้น ซึ่งน้อยกว่าปกติเมื่อเกิดสถานการณ์อื่นๆ เช่น การปรับขนาด การเลื่อน การโหลด ข้อผิดพลาด ฯลฯ
ในบรรดาองค์ประกอบดังกล่าว สิ่งที่มีชื่อเสียงที่สุดคือองค์ประกอบแบบโรลโอเวอร์ (จากภาษาอังกฤษแบบโรลโอเวอร์ โรลโอเวอร์ เทิร์นโอเวอร์) องค์ประกอบที่เปลี่ยนรูปลักษณ์ภายใต้อิทธิพลของเมาส์ ตัวอย่างของการโรลโอเวอร์ทั่วไปคือปุ่มแบบเคลื่อนไหว การโรลโอเวอร์มักใช้เมื่อสร้างองค์ประกอบการนำทางเว็บไซต์อื่นๆ ในความเป็นจริง การโรลโอเวอร์ใดๆ ไม่ใช่ภาพเดียว แต่หลายภาพ (สูงสุดสี่ภาพ) ซึ่งแต่ละภาพสอดคล้องกับเหตุการณ์เฉพาะ เหตุการณ์หลักได้รับการพิจารณาว่ามีดังต่อไปนี้: สถานะปกติปกติ, การเลื่อนเคอร์เซอร์ของเมาส์ไปเหนือองค์ประกอบ และการกดปุ่มซ้ายของเมาส์ลงเมื่อวางเคอร์เซอร์ไว้เหนือองค์ประกอบ ตามทฤษฎี เหตุการณ์ต่างๆ เช่น คลิกปล่อยปุ่มซ้ายของเมาส์หลังจากคลิก ขึ้นหลังจากปล่อยปุ่ม ออกเมื่อออกจากโซนที่ใช้งานอยู่ สามารถเกี่ยวข้องได้ อย่างไรก็ตาม ในทางปฏิบัติ มักถูกจำกัดให้เปลี่ยนองค์ประกอบเฉพาะสำหรับสามหรือสองเหตุการณ์แรกเท่านั้น
การโรลโอเวอร์แบบคลาสสิกในแง่คลาสสิก การโรลโอเวอร์คือชุดของภาพกราฟิกในรูปแบบ GIF และโค้ด HTML ที่เกี่ยวข้อง ซึ่งรูปภาพหนึ่งจะแทนที่รูปภาพอื่นในหน้าต่างเบราว์เซอร์ ทั้งนี้ขึ้นอยู่กับพฤติกรรมของเมาส์
Illustrator ไม่ได้มีไว้สำหรับสร้างการโรลโอเวอร์ในรูปแบบคลาสสิกโดยตรง แต่สามารถช่วยในการพัฒนาองค์ประกอบเริ่มต้นสำหรับพวกมันได้ แนวคิดในกรณีนี้คือการสร้างเลเยอร์ที่มีรูปภาพที่สอดคล้องกับเหตุการณ์แรก จากนั้นทำสำเนาเลเยอร์และแปลงรูปภาพให้ตรงกับเหตุการณ์ที่สอง และอื่นๆ รูปภาพหลายเลเยอร์ที่ได้จะถูกส่งออกไปยังไฟล์ PSD โดยที่เลเยอร์ถูกเก็บรักษาไว้ โดยพื้นฐานจากการสร้างโรลโอเวอร์ในโปรแกรม Image Ready ข้อดีของการใช้ Illustrator เช่นเดียวกับในกรณีอื่นๆ ก็คือคุณลักษณะที่น่าสนใจจำนวนหนึ่งที่ไม่มีในซอฟต์แวร์อื่น ควบคู่ไปกับความสะดวกในการแปลงกราฟิกแบบเวกเตอร์
เรามาลองสร้างโรลโอเวอร์ในรูปแบบของคำจารึกที่เปลี่ยนสีตามพฤติกรรมของเมาส์ เปิด Illustrator และสร้างรูปร่างในรูปแบบของสี่เหลี่ยมผืนผ้าโค้งมนที่เต็มไปด้วยสีดำ (รูปที่ 24) ทำสำเนาและวางไว้ในส่วนที่ว่างของหน้าจอ แปลงสำเนาแรกของสี่เหลี่ยมให้เป็นวัตถุตาข่ายโดยมีไฮไลท์อยู่ตรงกลาง (คำสั่ง Object=>สร้างวัตถุตาข่ายไล่ระดับสี=>สร้างตาข่ายไล่ระดับสี) โดยระบุสี่แถวและสิบคอลัมน์ (รูปที่ 25) เปิดใช้งานสำเนาที่สองของสี่เหลี่ยมและตั้งค่าเป็นการเติมแบบไล่ระดับสีโดยประมาณดังแสดงในรูป 26. วางซ้อนวัตถุไล่ระดับสีที่ด้านบนของตาข่าย ลดความทึบของวัตถุไล่ระดับสีเหลือประมาณ 80% และปรับขนาดประมาณ 1 พิกเซลเพื่อจำลองเอฟเฟกต์ของการชนในที่สุด จากนั้นพิมพ์คำจารึกไว้ด้านบนของวัตถุ ในรูปแบบดั้งเดิมปล่อยให้มีสีขาวซึ่งจะสอดคล้องกับสถานะปกติ (รูปที่ 27) จากนั้นเมื่อสถานะโรลโอเวอร์เปลี่ยนไปสีของคำจารึกจะเปลี่ยนเป็นสีเขียวเมื่อคุณวางเมาส์เหนือ เครื่องหมายเมาส์เหนือมัน (สถานะโอเวอร์) และเป็นสีน้ำเงินเมื่อกดปุ่มเมาส์ (สถานะลง)
ให้ความสนใจกับจานสี Layers ในขั้นตอนนี้มีเพียงเลเยอร์เดียวเท่านั้น ทำสำเนาของเลเยอร์นี้สองชุดโดยใช้คำสั่ง Duplicate Layer จากเมนู Layers palette โดยจะมีสามเลเยอร์ในพาเล็ต (รูปที่ 28) จากนั้นในสำเนาแรกของเลเยอร์เปลี่ยนสีของคำจารึกเป็นสีเขียวและในสำเนาที่สองเป็นสีน้ำเงิน (รูปที่ 29) เป็นผลให้ได้รับช่องว่างที่จำเป็นสำหรับการโรลโอเวอร์
ส่งออกรูปภาพที่สร้างเป็นรูปแบบ PSD โดยรักษาเลเยอร์ไว้ โดยใช้คำสั่ง File=>ส่งออก (ไฟล์=>ส่งออก) และเลือกรูปแบบสี RGB (รูปที่ 30) เปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 31 และ 32) สร้างเฟรมตามเลเยอร์โดยเลือกคำสั่ง Make Frames From Layers จากเมนู Animation palette หน้าต่างแอนิเมชั่นจะมีลักษณะดังในรูป 33. ในกรณีนี้ สถานะปกติเดียวจะถูกสร้างขึ้นในแถบสีแบบโรลโอเวอร์
จากนั้นในหน้าต่างแอนิเมชั่น ให้เลือกเฟรมที่สอดคล้องกับสถานะที่เหนี่ยวนำ และเลเยอร์การคัดลอกเลเยอร์ 1 จะถูกเลือกโดยอัตโนมัติในพาเล็ตเลเยอร์ (รูปที่ 34) ไปที่จานสีแบบโรลโอเวอร์และคลิกที่ปุ่มสร้างสถานะแบบโรลโอเวอร์ (สร้างสถานะแบบโรลโอเวอร์) 35 ซึ่งจะทำให้สถานะ Over State ปรากฏในจานสีแบบโรลโอเวอร์ (รูปที่ 36) สร้าง Down State ในลักษณะเดียวกัน เปิดใช้งานสถานะ Normal ในพาเล็ต Rollovers และลบเฟรมทั้งหมดในพาเล็ต Animation ยกเว้นเฟรมที่ควรสอดคล้องกับสถานะ Normal ด้วยเหตุนี้ ในแต่ละสถานะการโรลโอเวอร์จะมีเพียงเฟรมเดียวในแผงภาพเคลื่อนไหว (รูปที่ 37, 38 และ 39)
ข้าว. 38. มุมมองของรูปภาพ หน้าต่างแอนิเมชั่น และพาเล็ตเลเยอร์และโรลโอเวอร์สำหรับสถานะโอเวอร์
ตรวจสอบผลลัพธ์โดยคลิกปุ่มดูตัวอย่างในเบราว์เซอร์เริ่มต้นบนแถบเครื่องมือและไปที่หน้าต่างเบราว์เซอร์ (รูปที่ 40) หลังจากนั้น ให้บันทึกไฟล์โดยใช้คำสั่ง File=>Save Optimized และระบุตัวเลือก HTML และ Images (*.html) ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ Primer4.html และชุดรูปภาพกราฟิกในโฟลเดอร์รูปภาพ
ข้าว. 40. หน้าต่างเบราว์เซอร์พร้อมองค์ประกอบแบบโรลโอเวอร์
การโรลโอเวอร์ SVGรูปแบบ SVG (Scalable Vector Graphics) ที่ได้รับความนิยมมากขึ้นเรื่อยๆ ซึ่งสร้างขึ้นตามมาตรฐาน XML ยังช่วยให้คุณได้รับองค์ประกอบเชิงโต้ตอบที่หลากหลาย โดยเฉพาะอย่างยิ่งการโรลโอเวอร์ แต่ในทางปฏิบัติ รูปแบบนี้จะถูกนำไปใช้แตกต่างไปจากเดิมอย่างสิ้นเชิง เป็นที่น่าสังเกตว่าการสร้างการโรลโอเวอร์ SVG แบบโต้ตอบซึ่งแตกต่างจากแบบคลาสสิกเมื่อโค้ด HTML ที่เกี่ยวข้องถูกสร้างขึ้นโดยอัตโนมัติอย่างสมบูรณ์นั้นต้องอาศัยความรู้เกี่ยวกับภาษา JavaScript และความเข้าใจในหลักการพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ
ในการทำงานกับวัตถุ SVG จะมีจานสีพิเศษ SVG Interactivity ซึ่งสามารถเปิดได้อย่างง่ายดายโดยใช้คำสั่ง Window => SVG Interactivity (Window => SVG Interactiveivity) รูปที่ 41.
ลองพิจารณาตัวเลือกนี้สำหรับการสร้างแบบโรลโอเวอร์โดยใช้ตัวอย่างของปุ่มโต้ตอบ สีของคำจารึกที่จะเปลี่ยนจากสีดำเป็นสีน้ำเงินเมื่อคุณวางเมาส์ไว้ และเปลี่ยนเป็นสีดำอีกครั้งเมื่อเมาส์ออกจากโซนที่ใช้งานอยู่
สร้างปุ่มสี่เหลี่ยมที่มีขอบโค้งมน และเลือกการเติมไล่ระดับสีที่เหมาะสม เช่น ดังแสดงในรูปที่ 1 42. ปรับความโปร่งใสของปุ่มในพาเล็ตความโปร่งใส ในตัวอย่างนี้ ค่าความทึบตั้งไว้ที่ 50% ทำสำเนาของปุ่มเติมด้วยสีเขียวเข้ม (รูปที่ 43) จากนั้นแปลงเป็นวัตถุตาข่ายด้วยคำสั่ง Object => Create Gradient Mesh โดยระบุสี่แถวและสิบคอลัมน์ และในรายการลักษณะที่ปรากฏ (มุมมอง) โดยเลือกตัวเลือก To Center และตั้งค่า Highlight เป็น 100 ลดความทึบของเลเยอร์ด้วยวัตถุ mesh ลงประมาณ 40% (รูปที่ 44) วางวัตถุตาข่ายไว้ด้านบนของวัตถุไล่ระดับสี และปุ่มจะมีลักษณะคล้ายกับวัตถุที่แสดงในรูปที่ 1 45.
ข้าว. 44. เปลี่ยนสำเนาของปุ่มให้เป็นวัตถุแบบตาข่าย
กดปุ่มให้สมบูรณ์ตามคำจารึกที่ต้องการ และปรับตำแหน่งโดยใช้ปุ่มที่เกี่ยวข้องในพาเล็ต Align รูปภาพที่ได้จะมีหนึ่งเลเยอร์โดยมีวัตถุสามชิ้นวางซ้อนกัน (รูปที่ 46) กิจกรรมที่กำหนดเวลาไว้จะสัมพันธ์กับออบเจ็กต์ข้อความ ดังนั้นเพื่อความสะดวก ให้เปลี่ยนชื่อเป็นข้อความโดยคลิกสองครั้งที่ออบเจ็กต์แล้วป้อนชื่อใหม่ ในทำนองเดียวกัน เปลี่ยนชื่อเลเยอร์จากเลเยอร์ 1 เป็นเลเยอร์ (รูปที่ 47)
การประมวลผลเหตุการณ์เกี่ยวข้องกับการใช้ขั้นตอน JavaScript ดังนั้นคุณจึงต้องรวมไฟล์ที่อธิบายขั้นตอนเหล่านี้ เรียกว่า Events.js และบันทึกลงในดิสก์ในโฟลเดอร์ Sample Files\Sample Art\SVG\SVG เมื่อคุณติดตั้ง Adobe Illustrator หากต้องการเชื่อมต่อไฟล์ Events.js ให้ใช้คำสั่ง JavaScript Files SVG Interactivity (รูปที่ 48) ถัดไปคุณต้องคลิกปุ่มเพิ่มและค้นหาไฟล์ที่ต้องการบนฮาร์ดไดรฟ์ของคุณ เมื่อชื่อของเขาปรากฏในช่อง URL (รูปที่ 49) ให้คลิกปุ่มเสร็จสิ้น
ข้าว. 48. การเลือกคำสั่งไฟล์ JavaScript
ถัดไป คุณต้องกำหนดการตอบสนองต่อเหตุการณ์เมาส์สำหรับออบเจ็กต์ข้อความ เลือกวัตถุข้อความในฟิลด์เหตุการณ์ของจานสีการโต้ตอบ SVG เลือกเหตุการณ์ onmouseover elemColor(evt, "Text", "#3333FF") ซึ่งจะหมายความว่าเมื่อเมาส์อยู่เหนือวัตถุข้อความ สีของมันจะเปลี่ยนเป็น สีน้ำเงิน (รูปที่ 50 ). เพื่อให้สีข้อความเปลี่ยนเป็นสีดำหลังจากที่เมาส์ออกจากพื้นที่ใช้งาน คุณจะต้องสร้างเหตุการณ์ onmouseout อื่น โดยเลือกในฟิลด์เหตุการณ์ของจานสีการโต้ตอบ SVG จากนั้นในบรรทัดการดำเนินการให้ป้อนข้อความ elemColor(evt, "Text", "#000000") สิ่งนี้จะทำให้สีกลับเป็นสีดำ (รูปที่ 51)
ข้าว. 51. รูปลักษณ์สุดท้ายของจานสีการโต้ตอบ SVG สำหรับวัตถุข้อความ
บันทึกโรลโอเวอร์ที่สร้างเป็นไฟล์ SVG ด้วยคำสั่ง File=>บันทึกเป็น (ไฟล์=>ประเภทไฟล์ รูปแบบ SVG จากนั้นตั้งค่าตัวเลือกในการบันทึกไฟล์ SVG ดังแสดงในรูปที่ 52 หลังจากบันทึกแล้วคุณจะได้รับเพียงไฟล์เดียวเท่านั้น ไฟล์เดียวที่มีนามสกุล SVG และไม่ใช่สองไฟล์ ในกรณีของการโรลโอเวอร์แบบคลาสสิก ในกรณีนี้ ได้รับไฟล์ Primer5.svg (โฟลเดอร์ Primer5) อย่างไรก็ตาม เพื่อให้โรลโอเวอร์ทำงานได้จริง คุณต้องเพิ่มเติม คัดลอกไฟล์ Events.js ไปยังโฟลเดอร์ที่มีคำอธิบายไฟล์ SVG ของขั้นตอน JavaScript หลังจากนี้ คุณสามารถตรวจสอบการทำงานของโรลโอเวอร์ได้
นอกจากนี้ยังสามารถใช้รูปแบบ SVG เพื่อถ่ายทอดภาพเคลื่อนไหวได้ ลองสร้างองค์ประกอบภาพเคลื่อนไหวแบบง่ายๆ (ในกรณีนี้จะเป็นข้อมูลเกี่ยวกับบริษัท) ซึ่งจะปรากฏบนหน้าจอเมื่อคุณวางเมาส์ไว้เหนือวัตถุกราฟิกที่เกี่ยวข้องและหายไปเมื่อคุณลบเมาส์ออกจากองค์ประกอบแบบโต้ตอบ
มาสร้างออบเจ็กต์กราฟิกและข้อความต่อไปนี้โดยประมาณ ดังแสดงในรูป 54. มาเปลี่ยนชื่อวัตถุที่สร้างขึ้นทั้งหมดด้วยวิธีที่สะดวกโดยคลิกที่ชื่อของวัตถุถัดไปในจานสีเลเยอร์ตามลำดับแล้วป้อนชื่อที่ต้องการ (รูปที่ 55) โปรดทราบว่าสิ่งที่ไฮไลต์ไว้ในรูปที่ วัตถุ 56 รายการ Text1, Text2, Text3 และ Path1 จะมองเห็นได้เสมอ และวัตถุอื่นๆ ทั้งหมดเมื่อคุณวางเมาส์เหนือวัตถุ Text1 เท่านั้น
ข้าว. 54. มุมมองดั้งเดิมของภาพ
รวมไฟล์ Events.js ที่อธิบายขั้นตอน JavaScript โดยใช้คำสั่ง JavaScript Files จากแผง SVG Interactivity คลิกปุ่มเพิ่ม ชี้ไปที่ไฟล์ที่ต้องการบนฮาร์ดไดรฟ์ของคุณ และคลิกปุ่มเสร็จสิ้น
กำหนดการตอบสนองต่อเหตุการณ์เมาส์สำหรับวัตถุ Text1 เลือกวัตถุข้อความในฟิลด์เหตุการณ์ของจานสีการโต้ตอบ SVG เลือกเหตุการณ์ onmouseover และในบรรทัดด้านล่างให้ป้อนข้อความ elemShow(evt, "Text4"); elemShow(evt, "Path2") . เป็นผลให้เมื่อเมาส์อยู่เหนือวัตถุ Text1 วัตถุ Text4 และ Path2 จะมองเห็นได้ โปรดทราบว่าหากต้องดำเนินการหลายอย่างเมื่อมีเหตุการณ์เกิดขึ้น จะต้องระบุการดำเนินการเหล่านั้นโดยใช้เครื่องหมาย “;” จากนั้นดำเนินการที่คล้ายกันสำหรับเหตุการณ์ onmouseout โดยป้อนข้อความซึ่งจะหมายถึงการซ่อนวัตถุ (รูปที่ 57)
บันทึกผลลัพธ์เป็นไฟล์ SVG โดยใช้คำสั่ง File=>บันทึกเป็น ระบุชื่อไฟล์ เลือกรูปแบบ SVG ในช่องประเภทไฟล์ จากนั้นตั้งค่าตัวเลือกสำหรับบันทึกไฟล์ SVG ตามรูปที่ 1 58. หลังจากบันทึกแล้วจะได้รับไฟล์ Primer6.svg (โฟลเดอร์ Primer6) อย่าลืมคัดลอกไฟล์ Events.js ไปยังโฟลเดอร์ที่มีไฟล์นี้ หากคุณเรียกใช้ไฟล์ที่สร้างขึ้น คุณจะเห็นผลลัพธ์ดังแสดงในรูปที่ 1 59. นี่คือเกือบสิ่งที่คุณต้องการ สิ่งเดียวที่ไม่รวมอยู่ในแผนของเราคือการปรากฏตัวครั้งแรกของออบเจ็กต์ Text 4 และ Path 2 เมื่อโหลด หากต้องการกำจัดข้อบกพร่องนี้ ให้เลือกข้อมูลอ็อบเจ็กต์ทั้งสองพร้อมกันและสร้างการดำเนินการสำหรับข้อมูลเหล่านั้น elemHide(evt, "Text4"); elemHide(evt, "Path2") ที่เหตุการณ์ onload (รูปที่ 60) บันทึกไฟล์อีกครั้งและตรวจสอบให้แน่ใจว่าตอนนี้ออบเจ็กต์ Text4 และ Path2 มองเห็นได้เฉพาะเมื่อคุณวางเมาส์เหนือออบเจ็กต์ Text1 เท่านั้น
หน้าเว็บใดๆ ก็ตามจะคิดไม่ถึงหากไม่มีภาพเคลื่อนไหวบนเว็บ รวมถึงภาพเคลื่อนไหวแบบ GIF หนึ่งในตัวเลือกในการสร้างคือการใช้แอปพลิเคชัน Adobe ImageReady ซึ่งอนุญาตให้สร้างภาพเคลื่อนไหวจากเลเยอร์เหนือสิ่งอื่นใด ในกรณีนี้ ภาพหลายชั้นสามารถเตรียมได้ในแอปพลิเคชันต่างๆ รวมถึง Adobe Illustrator
ง่ายมากที่จะสร้างแอนิเมชันโดยใช้องค์ประกอบจากพาเล็ตสัญลักษณ์ เปิดด้วยคำสั่ง Window=>Symbols หรือจากไลบรารีสัญลักษณ์ตัวใดตัวหนึ่งที่สามารถเปิดได้โดยใช้คำสั่ง Window=>Symbol Libraries )
ตัวอย่างเช่น เราจะพยายามเพิ่มขนาดของวัตถุสัญลักษณ์ใด ๆ ขั้นตอนสำคัญของกระบวนการเพิ่มวัตถุจะต้องถูกตั้งค่าในเลเยอร์ที่แยกจากกัน ขั้นแรก เพียงวางวัตถุสัญลักษณ์ไว้เหนืออีกวัตถุหนึ่ง จากนั้นจึงเพิ่มขนาดของวัตถุลำดับถัดๆ ไป เช่น ดังแสดงในรูปที่ 1 61. ด้วยเหตุนี้ เลเยอร์หนึ่งที่มีวัตถุจำนวนมากจะถูกสร้างขึ้นในพาเล็ตเลเยอร์ (รูปที่ 62) หากคุณส่งออกรูปภาพนี้เป็นรูปแบบ PSD โดยตรง จะไม่ให้อะไรเลยเนื่องจากมีเพียงเลเยอร์เดียวและโดยธรรมชาติแล้วเมื่อคุณเปิดไฟล์ PSD ในโปรแกรม ImageReady ก็จะมีเพียงเลเยอร์เดียวเท่านั้น ดังนั้นคุณต้องวางวัตถุบนชั้นที่ต่างกันก่อน ซึ่งสามารถทำได้หลายวิธี วิธีที่ง่ายที่สุดคือเลือกเลเยอร์ 1 ในพาเล็ตเลเยอร์แล้วใช้คำสั่ง Release to Layer ผลลัพธ์ก็คือแต่ละวัตถุจะถูกย้ายไปยังเลเยอร์ของตัวเอง แต่วัตถุทั้งหมดจะซ้อนกันอยู่ในเลเยอร์ 1 ดังนั้น คุณจะต้องลากเลเยอร์ที่ซ้อนกันทั้งหมดไปที่ด้านบนของพาเล็ตเลเยอร์ด้วยตนเองเพื่อให้อยู่เหนือเลเยอร์เลเยอร์ 1 จากนั้นเพียงลบเลเยอร์เลเยอร์ 1 ที่ว่างในขณะนี้ (รูปที่ 63) ส่งออกรูปภาพเป็นรูปแบบ PSD โดยใช้คำสั่ง File=>ส่งออก พร้อมการตั้งค่าดังในรูป 64.
โหลดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 65 และ 66) เปิดเมนูพาเล็ต Animation Make Frames From Layers เป็นผลให้มีการสร้างห้าเฟรมซึ่งแต่ละเฟรมจะสอดคล้องกับเลเยอร์ของตัวเองและหน้าต่างพาเล็ตภาพเคลื่อนไหวจะมีลักษณะเหมือนในรูป 67.
หลังจากนี้ ให้กำหนดระยะเวลาของแต่ละเฟรมที่สร้างขึ้นในกรณีนี้ ระยะเวลาสำหรับเฟรมทั้งหมดจะตั้งไว้ที่ 0.2 วินาที จากนั้นบันทึกภาพเคลื่อนไหวด้วยการเพิ่มประสิทธิภาพโดยใช้คำสั่ง File=>Save Optimized (File=>Save withOptimization) ผลลัพธ์ที่ได้อาจคล้ายกับรูปที่. 68.
สะดวกยิ่งขึ้นในการรับช่องว่างที่สามารถแปลงเป็นภาพเคลื่อนไหวใน ImageReady ได้อย่างง่ายดายเพื่อใช้ฟังก์ชัน Live Blends ของ Illustrator การใช้ Illustrator และ ImageReady ร่วมกันนี้จะช่วยเร่งกระบวนการสร้างภาพเคลื่อนไหว GIF ได้เร็วขึ้นอย่างมาก
ตัวอย่างเช่น วาดวัตถุหลากสีสองชิ้นตามใจชอบ จากนั้นเชื่อมต่อวัตถุเหล่านั้นด้วยลิงก์ผสมผสานด้วยพารามิเตอร์ที่เหมาะสม (รูปที่ 69) ไม่สามารถใช้ไฟล์นี้เพื่อสร้างภาพเคลื่อนไหวโดยตรงได้ เนื่องจากรูปภาพอยู่บนเลเยอร์เดียว (รูปที่ 70) ดังนั้น ขั้นแรกคุณจะต้องวางแต่ละองค์ประกอบของวัตถุผสมผสานบนเลเยอร์ที่แยกจากกัน หากต้องการทำสิ่งนี้ในหน้าต่างเลเยอร์ให้เลือกบรรทัดเปิดใช้งานเมนูจานสีโดยคลิกที่ลูกศรสีดำที่มุมขวาบนแล้วเลือกคำสั่ง Release to Layers Sequence (รูปที่ 71) กดปุ่ม Shift ค้างไว้เลือกเลเยอร์ที่สร้างขึ้นแล้ววางไว้เหนือเลเยอร์เลเยอร์ 1 จากนั้นลบเลเยอร์เลเยอร์ 1 ออกไปแล้วย้ายไปที่ถังขยะดังนั้นพาเล็ตเลเยอร์จะอยู่ในรูปแบบเดียวกับในรูปที่ 1 72.
ข้าว. 70. สถานะเริ่มต้นของหน้าต่างเลเยอร์
ส่งออกไฟล์ที่สร้างเป็นรูปแบบ PSD โดยใช้คำสั่ง File=>ส่งออก เปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 73) โปรดทราบว่าเลเยอร์ทั้งหมดที่สร้างใน Illustrator จะปรากฏในหน้าต่างเลเยอร์ (รูปที่ 74) และในหน้าต่างแอนิเมชั่นจะมีเพียงเฟรมเดียวเท่านั้นในตอนนี้
เปิดใช้งานเมนูจานสีภาพเคลื่อนไหวโดยคลิกที่ลูกศรสีดำที่มุมขวาบนของจานสีและเลือกคำสั่งสร้างเฟรมจากเลเยอร์ ด้วยเหตุนี้ ในตัวอย่างนี้ ห้าเฟรมจะถูกสร้างขึ้น และหน้าต่างจานสีภาพเคลื่อนไหวจะใช้ แบบฟอร์มตามรูปที่. 75. เลือกเฟรมทั้งหมดในขณะที่กดปุ่ม Shift ค้างไว้และตั้งค่าระยะเวลาเฟรมที่เหมาะสมในตัวอย่างนี้ แต่ละเฟรมจะใช้เวลา 0.2 วินาทีเท่ากัน จากนั้นบันทึกไฟล์ด้วยการเพิ่มประสิทธิภาพโดยใช้คำสั่ง File=>Save Optimized (File=>Save withOptimization) โดยตั้งค่าตัวเลือก Images Only (*.gif) ในรายการประเภทไฟล์ ภาพเคลื่อนไหวจะมีลักษณะคล้ายกับรูป 76.
สิ่งที่น่าสนใจกว่านั้นไม่ใช่การเคลื่อนไหว แต่เป็นการปรับขนาดวัตถุที่ผสมผสานกันอย่างราบรื่น ตัวอย่างเช่น คุณสามารถใช้การเปลี่ยนผ่านแบบผสมผสานที่สร้างไว้แล้วได้ ในกรณีนี้ หลังจากสร้างเลเยอร์แยกกันสำหรับองค์ประกอบการเปลี่ยนผ่านแบบผสมผสานแต่ละรายการแล้ว ให้วางวัตถุทั้งหมดไว้ด้านบนของแต่ละวัตถุโดยใช้ปุ่ม "Horizontal Align Center" และ "Vertical Align Center" ของพาเล็ต Align (รูปที่ 77)
ส่งออกไฟล์ที่สร้างขึ้นเป็นรูปแบบ PSD (ไฟล์=>ส่งออกไฟล์=>ส่งออก) และเปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 78) สร้างเฟรมภาพเคลื่อนไหวตามเลเยอร์ (สร้างเฟรมจากเลเยอร์ สร้างเฟรมจากเลเยอร์) และเลือกระยะเวลาที่เหมาะสมสำหรับเฟรมเหล่านั้น (รูปที่ 79) จากนั้นเพื่อให้แอนิเมชั่นมีประสิทธิภาพมากขึ้น ให้คัดลอกเฟรมที่มีอยู่ แต่ในลำดับย้อนกลับเพื่อให้รูปภาพเพิ่มขึ้นก่อนแล้วจึงลดลง และต่อไปเป็นวงกลม (รูปที่ 80) จากนั้นบันทึกไฟล์การปรับให้เหมาะสม (ไฟล์=>บันทึกไฟล์ที่ปรับให้เหมาะสม=>บันทึกด้วยการเพิ่มประสิทธิภาพ) ภาพเคลื่อนไหวที่ได้จะแสดงในรูป 81.
ข้าว. 80. สถานะของหน้าต่างแอนิเมชั่นหลังจากการทำซ้ำเฟรม
ข้าว. 81. แอนิเมชั่นที่เสร็จแล้ว
เมื่อเร็วๆ นี้ แอนิเมชันกราฟิก SVG (Scalable Vector Graphics) ประเภทต่างๆ บนเว็บไซต์และแอปพลิเคชันได้รับความนิยมอย่างมาก เนื่องจากเบราว์เซอร์ล่าสุดทั้งหมดรองรับรูปแบบนี้แล้ว นี่คือข้อมูลเกี่ยวกับการรองรับเบราว์เซอร์สำหรับ SVG
บทความนี้จะกล่าวถึงตัวอย่างที่ง่ายที่สุดของภาพเคลื่อนไหวเวกเตอร์ SVG โดยใช้ปลั๊กอิน Lazy Line Painter ของ Jquery แบบน้ำหนักเบา
แหล่งที่มาเพื่อให้งานนี้สมบูรณ์และเข้าใจอย่างถ่องแท้ ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, Jquery เป็นสิ่งที่พึงปรารถนา แต่ไม่จำเป็น หากคุณต้องการสร้างภาพเคลื่อนไหว SVG) มาเริ่มกันเลย!
และนี่คือขั้นตอนที่เราต้องปฏิบัติตาม:
1. สร้างโครงสร้างไฟล์ที่ถูกต้อง
บริการ Initializr จะช่วยเราในเรื่องนี้ โดยเราต้องเลือกพารามิเตอร์ตามภาพด้านล่าง
- Classic H5BP (แผ่นหม้อต้ม HTML5)
- ไม่มีเทมเพลต
- เพียง HTML5 Shiv
- ย่อเล็กสุด
- คลาส IE
- กรอบโครเมียม
- จากนั้นคลิกดาวน์โหลดเลย!
2. ดาวน์โหลดและเชื่อมต่อปลั๊กอิน
เนื่องจาก Initializr มาพร้อมกับไลบรารี Jquery ล่าสุด จากไฟล์เก็บถาวรที่เราต้องดาวน์โหลดจากที่เก็บโปรเจ็กต์ Lazy Line Painter เราจึงต้องถ่ายโอนไฟล์เพียง 2 ไฟล์ไปยังโปรเจ็กต์ของเรา อันแรกคือ 'jquery.lazylinepainter-1.1.min.js' (เวอร์ชันปลั๊กอินอาจแตกต่างกัน) ซึ่งอยู่ในรูทของโฟลเดอร์ผลลัพธ์ อันที่สองคือ example/js/vendor/raphael-min.js
2 ไฟล์นี้อยู่ในโฟลเดอร์ js และเราเชื่อมต่อพวกมันเข้ากับ index.html ของเราก่อน main.js ดังนี้:
3. วาดภาพโครงร่างสุดเท่ใน Adobe Illustrator
ตัวอย่างเช่น คุณสามารถใช้ไอคอนในไฟล์แนบได้
4. แปลงรูปภาพของเราเป็น Lazy Line Converter
เพียงลากไอคอนของคุณไปที่หน้าต่างในภาพด้านล่าง
ความหนา สีของโครงร่าง และความเร็วของแอนิเมชันสามารถเปลี่ยนแปลงได้ในโค้ดเอง ซึ่งจะปรากฏขึ้นหลังจากการแปลง!
5. วางโค้ดผลลัพธ์ลงใน main.js
ตอนนี้เราเพียงแค่วางโค้ดผลลัพธ์ลงในไฟล์ main.js ที่ว่างเปล่า
พารามิเตอร์:
strokeWidth - ความหนาของโครงร่าง
strokeColor — สีเค้าร่าง
คุณยังสามารถเปลี่ยนความเร็วในการวาดของเวกเตอร์แต่ละตัวได้โดยการเปลี่ยนค่าของพารามิเตอร์ระยะเวลา (ค่าเริ่มต้น 600)
6. เพิ่ม CSS เพื่อลิ้มรส
การลบย่อหน้าออกจาก index.html
สวัสดีชาวโลก! นี่คือ Boilerplate ของ HTML5
และแทนที่จะแทรกบล็อกที่แอนิเมชั่นของเราจะเกิดขึ้น
จากนั้นเราจะเพิ่ม CSS บางส่วนลงในไฟล์ main.css เพื่อให้ดูสวยงามยิ่งขึ้น:
เนื้อความ ( พื้นหลัง:#F3B71C; ) #icons ( ตำแหน่ง: คงที่; ด้านบน:50%; ซ้าย:50%; ระยะขอบ: -300px 0 0 -400px; )
บันทึกไฟล์ทั้งหมด
ตอนนี้เพียงแค่เปิด index.html ในเบราว์เซอร์ที่ทันสมัยและเพลิดเพลินไปกับเอฟเฟกต์
ป.ล. เมื่อทำงานบนเครื่องท้องถิ่น การเริ่มต้นภาพเคลื่อนไหวอาจล่าช้าเป็นเวลาหลายวินาที
นำเข้าและแอนิเมชั่นง่ายๆ สวัสดี วันนี้เราจะมาดูแอนิเมชั่นง่ายๆ ใน After Effects
แหล่งข้อมูล: Adobe Illustrator CC
Adobe After Effects ซีซี
มาเริ่มเรียนรู้ด้วยการวาดภาพใน Illustrator กันดีกว่า
มาวาดกันเถอะ
1) วาดรูปสี่เหลี่ยมสีเหลืองเป็นพื้นหลัง
รูปที่ 1 - สี่เหลี่ยมผืนผ้า
2) วาดวงกลมแล้วเติมด้วยการไล่ระดับสี
มาทำงานเป็นวงกลมกันหน่อย:
- ลบจุดด้านล่างของรูปร่างเราจะได้ส่วนโค้ง
- ลากเส้นตรงปิดส่วนโค้งด้านล่างเราจะได้ครึ่งวงกลม
รูปที่ 2 - 1) วาดวงกลม 2) การไล่ระดับสี; 3) ลบจุด
3) วาดรูปสี่เหลี่ยมผืนผ้าและทำสำเนา
- สี่เหลี่ยมสีเทาหนึ่งอัน
- สี่เหลี่ยมอีกอันเป็นสีเทาเข้ม
4) วาดรูปสามเหลี่ยมจากเครื่องหมายดอกจันโดยกำหนดจำนวนรังสีเป็น 3
รูปที่ 3 - 1) ไฟเรียงกระแส; 2) แก้ไขความมืด; 3) สามเหลี่ยม
5) วาดแมวโดยใช้ปากกาและรูปทรงที่เรียบง่าย 
รูปที่ 4 - 1) หัว; 2) คอ; 3) ร่างกาย; 4) ขา; 5)หาง
และตอนนี้เป็นช่วงเวลาที่สำคัญที่สุด
มากระจายรูปภาพออกเป็นเลเยอร์ต่างๆ (สิ่งที่จะเป็นแอนิเมชั่นจะอยู่ในเลเยอร์ที่แยกจากกัน) ดังนี้: 
รูปที่ 5 - ภาพทั้งหมด (เลเยอร์สำคัญที่มีเครื่องหมายสีแดง)
แค่นั้นแหละตอนนี้เรามาบันทึกกันดีกว่า
มาดูการตั้งค่าการบันทึกกัน
รูปที่ 6 - บันทึก
และตอนนี้ขั้นตอนต่อไป ปิด Adobe Illustrator และเปิด After Effects
นำเข้าสู่ After Effects
ไฟล์ - นำเข้า - ไฟล์ - เลือกไฟล์ Illustrator ที่บันทึกไว้ของเรา
มาเลือกนำเข้าเลเยอร์จาก Illustrator กันดีกว่า ถ้าเราใส่ฟุตเทจ เราจะได้รูปภาพที่มีเลเยอร์ที่ผสานกัน แต่เราไม่ต้องการสิ่งนั้น
รูปที่ 7 - นำเข้าเป็นองค์ประกอบ
นั่นแหละครับ นำเข้ามา
ทีนี้มาดูกันว่าเรามีอะไรบ้าง ดับเบิลคลิกที่องค์ประกอบเพื่อเปิดขึ้นแล้วเราจะเห็นเลเยอร์ต่างๆ (หากทุกอย่างถูกต้องจะมีหลายเลเยอร์) เราได้รับสิ่งนี้ ดูรูป
รูปที่ 8 - เปิดองค์ประกอบ
และสิ่งที่เราจะนำเสนอในวันนี้ก็คือแอนิเมชัน
แอนิเมชั่นใน After Effects
กำหนดจุดหมุนที่ด้านบนของลูกศรโดยใช้เครื่องมือ Pan Behind Tool (ทางลัด - Y) เราแค่เอาจุดหนึ่งแล้วย้ายมันไปในที่ที่จำเป็น ผลออกมาจะเป็นแบบนี้.. 
รูปที่ 9 - เครื่องมือแพนและเลเยอร์
เพียงเท่านี้เรามาดูเลเยอร์สำหรับแอนิเมชั่นกันดีกว่า
เราจะต้องมีเลเยอร์ Arrow และ Head_cat
เริ่มจากลูกศรกันก่อน
มาขยายรายการค้นหาแล้วคลิกที่นาฬิกา ดังนั้นเราจึงกำหนดจุดแรกไว้ที่ศูนย์วินาที ภาพเคลื่อนไหวจะมีความยาวทั้งหมด 2 วินาที
ดังนั้น นี่คือการตั้งค่าที่คุณต้องทำ (เราจะรวม 3 คะแนน):
| ที่สอง | 0 | 1 | 2 |
| +66 | - 70 | +66 |
รูปที่ 10 - ลูกศรหมุน
ทีนี้มาทำให้หัวแมวเคลื่อนไหวกันเถอะ
มาขยาย head_cat และค้นหา Position
ที่นี่จะมี 4 จุด
เฉพาะพิกัดสุดท้ายเท่านั้นที่จะเปลี่ยนแปลงโดยไม่ส่งผลกระทบต่อพิกัดอื่น
| ที่สอง | 0.1 | 0.17 | 1.12 | 2.0 |
| ตำแหน่ง | 689.3 | 729.3 | 729.3 | 689.3 |
รูปที่ 11 - ตำแหน่งส่วนหัว
ดังนั้นหลักการของแอนิเมชั่นจึงเป็นเช่นนี้ ลูกศรจะแกว่งจากด้านหนึ่งไปอีกด้านหนึ่ง ทันทีที่เข้าใกล้ลูกแมว มันจะดึงหัวเข้ามาและค้างอยู่ในตำแหน่งนี้สักพักหนึ่งแล้วจึงกลับเข้าที่
ขั้นตอนสุดท้าย
การผลิต
คุณต้องสร้างผลิตภัณฑ์สำเร็จรูปจากงานของคุณ
ไปที่เมนู - เพิ่มในคิวการเรนเดอร์
แผง Render จะเปิดขึ้นและใน Output Module (คลิกสองครั้ง) ให้เลือกรูปแบบเอาต์พุต ฉันเอา *.mov
รูปที่ 12 - เรนเดอร์
คลิกที่ปุ่ม RENDER และรับผลลัพธ์ (อย่าลืมระบุเส้นทาง)
นั่นคือทั้งหมดที่
สวัสดีทุกคน! วันนี้ฉันจะพยายามอธิบายความสามารถของโปรแกรม Adobe Illustrator โดยเปรียบเทียบกับความสามารถของ Flash นี่จะไม่ใช่การวิเคราะห์โปรแกรมทั่วโลก แต่เป็นคำอธิบายคุณลักษณะที่น่าสนใจบางอย่างที่ฉันค้นพบในโปรแกรมนี้ ฉันรวบรวมข้อมูลทีละชิ้นในขณะที่ฉันศึกษาเพื่อโพสต์ทุกอย่างในโพสต์เดียว ฉันจะยอมรับทันทีว่าฉันไม่ใช่ผู้ใช้ Illustrator ที่มีประสบการณ์สูง ฉันแค่ใช้มันเพื่อวาดภาพในช่วงหกเดือนที่ผ่านมาเท่านั้น (ก่อนหน้านั้นฉันจะวาดทุกอย่างด้วย Flash) หลายคนบ่นว่านักวาดภาพประกอบมีความซับซ้อนและไม่เป็นไปตามสัญชาตญาณเสมอไป ฉันยอมรับว่าหลังจากการฟลัชโปรแกรมนี้มีความซับซ้อน แต่สิ่งสำคัญที่นี่คือไม่ยอมแพ้ แต่ต้องเรียนต่อ และหลังจากผ่านไปสองสามสัปดาห์ความคิดก็เกิดขึ้น ก่อนหน้านี้ฉันจะจัดการได้อย่างไรโดยปราศจากมัน!
แล้วฉันชอบอะไรเกี่ยวกับนักวาดภาพประกอบ และฉันพบว่าอะไรที่ไม่ใช่แฟลช?
1. ฉันจะเริ่มด้วยวิธีที่ง่ายที่สุด แต่ในขณะเดียวกันก็จำเป็น ลองจัดเรียงวัตถุเป็นวงกลมด้วย Flash ก่อนหน้านี้มี Deco Tool แต่ถูกลบออกไป ถือว่าไม่จำเป็น เราตัดสินใจว่าถ้าทำด้วยมือจะสนุกกว่า Illustrator มีฟังก์ชันนี้: เอฟเฟกต์ – บิดเบือน&แปลง – แปลงร่าง
ทุกอย่างรวดเร็วและง่ายดาย เราตั้งค่า (ระยะห่างระหว่างวัตถุ จำนวนสำเนา) ด้วยตัวเราเองในการตั้งค่า
2. ซิกแซก
สิ่งที่ง่ายกว่าแต่ก็มีประโยชน์ อาจดูเหมือนเป็นเรื่องเล็กๆ แต่ใน Flash คุณต้องวาดด้วยมือ ส่วนใน Illustrator ใช้เวลาเพียงไม่กี่วินาที
3. การเสียรูปของวัตถุ (Warp)
ไม่มีอะไรแบบนี้ใน Flash ในตัวอย่างด้านล่าง ฉันแสดงเพียง 2 วิธีในการเปลี่ยนรูปทรงง่ายๆ (เอฟเฟกต์ - บิดเบี้ยว - ส่วนโค้ง/ปลา) อันที่จริงมี 15 รายการในโปรแกรมเวอร์ชันล่าสุด
4. การปัดเศษมุมอัตโนมัติ (Round Corners)
คุณสามารถทำได้ด้วยตนเอง: เมื่อเลือกบนวัตถุกราฟิก จุดสีขาวและเครื่องหมายเส้นโค้งมนจะปรากฏขึ้นที่มุม (ในทุกมุม) เราลากด้วยเมาส์แล้วปรับให้เข้ากับรสนิยมของคุณ
แต่สิ่งนี้ใช้ได้กับรูปร่างเท่านั้น ด้วยเส้นดินสอเราจะทำแตกต่างออกไปเล็กน้อย - เราใช้เอฟเฟกต์การปัดเศษ (เอฟเฟกต์ - ปรับสไตล์ - มุมโค้งมน) ที่ทางออกเราได้รับผลลัพธ์เดียวกัน
5. หยาบ
เอฟเฟ็กต์ถูกนำไปใช้กับรูปร่างที่เรียบง่าย (เอฟเฟ็กต์ – บิดเบือน&แปลง – ทำให้หยาบ) ผลลัพธ์ที่ได้คือสิ่งที่คล้ายกับโมเดล 3 มิติโพลีต่ำ ฉันคิดว่ามันเจ๋ง :) และที่สำคัญที่สุดมันง่ายมาก
6. Pucker&Bloat (การดึงและบวม)
ตัวอย่างในภาพด้านล่าง:
7. การขยายแบบฟอร์ม (เส้นทางออฟเซ็ต)
Flash มีฟังก์ชัน Expand Fill แต่ใช้ไม่ได้กับเส้นดินสอเลย ต่างจาก Illustrator
8. แปรง (แปรงศิลปะ, แปรงลวดลาย, แปรงกระจาย)
ดูภาพด้านล่างพร้อมตัวอย่าง:
9.แปรงเนื้อ
นอกจากนี้ในนักวาดภาพประกอบยังมีแปรงพื้นผิวหลายแบบที่ฉันเขียนและลักษณะที่แปรงเหล่านี้ปรากฏในแฟลชเวอร์ชันใหม่ - สังเกตว่าการใช้แปรงใน Adobe Animate นั้นช้ามาก นี่คือวิธีการ :(
10. ฉันไม่แน่ใจว่านี่เป็นกลอุบายจริงหรือไม่ แต่ฉันต้องการมุ่งเน้นไปที่แปรงที่มีชื่อตลกว่า Blob Brush ตั้งอยู่ในแถบเครื่องมือ นี่เป็นแปรงที่ดีมากที่จะใช้ มันมีการตั้งค่ามากมาย ฉันชอบมันมากกว่าปกติ เป็นการยากที่จะอธิบายประโยชน์ของมันด้วยคำพูด ควรลองดูสักครั้งจะดีกว่า
10.แยกเป็นตาราง
สิ่งที่มีประโยชน์อีกอย่างคือฟังก์ชัน Split to Grid (Object-Path-Split to Grid) ช่วยให้คุณสามารถตัดรูปร่างออกเป็นส่วนเท่า ๆ กัน สิ่งนี้ทำให้เรานึกถึงอะไร? ใช่แล้ว - หน้าต่างในอาคารสูง ฉันคิดว่ามันเจ๋งมากสำหรับการวาดภาพ เช่น ทิวทัศน์ของเมือง ;)
เครื่องมือที่มีประโยชน์อีกประการหนึ่งที่นำเสนอใน Illustrator ซึ่งอาจตั้งแต่เปิดตัวครั้งแรก ด้วยความช่วยเหลือคุณสามารถสร้างพื้นผิวไม้ได้:
12. ย้าย (ขวา - แปลง - ย้าย)
แทนที่วัตถุตามระยะทางที่กำหนด หากต้องการ คุณสามารถสร้างสำเนาได้ทันทีที่จะวางไว้ที่ระยะห่างที่ต้องการจากวัตถุที่เลือกในแนวนอน/หรือแนวตั้ง Flash เวอร์ชันก่อนหน้ามีปลั๊กอินที่ทำหน้าที่นี้ น่าเสียดายที่ฉันจำชื่อมันไม่ได้
Illustrator สะดวกมากสำหรับการสร้างรูปแบบไร้รอยต่อ (Object-Pattern-Make) ฉันจำได้ว่าฉันพัฒนาความซับซ้อนอย่างรวดเร็วเพียงใดด้วยการสร้าง . ใน Illustrator เวอร์ชัน SS 2015 ทุกอย่างจะเป็นแบบอัตโนมัติ การตั้งค่าต่างๆ มากมายจะช่วยให้คุณสร้างรูปแบบได้หลากหลายรูปแบบ โดยมีองค์ประกอบกราฟิกเพียงไม่กี่อย่าง ในโปรแกรมเวอร์ชันก่อนๆ ทุกอย่างจะต้องดำเนินการด้วยตนเอง เช่นเดียวกับใน Flash จนถึงปัจจุบัน
(หมายเหตุ – สามารถสร้างรูปแบบเป็นวัตถุเวกเตอร์ที่แก้ไขได้โดยใช้ฟังก์ชันวัตถุ – ขยายลักษณะที่ปรากฏ
14. วัตถุโมเสก
การสร้างจานสีตามรูปภาพที่มีอยู่ นำเข้ารูปภาพที่คุณชอบลงในภาพประกอบ (เปิด) จากนั้น วัตถุ – สร้างวัตถุโมเสก ในการตั้งค่าเราระบุความถี่ของการหารความสูงและความกว้าง
และที่ผลลัพธ์เราได้รับ:
15.ผสมผสาน
ใช้เพื่อสร้างการไล่ระดับสี คุณสามารถสร้างการเปลี่ยนภาพทีละขั้นตอนได้ เช่น ในรูปภาพ ฉันจะไม่บอกว่าฉันใช้มันบ่อย แต่มันอาจเป็นประโยชน์กับใครบางคน สำหรับฉันดูเหมือนว่ามันสามารถใช้เพื่อสร้างภาพพื้นหลังที่เรียบง่ายได้
เครื่องมือนี้ยังสามารถใช้เพื่อโคลนวัตถุได้ วางวัตถุสองชิ้นให้ห่างจากกัน และใช้ Blend Options เลือกจำนวนขั้นตอน (จำนวนวัตถุที่โคลน)
16. เครื่องมือสร้างรูปร่าง
สิ่งที่สะดวกมากสำหรับการทำงานกับพื้นฐาน สำหรับฉันแล้วดูเหมือนว่ามันจะสะดวกน้อยลง
กด Alt ค้างไว้แล้วคลิกส่วนที่เลือกเพื่อลบส่วนต่างๆ หากเราเพียงลากเมาส์ไปเหนือพื้นที่ที่เลือก - การเชื่อมต่อ
โปรแกรมเสริมคือเครื่องมือที่ช่วยตัด เชื่อมต่อ ฯลฯ โดยอัตโนมัติ แบบฟอร์มที่เน้น สำหรับฉัน มันไม่สะดวกนัก ฉันมักจะใช้เครื่องมือ Build Shape
(อาร์ตบอร์ด)
18. แผงเครื่องมือแบบกำหนดเอง
ความสามารถในการสร้างแถบเครื่องมือของคุณเอง ละทิ้งแถบเครื่องมือที่ไม่จำเป็น และเลือกเฉพาะแถบที่คุณใช้
ใน Flash อาร์ตบอร์ด ได้แก่ ฉาก (ฉาก 1,2,3..) จะถูกแยกออกจากกัน และคุณต้องสลับไปมาระหว่างฉากเหล่านั้น (Shift+F2) ใน Illustrator คุณสามารถวางสิ่งเหล่านี้ไว้ต่อหน้าต่อตาคุณได้ จะสะดวกเมื่อคุณสร้างภาพวาดเดียวกันหลายเวอร์ชัน เพื่อให้ตัวเลือกทั้งหมดอยู่ตรงหน้าคุณเพื่อการเปรียบเทียบ
19. ภาพสามมิติโดยใช้สไตล์กราฟิก
และสิ่งสุดท้ายคือการสร้างภาพสามมิติโดยไม่ต้องใช้มันใน 1 คลิก (หรือแม่นยำกว่านั้นใน 3 คลิก เพราะเรามี 3 ด้าน;) โดยใช้สไตล์กราฟิก (Graphic Styles) ฉันจะอธิบายวิธีการดำเนินการนี้ในครั้งต่อไป
สิ่งที่นักวาดภาพประกอบมีเหมือนกันกับแฟลชคือความสามารถในการบันทึกวัตถุลงในสัญลักษณ์ และสามารถถ่ายโอนสัญลักษณ์นี้ไปยังแฟลชได้อย่างง่ายดายพอๆ กัน (เปิดไฟล์ใน flash.ai โดยใช้การนำเข้า – นำเข้าไปยังพื้นที่งาน)
สัญลักษณ์ใน Illustrator มีคุณสมบัติเหมือนกับใน Flash
และโดยสรุปฉันจะเขียนว่าใน Illustrator ในความคิดของฉันมันด้อยกว่าแฟลช ใช่ใช่มีสิ่งนั้น และนี่คือเครื่องมือเติม (Paint Bucket) ไม่ว่าฉันจะพยายามทำความคุ้นเคยกับมันใน Illa มากแค่ไหนก็ตาม มันจะสะดวกกว่าใน Flash
