วันอังคารที่ 2 เมษายน พ.ศ. 2556

2/4/2556 วิธีสร้างภาพเคลื่อนไหว (GIF) ด้วยโปรแกรม PhotoShop

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

1.เมื่อเปิดโปรแกรม Photoshop แล้วสร้างหน้ากระดาษ ขนาด  300*480 pixel จะพอเหมาะกับพื้นที่ว่าของ Blog ของเรา














2. ในตอนนี้ผมจะสร้างภาพเคลื่อนไหวแบบง่าย ๆ โดยตอนแรก ทำการเปิด ไทม์ไลน์ที่จะไว้สร้างเฟรมของภาพเครื่อนไหว ขึ้นมาโดยการเข้าไปที่ Window > Timeline (สำหรับ Cs6 ถ้าเป้นCsที่เก่ากว่าจะเป้นคำว่า "Animation") เมื่อกดแล้วจะขึ้นแทบบาร์ไทม์ไลน์ขึ้นด้านล่าง


























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














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














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



























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















7.ในที่นี่ผมต้องการให้คำว่า"ART"ยังคงกระพริบอยู๋ในขณะที่คำว่า"DEPARTMENT" ยังคงเลื่อนไปเรื่อยๆ เราต้องกดรูปดวงตาที่เลเยอร์ของ"ART"ในเฟรมต่อมาให้รูปดวงตานั้นขึ้นมาพร้อมกับที่เราลากเมาส์นำคำว่า"DEPARTMENT"มาทางขวามืออยู่เรื่อยๆ ในขณะนั้นเราไม่ต้องกดรูปดวงตาออกจากคำว่า"DEPARTMENT"เพื่อให้มันยังคงอยู่ในตำแหน่งเก่าและเลื่อนไปเรื่อยๆ














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














9.ต่อมาเป็นวิธีการ Save การ Save ภาพเคลื่อนไหวเราจำเ)้นต้องให้ไฟล์เป็นนามสกุล GIF. ซะก่อน ถ้าเป็นสกุลอื่นจะทำให้ภาพไม่เคลื่อนไหว โดนการกดไปที่ File > Save for web and device (ถ้าต้องการSaveไฟล์ที่ทำนี้ไว้เพื่อเก็บไว้แก้ไขให้Saveตามเดิม) เมื่อกดเข้าไปแล้วเราจะพบอีกหน้าต่างหนึ่งออกมา ให้เรามองไปที่มุมขวาบนจะมีช่องว่างให้เปลี่ยนสกุลไฟล์ให้เราเปลี่ยนเป็น GIF. เรายังสามารถกดดูภาพเคลื่อไหวเพื่อเช็ดดูได้อีกรอบ โดยการกดปุ่ม Play ด้านล่าง เมื่อเซ็คความเรียบร้อยแล้ว ก็กด Save เป็นอันเสร็จสิ้น




ไม่มีความคิดเห็น:

แสดงความคิดเห็น