Adobe Illustrator และ After Effects
นำเข้าและภาพเคลื่อนไหวอย่างง่าย

สวัสดี วันนี้เราจะมาดูแอนิเมชั่นง่ายๆ ใน After Effects

ทรัพยากร: อะโดบี อิลลัสเตรเตอร์ ซีซี
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 กันดีกว่า ถ้าเราใส่ฟุตเทจ เราจะได้ภาพที่มีเลเยอร์ที่ผสานกัน แต่เราไม่ต้องการสิ่งนั้น

รูปที่ 7 - นำเข้าเป็นองค์ประกอบ

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

รูปที่ 8 - เปิดองค์ประกอบ

และสิ่งที่เราจะนำเสนอในวันนี้ก็คือแอนิเมชัน

แอนิเมชั่นใน อาฟเตอร์เอฟเฟ็กต์
กำหนดจุดหมุนที่ด้านบนของลูกศรโดยใช้เครื่องมือ Pan Behind ( ปุ่มลัด- ย) เราแค่เอาจุดหนึ่งแล้วย้ายมันไปในที่ที่จำเป็น ผลออกมาจะเป็นแบบนี้..

รูปที่ 9 - เครื่องมือแพนและเลเยอร์

เพียงเท่านี้เรามาดูเลเยอร์สำหรับแอนิเมชั่นกันดีกว่า
เราจะต้องมีเลเยอร์ Arrow และ Head_cat
เริ่มจากลูกศรกันก่อน
มาขยายรายการค้นหาแล้วคลิกที่นาฬิกา ดังนั้นเราจึงกำหนดจุดแรกไว้ที่ศูนย์วินาที ภาพเคลื่อนไหวจะมีความยาวทั้งหมด 2 วินาที
ดังนั้น นี่คือการตั้งค่าที่คุณต้องทำ (เราจะรวม 3 คะแนน):

ที่สอง	0	1	2
	+66	- 70	+66

นี่คือสิ่งที่จะมีลักษณะดังนี้:

รูปที่ 10 - ลูกศรหมุน

ทีนี้มาทำให้หัวแมวเคลื่อนไหวกันเถอะ
มาขยาย head_cat และค้นหากัน ตำแหน่ง.
ที่นี่จะมี 4 จุด
เฉพาะพิกัดสุดท้ายเท่านั้นที่จะเปลี่ยนแปลงโดยไม่ส่งผลกระทบต่อพิกัดอื่น

ที่สอง	0.1	0.17	1.12	2.0
ตำแหน่ง	689.3	729.3	729.3	689.3

เรามาดูรูปกันดีกว่า

รูปที่ 11 - ตำแหน่งส่วนหัว

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

ขั้นตอนสุดท้าย

การผลิต
คุณต้องสร้างผลิตภัณฑ์สำเร็จรูปจากงานของคุณ
ไปที่เมนูกันเถอะ - เพิ่มลงในคิวการเรนเดอร์
แผง Render จะเปิดขึ้นและใน Output Module (คลิกสองครั้ง) ให้เลือกรูปแบบเอาต์พุต ฉันเอา *.mov

รูปที่ 12 - เรนเดอร์

คลิกที่ปุ่ม RENDER และรับผลลัพธ์ (อย่าลืมระบุเส้นทาง)
นั่นคือทั้งหมดที่

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

คำสั่งส่งออก (SWF)

ให้การควบคุมภาพเคลื่อนไหวและการบีบอัดบิตได้มากที่สุด

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

เมื่อเตรียมออบเจ็กต์สำหรับการบันทึกในรูปแบบ SWF โปรดคำนึงถึงหลักเกณฑ์ต่อไปนี้

เมื่อใช้แอป Device Central คุณจะเห็นว่ากราฟิก Illustrator จะมีลักษณะอย่างไรในแอป แฟลชเพลเยอร์บนอุปกรณ์มือถือต่างๆ

การแทรกกราฟิก Illustrator

กราฟิกที่สร้างใน Illustrator สามารถคัดลอกและวางลงใน Flash ได้อย่างรวดเร็ว ง่ายดาย และง่ายดาย

เมื่อคุณแทรกกราฟิก Illustrator ลงในแอปพลิเคชัน Flash คุณลักษณะต่อไปนี้จะยังคงอยู่

โครงร่างและรูปร่าง

• ความหนาของเส้นขีด

  คำจำกัดความของการไล่ระดับสี

  ข้อความ (รวมถึงแบบอักษร OpenType)

  รูปภาพที่เกี่ยวข้อง

• โหมดผสมผสาน

นอกจากนี้ Illustrator และ Flash ยังรองรับตัวเลือกต่อไปนี้เมื่อแทรกกราฟิก

เมื่อคุณเลือกเลเยอร์ระดับบนสุดทั้งหมดในกราฟิก Illustrator และวางลงในแอปพลิเคชัน Flash เลเยอร์และคุณสมบัติ (การมองเห็นและการล็อค) จะยังคงอยู่

รูปแบบสีของ Illustrator ที่ไม่ใช่ RGB (CMYK, ระดับสีเทา และรูปแบบที่กำหนดเอง) จะถูกแปลงเป็น RGB ด้วย Flash สี RGB จะถูกแทรกตามปกติ

เมื่อคุณนำเข้าหรือแทรกกราฟิก Illustrator คุณสามารถใช้ตัวเลือกต่างๆ เพื่อบันทึกเอฟเฟ็กต์บางอย่าง (เช่น เงาของข้อความ) เป็นฟิลเตอร์ Flash

Flash เก็บมาสก์ Illustrator ไว้

ส่งออกไฟล์ SWF จาก Illustrator

ไฟล์ SWF ที่ส่งออกจาก Illustrator ตรงกับคุณภาพและอัตราส่วนการบีบอัดของไฟล์ SWF ที่ส่งออกจาก Flash

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

การนำเข้าไฟล์ Illustrator ลงในแอปพลิเคชัน Flash

หากต้องการสร้างเค้าโครงที่สมบูรณ์ใน Illustrator แล้วนำเข้าลงใน Flash ในขั้นตอนเดียว คุณสามารถบันทึกอาร์ตเวิร์กในรูปแบบ Native (AI) ของ Illustrator และนำเข้าลงใน Flash ได้อย่างแม่นยำโดยใช้คำสั่ง File > Import to Workbench" หรือ "File "> "นำเข้าไปยังห้องสมุด"

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

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

แปลงเลเยอร์ Illustrator เป็นเลเยอร์ Flash

แปลงเลเยอร์ Illustrator เป็นเฟรม Flash

แปลงเลเยอร์ Illustrator ทั้งหมดเป็นเลเยอร์ Flash หนึ่งเลเยอร์

GIF แบบโปร่งใสใน Adobe Illustrator ถูกสร้างขึ้นดังนี้ ไปที่เมนู ไฟล์ > บันทึกสำหรับเว็บและอุปกรณ์ (Alt+Ctrl+Shift+S) ในหน้าต่างที่เปิดขึ้น ในฟิลด์รูปแบบไฟล์ที่ปรับให้เหมาะสม คุณต้องไปที่แท็บก่อนขนาดภาพ (ขนาดภาพ) ความจริงก็คือโดยค่าเริ่มต้นทั้งหน้าจะรวมอยู่ในหน้าต่างการเพิ่มประสิทธิภาพและโดยปกติจะไม่จำเป็นดังนั้นในแท็บขนาดรูปภาพ ให้ยกเลิกการเลือกช่องนี้

คลิปไปที่ Artboard

(ครอบตัดตามขนาดหน้า) แล้วคลิกปุ่ม Apply จากนั้นเลือก GIF จากรายการการเลือกรูปแบบและทำเครื่องหมายในช่องความโปร่งใสหลังจากนี้เราจะกำหนดว่าสีใดจะโปร่งใส สีทั้งหมดที่มีอยู่ในภาพจะอยู่ในแท็บ ตารางสี(ตารางสี) และแสดงเป็นสี่เหลี่ยมสี เลือกเครื่องมือในแถบเครื่องมือทางด้านซ้ายของหน้าต่าง

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

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

คลิกบันทึก - GIF โปร่งใสพร้อม. งานนี้ดำเนินการใน Adobe Illustrator เวอร์ชัน CS4 (v.14) แต่การดำเนินการและแป้นพิมพ์ลัดทั้งหมดยังเกี่ยวข้องกับ CS3 เวอร์ชันก่อนหน้า (v. 13) ด้วย

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

ไม่มีเครื่องมือพิเศษหรือคุณลักษณะอินเทอร์เฟซ เช่น ไทม์ไลน์ ซึ่งเป็นเรื่องปกติสำหรับโปรแกรมพัฒนาแอนิเมชันใน Adobe Illustrator แต่มีความละเอียดอ่อนอย่างหนึ่ง - คุณสามารถใช้เลเยอร์เป็นเฟรมได้

สร้างแบนเนอร์ที่มีเพียงข้อความ

1. จัดกลุ่มอักขระด้วยคำสั่ง วัตถุ › กลุ่ม(วัตถุ › กลุ่ม)
2. ภารกิจต่อไปคือสร้างวัตถุรูปร่างจากสัญลักษณ์แบบอักษร มิฉะนั้นการก่อตัวของเลเยอร์ที่ถูกต้องจะไม่ทำงาน เมื่อต้องการทำเช่นนี้ ให้เลือกกลุ่มและเลือก พิมพ์ › สร้างโครงร่าง(แบบอักษร › ติดตาม)
3. หลังจากนั้นให้เปิดเมนูจานสี เลเยอร์(เลเยอร์) โดยคลิกที่ปุ่มลูกศรบนจานสี (รูปที่ 8.11)

ข้าว. 8.11- เมนูจานสีเลเยอร์

ในเมนูนี้เราสนใจคำสั่งนี้ ปล่อยเป็นเลเยอร์ (ลำดับ)(แปลงเป็นเลเยอร์ (Sequential)) ซึ่งแปลงแต่ละออบเจ็กต์เป็นเลเยอร์ใหม่ โปรดทราบว่าเมื่อใช้คำสั่งจะต้องเลือกกลุ่ม กลุ่มไม่ใช่ชั้น ชั้นที่ 1.

จานสีควรมีลักษณะอย่างไร เลเยอร์(เลเยอร์) หลังจากดำเนินการแล้ว ปล่อยเป็นเลเยอร์ (ลำดับ)(แปลงเป็นเลเยอร์ (ตามลำดับ)) ดังแสดงในรูปที่ 1 8.12.

ข้าว. 8.12- จานสีเลเยอร์หลังจากดำเนินการ Release to Layer (ลำดับ)

เมื่อเตรียมเสร็จแล้วก็บันทึกการใช้ได้เลย บันทึกสำหรับเว็บ(บันทึกสำหรับเว็บ) ใน SWF สวฟเป็นรูปแบบกราฟิกหลักที่ใช้เทคโนโลยีแฟลช มันจะแม่นยำกว่าถ้าบอกว่านี่คือรูปแบบ Flash (รูปที่ 8.13)

อาจเป็นไปได้ว่าทุกวันนี้ผู้ใช้ทุกคนคุ้นเคยกับ Flash อยู่แล้วในระดับหนึ่ง ปัจจุบัน นี่เป็นรูปแบบแอนิเมชั่นที่ใช้กันทั่วไปบนอินเทอร์เน็ต โดยมีส่วนช่วยในการสร้างหน้าอินเทอร์เน็ตมัลติมีเดียส่วนใหญ่

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

ข้าว. 8.13- การตั้งค่าการเพิ่มประสิทธิภาพสำหรับรูปแบบ SWF

การตั้งค่าต่อไปนี้สามารถใช้ได้

• อ่านอย่างเดียว(อ่านอย่างเดียว). หากคุณทำเครื่องหมายที่ช่องนี้ ไฟล์จะถูกเขียนในลักษณะที่ไม่สามารถเปิดแก้ไขในโปรแกรมใดๆ ได้อีกต่อไป ในทางหนึ่งสิ่งนี้จะลดขนาดไฟล์และในทางกลับกันจะปกป้องลิขสิทธิ์ของคุณ
• การตั้งค่าที่ระบุโดย 1 พารามิเตอร์ที่ระบุประเภทของการบันทึก - รูปภาพหรือภาพเคลื่อนไหว
• หากคุณเลือกตัวเลือก ไฟล์ AI เป็นไฟล์ SWF(ไฟล์ Illustrator เป็นไฟล์ SWF) รูปภาพจะถูกบันทึกเป็นภาพนิ่งที่จำลองสิ่งที่คุณเห็นบนหน้าจอเมื่อทำงานใน Illustrator อย่างแน่นอน
• เลเยอร์เป็นเฟรม SWF(เลเยอร์เป็น SWF Frames) ช่วยให้คุณสร้างภาพเคลื่อนไหวตามเลเยอร์ที่มีอยู่ซึ่งจะแสดงเป็นเฟรม เราต้องเลือกตัวเลือกนี้
• คุณภาพเส้นโค้ง(คุณภาพของเส้นโค้ง) ความแม่นยำของเส้นโค้งที่ทำซ้ำไฟล์เส้นโค้งของภาพต้นฉบับ การลดพารามิเตอร์นี้จะลดคุณภาพลงอย่างมากโดยเฉพาะในพื้นที่ที่มีรายละเอียดเล็ก ๆ แต่ยังลดขนาดไฟล์ด้วย ในกรณีของเรา ค่าที่เหมาะสมที่สุดคือ "7"
• อัตราเฟรม(ความล่าช้าของเฟรม) อัตราเฟรมและเป็นผลให้ความเร็วของแอนิเมชั่น เพื่อให้เอฟเฟ็กต์ถูกต้อง ให้ตั้งค่าเป็นไม่เกิน 4 เฟรมต่อวินาที
• วนซ้ำ(ทำซ้ำ). เล่นภาพเคลื่อนไหวซ้ำๆ เหมาะสำหรับแอนิเมชั่นที่การวนซ้ำเป็นสิ่งสำคัญ แบนเนอร์เป็นประเภทนี้

การเพิ่มประสิทธิภาพกราฟิกเว็บ

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

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

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

• 2-อัพ(สองตัวเลือก) การดูภาพต้นฉบับและภาพที่ได้รับการปรับปรุงพร้อมกันตามการตั้งค่าที่ระบุ (รูปที่ 1)
• 4-อัพ(สี่ตัวเลือก) ในโหมดนี้ วิวพอร์ตจะแบ่งออกเป็นสี่หน้าต่าง (รูปที่ 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 ด้วยคำสั่ง ไฟล์=>ส่งออก(ไฟล์=>ส่งออก) ขนาดของรูปภาพที่สร้างจะเป็น 143 KB เปิดไฟล์ PSD ที่เป็นผลลัพธ์แล้วใช้คำสั่ง ไฟล์=>บันทึกสำหรับเว็บ(ไฟล์=>บันทึกสำหรับเว็บ) เมื่อคำนึงถึงจำนวนสีที่จำกัดในภาพ ในกรณีนี้ รูปแบบ GIF จะเหมาะสมที่สุด ซึ่งจำเป็นต้องตัดสินใจตั้งค่าเฉพาะ โดยการทดลองกับการตั้งค่า คุณสามารถมั่นใจได้ว่าคุณภาพที่ดีที่สุดนั้นถูกสร้างขึ้นโดยอัลกอริธึมการบีบอัดเริ่มต้นที่เลือกโดยโปรแกรม คัดเลือก(แบบเลือก). สำหรับการต่อต้านนามแฝงเมื่อมีการเติมแบบไล่ระดับสีจะเป็นการดีกว่าถ้าเลือกอัลกอริธึมที่มีการสร้างเสียงรบกวน เสียงรบกวน(รูปที่ 6) ขนาดของไฟล์การปรับให้เหมาะสมที่ได้จะเป็น 6.729 KB (รูปที่ 7) ในขณะที่ความโปร่งใสของพื้นหลังจะถูกรักษาไว้ ซึ่งง่ายต่อการตรวจสอบโดยการบันทึกรูปภาพในรูปแบบ GIF พร้อมกับไฟล์ HTML (รูปที่ 8) ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ emblem.html และ emblem.gif ในโฟลเดอร์ Primer1

ปุ่ม

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

พิจารณาตัวเลือกในการสร้างปุ่มกลมและนูนใน Illustrator วาดวัตถุเวกเตอร์ในรูปแบบของวงกลมที่เต็มไปด้วยสีที่กำหนดเอง (รูปที่ 9) แล้วแปลงเป็นตาข่ายโดยใช้คำสั่ง Object=>สร้างตาข่ายไล่ระดับสี(Object=>Create Gradient Mesh) โดยระบุสี่แถวและสี่คอลัมน์และในรายการ รูปร่าง(ดู) โดยเลือกตัวเลือก สู่ศูนย์ ไฮไลท์(ไฮไลท์) เท่ากับ 60 (รูปที่ 10) เลือกเครื่องมือ การคัดเลือกโดยตรงและคลิกที่มุมซ้ายบนของวัตถุ โดยเลือกจุดยึดที่อยู่ตรงนั้น (รูปที่ 11) เปลี่ยนสีของเซลล์ที่เกี่ยวข้องให้เป็นสีขาวโดยเลือกในจานสี สวอตช์(รูปที่ 12)

ใช้เครื่องมือ วงรี(วงรี) วางเครื่องหมายของเมาส์ไว้ที่กึ่งกลางของวงกลมที่สร้างไว้ก่อนหน้านี้ และในขณะที่กดปุ่มค้างไว้ Altและ กะให้ยืดวงกลมใหม่ไปทับวงกลมเก่าให้ใหญ่ขึ้นกว่าเดิม 1-2 พิกเซลทุกด้าน ให้ขอบสีดำ ( จังหวะ) กว้าง 1-2 พิกเซลแล้วเติมด้วยการไล่ระดับสีแบบรัศมีในทิศทางจากสีแดงเป็นสีขาว (รูปที่ 13) ลากวัตถุเวกเตอร์ที่สร้างขึ้นไปทางขวาและลง 1-2 พิกเซล จากนั้นคลิกขวาโดยไม่ต้องลบส่วนที่เลือกแล้วเลือกคำสั่งจากเมนูบริบท จัดเรียง=>ส่งไปด้านหลัง(จัดเรียง=>ส่งกลับ) ผลลัพธ์จะเป็นช่องว่างสำหรับปุ่ม ดังแสดงในรูปที่ 1 14.

ตามกฎแล้วบนหน้าเว็บใด ๆ จะมีปุ่มประเภทเดียวกันหลายปุ่มที่แตกต่างกันเช่นเฉพาะในทิศทางของลูกศรที่วาดไว้ซึ่งระบุทิศทางการเคลื่อนที่ไปรอบ ๆ ไซต์ ลองพิจารณากรณีที่ง่ายที่สุดของการมีสองปุ่ม โดยปุ่มหนึ่งที่มีลูกศรลงหมายถึงการเลื่อนไปยังหน้าถัดไป และปุ่มที่มีลูกศรขึ้นจะหมายถึงการเลื่อนไปยังหน้าก่อนหน้า เมื่อลูกศรว่างเปล่า ให้ใช้สามเหลี่ยมปกติที่วาดด้วยเครื่องมือ รูปหลายเหลี่ยม(รูปหลายเหลี่ยม) เต็มไปด้วยสีดำและยังได้รับการออกแบบให้เป็นวัตถุตาข่ายเพื่อเพิ่มเอฟเฟกต์ เลื่อนลูกศรไปที่ปุ่มและปรับตำแหน่งของวัตถุทั้งหมดที่สัมพันธ์กันโดยใช้ปุ่มพาเล็ตที่เกี่ยวข้อง จัดตำแหน่ง(การจัดตำแหน่ง). ปุ่มผลลัพธ์ปุ่มแรกจะแสดงในรูปที่ 1 15. มาสร้างสำเนาของเลเยอร์ด้วยปุ่มโดยเลือกคำสั่ง ทำซ้ำเลเยอร์ เลเยอร์ด้วยเหตุนี้เราจึงได้เลเยอร์ที่เหมือนกัน 2 ชั้น จากนั้นเลือกลูกศรบนสำเนาของเลเยอร์แล้วหมุน 180° โดยเลือกคำสั่งจากเมนูบริบท แปลง => หมุนการแปลง => หมุน เราจะได้ปุ่มเดียวกันดังแสดงในรูปที่ 1 16. โปรดทราบว่าจะสะดวกกว่ามากในการจัดเก็บปุ่มประเภทเดียวกันทั้งหมดสำหรับหนึ่งโปรเจ็กต์ในไฟล์เดียวบนเลเยอร์ที่แตกต่างกัน ซึ่งแสดงให้เห็นในกรณีนี้

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

ตอนนี้สิ่งที่เหลืออยู่คือต้องแน่ใจว่าปุ่มต่างๆ ดูเป็นที่ยอมรับบนเว็บเพจและวางไว้บนเพจที่กำหนดเอง (รูปที่ 20) ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ Primer2.html และรูปภาพกราฟิกสองภาพในโฟลเดอร์รูปภาพ (โฟลเดอร์ ไพรเมอร์2).

หากต้องการ คุณสามารถเปลี่ยนปุ่มให้เป็นชิ้นๆ ในระหว่างกระบวนการปรับให้เหมาะสมได้อย่างง่ายดาย ในกรณีนี้หลังจากเลือกคำสั่งแล้ว ไฟล์=>บันทึกสำหรับเว็บ(ไฟล์=>บันทึกสำหรับเว็บ) และการตั้งค่าพารามิเตอร์การปรับให้เหมาะสม เลือกเครื่องมือจากแผงเครื่องมือ เลือกชิ้น(การเลือกสไลซ์) และดับเบิลคลิกที่ภาพ ซึ่งในที่สุดจะกลายเป็นสไลซ์ที่มีหมายเลขซีเรียล 1 โดยอัตโนมัติ (รูปที่ 21) การดับเบิลคลิกอีกครั้งจะเป็นการเปิดหน้าต่าง ตัวเลือกชิ้น(ตัวเลือกสไลซ์) ซึ่งคุณจะต้องระบุลิงค์และเปลี่ยนชื่อของสไลซ์หากต้องการ (รูปที่ 22) จากนั้นบันทึกภาพที่ปรับให้เหมาะสม ผลลัพธ์ในกรณีนี้คือไฟล์ Primer3.html (รูปที่ 23) และ Primer3.gif (โฟลเดอร์ Primer3)

องค์ประกอบแบบโต้ตอบ

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

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

การโรลโอเวอร์แบบคลาสสิก

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

Illustrator ไม่ได้มีไว้สำหรับสร้างการโรลโอเวอร์ในรูปแบบคลาสสิกโดยตรง แต่สามารถช่วยในการพัฒนาองค์ประกอบเริ่มต้นสำหรับพวกมันได้ แนวคิดในกรณีนี้คือการสร้างเลเยอร์ที่มีรูปภาพที่สอดคล้องกับเหตุการณ์แรก จากนั้นทำสำเนาเลเยอร์และแปลงรูปภาพให้ตรงกับเหตุการณ์ที่สอง และอื่นๆ รูปภาพหลายเลเยอร์ที่ได้จะถูกส่งออกไปยังไฟล์ PSD โดยที่เลเยอร์ถูกเก็บรักษาไว้ โดยพื้นฐานจากการสร้างโรลโอเวอร์ในโปรแกรม Image Ready ข้อดีของการใช้ Illustrator เช่นเดียวกับในกรณีอื่นๆ ก็คือคุณลักษณะที่น่าสนใจจำนวนหนึ่งที่ไม่มีในซอฟต์แวร์อื่น ควบคู่ไปกับความสะดวกในการแปลงกราฟิกแบบเวกเตอร์

เรามาลองสร้างโรลโอเวอร์ในรูปแบบของคำจารึกที่เปลี่ยนสีขึ้นอยู่กับพฤติกรรมของเมาส์ เปิด Illustrator และสร้างรูปร่างในรูปแบบของสี่เหลี่ยมผืนผ้าโค้งมนที่เต็มไปด้วยสีดำ (รูปที่ 24) ทำสำเนาและวางไว้ในส่วนที่ว่างของหน้าจอ แปลงสำเนาแรกของสี่เหลี่ยมให้เป็นวัตถุตาข่ายโดยมีไฮไลท์อยู่ตรงกลาง (คำสั่ง Object=>สร้างตาข่ายไล่ระดับสี Object => สร้างตาข่ายไล่ระดับสี) โดยระบุสี่แถวและสิบคอลัมน์ (รูปที่ 25) เปิดใช้งานสำเนาที่สองของสี่เหลี่ยมและตั้งค่าเป็นการเติมแบบไล่ระดับสีโดยประมาณดังแสดงในรูป 26. วางซ้อนวัตถุไล่ระดับสีที่ด้านบนของตาข่าย ลดความทึบของวัตถุไล่ระดับสีเหลือประมาณ 80% และปรับขนาดประมาณ 1 พิกเซลเพื่อจำลองเอฟเฟกต์ของการชนในที่สุด จากนั้นพิมพ์คำจารึกไว้ด้านบนของวัตถุ ในรูปแบบดั้งเดิมปล่อยให้มีสีขาวซึ่งจะสอดคล้องกับสถานะปกติ (รูปที่ 27) จากนั้นเมื่อสถานะโรลโอเวอร์เปลี่ยนไปสีของคำจารึกจะเปลี่ยนเป็นสีเขียวเมื่อคุณวางเมาส์เหนือ เครื่องหมายเมาส์เหนือมัน (สถานะโอเวอร์) และเป็นสีน้ำเงินเมื่อกดปุ่มเมาส์ (สถานะลง)

ให้ความสนใจกับจานสี เลเยอร์ในขั้นตอนนี้มีเพียงชั้นเดียวเท่านั้น ทำสำเนาเลเยอร์นี้สองชุดโดยใช้คำสั่ง ทำซ้ำเลเยอร์(Duplicate Layer) จากเมนูจานสี เลเยอร์จานสีจะมีสามชั้น (รูปที่ 28) จากนั้นในสำเนาแรกของเลเยอร์เปลี่ยนสีของคำจารึกเป็นสีเขียวและในสำเนาที่สองเป็นสีน้ำเงิน (รูปที่ 29) เป็นผลให้ได้รับช่องว่างที่จำเป็นสำหรับการโรลโอเวอร์

ส่งออกรูปภาพที่สร้างเป็นรูปแบบ PSD ในขณะที่รักษาเลเยอร์โดยใช้คำสั่ง ไฟล์=>ส่งออก(File=>Export) และเลือกรูปแบบสี RGB (รูปที่ 30) เปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 31 และ 32) สร้างเฟรมตามเลเยอร์โดยเลือกคำสั่ง สร้างเฟรมจากเลเยอร์(สร้างเฟรมจากเลเยอร์) จากเมนูจานสี แอนิเมชั่น- หน้าต่างแอนิเมชั่นจะมีลักษณะดังในรูป 33. ในเวลาเดียวกันในจานสี การโรลโอเวอร์ในตอนแรก จะมีการสร้างสภาวะปกติเพียงสถานะเดียว

แล้วที่หน้าต่าง. แอนิเมชั่นเลือกเฟรมที่สอดคล้องกับสถานะที่เหนี่ยวนำขณะอยู่ในจานสี เลเยอร์เลเยอร์จะถูกเลือกโดยอัตโนมัติ สำเนาเลเยอร์ 1(รูปที่ 34) ไปที่จานสี การโรลโอเวอร์และคลิกที่ปุ่ม สร้างสถานะแบบโรลโอเวอร์(สร้างสถานะโรลโอเวอร์) มะเดื่อ 35ซึ่งจะส่งผลให้มีสภาพ โอเวอร์สเตทในจานสี การโรลโอเวอร์(รูปที่ 36) สร้างสถานะในลักษณะเดียวกัน ดาวน์สเตท- เปิดใช้งานสถานะ ปกติในจานสี การโรลโอเวอร์และลบออกในจานสี แอนิเมชั่นเฟรมทั้งหมดยกเว้นเฟรมที่ต้องตรงกับสถานะ ปกติ- ด้วยเหตุนี้ สำหรับแต่ละสถานะแบบโรลโอเวอร์ในพาเล็ต แอนิเมชั่นจะมีเพียงเฟรมเดียวเท่านั้น (รูปที่ 37, 38 และ 39)

ข้าว. 38. มุมมองของรูปภาพ หน้าต่างแอนิเมชั่น และพาเล็ตเลเยอร์และโรลโอเวอร์สำหรับสถานะโอเวอร์

ตรวจสอบผลลัพธ์โดยคลิกที่ปุ่ม ดูตัวอย่างในเบราว์เซอร์เริ่มต้น(แสดงตัวอย่างเบราว์เซอร์) บนแถบเครื่องมือและไปที่หน้าต่างเบราว์เซอร์ (รูปที่ 40) หลังจากนั้นให้บันทึกไฟล์โดยใช้คำสั่ง ไฟล์=>บันทึกการปรับให้เหมาะสม(ไฟล์=>บันทึกด้วยการเพิ่มประสิทธิภาพ) และระบุตัวเลือก HTML และรูปภาพ (*.html)- ด้วยเหตุนี้ ในตัวอย่างนี้ ได้รับไฟล์ Primer4.html และชุดรูปภาพกราฟิกในโฟลเดอร์รูปภาพ

ข้าว. 40. หน้าต่างเบราว์เซอร์พร้อมองค์ประกอบแบบโรลโอเวอร์

การโรลโอเวอร์ SVG

รูปแบบ SVG (Scalable Vector Graphics) ที่ได้รับความนิยมเพิ่มมากขึ้น กราฟิกแบบเวกเตอร์) ที่สร้างขึ้นตามมาตรฐาน XML ยังช่วยให้คุณได้รับองค์ประกอบเชิงโต้ตอบที่หลากหลาย โดยเฉพาะอย่างยิ่งการโรลโอเวอร์ ในทางปฏิบัติเท่านั้น สิ่งนี้จะถูกนำไปใช้แตกต่างไปจากเดิมอย่างสิ้นเชิง เป็นที่น่าสังเกตว่าการสร้างการโรลโอเวอร์ SVG แบบโต้ตอบซึ่งแตกต่างจากแบบคลาสสิกเมื่อโค้ด HTML ที่เกี่ยวข้องถูกสร้างขึ้นโดยอัตโนมัติอย่างสมบูรณ์นั้นต้องอาศัยความรู้เกี่ยวกับภาษา JavaScript และความเข้าใจในหลักการพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ

จานสีพิเศษได้รับการออกแบบสำหรับการทำงานกับวัตถุ SVG การโต้ตอบ SVGซึ่งสามารถเปิดได้อย่างง่ายดายโดยใช้คำสั่ง หน้าต่าง=>การโต้ตอบ SVG(Window=>การโต้ตอบ SVG) 41.

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

สร้างปุ่มสี่เหลี่ยมที่มีขอบโค้งมน และเลือกการเติมไล่ระดับสีที่เหมาะสม เช่น ดังแสดงในรูปที่ 1 42. ปรับความโปร่งใสของปุ่มในจานสี ความโปร่งใส(ความโปร่งใส) ในตัวอย่างนี้ค่าพารามิเตอร์ ความทึบ(ความทึบ) ตั้งไว้ที่ 50% คัดลอกปุ่ม เติมด้วยสีเขียวเข้ม (รูปที่ 43) จากนั้นแปลงเป็นวัตถุแบบตาข่ายด้วยคำสั่ง Object=>สร้างตาข่ายไล่ระดับสี(Object=>Create Gradient Mesh) โดยระบุสี่แถวและสิบคอลัมน์และในรายการ รูปร่าง(ดู) โดยเลือกตัวเลือก สู่ศูนย์(ไปทางศูนย์กลาง) และตั้งค่า ไฮไลท์(ไฮไลท์) เท่ากับ 100 ลดความทึบของเลเยอร์ด้วยวัตถุตาข่ายให้เหลือประมาณ 40% (รูปที่ 44) วางวัตถุตาข่ายไว้ด้านบนของวัตถุไล่ระดับสี และปุ่มจะมีลักษณะคล้ายกับวัตถุที่แสดงในรูปที่ 1 45.

ข้าว. 44. เปลี่ยนสำเนาของปุ่มให้เป็นวัตถุแบบตาข่าย

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

การประมวลผลเหตุการณ์เกี่ยวข้องกับการใช้ขั้นตอน JavaScript ดังนั้นคุณจึงต้องรวมไฟล์ที่อธิบายขั้นตอนเหล่านี้ เรียกว่า Events.js และถูกบันทึกลงในดิสก์ในโฟลเดอร์ Sample Files\Sample Art\SVG\SVG เมื่อทำการติดตั้ง โปรแกรมอะโดบีนักวาดภาพประกอบ. หากต้องการรวมไฟล์ Events.js ให้ใช้คำสั่ง ไฟล์จาวาสคริปต์ การโต้ตอบ SVG(รูปที่ 48) ถัดไปคุณจะต้องคลิกปุ่ม เพิ่ม(เพิ่ม) และค้นหาไฟล์ที่ต้องการในฮาร์ดไดรฟ์ของคุณ เมื่อชื่อของเขาปรากฏอยู่ในสนาม URL(รูปที่ 49) คลิกที่ปุ่ม เสร็จแล้ว(ออก).

ข้าว. 48. การเลือกคำสั่งไฟล์ JavaScript

หลังจากนี้ คุณควรกำหนดปฏิกิริยาต่อเหตุการณ์ของเมาส์สำหรับออบเจ็กต์ ข้อความ- เลือกวัตถุข้อความในช่อง เหตุการณ์(เหตุการณ์) จานสี การโต้ตอบ SVGเลือกเหตุการณ์ เมาส์โอเวอร์ elemColor(evt, "ข้อความ", "#3333FF")นี่จะหมายความว่าเมื่อเมาส์อยู่เหนือวัตถุ ข้อความสีจะเปลี่ยนเป็นสีน้ำเงิน (รูปที่ 50) เพื่อให้สีข้อความเปลี่ยนเป็นสีดำหลังจากที่เมาส์ออกจากพื้นที่ใช้งาน คุณจะต้องสร้างกิจกรรมอื่น เมาส์ออกเลือกมันในสนาม เหตุการณ์(เหตุการณ์) จานสี การโต้ตอบ SVG- จากนั้นในแถบการทำงานให้ป้อนข้อความ elemColor(evt, "ข้อความ", "#000000")ซึ่งจะทำให้สีกลับมาเป็นสีดำ (รูปที่ 51)

ข้าว. 51. รูปลักษณ์สุดท้ายของจานสีการโต้ตอบ SVG สำหรับวัตถุข้อความ

บันทึกโรลโอเวอร์ที่สร้างขึ้นเป็นไฟล์ SVG ด้วยคำสั่ง ไฟล์=>บันทึกเป็น(ไฟล์=> ประเภทไฟล์รูปแบบ SVGจากนั้นตั้งค่าตัวเลือกในการบันทึกไฟล์ SVG ดังแสดงในรูป 52. หลังจากบันทึก คุณจะได้รับไฟล์ที่มีนามสกุล SVG เพียงไฟล์เดียว ไม่ใช่สองไฟล์ ดังเช่นในกรณีของการโรลโอเวอร์แบบคลาสสิก ในกรณีนี้ ได้รับไฟล์ Primer5.svg (โฟลเดอร์ Primer5) อย่างไรก็ตาม เพื่อให้การโรลโอเวอร์ใช้งานได้จริง คุณต้องคัดลอกไฟล์ Events.js พร้อมคำอธิบายขั้นตอน JavaScript เพิ่มเติมไปยังโฟลเดอร์ที่มีไฟล์ SVG หลังจากนี้ คุณสามารถตรวจสอบการทำงานของการโรลโอเวอร์ได้ ผลลัพธ์จะมีลักษณะดังแสดงในรูปที่ 1 53.

แอนิเมชั่น SVG

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

มาสร้างออบเจ็กต์กราฟิกและข้อความต่อไปนี้โดยประมาณ ดังแสดงในรูป 54. มาเปลี่ยนชื่อวัตถุที่สร้างขึ้นทั้งหมดด้วยวิธีที่สะดวกโดยคลิกที่ชื่อของวัตถุถัดไปในจานสีตามลำดับ เลเยอร์และกรอกชื่อที่ต้องการ (รูปที่ 55) โปรดทราบว่าสิ่งที่ไฮไลต์ไว้ในรูปที่ 56 วัตถุ ข้อความ1, ข้อความ2, ข้อความ3และ เส้นทาง1จะมองเห็นได้เสมอ และส่วนอื่นๆ ทั้งหมดก็ต่อเมื่อคุณเลื่อนเมาส์ไว้เหนือวัตถุเท่านั้น ข้อความ 1.

ข้าว. 54. มุมมองดั้งเดิมของภาพ

รวมไฟล์ Events.js พร้อมด้วยคำอธิบายขั้นตอน JavaScript โดยใช้คำสั่ง ไฟล์จาวาสคริปต์(ไฟล์จาวาสคริปต์) จากจานสี การโต้ตอบ SVGโดยการกดปุ่ม เพิ่ม(เพิ่ม) โดยระบุไฟล์ที่ต้องการลงในฮาร์ดไดรฟ์ของคุณแล้วคลิกปุ่ม เสร็จแล้ว(ออก).

กำหนดการตอบสนองต่อเหตุการณ์เมาส์สำหรับวัตถุ ข้อความ 1- เลือกวัตถุ ข้อความในสนาม เหตุการณ์(เหตุการณ์) จานสี การโต้ตอบ SVGเลือกเหตุการณ์ เมาส์โอเวอร์และในบรรทัดด้านล่างให้ป้อนข้อความ elemShow(evt, "Text4"); elemShow(evt, "Path2")- เป็นผลให้เมื่อเมาส์อยู่เหนือวัตถุ ข้อความ 1วัตถุต่างๆ ก็จะปรากฏให้เห็น ข้อความ4และ เส้นทาง2- โปรดทราบว่าหากต้องดำเนินการหลายอย่างเมื่อมีเหตุการณ์เกิดขึ้น จะต้องระบุการดำเนินการเหล่านั้นโดยใช้เครื่องหมาย “;” จากนั้นดำเนินการที่คล้ายกันสำหรับกิจกรรม เมาส์ออกป้อนข้อความซึ่งจะหมายถึงการซ่อนวัตถุ (รูปที่ 57)

บันทึกผลลัพธ์เป็นไฟล์ SVG ด้วยคำสั่ง ไฟล์=>บันทึกเป็น(File=>Save As) ระบุชื่อไฟล์ เลือกในช่อง ประเภทไฟล์ SVG จากนั้นตั้งค่าตัวเลือกสำหรับการบันทึกไฟล์ SVG ตามรูปที่ 1 58. หลังจากบันทึกแล้วจะได้รับไฟล์ Primer6.svg (โฟลเดอร์ Primer6) อย่าลืมคัดลอกไฟล์ Events.js ไปยังโฟลเดอร์ที่มีไฟล์นี้ หากคุณเรียกใช้ไฟล์ที่สร้างขึ้น คุณจะเห็นผลลัพธ์ดังแสดงในรูปที่ 1 59. นี่คือเกือบสิ่งที่คุณต้องการ สิ่งเดียวที่ไม่รวมอยู่ในแผนของเราคือการปรากฏตัวครั้งแรกของวัตถุ ข้อความ 4 และ เส้นทาง 2 เมื่อโหลด หากต้องการกำจัดข้อบกพร่องนี้ ให้เลือกข้อมูลออบเจ็กต์ทั้งสองพร้อมกันและสร้างการดำเนินการสำหรับข้อมูลเหล่านั้น elemHide(evt, "Text4"); elemHide(evt, "Path2")เมื่อเกิดเหตุการณ์ กำลังโหลด(รูปที่ 60). บันทึกไฟล์อีกครั้งและตรวจสอบให้แน่ใจว่าวัตถุอยู่ในขณะนี้ ข้อความ4และ เส้นทาง2มองเห็นได้เฉพาะเมื่อคุณวางเมาส์ไว้เหนือวัตถุ ข้อความ 1.

ภาพเคลื่อนไหว GIF

หน้าเว็บใดๆ ก็ตามจะคิดไม่ถึงหากไม่มีภาพเคลื่อนไหวบนเว็บ รวมถึงภาพเคลื่อนไหวแบบ GIF หนึ่งในตัวเลือกในการสร้างคือการใช้แอปพลิเคชัน Adobe ImageReady ซึ่งอนุญาตให้สร้างภาพเคลื่อนไหวจากเลเยอร์เหนือสิ่งอื่นใด ในกรณีนี้ ภาพหลายชั้นสามารถเตรียมได้ในแอปพลิเคชันต่างๆ รวมถึง Adobe Illustrator

การสร้างแอนิเมชั่นตามองค์ประกอบจากพาเล็ตเป็นเรื่องง่ายมาก สัญลักษณ์(สัญลักษณ์) ที่เปิดตามคำสั่ง หน้าต่าง=>สัญลักษณ์(Window=>Symbols) หรือจากหนึ่งในไลบรารีสัญลักษณ์ที่สามารถเปิดได้โดยใช้คำสั่ง หน้าต่าง=>ไลบรารีสัญลักษณ์(หน้าต่าง=>ไลบรารีสัญลักษณ์)

ตัวอย่างเช่น เราจะพยายามเพิ่มขนาดของวัตถุสัญลักษณ์ใด ๆ ขั้นตอนสำคัญของกระบวนการเพิ่มวัตถุจะต้องถูกตั้งค่าในเลเยอร์ที่แยกจากกัน ขั้นแรก เพียงวางวัตถุสัญลักษณ์ไว้เหนืออีกวัตถุหนึ่ง จากนั้นจึงเพิ่มขนาดของวัตถุลำดับถัดๆ ไป เช่น ดังแสดงในรูปที่ 1 61. สุดท้ายก็อยู่ในจานสี เลเยอร์จะถูกสร้างขึ้นหนึ่งเลเยอร์ที่มีวัตถุจำนวนมาก (รูปที่ 62) หากคุณส่งออกรูปภาพนี้เป็นรูปแบบ PSD โดยตรง จะไม่ให้อะไรเลยเนื่องจากมีเพียงเลเยอร์เดียวและโดยธรรมชาติแล้วเมื่อคุณเปิดไฟล์ PSD ในโปรแกรม ImageReady ก็จะมีเพียงเลเยอร์เดียวเท่านั้น ดังนั้นคุณต้องวางวัตถุบนชั้นต่างๆ ก่อน ซึ่งสามารถทำได้ ในรูปแบบที่แตกต่างกันวิธีที่ง่ายที่สุดคือเลือกเลเยอร์ก่อน ชั้นที่ 1ในแผงเลเยอร์และใช้คำสั่ง ปล่อยเป็นเลเยอร์(ปล่อยเป็นชั้นๆ). ผลลัพธ์ก็คือแต่ละวัตถุจะถูกย้ายไปยังเลเยอร์ของตัวเอง แต่วัตถุทั้งหมดจะซ้อนกันอยู่ในเลเยอร์ ชั้นที่ 1- ดังนั้น คุณจะต้องลากเลเยอร์ที่ซ้อนกันทั้งหมดไปที่ด้านบนของพาเล็ตเลเยอร์ด้วยตนเองเพื่อให้อยู่เหนือเลเยอร์ ชั้นที่ 1และแล้วก็ถึงชั้นที่ว่างเปล่า ชั้นที่ 1เพียงลบออก (รูปที่ 63) ส่งออกรูปภาพเป็นรูปแบบ PSD โดยใช้คำสั่ง ไฟล์=>ส่งออก(File=>Export) ด้วยการตั้งค่าดังรูป 64.

โหลดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 65 และ 66) เปิดเมนูจานสี แอนิเมชั่นสร้างเฟรมจากเลเยอร์(สร้างเฟรมจากเลเยอร์) เป็นผลให้มีการสร้างห้าเฟรมซึ่งแต่ละเฟรมจะสอดคล้องกับเลเยอร์ของตัวเองและหน้าต่างพาเล็ต แอนิเมชั่นจะมีลักษณะเหมือนในรูป 67.

หลังจากนี้ ให้กำหนดระยะเวลาของแต่ละเฟรมที่สร้างขึ้นในกรณีนี้ ระยะเวลาสำหรับเฟรมทั้งหมดจะตั้งไว้ที่ 0.2 วินาที จากนั้นบันทึกภาพเคลื่อนไหวด้วยการเพิ่มประสิทธิภาพโดยใช้คำสั่ง ไฟล์=>บันทึกการปรับให้เหมาะสม(ไฟล์=>บันทึกด้วยการเพิ่มประสิทธิภาพ) ผลลัพธ์ที่ได้อาจคล้ายกับรูปที่. 68.

สะดวกยิ่งขึ้นในการรับช่องว่างซึ่งสามารถแปลงเป็นภาพเคลื่อนไหวใน ImageReady ได้อย่างง่ายดายเพื่อใช้ฟังก์ชันต่างๆ การผสมผสานสดโปรแกรมอิลลัสเตรเตอร์ การใช้ Illustrator และ ImageReady ร่วมกันนี้จะช่วยเร่งกระบวนการสร้างภาพเคลื่อนไหว GIF ได้เร็วขึ้นอย่างมาก

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

ข้าว. 70. สถานะเริ่มต้นของหน้าต่างเลเยอร์

ส่งออกไฟล์ที่สร้างเป็นรูปแบบ PSD ด้วยคำสั่ง ไฟล์=>ส่งออก(ไฟล์=>ส่งออก) เปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 73) โปรดทราบว่าเลเยอร์ทั้งหมดที่สร้างใน Illustrator จะปรากฏในหน้าต่างเลเยอร์ (รูปที่ 74) และในหน้าต่าง แอนิเมชั่นตอนนี้จะมีเพียงเฟรมเดียวเท่านั้น

เปิดใช้งานเมนูจานสี แอนิเมชั่นโดยคลิกที่ลูกศรสีดำที่มุมขวาบนของจานสีแล้วเลือก สร้างเฟรมจากเลเยอร์(สร้างเฟรมจากเลเยอร์) ด้วยเหตุนี้ ในตัวอย่างนี้ ห้าเฟรมจะถูกสร้างขึ้น และหน้าต่างพาเล็ต แอนิเมชั่นจะได้เป็นแบบฟอร์มตามรูป 75. เลือกเฟรมทั้งหมดในขณะที่กดปุ่มค้างไว้ กะและตั้งค่าระยะเวลาเฟรมที่เหมาะสมในตัวอย่างนี้ แต่ละเฟรมจะใช้เวลา 0.2 วินาทีเท่ากัน จากนั้นบันทึกไฟล์การปรับให้เหมาะสมด้วยคำสั่ง ไฟล์=>บันทึกการปรับให้เหมาะสม(ไฟล์=>บันทึกด้วยการเพิ่มประสิทธิภาพ) การตั้งค่าในรายการ ประเภทไฟล์ตัวเลือก รูปภาพเท่านั้น (*.gif)- ภาพเคลื่อนไหวจะมีลักษณะคล้ายกับรูป 76.

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

ส่งออกไฟล์ที่สร้างเป็นรูปแบบ PSD ( ไฟล์=>ส่งออก File => Export) และเปิดไฟล์ PSD ที่สร้างขึ้นในโปรแกรม ImageReady (รูปที่ 78) สร้างเฟรมภาพเคลื่อนไหวตามเลเยอร์ ( สร้างเฟรมจากเลเยอร์สร้างเฟรมจากเลเยอร์) และเลือกระยะเวลาที่เหมาะสมสำหรับเฟรมเหล่านั้น (รูปที่ 79) จากนั้นเพื่อให้แอนิเมชั่นมีประสิทธิภาพมากขึ้น ให้คัดลอกเฟรมที่มีอยู่ แต่ในลำดับย้อนกลับเพื่อให้รูปภาพเพิ่มขึ้นก่อนแล้วจึงลดลง และต่อไปเป็นวงกลม (รูปที่ 80) จากนั้นบันทึกไฟล์การปรับให้เหมาะสม ( ไฟล์=>บันทึกการปรับให้เหมาะสมไฟล์=>บันทึกด้วยการเพิ่มประสิทธิภาพ) ภาพเคลื่อนไหวที่ได้จะแสดงในรูป 81.

ข้าว. 80. สถานะของหน้าต่างแอนิเมชั่นหลังจากการทำซ้ำเฟรม

ข้าว. 81. แอนิเมชั่นที่เสร็จแล้ว