HOW TO CREATE GIF ANIMATION

Posted: February 9, 2008 in Technical Design

การทำภาพ GIF Animation

          การทำภาพ GIF animation ในที่นี้ผมหมายถึงการนำเอาภาพนิ่งที่เราได้จากการ capture มาจากวีดิโอคลิปอย่างง่ายๆ นะครับ ถ้าใครได้เตรียมภาพนิ่งตามหัวข้อ การบันทึกภาพนิ่งจากภาพวีดิโอคลิป ที่ผมพูดถึงมาก่อนหน้านี้แล้ว ก็มาต่อกันเลยครับ

          ให้เราเปิดโปรแกรม Adobe Photoshop CS2 ขึ้นมาใช้งาน เสร็จแล้วเลือกเลือก File ตามด้วย New เพื่อเปิดไฟล์ใหม่ขึ้นมา เราก็จะเห็นหน้าต่าง New ขึ้นมาตามรูปข้างล่าง ให้เราตั้งชื่อไฟล์ในช่อง Name: ในที่ นี้ผมตั้งชื่อไฟล์ของผมว่า my_animation ในส่วน Preset ให้เลือกเป็น Custom เพื่อจะได้ตั้งความกว้างและความสูงของภาพ ในที่นี้เราจะตั้ง Width ไว้ที่ 640 pixels ความสูงที่ 480 pixels ตามขนาดภาพนิ่งที่เราได้มา เสร็จแล้วคลิก OK

          ทีนี้เราก็จะได้ไฟล์เปล่าๆ ขึ้นมาตามที่เราตั้งชื่อไว้ เพื่อความ สะดวกในการใช้งานให้เราดูที่ Menu Bar ของโปรแกรมนี้แล้วคลิกที่ Window แล้วคลิกที่ชื่อ window ต่างๆ ที่มีเครื่องหมายถูกอยู่ข้างหน้าออกให้หมดให้เหลือเพียง Layers และ Tools ที่เราจำเป็นต้องใช้สำหรับงานนี้ก็พอ ส่วนหน้าต่างของไฟล์ที่เราเปิดใหม่ก็สามารถย่อขนาดให้เหลือ 50% ตามตัวอย่างในรูปข้างล่าง

          ต่อไปเราก็จะเริ่มนำภาพนิ่งที่เราเตรียมไว้มาวางซ้อนๆ กัน ที่เราเรียกว่า Layer โดยเริ่มจากภาพที่ 1 จนถึงภาพสุดท้าย ในที่นี้คือภาพที่ 16 ให้คลิกที่ menu คำว่า File ตามด้วย Open… แล้วเลือกภาพที่ 1 ที่เรา เก็บไว้มาเปิดในโปรแกรม Adobe Photoshop ที่เรากำลังทำงานอยู่ ต่อจากนั้นให้เราคลิกเลือกเครื่องมือ Move tool ที่อยู่ด้านซ้ายมือ (ตามตัวอย่างในรูปข้างล่าง) เสร็จแล้วคลิกค้างไว้ที่รูปภาพที่ 1 ที่เราเพิ่งเปิดเมื่อกี้ แล้วลากมาวางไว้บนพื้นที่ว่างของไฟล์ใหม่ของเรา รูปภาพที่ 1 ก็จะมาอยู่ใน Layer1 ของไฟล์ที่เราต้องการแล้ว ก็ให้ทำการปิดไฟล์ภาพที่ 1 โดยไม่ต้องไปทำอะไร ต่อจากนั้นก็เปิดไฟล์ภาพที่ 2 แล้วทำวิธีเดียวกันจนถึงภาพที่ 16

          จะสังเกตจากหน้าต่าง Layers ที่อยู่ด้านขวามือ ตอนนี้มี Layer ของภาพที่เรานำมาวางซ้อนๆ กันตั้งแต่ Layer1 ถึง Layer16 แล้ว ถ้าแถบสีน้ำเงินอยู่ตรงชื่อของ Layer ไหนแสดงว่า Layer นั้นเราสามารถทำการแก้ไขได้ เช่น ในรูปข้างล่าง Layer16 เป็น Layer ที่เราสามารถทำการแก้ไขได้ ถึงตอนนี้ก็ให้ทำการ Save ไฟล์ไว้ก่อนเผื่อเกิดไฟดับขึ้นมาไม่ทัน Save จะเสียเวลามาเริ่มต้นกันใหม่ ไฟล์ที่ Save ตอนนี้จะต้องเป็นไฟล์ที่มีนามสกุลเป็น .psd เท่านั้น เพราะเราสามารถนำมาแก้ไข Layers ต่างๆ ได้ภายหลัง

          ขั้นตอนต่อไปจะเป็นการเปลี่ยนการทำงานในหน้าต่างของ Photoshop ไปยัง ImageReady เพื่อเข้าสู่กระบวนการสร้าง GIF animation ตามรูปตัวอย่างข้างบน ตรงหน้าต่างเครื่องมือล่างสุดจะเห็นปุ่ม Edit in ImageReady ให้เราคลิกที่ปุ่มนี้เพื่อเปลี่ยนไปทำงานในโปรแกรม ImageReady เมื่อหน้าต่างของ ImageReady ปรากฏขึ้น ให้เราคลิกที่ Menu คำว่า Window แล้วเลือกเฉพาะ Animation, Layers และ Tools ซึ่งแล้วจัดวางแต่ละหน้าต่างตามรูปตัวอย่างข้างล่าง

          ให้ดูที่หน้าต่าง Animation ที่เราวางไว้ด้านล่าง ตอนนี้จะมี ภาพอยู่ 1 เฟรม ต่อจากนั้นให้เราเลือกเครื่องมือ Move tool จากกล่องเครื่องมือด้านซ้ายตามรูปตัวอย่าง แล้วคลิกเลือก layer1 ที่อยู่ในหน้าต่าง Layer ที่อยู่ด้านขวา ตามรูปตัวอย่างข้างบน ต่อจากนั้นให้คลิกเลือกเอารูปดวงตา (Indicates layer visibility) ออกหมดทุก Layers เหลือไว้ตรงหน้า layer1 และ Background เท่านั้น ที่ทำเช่นนี้ก็เพราะในเฟรมที่ 1 นี้เราต้องการให้มองเห็นเฉพาะภาพใน Layer1 เท่านั้น ส่วน Layer อื่นๆ ในเฟรมนี้เราจะมองไม่เห็น
          ขั้นตอนต่อไปก็จะเป็นการเพิ่มเฟรมที่ 2 ในหน้าต่าง Animation ให้เราคลิกที่ปุ่ม Duplicates current frame เราก็จะได้เฟรมที่ 2 เพิ่มเข้ามาโดยมีทุกอย่างเหมือนเฟรมที่ 1 แต่ตอนนี้ให้เราคลิกเลือก เฟรมที่ 2 แล้วเพิ่มดวงตาหรือเป็นการเปิดตา (Indicates layer visibility) ให้กับ layer2 แล้วก็คลิกเอารูปตาที่มีอยู่ใน Layer1 ออก เพราะฉะนั้นใน เฟรมที่ 2 นี้ก็จะมีเฉพาะ Layer2 เท่านั้นที่เราจะมองเห็นภาพ แล้วที่เหลืออีก 14 เฟรม 14 Layers ก็ทำวิธีเดียวกันจนครบทั้งหมด 16 เฟรม ตามรูปข้างล่างจะเห็นว่าเมื่อเราเลือกเฟรมที่ 10 ก็จะมีเพียง Layer10 กับ Background เท่านั้นที่มีรูปดวงตาเปิดอยู่

          ถึงตอนนี้เราก็สามารถ Preview ดูได้แล้วว่าภาพ GIF animation ของเราจะออกมายังไง โดยการคลิกที่ปุ่มเล่น (Play) ที่อยู่ด้านล่างของหน้าต่าง Animation ถ้าภาพเคลื่อนไหวเร็วไปหรือช้าไป เราก็สามารถปรับเวลาในการเล่นแต่ละเฟรมได้โดยอิสระ โดยให้คลิกเลือกเฟรมที่เราต้องการปรับเวลาการเล่นแล้วเลือกเวลาที่เหมาะสม ซึ่งจะมีให้เลือก ตั้งแต่ no delay, 0.1 – 10.0 วินาที และเรายังสามารถกำหนดเวลาเองได้อีกถ้าเราเลือก other… ท่านก็ลองปรับเวลาแต่ละเฟรมดูจนพอใจในภาพเคลื่อนไหวที่ออกมาแล้ว ก็ให้เลือกที่ Menu คำว่า File แล้วเลือก Save Optimized As… ซึ่งเราจะได้ไฟล์นามสกุล .gif ตามที่เราต้องการ ในที่นี้ผมก็จะได้ไฟล์ที่ชื่อ my_animation.gif
          แต่ไฟล์ที่ได้ตอนนี้รู้สึกว่าจะมีขนาดใหญ่ไปหน่อย ถ้าเราต้องการไฟล์ที่มีขนาดเล็กลง เราก็ต้องลดขนาดของภาพลงตามสัดส่วน โดยเลือก Menu คำว่า Image ตามด้วย Image Size ให้สังเกตที่หน้าต่าง Image Size ว่าตรงช่อง Constrain Proportions มีการเลือกไว้ ถ้าไม่มีการเลือกก็ต้องเลือกไว้ เพราะจะได้ปรับลดขนาดของภาพโดยสัดส่วนไม่เสียหาย ต่อจากนั้นเราก็ลองใส่ตัวเลขของ Width ในช่อง New Size จากเดิม 640 เปลี่ยนเป็น 200 เราจะเห็นว่า Height จะเปลี่ยนตามเป็น 150 pixels ทันที นั่นหมายถึงภาพ GIF animation ที่เราจะ Save ต่อไปจะมีขนาดลดลงเหลือ 200 X 150 pixels และนี่คือตัวอย่าง ของไฟล์ my_animation1.gif ที่ได้ลดขนาดของภาพลงแล้ว

ดูเพิ่มเติม — >>> การบันทึกภาพนิ่งจากภาพวีดิโอคลิป

Comments
  1. G. zama says:

     
    777777
    คุณพี่ขา….เข้ามาก็ถูกชี้หน้าเลยนะคะ
    สุดยอด….สุดหล่อ…7777777
     เดี่ยวจดรายละเอียดเอาใว้ก่อน
    มะรู้จะมีเวลามานั่งทํารึป่าวนี่ อิอิ
    ฝันดียามเช้านะคะ 
     

  2. Surasak says:

    ขอบคุณมากครับสำหรับความรู้นี้ ผมจะลองไปเล่นดู น่าจะไม่ยากมั้ง

  3. ของขวัญ says:

    อ่ะโห เด๋วต้องทำบ้าง ไม่ย๊อมไม่ยอม แว้วจะส่งผลงานให้ดูค่ะคุณอา อิอิ แต่จะสำเร็จป่าวก็ไม่ทราบค่ะยิ่งเก่งๆอยู่ด้วย

  4. genwan says:

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

  5. genwan says:

    ลืมเขียนไปอีกหน่อยน่ะคับ
     
    คุณอาเล่นแยกจอ ถึง 3จอเลยหรือคับ ท่าทางจะเป็น Power User สุดๆ
     
    ผมใช้แค่จอเดียวก็แย่แล้วคับ 555+

  6. Mr.L says:

    เข้ามาเก็บเกี่ยวความรู้ครับ   ขอบคุณเทคนิคดีๆครับคุณอา

  7. G. zama says:

     
    77777 32 ปี ยังเก็บความหล่อ ใว้เหมือนเดิมนะคะ
    เปลี่ยนไปนิดเดียวเอง ตัดทรงผมมะเหมือนเดิม 77777
    ของแอ๋วน่าเสียดายมีภาพ แต่แจก หนุ่มไปหมดแระ
    อิอิ ที่เหลืออยู่ก็ลอยตามนําไปหมด เฮ้ออ…เดี่ยวกลับ
    ไปถ่ายมาใหม่ก่อนนะคะ  ฝันดีนะคะคุณพี่…
     
     

  8. G. zama says:

     
    อะรีบอีกแระ วันนั้นก๋จะถามเหมือนกับ  Genwan  สี่จอรึป่าวคะ
    ด้านหน้า ด้านหลัง ด้านซ้าย ด้านขวา โฮ้ยยยย หล่อแล้วค่า…
    ไปจริงแระ กลัวตื่นมาชี้หน้าอีกอิอิ

  9. Lalita says:

     
     
    ขอบคุณมากนะคะคุณอาสำหรับคอมเม้นท์ที่อ่านแล้วอุ๊นน อุ่น ^^
     
    ไม่ได้เข้าสเปซนาน.. เหมือนคุณอาเลยค่ะ บ่นๆ แล้วก็เผ่น 555+
     
    รักษาสุขภาพด้วยน๊าคะ.. บุญรักษาค่ะ ^^
     

  10. Lalita says:

     
    ลืมเยย..
     
    ปล.อย่าชี้หน้านู๋ค๊า  นู๋เม้นท์แย้วววว

  11. bluefairy says:

    ขอขอบคุณสาระ ความรู้ดีๆที่นำมาฝากให้กันเสมอนะค่ะ
     
    และขอบคุณที่เข้าไปรับฟังเสียงจากอนาคตว่าที่ผู้สมัคร AF นะค่ะ อิอิ
     
    ล้อเล่นค่ะ อยากสมัครแต่คงอายุเกินแล้วอ่ะค่ะ อิอิ

  12. Peerawas says:

    ขอบคุณมากครับ 

  13. IZA says:

    หาย ไป น เลย หนู  ช่วง นี้ ว่าง มาก เลย มี เพื่อน ๆ มา ชวน ไป เยน มวย ต่าง หาก ค่ะ คุณ พ่อ

  14. Q says:

    ดีค่ะ … คุณอา
     
    ขอบคุณนะคะที่ชม แต่นู๋ว่ารูปมันอาจจะหลอกตาก็ได้นะคะ อิอิ
     
    ไม่ค่อยได้เข้ามาเยี่ยมกันเท่าไหร่ แต่คิดถึงเสมอนะคะ
     
    รักษาสุขภาพด้วยนะค่ะ งานยุ๊งยึ่งค่ะ อิอิ

  15. ruying says:

    Happy Valentine\’s Day!
    <Yesterday, Spaces Server was error!>
    ^__^
     
    =========================
     
    I\’m exhausted of the long holidays and people arround.
    The more I sleep, the more laziness I get. Huh!
    Need to be back to my routine! 5555
    =========================
     
    Take Care Sir!
     
    Have a nice day with the one you love!
     

  16. ruying says:

    Hello Sir,
    Have a nice day!
    It\’s cool again.
    T^T
     
    Take Care
     
    It\’s time of nonsense thing to do! =_=
     
     

  17. Sritala says:

    คุณอาactท่าได้เท่หืจังเลยคะ ฮิๆๆๆ

  18. Kaew says:

    คุณอาเจ้าขาได้ยินเหมือนกันค่ะว่าจะมา แต่ไม่แน่ใจว่าเมื่อไหร่คุณอาสบายดีนะคะ ขอโทษที่ไม่ได้แวะมาหานานทีเดียวแต่ยังคิดถึงเหมือนเดิมค่า

  19. T h e K i K says:

     
    ขอบพระคุณคุณอามากค่ะ
     
    คุณอาสบายดีนะคะ ขอให้แข็งแรงมากๆค่ะ
     

  20. -.- Pam says:

    ความรู้ดีๆยังงี้ ต้องกลับไปลองซะแล้ว อิอิ
     
    ขอบคุณนะคะ
     
    แป๋มกอ้แอบเห็น ฮิห้า ของคูณอา เหมือนกัน อิอิ แต่ยังไม่ได้เข้าไปดูเรย  ไว้จะแอบเข้าไปเยี่ยมนะคะ

  21. haljee says:

    ขอบคุณค่ะ😀

  22. T h e K i K says:

     
    ค่ะ คุณอา ทุกอย่างล้วนเป็นไปตามกรรม
     
    หนูมาทำงานวันนี้วันแรก ยังเจ็บแต่ก็ทนได้ค่ะ
     
    แต่อาการ depress นี่สิ ……………
     
    จะพยายามสู้ๆ ค่ะ
     

  23. i'm says:

    สวัสดีครับ
    สบายดีมั้ยคุณอา
    นานแล้วไม่ได้มาเยี่ยม
    งั้นขออวยพรให้มีความสุขปีใหม่
    ตรุษจีน วาเลนไทน์  ย้อนหลัง ด้วยจ้ะ

  24. IZA says:

    ลูก หา บล็อก ตัว เอง ไม่ เจอ ไม่ รู้ จะ อัพ ไง ดี งับ

  25. Kaew says:

    อิอิอิ
     
     
    คุณอาสบายดีนะคะ
    ข้อมูลแน่นเหมือนเดิมเลยอ่ะ
    เด๋วแก้วต้องลองดูค่ะ
     
     
    ป.ล. เสือใต้สละโสด แต่สิงห์เหนือยังไร้คู่ เฮ้อ
    อดไปงานด้วยแหล่ะค่ะ ฝากคุณอาถ่ายรูปมาเยอะๆนะค๊า

  26. T h e K i K says:

     
    แหะ แหะ กลับจากเมืองกรุง ก็ไม่ค่อยจะเต็มร้อยค่ะ สุขภาพนะค่ะ
     
    เลยไม่ค่อยได้ทักทายคุณอา แต่ยังรักและเคารพเสมอค่ะ
     
     

  27. Jang says:

    หวัดดีค่ะไม่เคยได้ใช้เลยสิคะ เพราะไม่มีใครหน้าตาดีกว่าสามีอยู่แล้ว..555เพิ่งว่างจากงานค่ะ ได้มาอัพสเปซ หน่อย ดั้นเป็นเรื่องหนักหัวกำลังเป็นประเด็นร้อนของชีวิตช่วงนี้จริงๆค่ะบางคนมันเล่นไม่เลิกเลยต้องอาศัยสเปซ เป็นโทรโข่งไม่ดีต่อเด็ก เยาวชนเป็นอย่างมากแต่ปลอดภัยสำหรับผู้สูงวัยอย่างเราๆ  ฮาท่าชี้นิ้วเปรี้ยวเกินร้อยนะคะ อิอิ

  28. belinda says:

    sorry for my late reply
    and thanks always visit and giv my space comment!
    I\’m just fine
    Just a bit busy with my job
    how abt you?
    hope u fine all the time
    Malaysia hot summer too!

  29. belinda says:

    cant forget to say
    great photos in ur space!
    u have lovely kids!

  30. Lalita says:

     
    สวัสดีค๊า ^^
    เหะๆ ที่นุ่นหมายถึง  คือมันเย็นมากอ่ะค่ะ
    เย็นจนนุ่นหูจะหลุดแร้ว -_-\’
     
    ไม่ได้ดีใจเยย แง่ม
    รักษาสุขภาพด้วยน๊าคะ
     

  31. จันทร์กระจ่างฟ้า says:

     
    พรุ่งนี้อรจะพาเพื่อนไปเที่ยววัดหงส์ฯ ที่จ.ปทุมค่ะ
     
    เพื่อนบอกว่า "มาเมืองไทยถ้าไม่ได้ไปวัดหงส์ ถือว่ามาเสียเที่ยว"
     
    พรุ่งนี้อรเป็นไกด์จำเป็นอีกหนึ่งวันก่อนส่งเพื่อนขึ้นเครื่องกลับในวันอังคาร
     
    คุณอาสบายดีนะคะ ส่วนอรสบายดีค่ะ🙂
     

  32. genwan says:

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

  33. แอบร๊ากโคนเท่เค้ามะด้ายร๊ากกก says:

    สวัสดีค่ะซัมบายดีกัลป่าวคะ

Leave a Reply

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 / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s