ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
ซอฟต์แวร์ที่สนใจ Adobe ImageReady
2
เพราะ... โปรแกรม Adobe ImageReady เป็นโปรแกรมที่เราสามารถทำภาพเคลื่อนไหวได้เอง ด้วยวิธีที่ง่าย สะดวก และรวดเร็ว ทำให้เราได้ภาพที่ตรงตามที่เราต้องการ
3
Adobe ImageReady
4
การสร้าง animation จาก Image Ready
1.> การใช้งาน Image ready เราจะใช้คู่กับโปรแกรม Photoshop ขั้นแรกให้เราเตรียมภาพใน Photoshop เพื่อไปประกอบเนื้อเรื่องใน animation ก่อน ว่าต้องการกี่ภาพและจะให้ภาพเคลื่อนไหวอย่างไรบ้างในทีนี้เตรียมไว้ สองภาพ
5
2.> อย่าลืมที่จะจัดตำแหน่งของเรื่องราวต่างๆ ที่เราต้องการใช้ ให้ตรงตำแหน่ง เสียตั้งแต่ตอนนี้ไว้ด้วย เวลาที่เรานำไปทำภาพเคลื่อนไหว จะได้ไม่ยุ่งยาก เมื่อได้ภาพแล้วให้คลิ๊กที่ Jump to ImageReady เราจะเข้าสู่โปรแกรม Image Ready
6
3.> เราจะเจอ หน้าต่างๆ เล็กๆ 3 หน้าต่าง หน้าต่างที่ A คือไฟล์ภาพการแสดงผล ที่เราจะนำไปใช้ หน้าต่างที่ B คือหน้าต่าง Layer ที่เราใช้เก็บภาพต่างๆ ที่เราจะนำมาทำเรื่องราว หน้าต่างที่ C คือหน้าต่าง animation เราจะเอาภาพมาเรียงต่อกันที่นี่เพื่อทำภาพเคลื่อนไหว
7
4.> ในที่นี้ เราจะทำภาพแบบง่ายๆ ให้กระพริบไปมาระหว่างสองภาพ โดยขั้นแรก ที่หน้าต่าง C เรามีเฟรมภาพรอไว้แล้ว หนึ่งเฟรม ให้เราเพิ่มเฟรมภาพที่สอง ที่เราจะใช้ได้เลยโดยคลิ๊กที่ Duplicates current frame เพื่อเพิ่ม frame ขึ้นมา 1 เฟรม ดังรูป จะได้
8
รูปเปิดตา Layer 1 เพื่อให้เฟรมที่ 2 แสดงผลรูปนี้
5.> จากนั้นให้เรากลับไปเปิดตา layer หน้าต่างที่ B เลือกเปิดตา layer 1 (หลักการง่ายๆ ของ animation คือ ในหน้าต่าง C ถ้าต้องการให้เฟรมใดๆ มีรูป ใดๆ ให้เปิดตาหรือปิดตาที่ layer ของ หน้าต่าง B) รูปเปิดตา Layer 1 เพื่อให้เฟรมที่ 2 แสดงผลรูปนี้
9
6 .> ต่อจากนั้นให้เรามาดูภาพเคลื่อนไหวของเรา คลิ๊ก Plays ที่หน้าต่าง C จะเห็นว่า ที่หน้าต่าง A ภาพจะกระพริบ
10
7.> ที่หน้าต่าง A ภาพจะกระพริบเร็วมาก เราก็จะมาตั้งค่าให้เฟรมแต่ละเฟรมมีความหน่วงเวลา ในการแสดงผล ให้เรา Stop animation ก่อนแล้วเลือก Selects frame delay time ให้เป็น 0.5 แล้วจึง Plays อีกครั้งดูว่าการแสดงผลเป็นที่พอใจหรือเปล่า ถ้าพอใจก็นำภาพไปใช้ได้เลย
11
ภาพที่เซฟออกมาใช้งาน
8 .> วิธีที่เราจะนำภาพไปใช้นั้นให้ ไปที่ File > Save Optimized As.. ไฟล์ภาพที่เซฟให้ เซฟ เป็น .gif เท่านั้น ภาพจึงจะเคลื่อนไหวได้ ดังรูป ภาพที่เซฟออกมาใช้งาน
12
9 .> เคล็ดลับการเซฟงานให้ภาพออกมาสวยงาม ให้ปรับค่า Colors ที่หน้าต่าง Optimize เป็น 256 ก่อนที่จะทำการเซฟ แต่ไฟล์เราก็จะใหญ่ขึ้นด้วย
13
เปรียบเทียบภาพความละเอียดสีที่แตกต่างกัน
14
การสร้าง animation จาก Image Ready ตอน 2
1.> การใช้งาน Image ready ตอนนี้เราจะทำการเพิ่มความนุ่มนวลในการสลับภาพ ขั้นแรกให้เราเตรียมภาพใน Photoshop เพื่อไปประกอบเนื้อเรื่องใน animation ก่อน งานนี้เตรียมไว้ 3 ภาพ
15
2.> เมื่อได้ภาพแล้วให้คลิ๊กที่ Jump to ImageReady เราจะเข้าสู่โปรแกรม Image Ready
16
3.> เราจะทำให้ภาพค่อยๆ แสดงขึ้นมาทีละภาพแบบนุ่มนวล ขั้นแรกกำหนดภาพแรกซึ่งเป็นภาพเริ่มต้น ให้มีลักษณะจางหายไปก่อน
17
4.> ต่อจากนั้นให้เราเพิ่มภาพที่สองขึ้นมา โดยคลิ๊กที่ Duplicates current frame เพื่อเพิ่ม frame ขึ้นมา 1 เฟรม แล้วทำให้ภาพที่เพิ่มขึ้นมา มีความชัดเต็มร้อย ดังรูป
18
5.> จากนั้นเลือก Tweens animation frames เพื่อเพิ่ม เฟรมตรงกลางระหว่างภาพทั้งสองภาพ แล้วใส่ค่า ตามรูป
19
6 .> โปรแกรม Image ready จะทำการสร้างเอฟเฟค ระหว่างกลางให้เราดังรูป (หลักการ คือกำหนดรูปแบบต้นทาง และปลายทาง และโปรแกรม Image ready จะทำเอฟเฟคให้เราตรงกลางเอง) ลอง Plays ดูได้เลย
20
7.> เราจะทำให้ภาพนี้ค่อยๆ จางหายทีละภาพแบบนุ่มนวล ขั้นแรกเพิ่มเฟรม ขึ้นมาอีกเฟรมนึงก่อน แล้วกำหนด ความชัดของภาพให้เป็น 0 %
21
8 .> จากนั้นเลือก Tweens animation frames เพื่อเพิ่ม เฟรมตรงกลางระหว่างภาพทั้งสองภาพ แล้วใส่ค่า ตามรูป
22
9 .> ที่นี้เพิ่มความสมบูรณ์ของพื้นหลังไปนิดนึงจะทำให้การดูภาพสมจริงมากขึ้นโดยการใส่พื้นหลังสีขาวดังรูป Plays ดูอีกครั้ง
23
10 .> สังเกตว่าภาพอาจวิ่งเร็วไป ให้เราเลือกเฟรมทั้งหมด โดยเลือกที่เฟรมแรกก่อน จากนั้นกด Shift ค้างไว้ แล้วมาเลือกเฟรมสุดท้าย จากนั้นก็ทำการ ปรับค่าความหน่วงการแสดงผล โดยเลือกเวลาเอาตามใจชอบได้เลย
24
11. > ให้เราทำแบบนี้กับภาพที่เหลืออื่นๆ แล้วเซฟออกมาใช้งานดู 12
11 .> ให้เราทำแบบนี้กับภาพที่เหลืออื่นๆ แล้วเซฟออกมาใช้งานดู 12 .> เพิ่มเติมอีกนิด เมื่อเรา ทำภาพทั้ง 3 ภาพ ให้แสดง animation แล้วบางครั้งเพื่อการต่อภาพให้เนียน ให้เราลบเฟรม ที่เป็นสีขาวออกไปภาพ จะมีการต่อที่สมบูรณ์มากขึ้น
25
ภาพที่เสร็จแล้ว
26
หน้าแรก Home Profile Learning
ที่มาของข้อมูล: สามารถดาวน์โหลดโปรแกรม Adobe ImageReadyได้ที่ : และสามารถดาวน์โหลดโปรแกรม Photoshop เพื่อใช้ร่วมกับ Adobe ImageReady ได้ที่ : หน้าแรก Home Profile Learning
งานนำเสนอที่คล้ายกัน
