GIMP เป็นซอฟต์แวร์ที่ทรงพลังอย่างน่าทึ่งเมื่อพิจารณาว่าฟรี โดยเฉพาะอย่างยิ่ง นักออกแบบเว็บไซต์อาจรู้สึกขอบคุณสำหรับความสามารถในการผลิต-g.webp
Animated GIFs เป็นแอนิเมชั่นง่ายๆ ที่คุณจะเห็นในหน้าเว็บหลายๆ หน้า และถึงแม้จะซับซ้อนน้อยกว่าแอนิเมชั่น Flash มาก แต่ก็สร้างได้ง่ายมากโดยทุกคนที่มีความเข้าใจพื้นฐานเกี่ยวกับ GIMP
วิธีสร้างภาพเคลื่อนไหว-g.webp" />
ขั้นตอนต่อไปนี้แสดงแอนิเมชั่นขนาดแบนเนอร์เว็บง่ายๆ โดยใช้กราฟิกพื้นฐาน ข้อความบางส่วน และโลโก้
คำแนะนำในบทความนี้ใช้กับ GIMP เวอร์ชัน 2.10.12.
-
เปิดเอกสารใหม่ ในตัวอย่างนี้ เราได้เลือกเทมเพลตที่กำหนดไว้ล่วงหน้าของ เว็บแบนเนอร์ขนาดใหญ่ โมบายล์ 320x100.
สำหรับแอนิเมชั่นของคุณ คุณสามารถเลือกขนาดที่กำหนดไว้ล่วงหน้าหรือตั้งค่าขนาดที่กำหนดเองได้ ขึ้นอยู่กับว่าคุณจะใช้แอนิเมชั่นสุดท้ายของคุณอย่างไร
สำหรับบทช่วยสอนนี้ แอนิเมชั่นจะประกอบด้วยเจ็ดเฟรม และแต่ละเฟรมจะแสดงด้วยแต่ละเลเยอร์ ซึ่งหมายความว่าไฟล์ GIMP สุดท้ายจะมีเจ็ดเลเยอร์ รวมถึงพื้นหลัง
-
ตั้งเฟรมวัน. แอนิเมชั่นจะเริ่มต้นด้วยพื้นที่ว่าง ดังนั้นจึงไม่จำเป็นต้องเปลี่ยนแปลงเลเยอร์ Background จริงเนื่องจากเป็นสีขาวล้วนแล้ว
อย่างไรก็ตาม จำเป็นต้องเปลี่ยนชื่อเลเยอร์ใน Layers คลิกขวาที่เลเยอร์ Background ในจานสี แล้วเลือก แก้ไขแอตทริบิวต์ของเลเยอร์.
Image -
ในกล่องโต้ตอบ Edit Layer Attributes ที่เปิดขึ้น ให้เพิ่ม (250ms) ต่อท้ายชื่อเลเยอร์ ซึ่งจะกำหนดระยะเวลาที่เฟรมนี้จะแสดงในภาพเคลื่อนไหว ms ย่อมาจากมิลลิวินาทีและแต่ละมิลลิวินาทีคือหนึ่งในพันของวินาที เฟรมแรกนี้จะแสดงเป็นเวลาหนึ่งในสี่ของวินาที
Image -
ตั้งกรอบสอง. สำหรับบทช่วยสอน เฟรมนี้ใช้กราฟิกรอยเท้า ไปที่ File > Open as Layers และเลือกไฟล์กราฟิก ซึ่งจะวางรอยเท้าบนเลเยอร์ใหม่ซึ่งสามารถวางตำแหน่งได้ตามต้องการโดยใช้ Move Tool.
Image -
เช่นเดียวกับเลเยอร์พื้นหลัง ต้องเปลี่ยนชื่อเลเยอร์ใหม่นี้เพื่อกำหนดเวลาแสดงสำหรับเฟรม ในกรณีนี้ 750ms.
ในจานสี Layers การแสดงตัวอย่างเลเยอร์ใหม่จะแสดงพื้นหลังสีดำรอบๆ กราฟิก แต่ในความเป็นจริง พื้นที่นี้โปร่งใส
Image -
ตั้งเฟรมสาม สี่ และห้า สามเฟรมถัดไปเป็นรอยเท้าเพิ่มเติมที่จะเดินข้ามแบนเนอร์ สิ่งเหล่านี้ถูกแทรกในลักษณะเดียวกับเฟรมที่สอง โดยใช้กราฟิกเดียวกันนั้นและกราฟิกอีกอันสำหรับเท้าอีกข้างหนึ่ง เช่นเคยตั้งเวลาไว้ที่ 750ms สำหรับแต่ละเฟรม
รอยเท้าแต่ละชั้นต้องมีพื้นหลังสีขาวเพื่อให้มองเห็นได้เพียงเฟรมเดียว ปัจจุบันแต่ละชั้นมีพื้นหลังโปร่งใส เราสามารถทำได้โดยการสร้างเลเยอร์ใหม่ทันทีใต้เลเยอร์รอยเท้า เติมเลเยอร์ใหม่ด้วยสีขาว จากนั้นคลิกขวาที่เลเยอร์รอยเท้าแล้วคลิก ผสานลง
-
Set Frame Six. เฟรมนี้เป็นเพียงเฟรมเปล่าที่เต็มไปด้วยสีขาวซึ่งจะทำให้รอยเท้าสุดท้ายหายไปก่อนที่เฟรมสุดท้ายจะปรากฏขึ้น เราตั้งชื่อเลเยอร์นี้ว่า Interval และเลือกให้แสดงผลนี้เพียง 250ms
คุณไม่จำเป็นต้องตั้งชื่อเลเยอร์ แต่สามารถทำให้ไฟล์เลเยอร์ทำงานได้ง่ายขึ้น
Image -
เซ็ตเฟรมเซเว่น. นี่คือเฟรมสุดท้ายและแสดงข้อความบางส่วนพร้อมกับโลโก้ Lifewire.com ขั้นตอนแรกนี่คือการเพิ่มเลเยอร์อื่นด้วยพื้นหลังสีขาว
Image -
ถัดไป ใช้ เครื่องมือข้อความ เพื่อเพิ่มข้อความ สิ่งนี้ถูกนำไปใช้กับเลเยอร์ใหม่ แต่เราจะจัดการกับสิ่งนั้นเมื่อคุณเพิ่มโลโก้หรือรูปภาพใหม่ ซึ่งสามารถทำได้ในลักษณะเดียวกับที่เพิ่มกราฟิกรอยเท้าก่อนหน้านี้
Image -
เมื่อเราจัดเรียงสิ่งเหล่านี้ตามต้องการแล้ว เราก็สามารถใช้ Merge Down เพื่อรวมโลโก้และเลเยอร์ข้อความ แล้วรวมเลเยอร์ที่รวมกับเลเยอร์สีขาวที่เพิ่มเข้ามา ก่อนหน้านี้.สิ่งนี้จะสร้างเลเยอร์เดียวที่จะสร้างเฟรมสุดท้ายและเราเลือกที่จะแสดงสิ่งนี้เป็นเวลา 4000ms
Image -
ดูตัวอย่างภาพเคลื่อนไหว ก่อนบันทึกภาพเคลื่อนไหว-g.webp" />ตัวกรอง >แอนิเมชั่น > Playback จะเปิดกล่องโต้ตอบแสดงตัวอย่างพร้อมปุ่มอธิบายตัวเองเพื่อเล่นแอนิเมชั่น หากมีสิ่งผิดปกติสามารถแก้ไขได้ ณ จุดนี้ มิเช่นนั้นก็สามารถบันทึกเป็น-g.webp" />
ลำดับภาพเคลื่อนไหวถูกตั้งค่าตามลำดับชั้นที่ซ้อนกันในจานสี Layers โดยเริ่มจากพื้นหลังหรือชั้นต่ำสุดและขึ้นไป หากแอนิเมชั่นของคุณเล่นไม่ต่อเนื่อง คุณจะต้องปรับลำดับของเลเยอร์ของคุณ โดยคลิกที่เลเยอร์เพื่อเลือกและใช้ลูกศรขึ้นและลงในแถบด้านล่างของจานเลเยอร์เพื่อเปลี่ยนตำแหน่ง
Image -
บันทึกภาพเคลื่อนไหว GIF การบันทึก-g.webp" />File > Save a Copy และตั้งชื่อไฟล์ที่เกี่ยวข้องและเลือกตำแหน่งที่คุณต้องการบันทึกไฟล์
Image -
ถัดไป ไปที่ ไฟล์ > ส่งออก As เพื่อบันทึกเป็นภาพเคลื่อนไหว GIF
Image -
ในกล่องโต้ตอบ ส่งออกรูปภาพ ที่เปิดขึ้น ให้เลือก เลือกประเภทไฟล์ แล้วเลื่อนไปที่รูปภาพ-g.webp" />หากคุณได้รับคำเตือนเกี่ยวกับเลเยอร์ที่ขยายเกินขอบเขตจริงของรูปภาพ ให้เลือกปุ่ม Crop
Image -
ตอนนี้จะนำไปสู่กล่องโต้ตอบ บันทึกเป็น GIF ที่มีส่วนของ ตัวเลือก-g.webp" /> คุณสามารถปล่อยให้สิ่งเหล่านี้เป็นค่าเริ่มต้นได้ แต่ถ้าคุณต้องการให้แอนิเมชั่นเล่นเพียงครั้งเดียว คุณควรยกเลิกการเลือก วนซ้ำตลอดไป.
Image - ตอนนี้คุณสามารถแชร์-g.webp
สรุป
ขั้นตอนที่แสดงนี้จะให้เครื่องมือพื้นฐานในการสร้างแอนิเมชั่นง่ายๆ ของคุณเอง โดยใช้กราฟิกและขนาดเอกสารที่แตกต่างกัน แม้ว่าผลลัพธ์ที่ได้จะค่อนข้างธรรมดาในแง่ของแอนิเมชั่น แต่ก็เป็นกระบวนการที่ง่ายมากที่ทุกคนที่มีความรู้พื้นฐานเกี่ยวกับ GIMP สามารถทำได้
