การสร้าง animation จาก Image Ready

การสร้าง animation
จาก Image Ready

1.> การใช้งาน Image ready
เราจะใช้คู่กับโปรแกรม Photoshop ขั้นแรกให้เราเตรียมภาพใน
Photoshop เพื่อไปประกอบเนื้อเรื่องใน
animation
ก่อน ว่าต้องการกี่ภาพและจะให้ภาพเคลื่อนไหวอย่างไรบ้างในทีนี้เตรียมไว้ สองภาพ

2.> อย่าลืมที่จะจัดตำแหน่งของเรื่องราวต่างๆ ที่เราต้องการใช้
ให้ตรงตำแหน่ง เสียตั้งแต่ตอนนี้ไว้ด้วย เวลาที่เรานำไปทำภาพเคลื่อนไหว จะได้ไม่ยุ่งยาก
เมื่อได้ภาพแล้วให้คลิ๊กที่ Jump to ImageReady เราจะเข้าสู่โปรแกรม
Image
Ready

3.> เราจะเจอ หน้าต่างๆ เล็กๆ 3
หน้าต่าง หน้าต่างที่ A คือไฟล์ภาพการแสดงผล ที่เราจะนำไปใช้
หน้าต่างที่ B คือหน้าต่าง Layer
ที่เราใช้เก็บภาพต่างๆื ที่เราจะนำมาทำเรื่องราว หน้าต่างที่
C คือหน้าต่าง
animation
เราจะเอาภาพมาเรียงต่อกันที่นี่เพื่อทำภาพเคลื่อนไหว

4.> ในที่นี้ เราจะทำภาพแบบง่ายๆ ให้กระพริบไปมาระหว่างสองภาพ
โดยขั้นแรก ที่หน้าต่าง C เรามีเฟรมภาพรอไว้แล้ว หนึ่งเฟรม
ให้เราเพิ่มเฟรมภาพที่สอง ที่เราจะใช้ได้เลยโดยคลิ๊กที่ Duplicates
current frame
เพื่อเพิ่ม frame ขึ้นมา 1
เฟรม ดังรูป

จะได้

5.> จากนั้นให้เรากลับไปเปิดตา layer
หน้าต่างที่ B เลือกเปิดตา layer
1
(หลักการง่ายๆ ของ animation
คือ ในหน้าต่าง C ถ้าต้องการให้เฟรมใดๆ
มีรูป ใดๆ ให้เปิดตาหรือปิดตาที่
layer
ของ หน้าต่าง B)


รูปเปิดตา Layer 1
เพื่อให้เฟรมที่ 2
แสดงผลรูปนี้

6 .> ต่อจากนั้นให้เรามาดูภาพเคลื่อนไหวของเรา คลิ๊ก
Plays
ที่หน้าต่าง
C

จะเห็นว่า ที่หน้าต่าง A ภาพจะกระพริบ

7.> ที่หน้าต่าง A
ภาพจะกระพริบ
เร็วมาก เราก็จะมาตั้งค่าให้เฟรมแต่ละเฟรมมีความหน่วงเวลา
ในการแสดงผล ให้เรา Stop animation
ก่อนแล้วเลือก Selects frame delay time ให้เป็น
0.5
แล้วจึง Plays
อีกครั้งดูว่าการแสดงผลเป็นที่พอใจหรือเปล่า ถ้าพอใจก็นำภาพไปใช้ได้เลย

8 .> วิธีที่เราจะนำภาพไปใช้นั้นให้ ไปที่ File
> Save Optimized As..
ไฟล์ภาพที่เซฟให้ เซฟ เป็น .gif
เท่านั้น ภาพจึงจะเคลื่อนไหวได้ ดังรูป

 


ภาพที่เซฟออกมาใช้งาน

9 .> เคล็ดลับการเซฟงานให้ภาพออกมาสวยงาม ให้ปรับค่า Colors
ที่หน้าต่าง Optimize เป็น 256
ก่อนที่จะทำการเซฟ แต่ไฟล์เราก็จะใหญ่ขึ้นด้วย

 

    
เปรียบเทียบภาพความละเอียดสีที่แตกต่างกัน

ข้อความนี้ถูกเขียนใน AdoBE pHOtoshOP คั่นหน้า ลิงก์ถาวร

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s