วันพฤหัสบดีที่ 22 พฤศจิกายน พ.ศ. 2555

Photoshop : ทำภาพเคลื่อนไหวไว้ใช้กับเวปต่างๆ

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

          1. ก่อนอื่นให้เตรียมรูปที่จะนำมาทำก่อนนะครับ ซึ่งจากตัวอย่างผมใช้โปสเตอร์หนังเรื่อง แวมไพร์ ทไวไลท์ ภาค 1-4 มาทำ โดยจะให้รูปเปลี่ยนวนไปเรื่อยๆ ตั้งแต่รูปภาค 1 ถึงภาค 4 ผมจึงเตรียมรูปสกุล .jpg ไว้ 4 รูป ขนาดเท่ากันคือ 400 X 570 pixel
          2. เปิดโปรแกรม Adobe Photoshop ขึ้นมา คลิกที่ File แล้วเลือก New ตามรูปครับ

         
          3. ในหน้าต่าง New ให้ตั้งค่าตามนี้ครับ
               - Name : ตั้งชื่อตามใจชอบเลยครับ
               - Preset : เลือกเป็น Custom
               - Width : ใช้ 400 (ตามขนาดรูปภาพที่เราเตรียมไว้) โดยใช้หน่วยเป็น pixels
               - Height : ใช้ 570 (ตามขนาดรูปภาพที่เราเตรียมไว้) โดยใช้หน่วยเป็น pixels
               - Resolution : 72 pixels/inch
               - Color Mode : RGB Color 8 bit
               - Background Contents : เลือกเป็น Transparent
               จากนั้นก็คลิก Ok ครับ

         
          4. เมื่อคลิก Ok แล้วจะมีหน้าต่างงานใหม่ปรากฏขึ้นมาตามรูปนี้

         
          5. จากนั้นคลิกที่ File แล้วเลือก Open

         
          6. คลิกทำไฮไลท์ที่รูปแรก แล้วคลิก Open ตามลำดับครับ

         
          7. เมื่อเลือกรูปและคลิก Open แล้ว รูปที่เราเลือกจะถูกเปิดขึ้นมาใน Photoshop ตามรูปนี้ครับ

         
          8. จากนั้นคลิกที่ Select แล้วเลือก All

         
          9. คลิกที่ Edit แล้วเลือก Copy

         
          10. จากนั้นคลิกปิดรูปที่เราเลือกมา (ตามลูกศรชี้)

        
          11. คลิกที่ Edit แล้วเลือก Paste

         
          12. หลังจาก Paste แล้วจะเห็นว่า รูปแรกที่เราเลือกได้เข้ามาวางอยู่ในหน้าต่างงานใหม่แล้วครับ

         
          13. จากนั้นให้กลับไปทำตามขั้นตอนที่ 5 ใหม่อีกครั้ง เพื่อจะได้เลือกรูปที่ 2 (ในขั้นตอนที่ 6) ก่อนจะทำตามขั้นตอนที่ 7-8 เรียงตามลำดับมาเรื่อยๆ จนถึงขั้นตอนที่ 11
          14. เมื่อรูปที่ 2 มาวางทับรูปที่ 1 ในหน้าต่างงานใหม่แล้ว ก็กลับไปทำตามขั้นตอนที่ 5-11 อีก เพื่อเลือกรูปที่ 3 (ในขั้นตอนที่ 6) และทำ 5-11 อีกรอบเพื่อเลือกรูปที่ 4
          15. เมื่อทำ 5-11 ครบ 4 รอบแล้ว รูปทั้ง 4 ที่เราเตรียมไว้ก็จะมาวางซ้อนทับกันอยู่ในหน้าต่างงานใหม่ครบทั้ง 4 รูป โดยสามารถสังเกตได้จากหน้าต่าง Layers (ลูกศรชี้) ว่าจะมีอยู่ 4 Layers ตามภาพ

         
          16. จากนั้นคลิกที่ Indicates layers visibility (สัญลักษณ์รูปตาหน้า layer) ที่ Layer 2 , 3 และ 4 ทั้ง 3 Layers (ตามลูกศร)

         
          17. จากนั้นคลิกที่ Window แล้วเลือก Animation

         
          18. จะมีหน้าต่าง Animation (Frames) เพิ่มขึ้นมาตามรูปครับ

         
          19. คลิกที่ Selects frame delay time (0 sec.) ตามลุกศรสีดำ แล้วเปลี่ยนให้เป็น 1.0 ตามลูกศรสีแดง

         
          20. จากนั้นคลิกที่ Duplicates selected frames ตามลูกศรครับ

         
          21. ถึงตอนนี้เราจะเห็นว่าในหน้าต่าง Animation (Frames) จะมี frame เพิ่มขึ้นมาอีก 1 Frame (ลูกศรสีแดง) ก็ให้คลิกที่ Indicates layers visibility (ตำแหน่งรูปลูกตาที่ว่างอยู่หน้า Layer) ของ Layer 2 ครับ (ลูกศรสีดำ)

         
          22. ทำตามขั้นตอนที่ 20 อีก แต่คราวนี้เมื่อ Frame ในหน้าต่าง Animation (Frames) เพิ่มขึ้นแล้ว ให้คลิกที่ Indicates layers visibility หน้า Layer 3
          23. ทำตามขั้นตอนที่ 20 ใหม่อีกรอบ โดยคราวนี้ให้คลิกที่ Indicates layers visibility หน้า Layer 4
          24. ถึงตอนนี้ในหน้าต่าง Animation (Frames) จะมี Frame ทั้งหมด 4 Frames ซึ่งแต่ละ Frame จะแสดงรูปต่างๆ กันตามรูป

         
          25. จากนั้นให้คลิกที่เครื่องหมาย Play (ตามลูกศรชี้) ในหน้าต่าง Animation (Frames) เพื่อดูการแสดงผลครับ ซึ่งหลังจากคลิก Play แล้วจะเห็นว่ารูปในหน้าต่างงานใหม่จะเปลี่ยนวนไปเรื่อยๆ

          26. ถึงตอนนี้ก็จะมาถึงขั้นตอนการ Save รุปไว้ใช้แล้วครับ โดยให้คลิกที่ File แล้วเลือก Save for web & devices

         
          27. จากนั้นตั้งค่า Preset เป็น GIF 128 Dithered (ลูกศรสีดำ) ก่อนจะคลิก Save (ลูกศรสีแดง) ตามลำดับ

         
          28. ตั้งชื่อไฟล์ เลือกโฟลเดอร์ปลายทาง เลือก Save as type เป็น Images Only (*gif) แล้วคลิก Save ได้เลยครับ
          29. ผลที่ได้ก็จะเป็นแบบนี้ครับ ซึ่งเราสามารถจะนำไปโพสในเวปต่างๆ ได้เลย



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

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