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

Adobe Photoshop มีคุณสมบัติมากมาย รวมถึงการสร้างภาพเคลื่อนไหว

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

ภาพเคลื่อนไหวจากวิดีโอ

วิธีที่ง่ายที่สุดคือการแปลงวิดีโอเป็นแอนิเมชั่น คุณไม่จำเป็นต้องกำหนดค่าอะไรเลย คุณเพียงแค่ต้องเปิดวิดีโอใน Photoshop ยูทิลิตี้นี้ยอมรับรูปแบบ avi, mov, mp4, mpg, mpeg, m4v เพื่อให้ทำงานได้อย่างถูกต้อง คุณต้องติดตั้ง QuickTime ไฟล์สื่อที่เพิ่มด้วยวิธีนี้ไม่สามารถแก้ไขหรือตัดแต่งได้ เพียงแปลงเป็นกราฟิก

แต่มีวิธีอื่น ต่อไปนี้เป็นวิธีสร้าง GIF จากภาพยนตร์ใน Photoshop:

1. ไปที่ไฟล์ - นำเข้า
2. คลิกภาพนิ่งวิดีโอเป็นเลเยอร์
3. เมนูจะเปิดขึ้นพร้อมการตั้งค่าบางอย่าง ทางด้านขวามือจะมีมินิเพลเยอร์ให้ดูตัวอย่าง
4. ในกล่องช่วง ให้เลือกหนึ่งในตัวเลือก: เริ่มจนจบหรือที่เลือกเท่านั้น ในกรณีที่สอง ส่วนของวิดีโอที่คุณเลือกจะถูกแทรก หากต้องการตัดชิ้นส่วนที่ต้องการ ให้เลื่อนเครื่องหมายสีดำข้างใต้เครื่องเล่น ชิ้นส่วนที่อยู่ระหว่างนั้นจะถูกเพิ่มเข้าไปในโปรเจ็กต์
5. สามารถโหลดเฟรมลงใน Photoshop ได้สูงสุด 500 เฟรม หากวัสดุใช้งานมีขนาดใหญ่กว่าค่านี้ จะต้องตัดหรือเพิ่มเป็นส่วนๆ ในเอกสารต่างๆ
6. ทำเครื่องหมายที่ช่อง "สร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม" การดำเนินการนี้จะนำการตั้งค่าที่จำเป็นทั้งหมดไปใช้กับวิดีโอโดยอัตโนมัติ หากไม่มีสิ่งนี้ จะต้องตั้งค่าไดนามิกด้วยตนเอง
7. ตัวเลือก “เก็บทุก [หมายเลข]” จะช่วยให้คุณสามารถนำเข้าสไลด์ได้ไม่ทั้งหมด แต่สามารถนำเข้าทุกๆ สามได้ GIF ที่ได้จะขาด ๆ หาย ๆ
8. ยืนยันการดำเนินการและรอจนกว่ายูทิลิตี้จะประมวลผลวิดีโอ
9. ไปที่ "หน้าต่าง - พื้นที่ทำงาน" และเลือก "การเคลื่อนไหว" ชุดการตั้งค่านี้เหมาะที่สุดสำหรับการสร้างภาพเคลื่อนไหว
10. ด้านล่างจะมีเครื่องเล่นสื่อบางประเภท มันบ่งบอกถึงอัตราเฟรม มีปุ่ม "เล่น" กรอกลับ และซูมแทร็กวิดีโอ รูปภาพทั้งหมดจะแสดงทีละภาพ
11. นอกจากนี้ยังจะกระจายออกเป็นเลเยอร์ต่างๆ ซึ่งรายการจะอยู่ที่ด้านล่างขวาของหน้าต่าง Photoshop คลิกที่หนึ่งในนั้นเพื่อทำงานกับสไลด์แยกต่างหาก
12. คุณสามารถลบบางเฟรมหรือแก้ไขได้
13. รูปภาพทั้งหมดจะอยู่ในพื้นที่เดียว มันไม่สะดวกมาก หากต้องการปิดการมองเห็นของเลเยอร์ ให้คลิกที่ไอคอนรูปตาที่อยู่ด้านข้าง สไลด์จะยังคงอยู่ในเอกสาร และจะปรากฏเป็นภาพเคลื่อนไหว GIF หากจำเป็น หากต้องการให้ปรากฏอีกครั้ง ให้คลิกบริเวณที่ "ตา" อยู่
14. หากคุณต้องการลองใช้การแสดงภาพประเภทอื่น (สีน้ำ ดินสอ แสงนีออน) ให้คลิกที่ "ตัวกรอง" ในแถบเมนู
15. หากต้องการเพิ่มเอฟเฟกต์ Photoshop (เรืองแสง เงา การไล่ระดับสี รูปแบบ) ให้คลิกขวาที่เลเยอร์แล้วเลือกตัวเลือกการผสม
16. หากต้องการสลับสไลด์ ให้ลากด้วยเคอร์เซอร์
17. หากต้องการเลือกเวลาแสดง (หรือดีเลย์) ของเฟรม ให้คลิกที่สามเหลี่ยมสีดำเล็กๆ ด้านล่าง

แอนิเมชันจากรูปภาพ

ต่อไปนี้เป็นวิธีสร้างภาพเคลื่อนไหวใน Photoshop โดยใช้รูปภาพ:

1. แทรกรูปภาพที่จำเป็น เพิ่มแต่ละเลเยอร์ลงในเลเยอร์ของตัวเอง (ลบเลเยอร์ที่เรียกว่า "พื้นหลัง")
2. โดยทั่วไปแล้ว ภาพวาดจะเปิดในหน้าต่างหรือแท็บ (ขึ้นอยู่กับการตั้งค่าอินเทอร์เฟซของ Photoshop) หากต้องการรวมไว้ในพื้นที่ทำงานเดียว ให้คัดลอกไปที่นั่นหรือย้ายไปที่นั่น พวกมันจะถูกส่งไปยังเลเยอร์ใหม่โดยอัตโนมัติ
3. ไปที่หน้าต่าง - พื้นที่ทำงาน - การเคลื่อนไหว แผงภาพเคลื่อนไหวพร้อมเครื่องเล่นเปิดใช้งานอยู่
4. เลือกเลเยอร์ที่คุณต้องการให้เป็นเฟรมแรกใน GIF ของคุณ
5. ทำให้มองไม่เห็นแผ่นงานที่เหลือโดยคลิกที่ไอคอนรูปตาถัดจากแผ่นงาน
6. บนแผงเครื่องเล่น คลิกที่ปุ่ม "แปลงเป็นแอนิเมชั่น" ที่มุมขวาล่าง ดูเหมือนสี่เหลี่ยมแบ่งออกเป็นสามส่วน
7. จะมีหนึ่งเฟรมพร้อมเลเยอร์ที่คุณเลือก ทำซ้ำมัน โดยคลิกที่ปุ่ม “สร้างสำเนา” เล็กๆ
8. กำหนดจำนวนสไลด์ที่คุณต้องการ
9. ผลลัพธ์ที่ได้คือภาพเคลื่อนไหว GIF จากภาพเดียว เพื่อแก้ไขปัญหานี้ ให้คลิกที่เฟรมที่สองและทำให้เลเยอร์ที่สองมองเห็นได้โดยการเอา "ตา" ออกจากเฟรมแรก วัตถุที่ต้องการจะปรากฏขึ้น
10. ดังนั้นให้กรอกสไลด์ทีละภาพ

หากคุณกำลังสร้างเลย์เอาต์ขนาดใหญ่ วิธีการนี้จะใช้เวลานาน ในกรณีนี้ คุณสามารถทำสิ่งต่อไปนี้:

1. เครื่องมือแอนิเมชั่นมีปุ่มที่มุมขวาบน (ในแผง ไม่ใช่ในหน้าต่าง Photoshop) ซึ่งดูเหมือนรายการที่มีลูกศร คลิกที่มัน
2. ในเมนูที่ปรากฏขึ้น ให้เลือก “สร้างเฟรมจากเลเยอร์”

การดำเนินการเดียวกันนี้ใช้ได้กับรูปภาพเช่นเดียวกับสไลด์วิดีโอ

กำลังบันทึกภาพเคลื่อนไหว GIF

สิ่งสำคัญคือต้องทราบวิธีบันทึกภาพเคลื่อนไหวใน Photoshop หากคุณจัดรูปแบบเป็นไฟล์ psd หรือรูปภาพ "คงที่" ที่มีนามสกุล jpg, bmp, png ก็จะไม่สมเหตุสมผล แทนที่จะมีการเคลื่อนไหว การเปลี่ยนแปลง หรือการกะพริบ คุณจะได้เฟรมที่หยุดนิ่งหนึ่งเฟรม หากต้องการสร้างชุดรูปภาพที่เปลี่ยนแปลง คุณต้องแปลงเอกสารเป็นรูปแบบ GIF

1. เมื่อคุณทำงานใน Photoshop เสร็จแล้ว อย่ารีบปิดและแปลงเป็นโปรเจ็กต์ PSD
2. ไปที่ไฟล์ - บันทึกเป็น หรือกด Shift+Ctrl+S
3. ตั้งชื่อผลงานของคุณและระบุโฟลเดอร์ที่คุณต้องการวาง
4. จากรายการดรอปดาวน์ประเภท ให้เลือก CompuServe GIF
5. ยืนยันการดำเนินการ

แค่เข้าใจแอปพลิเคชัน Photoshop และวิธีสร้างแอนิเมชั่นก็เพียงพอแล้ว แม้ว่าคุณจะไม่ใช่นักออกแบบเว็บไซต์มืออาชีพ แต่คุณสามารถสร้างภาพเช่นนี้ได้ คุณจะมีผลงานศิลปะที่มีเอกลักษณ์เฉพาะซึ่งประกอบขึ้นด้วยมือของคุณเอง

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

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

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

ตอนนี้เรามาดูบทเรียนกันดีกว่า ในวิดีโอด้านล่าง ฉันจะบอกวิธีเพิ่มข้อความทีละน้อย แต่ในบทเรียนแบบข้อความ งานจะซับซ้อนขึ้นเล็กน้อย

เรามีซิโปลลิโน และเราต้องให้เขาโบกมือให้เรา

ขั้นตอนที่ 1ก่อนอื่นคุณต้อง "เปิดใช้งาน" ภาพเคลื่อนไหวใน Photoshop เพื่อสิ่งนี้เราไป “หน้าต่าง” ->”แอนิเมชั่น”- อาจจะยังเขียนอยู่ก็ได้ “ไทม์ไลน์”.

ขั้นตอนที่ 2เพื่อให้มือขยับได้เราต้องตัดมันออกแล้ววางในตำแหน่งต่างๆ ส่วนตัวผมใช้ตัดมือครับ “บ่วงแม่เหล็ก”- ทำสำเนาเอกสารหลัก ( Ctrl+เจ) และทำงานกับสำเนา เราไม่ได้สัมผัสต้นฉบับ

เลือกมืออย่างระมัดระวังแล้วตัดออก!

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

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

ขั้นตอนที่ 5ตอนนี้เรากำลังทำงานร่วมกับบุคลากร ในแต่ละเฟรมเราจะเปิดเฉพาะเลเยอร์ที่เราต้องการเท่านั้น ตัวอย่างเช่น ในเฟรมที่ 1 เราต้องการต้นฉบับของเรา และในกรณีของเรา “เลเยอร์ 0”.

ตอนนี้เรามาสร้างเฟรมใหม่:

และในเฟรมใหม่ เราจะเปิดเลเยอร์อื่นๆ นั่นก็คือของเรา “สำเนาเลเยอร์ 0”และ “ชั้นที่ 1”นั่นคือตำแหน่งมืออื่น ฉันหวังว่าอัลกอริทึมจะชัดเจนสำหรับคุณผู้อ่านที่รัก

ขั้นตอนที่ 6ตั้งค่าการหน่วงเวลาของเฟรม นั่นคือเฟรมถัดไปจะแสดงหลังจากช่วงระยะเวลาใด

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

เลือกรูปแบบ (ค่าเริ่มต้นคือ GIF) และบันทึก

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

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

หากต้องการทำให้อินเทอร์เฟซเคลื่อนไหว สร้างต้นแบบเชิงโต้ตอบหรือโฆษณา ให้ใช้โปรแกรมพิเศษ เช่น Adobe Animate หรือ After Effects

หากต้องการสร้างแบนเนอร์หรืองานนำเสนอบนเว็บแบบง่ายๆ คุณไม่จำเป็นต้องเข้าใจโปรแกรมพิเศษ เครื่องมือ Photoshop ในตัวก็เหมาะสำหรับสิ่งนี้เช่นกัน

จะเริ่มตรงไหน

ขั้นตอนแรกคือการตัดสินใจว่าเราจะสร้างแอนิเมชั่นอะไรและเราวางแผนจะบรรลุผลอะไร

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

มาตราส่วนเวลา

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

ในการดำเนินการนี้ ฉันเปิดแท็บ "หน้าต่าง" และทำเครื่องหมายที่ช่องถัดจากบรรทัด "ไทม์ไลน์"

เส้นกว้างควรปรากฏที่ด้านล่างของหน้าต่าง Photoshop ซึ่งคุณสามารถควบคุมเฟรมในภาพเคลื่อนไหวได้

หากต้องการสร้างเฟรมแรก ให้คลิกไอคอน "สร้างภาพเคลื่อนไหวเฟรม" บน "ไทม์ไลน์"

เมื่อเฟรมแรกปรากฏขึ้น คุณสามารถเริ่มสร้างการเคลื่อนไหวได้

ผู้ที่อยู่ระหว่างกลาง

ใน Photoshop องค์ประกอบสามารถสร้างภาพเคลื่อนไหวได้หลายวิธี:

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

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

ฉันจะเพิ่มเฟรมอื่นให้กับไทม์ไลน์โดยใช้ปุ่ม "ทำสำเนาเฟรม"

หลังจากเพิ่มเฟรมใหม่แล้ว ฉันจะเปลี่ยนไปใช้เฟรมแรกและลบการมองเห็นของเลเยอร์บาลาไลกาออก คุณยังสามารถตั้งค่าความทึบของเลเยอร์เป็น 0% ได้

ในเฟรมถัดไป ฉันจะตรวจสอบว่ามองเห็นเลเยอร์ที่มีบาลาไลกาหรือไม่

หลังจากทำงานกับภาพบาลาไลกาแล้ว ฉันจะปรับลักษณะของบรรทัดข้อความ ในเฟรมแรก ฉันเลือกข้อความ "Soul sings" และย้ายไปทางด้านขวานอกเค้าโครง ฉันทำเช่นเดียวกันกับข้อความ "3 สาย" - เลื่อนไปทางซ้ายจนกว่าจะหายไป

ในเฟรมที่สอง ฉันจะส่งคืนข้อความกลับ

ยอดเยี่ยม. ตอนนี้เรามาแทรกเฟรมกลางระหว่างคีย์เฟรมกัน

ในการดำเนินการนี้ ให้คลิกปุ่ม "สร้างเฟรมระดับกลาง" บน "ไทม์ไลน์"

ในกล่องโต้ตอบที่ปรากฏขึ้น ฉันระบุจำนวนเฟรมที่ต้องเพิ่ม

ยิ่งมีเฟรมมาก ภาพเคลื่อนไหวก็จะยิ่งยาวขึ้นและองค์ประกอบก็จะเคลื่อนไหวได้ราบรื่นยิ่งขึ้น หากมีเฟรมน้อยเกินไป องค์ประกอบจะเคลื่อนไหวกระตุก

ส่วนแรกของแอนิเมชั่นพร้อมแล้ว ตอนนี้คุณสามารถเล่นและดูว่าเกิดอะไรขึ้น

ฉันคลิกที่ปุ่มเล่นบนไทม์ไลน์

การแทรกเฟรมระดับกลางจะช่วยสร้างแอนิเมชั่นได้อย่างรวดเร็วโดยมีรูปลักษณ์และการเคลื่อนไหวขององค์ประกอบที่ราบรื่น

การปรากฏ การหายไป และการเคลื่อนไหวสามารถนำมารวมกันเพื่อให้ได้เอฟเฟกต์ที่น่าสนใจยิ่งขึ้น

แอนิเมชั่นสต็อปโมชั่นแบบแมนนวล

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

ฉันจะคัดลอกเฟรมสุดท้ายสองสามครั้งเพื่อสร้างการเคลื่อนไหวของลูกศรและข้อความ "ไปช็อปปิ้ง"

ในเฟรมถัดไป ฉันเลือกเลเยอร์ที่ต้องการด้วยข้อความและลูกศร เลื่อนขึ้นเล็กน้อย และในเฟรมสุดท้าย - ลง

ตอนนี้คุณสามารถเรียกใช้ภาพเคลื่อนไหวและดูผลลัพธ์ได้

เนื่องจากเฟรมมีการเปลี่ยนแปลงอย่างรวดเร็ว ดวงตาจึงไม่มีเวลาโฟกัสไปที่เฟรมสุดท้ายและแก้ไขตำแหน่งสุดท้ายของวัตถุบนหน้าจอ

ดังนั้นฉันจึงเพิ่มระยะเวลาของเฟรมสุดท้าย: คุณต้องคลิกที่ลูกศรถัดจากข้อความ "0 วินาที" และเลือกเวลาอื่นจากรายการ

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

การบันทึกและการส่งออก

ในหน้าต่างแสดงตัวอย่าง คุณสามารถดูภาพเคลื่อนไหวได้อีกครั้งและเปลี่ยนการตั้งค่าการบันทึก

ตามค่าเริ่มต้น ภาพเคลื่อนไหวจะหยุดหลังจากเล่น ดังนั้นฉันจึงเปลี่ยนโหมดการเล่นเป็น "เล่นซ้ำ" และบันทึก

นี่คือภาพเคลื่อนไหวที่ได้:

บทสรุป

ใน Photoshop การสร้างแบนเนอร์และงานนำเสนอแบบโต้ตอบสั้นๆ และทำให้องค์ประกอบแต่ละอย่างเคลื่อนไหวเป็นเรื่องง่าย สะดวกในการทดลองกับผลลัพธ์

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

ผลการเรียน.

ขั้นตอนที่ 1

สร้างเอกสารใหม่ ( Ctrl + N) โดยมีขนาดไฟล์ 800 x 500 พิกเซล เติมพื้นหลังด้วยสีใดก็ได้ที่คุณต้องการ ตอนนี้เรามาดูเมนูกันดีกว่า เลเยอร์- สไตล์ชั้น- โอเวอร์เลย์การไล่ระดับสี(เลเยอร์ > สไตล์เลเยอร์ > การซ้อนทับแบบไล่ระดับสี) ใช้การตั้งค่าต่อไปนี้: สไตล์ เรเดียล(เรเดียล) สีตั้งแต่สีดำ (#000000) ถึงสีน้ำเงิน (#54799b) ซึ่งจะใช้ตรงกลาง

ขั้นตอนที่ 2

สร้างเลเยอร์ใหม่และตั้งชื่อมัน ชั้นเสียงรบกวน- เลือกเครื่องมือ เติม(เครื่องมือถังสี) และเติมเลเยอร์ที่สร้างขึ้นด้วยสีเข้ม (#231f20) ปล่อยให้เลเยอร์ทำงานอยู่ ชั้นเสียงรบกวนและไปที่เมนู ตัวกรอง - สัญญาณรบกวน - เพิ่มสัญญาณรบกวน(ตัวกรอง>สัญญาณรบกวน>เพิ่มสัญญาณรบกวน) ในกล่องโต้ตอบการตั้งค่าตัวกรอง ให้ตั้งค่าต่อไปนี้: ผล(จำนวน) 3% การกระจาย เครื่องแบบ(Uniform) แล้วคลิกตกลง

ขั้นตอนที่ 3

กดคีย์ผสม (กดปุ่ม Ctrl +คุณ)และในกล่องโต้ตอบการตั้งค่าการแก้ไขที่ปรากฏขึ้น ให้ป้อนค่า ความอิ่มตัว(ความอิ่มตัว) 100%: เปลี่ยนโหมดการผสมของเลเยอร์นี้เป็น แสงนุ่มนวล(แสงนุ่มนวล).

หมายเหตุผู้แปล: เพื่อให้ได้สีเดียวกับผู้เขียนในภาพหน้าจอ เมื่อปรับ Hue/Saturation คุณสามารถตั้งค่า Hue เป็น - 140

ขั้นตอนที่ 4

เพิ่มข้อความที่คุณต้องการ ที่นี่เราจะใช้ข้อความของโลโก้เว็บไซต์ 123RF ในการใช้งานสไตล์เลเยอร์ จังหวะ(จังหวะ). เลือกค่าขนาดเส้นขีดตามความต้องการของคุณ

หมายเหตุผู้แปล: ในภาพหน้าจอของผู้เขียน มีข้อความแรสเตอร์พร้อมกับสไตล์เส้นขีดอยู่แล้ว เพื่อให้ได้ผลลัพธ์เดียวกัน หลังจากใช้เส้นขีด ให้ลบการเติม (เติม) ของเลเยอร์ข้อความ 0% แปลงเลเยอร์นี้เป็นวัตถุอัจฉริยะ แล้วแปลงเป็นแรสเตอร์

ขั้นตอนที่ 5

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

ลายนูน(เอียงและนูน)

เงาภายใน(เงาภายใน)

เปล่งประกายภายใน(เรืองแสงภายใน)

การซ้อนทับสี(การซ้อนทับสี)

เรืองแสงภายนอก(เรืองแสงภายนอก)

เงา(เงาหล่น)

ขั้นตอนที่ 6

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

ขั้นตอนที่ 7

ทำซ้ำเลเยอร์ที่คุณสร้างในขั้นตอนที่ 5 และปิดสไตล์เลเยอร์ทั้งหมดในสำเนานี้ ตอนนี้ตั้งค่าสไตล์ดังนี้:

เงาภายใน(เงาภายใน)

เปล่งประกายภายใน(เรืองแสงภายใน)

ขั้นตอนที่ 8

ด้านล่างนี้เป็นผลลัพธ์หลังจากที่คุณใช้สไตล์เลเยอร์แล้ว

ขั้นตอนที่ 9

ตอนนี้เราจะสร้างจุดเคลื่อนที่ของแสง สร้าง 5 เลเยอร์ทับจากที่มีอยู่แล้วเปลี่ยนชื่อเป็น 1,2,3, R และ F หากคุณมีข้อความของคุณเอง ให้สร้างเลเยอร์ตามตัวอักษรของคุณ จัดกลุ่มเลเยอร์เหล่านี้เป็นโฟลเดอร์และตั้งชื่อ จุดไฟและเปลี่ยนโหมดการผสมเป็น ทำให้ฐานสว่างขึ้น(ดอดจ์สี).

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

ขั้นตอนที่ 10

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

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

ขั้นตอนที่ 11

ตั้งค่าตัวบ่งชี้เวลาปัจจุบัน (แถบเลื่อนสีน้ำเงิน) เป็น 01:00 นและย้ายเลเยอร์ที่มีจุดสว่างไปตามวิถีการเคลื่อนที่โดยสัมพันธ์กับโครงร่างของตัวอักษร

ขั้นตอนที่ 12

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

ในบทความนี้ ฉันจะพูดถึงภาพเคลื่อนไหวใน Photoshop เราจะมาดูกันว่าแอนิเมชั่นทำงานอย่างไรใน Photoshop โดยใช้ตัวอย่างการสร้างแบนเนอร์ปีใหม่

ฉันจะทำงานใน Adobe Photoshop CS6 อินเทอร์เฟซของฉันเป็นภาษารัสเซียเนื่องจากฉันเขียนจากที่ทำงาน

ฉันมีเวอร์ชันภาษาอังกฤษที่บ้าน และฉันแนะนำให้คุณเรียนด้วยเวอร์ชันภาษาอังกฤษ นี่คือเหตุผล:

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

มาเริ่มสร้างแอนิเมชั่นใน Photoshop CS6 กันดีกว่า

มาเปิดตัว Photoshop กันเถอะ

สร้างไฟล์เอกสารใหม่ - ใหม่ (Ctrl+N)

ในหน้าต่างที่เปิดขึ้น ให้ตั้งค่าขนาดแบนเนอร์: 600 x 120 เรียกว่า "แบนเนอร์ปีใหม่" -> "ตกลง"

การสร้างพื้นหลัง

ฉันเลือกวัสดุที่จะใช้ในการทำงานล่วงหน้า (พื้นหลัง แบบอักษร ฯลฯ)

เปิดพื้นผิวที่เตรียมไว้: Ctrl+O คุณสามารถดาวน์โหลดพื้นผิวที่ฉันใช้

เปิดจานสีเลเยอร์ “เลเยอร์” – F7

เลือกหน้าต่างที่มีพื้นผิว ลากเลเยอร์จากพาเล็ตเลเยอร์ไปยังเลเยอร์ที่มีแบนเนอร์

หากพื้นผิวมีขนาดเล็กเกินไปหรือใหญ่มากเมื่อเทียบกับแบนเนอร์ ให้ปรับขนาดโดยใช้การเปลี่ยนแปลง “Ctrl+T”

เครื่องหมายสี่เหลี่ยมเล็กๆ จะปรากฏที่มุมของภาพ กด Shift ค้างไว้เพื่อรักษาอัตราส่วนในขณะที่คุณปรับขนาด และลากขอบจับมุมในแนวทแยงเพื่อลดหรือเพิ่มขนาดของรูปภาพจนกว่าพื้นหลังจะเต็มพื้นที่ทั้งหมดของแบนเนอร์

หลังจากที่เราปรับพื้นผิวให้พอดีกับขนาดของแบนเนอร์แล้ว เราก็ไปที่การแก้ไขสีต่อไป

ไปที่เมนู "รูปภาพ" - "การปรับ" - "ฮิว / ความอิ่มตัว" (รูปภาพ - การแก้ไข - ฮิว / ความอิ่มตัว)

ฉันตั้งค่าต่อไปนี้เพื่อให้ได้สีที่สว่างและอิ่มตัว:

เราเขียนข้อความ

สร้างเลเยอร์ใหม่ (Ctrl+Shift+N) หรือคลิกที่ไอคอนเลเยอร์ใหม่ในพาเล็ตเลเยอร์

เลือกเครื่องมือประเภทแนวนอน (T)

เลือกแปรงที่มีดาวใดก็ได้ ทาสีด้วยสีขาว #ffffff หากต้องการเลือกสี ให้คลิกที่สี่เหลี่ยมเล็กๆ ที่ด้านล่างของแผงด้านซ้าย

บนเลเยอร์ใหม่ ให้วาดดาวในตำแหน่งที่สุ่ม หากต้องการทำให้ดวงดาวสว่างขึ้น ให้คลิกหลายๆ ครั้งในที่เดียว นี่คือสิ่งที่ฉันได้รับ:

สร้างสำเนาของเลเยอร์ (Ctrl+J) คลิกที่ไอคอนรูปตาในแผงเลเยอร์เพื่อซ่อนการมองเห็นของเลเยอร์ก่อนหน้า

เลือกชั้นบนสุดพร้อมสำเนาดวงดาว จากแผงด้านซ้าย ให้เลือก Lasso Tool(L)

เลือกดาวแต่ละดวงตามลำดับ กด "V" (ย้ายเครื่องมือ) แล้วย้ายไปยังตำแหน่งอื่น ด้วยวิธีนี้เราจะมีดาวอยู่ในตำแหน่งต่างๆ ในเฟรมที่แตกต่างกัน ซึ่งจะสร้างเอฟเฟกต์การกะพริบ

หลังจากที่คุณย้ายดวงดาวทั้งหมดไปยังตำแหน่งอื่นแล้ว ให้สร้างเลเยอร์ที่ซ้ำกันที่คุณทำงานไว้ (Ctrl+J) ซ่อนเลเยอร์ก่อนหน้าในพาเล็ตเลเยอร์โดยคลิกที่ดวงตา และทำซ้ำการดำเนินการย้ายดวงดาวไปที่ใหม่อีกครั้ง คุณสามารถวาดดาวดวงใหม่หลายดวงให้เสร็จสิ้นได้

ดังนั้นเราจะมีดาวอยู่ 3 ชั้น โดยดาวแต่ละดวงจะอยู่ในตำแหน่งที่แตกต่างกัน

ทุกอย่างพร้อมแล้ว

มาดูการสร้างแอนิเมชั่นใน Photoshop กันดีกว่า

เปิดไทม์ไลน์ ไปที่เมนู "หน้าต่าง" - "ไทม์ไลน์" (หน้าต่าง - ไทม์ไลน์)

ในแผงไทม์ไลน์ที่ปรากฏขึ้น เราจะพบปุ่มตรงกลาง "สร้างไทม์ไลน์วิดีโอ" (สร้างไทม์ไลน์สำหรับวิดีโอ)

หลังจากนี้สเกลจะเปลี่ยนรูปลักษณ์ ตอนนี้คลิกที่ไอคอนที่มีสี่เหลี่ยมสามช่องที่มุมซ้ายล่างของหน้าต่างเพื่อสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม

แผงภาพเคลื่อนไหวแบบเฟรมต่อเฟรมเปิดขึ้นแล้ว ขณะนี้มีเพียงเฟรมเดียวเท่านั้นซึ่งจะแสดงเลเยอร์ที่มองเห็นทั้งหมด (เนื้อหาของเฟรมที่เลือกจะแสดงในหน้าต่างหลักบนจอภาพ)

ไปที่จานสีเลเยอร์ - F7 ตอนนี้เราต้องปิดเลเยอร์ดาวสองชั้นบนสุด (คลิกที่ตา) เหลือเพียงเลเยอร์เดียวที่มองเห็นได้ นี่จะเป็นเฟรมแรก

ไปที่จานสีเลเยอร์ ปิดเลเยอร์แรกด้วยดาวแล้วเปิดเลเยอร์ที่สอง ดังนั้นในเฟรมที่ 2 เราจะแสดงดาวที่จุดอื่น

คลิกที่ไอคอนเฟรมใหม่อีกครั้ง ปิดเลเยอร์ที่สองด้วยดาวแล้วเปิดเลเยอร์ที่สาม

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

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

ในหน้าต่างที่ปรากฏขึ้น ให้ระบุจำนวนเฟรมกลางที่เราต้องการสร้าง ฉันจะตั้งค่าเป็น 2 สำหรับเฟรมทั้งหมดยกเว้นเฟรมสุดท้าย ให้ตั้งค่าเป็น "เฟรมถัดไป"

ระหว่างคีย์เฟรมแรกและคีย์เฟรมที่สอง ตอนนี้คุณมีคีย์เฟรมกลาง 2 อัน

ตอนนี้เรายืนอยู่บนคีย์เฟรมที่ 2 (ตอนนี้อยู่ที่ 4 ติดต่อกัน) คลิกไอคอนที่มีวงกลมอีกครั้งและสร้างเฟรมกลางอีก 2 เฟรม ตอนนี้เราเพียงแค่ต้องปิดเฟรมสุดท้ายและเฟรมแรกเพื่อให้ได้ภาพเคลื่อนไหวที่ราบรื่น

เลือกเฟรมสุดท้ายในไทม์ไลน์ คลิกที่วงกลม ในหน้าต่างที่ปรากฏขึ้น ในบรรทัด "เฟรมกลาง" เลือก "เฟรมแรก" เพิ่ม 2 เฟรมเดียวกัน

ตอนนี้ ใต้เฟรมด้านซ้ายล่าง เราจะระบุจำนวนการทำซ้ำของแอนิเมชัน "คงที่"

เลือกเฟรมแรก กดสามเหลี่ยมทางด้านขวา “เล่น” เพื่อดูว่าเกิดอะไรขึ้น

เลือกรูปแบบไฟล์ที่จะบันทึก GIF คลิก "บันทึก..." เลือกไดเร็กทอรีที่เราจะบันทึก คลิก "บันทึก" อีกครั้ง

ในบทเรียนนี้ เรามาดูวิธีสร้างแอนิเมชั่นใน Photoshop CS6

ฉันหวังว่าคุณจะได้เรียนรู้สิ่งใหม่และมีประโยชน์จากบทช่วยสอนนี้