วิธีสร้าง GIF ใน PhotoShop จากวิดีโอ

หากคุณมาถึงที่นี่โดยสงสัยว่าจะสร้าง GIF ด้วย Photoshop ได้อย่างไร อาจเป็นเพราะวิดีโอที่คุณอัปโหลดไปยังเว็บไซต์ของคุณทำให้เวลาในการโหลดช้าลง คุณมาถูกที่แล้ว ในคู่มือนี้ เราจะแสดงให้คุณเห็นถึงวิธีการสร้าง GIF ใน Photoshop จากฟุตเทจวิดีโอ มันจะดูดีในเว็บไซต์ของคุณและจะได้รับการปรับให้เหมาะสมสำหรับความเร็วมากกว่าไฟล์วิดีโอ!

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

สำหรับบทช่วยสอนนี้ คุณจะต้องใช้ฟุตเทจวิดีโอและ Adobe Photoshop หากคุณไม่ได้สมัครใช้งาน Photoshop คุณสามารถทดลองใช้งานฟรี ดังนั้น คุณอาจพบว่าการมี Photoshop ช่วยได้มากสำหรับการออกแบบเว็บ! หากวิดีโอของคุณยาวมาก คุณอาจต้องการตัดมันก่อนในโปรแกรมตัดต่อวิดีโอ เช่น iMovie หรือ Adobe Premiere Photoshop ยังมีตัวเลือกการตัดแต่งเมื่อคุณนำเข้า แต่โปรแกรมตัดต่อวิดีโอจะดีกว่าถ้าฟุตเทจต้นฉบับยาวมาก

มาเริ่มกันเลย.

ดูตัวอย่างผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของ GIF ที่เราสร้างขึ้นสำหรับบทช่วยสอนนี้ ซึ่งเหมาะสำหรับพื้นหลังของส่วนหรือโมดูล

ในการเริ่มต้น ให้นำเข้าวิดีโอไปยัง Photoshop

ในการนำเข้าวิดีโอคลิปไปยัง Photoshop คุณต้องอยู่ในโปรแกรมแก้ไข Photoshop ก่อน จากนั้นคลิก File > Import > Video Frames to Layers เลือกวิดีโอที่คุณต้องการใช้แล้วคลิกเปิด

ในกล่องโต้ตอบป๊อปอัป คุณมีสองตัวเลือก 1. ตั้งแต่ต้นจนจบ – เพื่อใช้วิดีโออย่างครบถ้วนหรือ 2. ช่วงที่เลือกเท่านั้น – เพื่อใช้ตัวเลือกการตัดแต่งและใช้เฉพาะส่วนของวิดีโอ

ด้านล่างนี้คือตัวเลือกเพื่อจำกัดการนำเข้าตามจำนวนเฟรมที่เลือก เลือกจำนวนเล็กน้อยหากวิดีโอสั้นกว่าและมีจำนวนมากกว่าหากวิดีโอมีความยาว การดำเนินการนี้อาจต้องใช้การลองผิดลองถูกจนกว่าคุณจะมีขั้นตอนที่ถูกต้อง ตัวอย่างเช่น ฟุตเทจที่มีการเปลี่ยนแปลงเล็กน้อยหรือช้าจะมีเฟรมจำนวนมากที่เกือบจะเหมือนกันทุกประการ ในทางกลับกัน หากฟุตเทจนั้นเร็วและมีการเปลี่ยนแปลงของภาพมากมาย หากคุณนำเฟรมจำนวนมากเกินไป ภาพอาจดูกระตุก

สำหรับบทช่วยสอนนี้ เราเลือก 'ตั้งแต่ต้นจนจบ' และ 'จำกัดทุก 3 เฟรม' ตรวจสอบให้แน่ใจว่าได้คลิก 'Make Frame Animation'

ปรับแต่งภาพ

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

สำหรับผู้สร้างสรรค์ที่มีอยู่ การปรับเลเยอร์ต่างๆ จะสร้างเอฟเฟกต์ต่างๆ ให้กับ GIF ของคุณ สิ่งที่คุณทำไม่ได้คือลบพื้นหลังหรือใช้เครื่องมือที่ทำงานครั้งละชั้นเท่านั้น

เคล็ดลับสำหรับมือโปร: ตรวจสอบให้แน่ใจว่าได้เลือกเลเยอร์ทั้งหมดแล้ว

วิธีการครอบตัดเลเยอร์ทั้งหมดในครั้งเดียว

เลือกเลเยอร์ทั้งหมดโดยคลิกที่เลเยอร์ 1 จากนั้นกด shift คลิกที่เลเยอร์บนสุด เลือกเครื่องมือ Rectangular Marquee แล้วเลือกวิดีโอที่คุณต้องการเก็บไว้ (ไม่ใช่สิ่งที่คุณต้องการนำออก) คลิกที่ Image > Crop และพื้นที่ภายนอกที่เลือกจะหายไป ในวิดีโอของเรา เราเลือกพื้นที่วิดีโอทั้งหมดโดยไม่ได้เลือกส่วนด้านบนไว้เล็กน้อย เราต้องการทำให้วิดีโอทั้งหมดสูงน้อยลงและลบขอบสีขาวของขอบฟ้าออก

วิธีปรับสีใน GIF

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

GIF นี้ดาวน์โหลดที่ 211MB โดยไม่มีฟิลเตอร์สี และ 312MB พร้อมการปรับสี หากคุณต้องการปรับสีจริงๆ คุณต้องตัดเฟรมให้เล็กลงเพื่อทำให้ไฟล์สุดท้ายมีขนาดเล็กลง เพิ่มเติมในส่วนถัดไป

ใช้ไทม์ไลน์เพื่อแก้ไขเฟรม

ด้วยหน้าต่างไทม์ไลน์ คุณสามารถแก้ไขเฟรมเพื่อลดขนาดสุดท้ายของไฟล์ GIF ได้ ตัวอย่างเช่น เฟรมพิเศษที่ส่วนท้ายของคลิปซึ่งดูเหมือนจะล้าหลังหรือสร้างส่วนที่นิ่ง ยิ่งคุณถอดเฟรมได้มากเท่าไหร่ก็ยิ่งดีเท่านั้น! แต่ระวังว่าคุณนำเฟรมออกมากเกินไปและเอฟเฟกต์สุดท้ายจะกระตุก ใช้เวลาในการตรวจสอบว่าลูปมีลักษณะอย่างไรหลังจากลบบางเฟรม

หากต้องการเข้าถึงหน้าต่างไทม์ไลน์และดูว่า GIF ทำงานอย่างไรในลูป ให้คลิกที่ Window > Timeline แผงแนวนอนยาวจะเปิดขึ้นที่ส่วนล่างของหน้าจอ ที่มุมล่างซ้ายมีตัวควบคุมบางอย่าง เลือกตัวเลือกวนเป็น 'ตลอดกาล' แล้วกดปุ่มเล่นเพื่อดูว่า GIF มีลักษณะอย่างไร ในกรณีของเรา GIF ของเราดูค่อนข้างดี แต่ยังยาวเกินไป ที่มากกว่า 200 เฟรมและด้วยการปรับสี ไฟล์สุดท้ายจะมีขนาดถึง 312mB คุณสามารถตรวจสอบขนาดของไฟล์สุดท้ายได้โดยทำตามขั้นตอนในส่วน "บันทึกเป็น GIF" ด้านล่าง ดูแล้วกดยกเลิกแทนเซฟได้เลย คุณยังสามารถลดขนาดไฟล์ด้วยตัวเลือกส่งออกสำหรับเว็บ

วิธีลบเฟรมเพื่อทำให้ไฟล์ GIF เล็กลง

ในการทำให้ GIF ของเราเล็กลงมาก เรานำ 200 เฟรมสุดท้ายออก วิดีโอฉบับสมบูรณ์มีส่วนที่กล้องโดรนหันและเลื่อนไปทางสวนสาธารณะด้านหลังชายหาด เราไม่ต้องการมัน ตอนนี้ GIF ของเรามีน้ำหนัก 160MB ยังค่อนข้างใหญ่ เราไม่นำเฟรมออกอีกต่อไปเพราะมันจะกระตุก ดังนั้นเราจึงปล่อยให้มันเป็นการปรับให้เหมาะสมในภายหลังด้วยตัวเลือก 'บันทึกสำหรับเว็บ'

หากต้องการลบเฟรม คุณสามารถเลือกหนึ่งเฟรมแล้วกดไอคอนถังขยะซึ่งอยู่ใต้ฟังก์ชันการเล่นของหน้าต่างไทม์ไลน์ ในทำนองเดียวกัน คุณสามารถเลือกกลุ่มเฟรมที่ต่อเนื่องกันโดยคลิกที่เฟรมหนึ่งแล้วคลิกเฟรมก่อนหรือหลังโดยกด shift+click หากคุณไม่ต้องการตัดฟุตเทจจากจุดเริ่มต้นหรือจุดสิ้นสุดของ GIF แต่ต้องการย่อให้สั้นลง ให้ลบเฟรมอื่นโดยกดที่เฟรมหนึ่งแล้วกด command + คลิกเฟรมอื่นทุกเฟรม

เราชอบวิธีที่คุณสร้าง GIF บน Photoshop ด้วยวิดีโอ คุณสามารถตัดส่วนของฟุตเทจได้ทั้งที่นำเข้าและหลังจากนั้น! ใช้งานได้จริง

วิธีเปลี่ยนความเร็วของ GIF

หน้าต่างไทม์ไลน์ยังให้ตัวเลือกแก่คุณในการทำให้ GIF ช้าลงหรือเร็วขึ้น แต่ละเฟรมในไทม์ไลน์จะมีตัวควบคุมความเร็วอยู่ข้างใต้ การวัดเริ่มต้นคือ 'ไม่หน่วงเวลา' หรือ '0' แต่อาจเกิดขึ้นได้ว่าวิดีโอที่คุณใช้มีการปรับความเร็วอยู่แล้ว นี่เป็นกรณีของวิดีโอของเรา หากคุณดูภาพหน้าจอด้านบนที่เราลบเฟรม คุณจะเห็นว่าเฟรมของเรามีความล่าช้า 0.04 วินาที เมื่อเราดูตัวอย่าง GIF ดูเหมือนว่ามันจะเร็วขึ้น เราไม่ต้องการสิ่งนั้น

เราเลือกเฟรมทั้งหมดในไทม์ไลน์โดยคลิกที่สามบรรทัดที่มุมซ้ายบนของหน้าต่างไทม์ไลน์แล้วคลิก 'เลือกเฟรมทั้งหมด' ในเฟรมใดก็ตาม เราคลิกที่ลูกศรชี้ลงเล็กๆ แล้วเลือก 'ไม่หน่วงเวลา' ซึ่งจะทำให้ GIF ของเราไหลลื่นอย่างเป็นธรรมชาติ หากต้องการสร้าง GIF ที่ดูเหมือนเคลื่อนไหวช้า ให้เลือกค่าใดๆ ที่สูงกว่า 1 วินาที

บันทึกเป็น GIF และเพิ่มประสิทธิภาพ

เมื่อทุกอย่างเสร็จสิ้น ก็ถึงเวลาบันทึกโครงการเป็น GIF คลิก ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ (ดั้งเดิม) แล้วเลือกตัวเลือก GIF ในกล่องโต้ตอบป๊อปอัป ตรวจสอบขนาดของไฟล์และพิจารณาว่าเป็นเอาต์พุต มีบางสิ่งที่คุณสามารถทำได้เพื่อลดขนาดไฟล์

• ลดจำนวนสีลง
• ลดหรือเอา dither ออก
• ลดความสูงและความกว้าง

หากต้องการตรวจสอบว่าการปรับแต่งเปลี่ยนแปลง GIF ของคุณอย่างไร ให้คลิกที่ปุ่มแสดงตัวอย่าง ใช้แท็บ 2-Up และ 4-Up เพื่อดูตัวเลือกต่างๆ คุณอาจต้องย้อนกลับไปและนำเฟรมออกเพิ่มเติมหากภาพยังใหญ่เกินไป ตั้งเป้าให้ไฟล์มีขนาดต่ำกว่า 20 MB หากคุณกำลังสร้าง GIF สำหรับส่วนเต็มความกว้าง คุณจะต้องลดขนาดเฟรมลงจริงๆ เพื่อให้ได้ขนาดที่เหมาะสมสำหรับเว็บ

หลักการที่ดีคือการเก็บไฟล์ GIF ของคุณไว้ไม่เกิน 20 MB มากกว่านั้นก็ใหญ่เกินไป หากคุณสามารถลดขนาดให้ต่ำกว่า 10MB โดยไม่สูญเสียคุณภาพมากเกินไป แสดงว่าคุณมีผู้ชนะ

เราลงเอยด้วยการลบเฟรมเพิ่มเติมจาก GIF ของเราเพื่อลดขนาดลงเหลือ 18 MB จากนั้นเราใส่มันผ่าน GIFCompressor และลดลง 55% GIFCompressor เป็นเครื่องมือออนไลน์ฟรีที่ลดขนาด GIF โดยไม่สูญเสียคุณภาพ คุณสามารถอัปโหลด GIF ขนาดไม่เกิน 50MB

บทสรุป

อย่างที่คุณเห็น มันค่อนข้างง่ายที่จะสร้าง GIF ใน Photoshop จากฟุตเทจวิดีโอ ข้อแม้เพียงอย่างเดียวคือความยาวของวิดีโอที่คุณเริ่มต้นและจำนวนเฟรมที่คุณลบ หากคุณไม่ลบออกเพียงพอ ไฟล์สุดท้ายจะมีขนาดใหญ่มาก และนั่นจะไม่ช่วยอะไรเลย อาจต้องใช้การทดลองใช้เพื่อให้สุดท้ายได้ GIF ในแบบที่คุณต้องการ หากคุณกำลังสร้างภาพหน้าจอ GIF สำหรับบทช่วยสอน เช่นในคู่มือนี้ คุณจะคุ้นเคยและจะง่ายขึ้นทุกครั้ง

ภาพเด่นผ่าน emojoez / shutterstock.com