บทความ photoshop : การสร้าง animation จาก Image Ready

บริการจดโดเมนเนม เว็บไซด์ .Com, .Net, .Org เพียง 550 บาท / ปี สำหรับโดเมนอื่นๆ คลิกเพื่อดูรายละเอียด

สนใจติดต่อโฆษณา คลิกดูรายละเอียด โทร. 02-591-7857, 087-499-5540

หน้าหลัก เว็บไทยดีดี | คำติชมของคุณ

Flash menu

ค้นหาบทความ Photoshop ค้นจากเว็บไทยดีดี ค้นจาก Google

ออกแบบเว็บไซต์ (Web Design) | พัฒนาโปรแกรมเฉพาะด้าน (Web Develop) | ปรับปรุงเว็บไซต์ (Web Modify)

บริษัทเว็บไทยดีดีจำกัด 101/1 ถนนเทศบาลสงเคราะห์ ลาดยาว จตุจักร กรุงเทพ 10900 โทร 02-591-7857, 02-591-7858 แฟ๊กซ์ 02-953-8421 คลิ๊กดูแผนที่

Webmaster Talk webmaster

webthaidd.com

Webthaidd.COM 2.9 Beta Community Version
Build 0979

ปรับการใช้งานเว็บบอร์ดใหม่ เข้าถึงการเรียนรู้ได้มากขึ้น

เว็บบอร์ดใหม่ URL : http://www.webthaidd.com/webboard

เว็บบอร์ดเก่า URL : http://www.webthaidd.com/board

แจ้งปัญหาการใช้งาน หรือแนะนำติชม

webmaster@webthaidd.com

หน้าแรกเว็บบอร์ด

ช่วยเหลือ

ค้นหา

ปฏิทิน

เข้าสู่ระบบ

สมัครสมาชิก

มีนาคม 10, 2010, 09:47:07 am

ยินดีต้อนรับคุณ, บุคคลทั่วไป

กรุณาเข้าสู่ระบบ หรือ สมัครสมาชิก

ส่งอีเมล์ยืนยันการใช้งาน?

สมัครสมาชิก

ลืมรหัสผ่าน

วิธีใช้งานระบบ

ออกแบบเว็บไซต์ (Design)

พัฒนาโปรแกรมเฉพาะด้าน (Dev)

ปรับปรุงเว็บไซต์ (Re Design)

จดโดเมนเนม (Domain)

เช่าพื้นที่จัดทำเว็บไซต์ (Hosting)

แจ้งชำระเงิน

ร่วมเผยแพร่ความรู้ ส่งบทความ : คลิกที่นี่

PHP Programing

HTML Home Page

Macromedia Dreamweaver

ความรู้เกี่ยวกับ Flash Drive

เครื่องมือทำเว็บ ออนไลน์

ค้นหาเว็บไทย (Web Directory)

วิทยุ เพลงออนไลน์ (Radio)

EXPERTISE MSN

เว็บบอร์ด ถาม-ตอบปัญหา

แบบสำรวจ (Poll)

รายละเอียดโฆษณาบนเว็บ คลิกที่นี่

	php.net
	phpmyadmin.net
	mysql.com
	simplemachines.org

บทความ Photoshop CS ออนไลน์ Webthaidd Basic and Advance E-learning

จัดทำโดย : ดินสอ

แสดง 90,620 ครั้ง

เว็บบอร์ด

ส่งให้เพื่อน

พิมพ์

การสร้าง 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 ก่อนที่จะทำการเซฟ แต่ไฟล์เราก็จะใหญ่ขึ้นด้วย

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

ความคิดเห็นผู้อ่านบทความนี้

ความเห็นที่ : 16	แจ้งลบ
ขอบคุณค่า :)
โดย : ipixx เมื่อ : 20 ก.พ. 53

ความเห็นที่ : 15	แจ้งลบ
ขอบคุณที่ช่วยเนะนำ นะคะ อิอิอิ+5555
โดย : เเอนด์ เมื่อ : 12 ม.ค. 52

ความเห็นที่ : 14	แจ้งลบ
นายวีขอบคุณนะครับ
โดย : v เมื่อ : 10 ม.ค. 52

ความเห็นที่ : 13	แจ้งลบ
ขอบคุณครับแต่ เพิ่มรูป2รูปยังไงอะครับ
โดย : สงสัย? เมื่อ : 22 ต.ค. 51

ความเห็นที่ : 12	แจ้งลบ
วาว ขอบคุณมากคับ
โดย : UnK เมื่อ : 10 ส.ค. 51

ความเห็นที่ : 11	แจ้งลบ
มันเพิ่มรูปยังไงครับรบกวนตอนแรก ๆ เลย
โดย : สมชาย เมื่อ : 08 ส.ค. 51

ความเห็นที่ : 10	แจ้งลบ
แล้วเพิ่มรูปต่อไปยังไงอะ
โดย : ไผ่ เมื่อ : 08 พ.ค. 51

ความเห็นที่ : 9	แจ้งลบ
จะเซฟแต่ไม่มีนาสกุล .gif ต้องทำยังไงค่ะ
โดย : joe เมื่อ : 03 ก.พ. 51

ความเห็นที่ : 8	แจ้งลบ
ทามเปงแว้ววววววววว!^o^
โดย : อัพ เตรียมพัฒน์บางใหญ่ เมื่อ : 30 ม.ค. 51

ความเห็นที่ : 7	แจ้งลบ
photoshop cs3 ไม่มี Image Ready หาโหลดได้ที่ไหน
โดย : Tuche เมื่อ : 28 ม.ค. 51

ความเห็นที่ : 6	แจ้งลบ
ทำไม่เป็นอะครับ
โดย : อยากทำเป็น เมื่อ : 07 ม.ค. 51

ความเห็นที่ : 5	แจ้งลบ
ขอบคุณครับทำได้ละ ^^ มะก่อนเรียน flashมา งงอันนี้ง่ายดี
โดย : guide เมื่อ : 06 ม.ค. 51

ความเห็นที่ : 4	แจ้งลบ
ขอบคุณมากค่ะ
โดย : punch เมื่อ : 23 ธ.ค. 50

ความเห็นที่ : 3	แจ้งลบ
อยากให้ละเอียดกว่านิดหน่อยคับดูแล้วยัง่ทำไม่ได้เลย
โดย : อยากให้ละเอียดกว่านิดหน่อยคับดูแล้วยัง่ทำไม่ได้เลย เมื่อ : 03 ธ.ค. 50

ความเห็นที่ : 2	แจ้งลบ
เจ๋งเหมือนกันนะเนี่ย?
โดย : หนน เมื่อ : 14 พ.ย. 50

ความเห็นที่ : 1	แจ้งลบ
ขอบคุนค่ะ อิอิ
โดย : วีวี่ เมื่อ : 31 ต.ค. 50