วิธีการสร้าง GIF เคลื่อนไหวโดยใช้ GIMP
GIMP เป็นซอฟต์แวร์ที่มีประสิทธิภาพอย่างน่าทึ่งเนื่องจากถือว่าเป็นซอฟต์แวร์ฟรี นักออกแบบเว็บไซต์ โดยเฉพาะอาจรู้สึกขอบคุณสำหรับความสามารถในการผลิต GIF ภาพเคลื่อนไหวที่เรียบง่าย
GIF ภาพเคลื่อนไหวเป็นภาพเคลื่อนไหวง่ายๆที่คุณเห็นในหน้าเว็บจำนวนมากและในขณะที่ ภาพเคลื่อนไหว เหล่านี้มีความซับซ้อนน้อยกว่า ภาพเคลื่อนไหว Flash ผู้ใช้ที่มีความเข้าใจพื้นฐานเกี่ยวกับ GIMP สามารถทำได้ง่ายมาก
ขั้นตอนต่อไปนี้แสดงภาพเคลื่อนไหวขนาดแบนด์วิดท์ขนาดเล็กโดยใช้กราฟิกขั้นพื้นฐานบางข้อความและโลโก้
01 จาก 09
เปิดเอกสารใหม่
ในตัวอย่างนี้ฉันจะใช้ GIMP เพื่อสร้างแบนเนอร์เว็บ GIF แบบเคลื่อนไหวขั้นพื้นฐาน ฉันได้เลือกเทมเพลตที่ตั้งไว้ล่วงหน้าของ เว็บแบนเนอร์ทั่วไป 468x60 สำหรับภาพเคลื่อนไหวคุณสามารถเลือกขนาดที่ตั้งไว้หรือตั้งค่ามิติข้อมูลที่กำหนดเองได้ขึ้นอยู่กับว่าคุณจะใช้ภาพเคลื่อนไหวขั้นสุดท้ายอย่างไร
ภาพเคลื่อนไหวของฉันจะประกอบด้วยเจ็ดเฟรมและแต่ละเฟรมจะแสดงโดยแต่ละเลเยอร์ซึ่งหมายความว่าไฟล์ GIMP สุดท้ายของฉันจะมีเจ็ดเลเยอร์รวมทั้งพื้นหลัง
02 จาก 09
ตั้งกรอบหนึ่ง
ฉันต้องการให้ภาพเคลื่อนไหวของฉันเริ่มต้นด้วยเนื้อที่ว่างดังนั้นฉันจึงไม่ทำการเปลี่ยนแปลงใด ๆ กับ พื้นหลัง จริงที่มีอยู่แล้วเป็นสีขาวล้วน
อย่างไรก็ตามฉันจำเป็นต้องเปลี่ยนชื่อของเลเยอร์ใน เลเยอร์เลเยอร์ ฉันคลิกขวาที่ พื้นหลัง ในจานสีและเลือก แก้ไขแอตทริบิวต์ Layer ในกล่องโต้ตอบ แก้ไขเลเยอร์ แอ็ตทริ บิวต์ ที่เปิดขึ้นฉันเพิ่ม (250ms) ไว้ที่ส่วนท้ายของชื่อเลเยอร์ ซึ่งจะกำหนดระยะเวลาที่กรอบนี้จะปรากฏในภาพเคลื่อนไหว มิลลิวินาทีเป็นมิลลิวินาทีและมิลลิวินาทีเป็นหนึ่งพันวินาที กรอบแรกนี้จะแสดงเป็นเวลาหนึ่งในสี่ของวินาที
03 จาก 09
ตั้งค่ากรอบสอง
ฉันต้องการใช้ภาพลายเท้าสำหรับเฟรมนี้เพื่อไปที่ ไฟล์ > เปิดเป็นเลเยอร์ และเลือกไฟล์กราฟิกของฉัน ซึ่งจะวางรอยเท้าบนเลเยอร์ใหม่ซึ่งฉันสามารถจัดตำแหน่งได้ตามต้องการโดยใช้ Move Tool เช่นเดียวกับชั้นพื้นหลังฉันจำเป็นต้องเปลี่ยนชื่อเลเยอร์เพื่อกำหนดเวลาการแสดงผลสำหรับเฟรม ในกรณีนี้ฉันได้เลือก 750 ล้าน
หมายเหตุ: ใน เลเยอร์เลเยอร์ การแสดงตัวอย่างเลเยอร์ใหม่จะแสดงพื้นหลังสีดำรอบ ๆ ภาพ แต่ในความเป็นจริงพื้นที่นี้โปร่งใส
04 จาก 09
ตั้งเฟรมสาม, สี่และห้า
ภาพสามเฟรมถัดไปคือรอยเท้าที่เดินข้ามแบนเนอร์มากขึ้น เหล่านี้จะแทรกในลักษณะเดียวกับกรอบที่สองโดยใช้กราฟิกเดียวกันและกราฟิกอื่นสำหรับเท้าอื่น ๆ ก่อนกำหนดเวลาเป็น 750ms สำหรับแต่ละเฟรม
เลเยอร์แต่ละชั้นจำเป็นต้องมีพื้นหลังสีขาวเพื่อให้มีเพียงกรอบเดียวที่มองเห็นได้ - ขณะนี้แต่ละส่วนมีพื้นหลังโปร่งใส ฉันสามารถทำเช่นนี้ได้โดยการสร้าง เลเยอร์ใหม่ ทันทีที่อยู่ด้านล่างของรอยเท้าโดยใส่เลเยอร์ใหม่ด้วยสีขาวจากนั้นคลิกขวาที่เลเยอร์ภาพพื้นหลังและคลิก ผสานลง
05 จาก 09
ตั้งกรอบหก
เฟรมนี้เป็นกรอบเปล่าที่เต็มไปด้วยสีขาวซึ่งจะทำให้รอยเท้าสุดท้ายหายไปก่อนที่เฟรมสุดท้ายจะปรากฏขึ้น ฉันตั้งชื่อช่วง Interval นี้และเลือกที่จะแสดงผลนี้เป็นเวลาเพียง 250ms คุณไม่จำเป็นต้องตั้งชื่อเลเยอร์ แต่สามารถทำให้ไฟล์เลเยอร์ทำงานได้ง่ายขึ้น
06 จาก 09
ตั้งกรอบเจ็ด
นี่เป็นเฟรมสุดท้ายและแสดงข้อความบางส่วนพร้อมกับโลโก้ของ About.com ขั้นตอนแรกนี่คือการเพิ่มเลเยอร์อื่นที่มีพื้นหลังสีขาว
ถัดไปฉันใช้ เครื่องมือข้อความ เพื่อเพิ่มข้อความ นี่ใช้กับเลเยอร์ใหม่ แต่ฉันจะจัดการกับเรื่องนี้หลังจากที่ฉันได้เพิ่มโลโก้แล้วซึ่งฉันสามารถทำในลักษณะเดียวกับที่ฉันได้เพิ่มภาพรอยเท้าไว้ก่อนหน้านี้ เมื่อฉันได้จัดเรียงตามต้องการแล้วฉันจะใช้ Merge Down เพื่อรวมโลโก้และเลเยอร์ข้อความและผสานชั้นที่รวมเข้าด้วยเลเยอร์สีขาวที่เพิ่มไว้ก่อนหน้านี้ นี้ผลิตชั้นเดียวที่จะฟอร์มกรอบสุดท้ายและฉันเลือกที่จะแสดงนี้สำหรับ 4000ms
07 จาก 09
ดูตัวอย่างภาพเคลื่อนไหว
ก่อนบันทึกภาพเคลื่อนไหว GIF GIMP มีตัวเลือกในการดูตัวอย่างในการดำเนินการโดยไปที่ Filters > Animation > Playback ซึ่งจะเปิดกล่องโต้ตอบแสดงตัวอย่างด้วยปุ่มที่อธิบายตัวเองเพื่อเล่นภาพเคลื่อนไหว
หากบางสิ่งไม่ถูกต้องคุณสามารถแก้ไขได้ในตอนนี้ มิฉะนั้นจะสามารถบันทึกเป็นภาพเคลื่อนไหว GIF ได้
หมายเหตุ: ลำดับภาพเคลื่อนไหวถูกตั้งค่าตามลำดับชั้นที่ซ้อนกันใน เลเยอร์เลเยอร์ เริ่มจากพื้นหลังหรือชั้นต่ำสุดและทำงานขึ้น หากภาพเคลื่อนไหวของคุณเล่นตามลำดับคุณจะต้องปรับลำดับของเลเยอร์โดยคลิกที่เลเยอร์เพื่อเลือกและใช้ลูกศรขึ้นและลงในแถบด้านล่างของ เลเยอร์เลเยอร์ เพื่อเปลี่ยนตำแหน่งของภาพ
08 จาก 09
บันทึกภาพเคลื่อนไหว GIF
การบันทึก GIF แบบเคลื่อนไหวคือการออกกำลังกายที่ตรงไปตรงมา ขั้นแรกให้ไปที่ File > Save a Copy และใส่ชื่อไฟล์ที่เกี่ยวข้องและเลือกตำแหน่งที่คุณต้องการบันทึกไฟล์ ก่อนที่จะกด Save ให้คลิกที่ Select File Type (By Extension) ทางด้านล่างซ้ายและจากรายการที่เปิดขึ้นให้เลือก GIF image ในกล่องโต้ตอบ ส่งออกไฟล์ ที่เปิดขึ้นให้คลิกปุ่มตัวเลือก บันทึกเป็นภาพเคลื่อนไหว และคลิกปุ่ม เอ็กซ์พอร์ต หากคุณได้รับคำเตือนเกี่ยวกับเลเยอร์ที่ขยายเกินขอบที่แท้จริงของรูปภาพให้คลิกปุ่ม ครอบตัด
ตอนนี้จะนำไปสู่กล่องโต้ตอบ บันทึกเป็น GIF พร้อมกับส่วนของ ตัวเลือก GIF เคลื่อนไหว คุณสามารถปล่อยให้รายการเหล่านี้เป็นค่าเริ่มต้นได้ แต่ถ้าคุณต้องการให้ภาพเคลื่อนไหวเล่นเพียงครั้งเดียวคุณควรยกเลิกการเลือก Loop ตลอดไป
09 จาก 09
ข้อสรุป
ขั้นตอนที่แสดงไว้ที่นี่จะเป็นเครื่องมือพื้นฐานในการสร้างภาพเคลื่อนไหวง่ายๆของคุณโดยใช้กราฟิกและขนาดเอกสารที่แตกต่างกัน ในขณะที่ผลสรุปเป็นพื้นฐานในแง่ของภาพเคลื่อนไหว แต่เป็นกระบวนการที่ง่ายมากที่ทุกคนที่มีความรู้พื้นฐานเกี่ยวกับ GIMP สามารถทำได้ GIF ภาพเคลื่อนไหวอาจเป็นช่วงเวลาสำคัญของพวกเขาตอนนี้ แต่ด้วยความนึกคิดและการวางแผนอย่างรอบคอบพวกเขายังคงสามารถใช้องค์ประกอบภาพเคลื่อนไหวที่มีประสิทธิภาพได้อย่างรวดเร็ว