You are now being logged in using your Facebook credentials

www.krukikz.com

 

Font Size

Profile

Layout

Direction

Menu Style

Cpanel

บทที่ 18 : การสร้างภาพเคลื่อนไหว GIF

หน่วยที่ 5)  เทคนิคการตกแต่งภาพใน Photoshop

ประกอบด้วยแผนการสอนทั้ง 4 บท ดังนี้
 
  แผนที่ 17 : การใช้งาน Filter Gallery  (2 ชั่วโมง)
  แผนที่ 18 : การสร้างภาพเคลื่อนไหว Animation GIF   (2 ชั่วโมง) 
  แผนที่ 19 : การแปลงภาพถ่ายเป็นการ์ตูน  (2 ชั่วโมง)  
  แผนที่ 20 : การออกแบบปกแฟ้มสะสมผลงาน Portfolio  (2 ชั่วโมง)  
 

GIF ย่อมาจาก Graphics Interchange Format เป็นเทคโนโลยีการสร้างไฟล์สำหรับภาพ ทั้งภาพนิ่งและภาพเคลื่อนไหว ถูกคิดค้นโดยบริษัท CompuServe Inc. เมื่อปี ค.ศ. 1985 การสร้างไฟล์แบบ GIF ใช้เทคโนโลยีการบีบอักขนาดไฟล์ เพื่อให้ขนาดไฟล์เล็กลง ประหยัดเนื้อที่จัดเก็บ อีกทั้งยังสามารถสร้างภาพเคลื่อนไหวได้ด้วย โดยนิยมนำไปสร้างเป็นภาพเคลื่อนไหวทั้งแนวขำขันและแบนนเนอร์สำหรับการโฆษณา ความสามารถอีกอย่างหนึ่งของโปรแกรม Adobe Photoshop คือ ความสามารถในการสร้างภาพเคลื่อนไหว (แบบง่ายๆ) ได้ ซึ่งโปรแกรม Adobe Photoshop มีโปรแกรมเสริมอีกตัวหนึ่งที่ใช้ในการสร้างภาพเคลื่อนไหว (Animation) เพื่อใช้ประกอบหน้าเว็บเพจ เพิ่มความน่าสนใจให้มากยิ่งขึ้น 

1.  รู้จักความหมายของภาพเคลื่อนไหวและนามสกุลสำหรับภาพเคลื่อนไหว
2.  เรียนรู้ขั้นตอนการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Photoshop
3.  เรียนรู้ถึงการประยุกต์ใช้คำสั่ง Timeline สำหรับสร้างภาพเคลื่อนไหวในงานกราฟิกได้ 
4.  สามารถบันทึกไฟล์งานสำหรับภาพเคลื่อนไหว GIF ได้
 

 18.1 รู้จักกับภาพเคลื่อนไหว GIF

 
    GIF คืออะไร ??

GIF ย่อมาจาก Graphics Interchange Format เป็นเทคโนโลยีการสร้างไฟล์สำหรับภาพ ทั้งภาพนิ่งและภาพเคลื่อนไหว ถูกคิดค้นโดยบริษัท CompuServe Inc. เมื่อปี ค.ศ. 1985 การสร้างไฟล์แบบ GIF ใช้เทคโนโลยีการบีบอักขนาดไฟล์ เพื่อให้ขนาดไฟล์เล็กลง ประหยัดเนื้อที่จัดเก็บ อีกทั้งยังสามารถสร้างภาพเคลื่อนไหวได้ด้วย โดยนิยมนำไปสร้างเป็นภาพเคลื่อนไหวทั้งแนวขำขันและแบนนเนอร์สำหรับการโฆษณา ไฟล์ภาพที่สร้างด้วยเทคดนโลยี GIF จะมีรูปแบบไฟล์คือ xxxx.gif (xxxx คือชื่อไฟล์) โดยได้รับการจดสิทธิบัตรโดย Unisys Inc. โดยไฟล์ภาพแบบ GIF มีข้อเสียหลายอย่างเหมือนกัน เช่น เก็บความละเอียดของภาพได้น้อย (เพราะต้องใช้การบีบอัดไฟล์) และสีที่ได้ไม่สมจริง เนื่องจากสามารถเก็บความละเอียดของเม็ดสีได้สูงสุดเพียง 256 สี

ความสามารถอีกอย่างหนึ่งของโปรแกรม Adobe Photoshop คือ ความสามารถในการสร้างภาพเคลื่อนไหว (แบบง่ายๆ) ได้ ซึ่งโปรแกรม Adobe Photoshop มีโปรแกรมเสริมอีกตัวหนึ่งที่ใช้ในการสร้างภาพเคลื่อนไหว (Animation) เพื่อใช้ประกอบหน้าเว็บเพจ เพิ่มความน่าสนใจให้มากยิ่งขึ้น 

 
 

 


 18.2 ขั้นตอนการสร้างภาพเคลื่อนไหว Animation GIF  

 
1. เปิดโปรแกรม  Adobe Photoshop CS 6 ขึ้นมา
 
2. ไปที่ File แล้ว  Open
 
 
3. เลือกรูปภาพที่เตรียมไว้
 
 
4.เลือกรูปภาพที่ 1 แล้วเปลี่ยนชื่อ background เป็น 1 เพื่อให้ง่ายในการจำ Layer
 
 
 
5. ไปที่ Create a new layer
 
 
6. เปิด Folder ภาพที่เตรียมไว้ขึ้นมาลากไฟล์ที่ 2 มาว่างที่ชื่อ Layer 1 แล้วกด Enter จะได้ Layer 2 เป็นชื่อ 2
 
 
 
 
7. คลิกขวาที่  Layer 2 แล้วไปที่ Rasterize Layer ก็จะได้แบบนี้
 
 
8. คลิกที่ New layer เพื่อเพิ่ม Layer ขึ้นใหม่แล้วดึงภาพ ไฟล์ที่ 3 มาใส่ลงไป  ทำลงไปจนครบภาพที่เราเตรียมไว้
 

9.จนกว่าจะได้ครบ เช่นแบบนี้
 
 
10. จากนั้นเรามาทำให้เป็นถาพเคลือนไหวเลยโดยมาคลิกที่ปุ่ม Timeline
 
 
ก็จะได้เป็นรูปแบบดังนี้ 
 
 
จากนั้นคลิกที่ลูกศรชี้ลง ที่อยู่ขวามือ Create Video Timeline แล้วเลือก create Frame Animation
 
 
 
12. จากนั้นเลือก create Frame Animation จะได้แบบนี้
 

13. ปิดตา layer ให้หมด ยกเว้น layer ที่ 1 จากนั้นไป  new layer ตรงแถบ Timeline เพื่อเพิ่ม layer  ของ Animation  แล้วเปิดตา layer ที่ 2 ทำตามขั้นตอนนี้ไปจนครบ layer ถึง layer สุดท้าย
 


จะเห็นว่าแต่ละ layer ใน Timeline จะเป็น 0 sec. นั้นช่องให้เรากำหนดความเร็วของภาพ
 


ในที่นี้ให้เราเลือก 0.3 และเลือกเป็น Forever เพื่อให้เล่นวนไปวนมาโดยไม่หยุด จะเห็นว่าตอนแรกจะเป็น once
 


จากนั้น เราจะไป save โดยไปที่ File แล้วไปที่ save for web...
 
 
จากนั้น save ได้เลย แล้วโปรแกรมจะให้เราเลือก folder เพื่อจัดเก็บไฟล์ ที่ต้องการ save 
 

จากนั้นก็ตั้งชื่อไฟล์  แล้วก็ save ได้เลย
 

จะได้รูปภาพเคลื่อนไหว ดังนี้
 
 
 

[ กลับด้านบน ]


 17.3 ตัวอย่างไฟล์ภาพเคลื่อนไหวแบบต่างๆ 

รูปภาพที่เกี่ยวข้อง  à¸£à¸¹à¸›à¸ à¸²à¸žà¸—ี่เกี่ยวข้อง

 à¸œà¸¥à¸à¸²à¸£à¸„้นหารูปภาพสำหรับ rilakkuma gif

 

 

ใบงานที่ 5.2  :  การสร้างภาพเคลื่อนไหว GIF
 
 
 

 
 
Workshop
 
ให้นักเรียนสร้างภาพเคลื่อนไหว GIF มาเรียงต่อกันบน Timeline จำนวน 3 เฟรมขึ้นไป
แล้วบันทึกชื่อเป็นเลขที่ตามด้วยนามสกุล .gif  ส่งภายในคาบเรียน 
 
 
 
 

 

Follow us on

  • Grab our RSS feed
  • Joomla Fan Club

About US

เว็บไซต์บทเรียนออนไลน์ วิชาคอมพิวเตอร์  krukikz.com จัดทำโดย นางสาวกฤติยา พลหาญ  ตำแหน่ง ครูชำนาญการ  โรงเรียนเสลภูมิพิทยาคม อำเภอเสลภูมิ จังหวัดร้อยเอ็ด  สำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 27

You are here