Gif ย่อมาจาก Graphic Interchange Format เป็นไฟล์ภาพเคลื่อนไหวที่เว็บไซต์สามารถแสดงผลได้เหมือนกับ Jpeg ข้อดีของ GIF นั่นคือไม่มีการสูญเสียความละเอียดข้อมูลเวลาเซฟ, สามารถทำอนิเมชั่นได้ และยังสามารถทำให้รูป Transparent หรือทะลุเห็นพื้นหลังได้อีกด้วย สามารถนำภาพเคลื่อนไหว Gif ไปใช้เพื่อตกแต่งส่วนต่างๆของเว็บไซต์ได้ เช่น การทำ Gif เป็นข่าวสาร เพื่อเพิ่มความน่าสนใจให้ข้อมูล บทความนี้จึงเป็นการแนะนำวิธีสร้างภาพเคลื่อนไหว Gif ด้วยโปรแกรม Photoshop สามารถทำได้ดังนี้

ขั้นตอนการทำ

1.หลังจากเปิดโปรแกรม Adobe Photoshop เรียบร้อยแล้ว คลิกที่เมน File เลือก Open จากนั้นเลือกไฟล์ภาพทั้งหมดที่ต้องการนำมาทำเป็นภาพเคลื่อนไหว Gif

เลือกไฟล์ภาพทั้งหมดที่ต้องการนำมาทำเป็นภาพเคลื่อนไหว Gif
เลือกไฟล์ภาพทั้งหมดที่ต้องการนำมาทำเป็นภาพเคลื่อนไหว Gif

 

2.Copy ไฟล์ภาพที่สองมาไว้รวมกันในไฟล์ภาพแรก โดยการเปิดไฟล์ภาพที่สองแล้วกดปุ่ม Ctrl+A แล้วกดปุ่ม Ctrl+C

Copy ไฟล์ภาพที่สองมาไว้รวมกันในไฟล์ภาพแรก
Copy ไฟล์ภาพที่สองมาไว้รวมกันในไฟล์ภาพแรก

 

3.สลับมาหน้าไฟล์ภาพแรกแล้วกดปุ่ม Ctrl+V ที่คีย์บอร์ด เพื่อวางภาพที่สองมารวมกัน

วางภาพที่สองมารวมกัน
วางภาพที่สองมารวมกัน

 

4.คลิกเมนู Window เลือก Timeline

คลิกเมนู Window เลือก Timeline
คลิกเมนู Window เลือก Timeline

 

5.คลิกที่สามเหลี่ยมเล็กๆ เลือก Create Frame Animation

คลิกที่สามเหลี่ยมเล็กๆ เลือก Create Frame Animation
คลิกที่สามเหลี่ยมเล็กๆ เลือก Create Frame Animation

 

6.ปิดตาเลเยอร์ภาพที่สอง จากนั้นเลือกระยะเวลาในการแสดงภาพแรก

เลือกระยะเวลาในการแสดงภาพแรก
เลือกระยะเวลาในการแสดงภาพแรก

 

7.คลิกที่เมนู Duplicates selected frames

คลิกที่เมนู Duplicates selected frames
คลิกที่เมนู Duplicates selected frames

 

8.คลิกที่รูปตาที่เลเยอร์ภาพที่สองเพื่อให้แสดงแค่ภาพที่สองภาพเดียว แล้วปิดตาเลเยอร์ภาพแรก

ปิดตาเลเยอร์ภาพแรก
ปิดตาเลเยอร์ภาพแรก

 

9.เลือกระยะเวลาในการแสดงภาพที่สอง

เลือกระยะเวลาในการแสดงภาพที่สอง
เลือกระยะเวลาในการแสดงภาพที่สอง

 

10.ทดลองเล่นภาพเคลื่อนไหว โดยคลิกที่ Plays Animation

ทดลองเล่นภาพเคลื่อนไหว
ทดลองเล่นภาพเคลื่อนไหว

 

11.คลิกที่เมนู File เลือก Save for web...

คลิกที่เมนู File เลือก Save for web...
คลิกที่เมนู File เลือก Save for web...

 

12.เลือกเป็นไฟล์ Gif

เลือกเป็นไฟล์ Gif
เลือกเป็นไฟล์ Gif

 

13.เลือก Looping Options เป็น Forever แล้วคลิกที่ปุ่ม Save...

เลือก Looping Options เป็น Forever แล้วคลิกที่ปุ่ม Save...
เลือก Looping Options เป็น Forever แล้วคลิกที่ปุ่ม Save...

 

ภาพเคลื่อนไหว Gif

แสดงภาพเคลื่อนไหว Gif
แสดงภาพเคลื่อนไหว Gif

 

เนื้อหาเพิ่มเติม

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
selenium เวอร์ชั่น ปัจจุบัน เป็นเวอร์ชั่นที่เท่าไหร่
โดย athirach.offcial จ 01 เม.ย. 2024 11:39 am บอร์ด Software testing
0
59
จ 01 เม.ย. 2024 11:39 am โดย athirach.offcial View Topic selenium เวอร์ชั่น ปัจจุบัน เป็นเวอร์ชั่นที่เท่าไหร่
ปัจจัยที่ทำให้เกิด Spam score ในเว็บไซต์
โดย athirach.offcial จ 01 เม.ย. 2024 11:27 am บอร์ด Share Knowledge
0
108
จ 01 เม.ย. 2024 11:27 am โดย athirach.offcial View Topic ปัจจัยที่ทำให้เกิด Spam score ในเว็บไซต์
Dell Optiplex 980 ไม่รองรับแรม Rank แบบ Single Rank
โดย mindphp จ 01 เม.ย. 2024 1:55 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
336
จ 01 เม.ย. 2024 1:55 am โดย mindphp View Topic Dell Optiplex 980 ไม่รองรับแรม Rank แบบ Single Rank
การจัดประเภทของการ Test โปรแกรม
โดย athirach.offcial ส 30 มี.ค. 2024 12:54 pm บอร์ด Software testing
0
191
ส 30 มี.ค. 2024 12:54 pm โดย athirach.offcial View Topic การจัดประเภทของการ Test โปรแกรม
เทคนิคการเขียน Test Case ให้ครอบคลุม
โดย athirach.offcial ส 30 มี.ค. 2024 12:50 pm บอร์ด Software testing
0
141
ส 30 มี.ค. 2024 12:50 pm โดย athirach.offcial View Topic เทคนิคการเขียน Test Case ให้ครอบคลุม
Automated test เหมาะสำหรับงานเทสแบบไหน
โดย athirach.offcial ส 30 มี.ค. 2024 12:46 pm บอร์ด Software testing
0
148
ส 30 มี.ค. 2024 12:46 pm โดย athirach.offcial View Topic Automated test เหมาะสำหรับงานเทสแบบไหน
การตรวจสอบภาคจ่ายไฟให้กับ HDD และการระบุปัญหา คอมใช้สัดพักแล้วดับ เครื่อง รีสตาร์ทเอง
โดย mindphp ส 30 มี.ค. 2024 12:43 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
165
ส 30 มี.ค. 2024 12:51 pm โดย mindphp View Topic การตรวจสอบภาคจ่ายไฟให้กับ HDD และการระบุปัญหา คอมใช้สัดพักแล้วดับ เครื่อง รีสตาร์ทเอง
การใช้ Selenium เพื่อเช็คความเร็วของหน้าเว็บ
โดย athirach.offcial ส 30 มี.ค. 2024 12:39 pm บอร์ด Software testing
0
163
ส 30 มี.ค. 2024 12:39 pm โดย athirach.offcial View Topic การใช้ Selenium เพื่อเช็คความเร็วของหน้าเว็บ