[How To] ทำภาพเคลื่อนไหวและโปร่งใส

posted on 14 Dec 2006 02:33 by rije in HowTo

ผมได้ทำ How To... นี้ขึ้นมาใหม่ (ดูดีกว่าเดิม เหอๆ)
เพื่อแทน How To... ที่ได้ทำไว้ 2 อันที่ recomeded

[How To] วิธีทำภาพให้พื้นหลังโปร่งใส
[Animation GIF] การทำภาพเคลื่อนไหวอย่างง่าย

ผมจึงได้รวมเอาทั้งสองอย่างมาอยู่ใน entry นี้ครับ
Special Thx : ImageShack

==========================================

นี่เป็น banner ที่ผมทำลงไว้ที่เว็บที่ส่งอาจารย์เมื่อเทอมก่อนครับ

==========================================

++++++++++++++++++++++++++++++++++++++++

==========================================

วิธีสร้างภาพเคลื่อนไหวด้วย Photoshop + ImageReady

1. สร้างชิ้นงานใหม่ขึ้นมา File > New... จากนั้นกำหนดขนาด
395 x 47 pixels จะกำหนด Name หรือไม่ก็แล้วแต่ครับ

2. ทำการเอาภาพเข้ามาจัดเรียงไว้คนละ Layer รวมทั้งข้อความที่จะใช้ด้วย
โดยกรอบแดงเป็นส่วนที่สำคัญสำหรับจากเปิด-ปิด Layer นั้นๆ
ส่วนกรอบฟ้าคือส่วนของ Layer ที่แยกไว้เป็นชั้นๆ

3. หลังจากได้เรียง Layer ของภาพและข้อความเอาไว้เรียบร้อยแล้ว
ก็ย้ายไปทำงานที่ ImageReady โดยกดที่ภาพในกรอบสีแดง

4. เมื่อย้ายมาทำงานที่ ImageReady ทั้งภาพและข้อความที่ทำไว้แล้ว
ก็จะถูกย้ายมายัง ImageReady ทั้งหมด

5. ทำการเปิดหน้าต่าง Animation ขึ้นมา Window > Animation
จากกรอบสีฟ้าทำการสร้างเฟรมใหม่ขึ้นมา โดยจะมีเฟรมที่ 1 ให้อยู่แล้ว

6. หลังจาก duplicates เฟรมขึ้นมาใหม่อีกเฟรมแล้ว เราจะทำงาน
อยู่ในเฟรมที่ 2 ที่เพิ่งได้สร้างขึ้นมา โดยจะกำหนดว่าให้เฟรมนี้แสดง
ภาพหรือข้อความอะไรก็ได้ หรือจะไม่ให้โชว์ Layer ไหนก็ได้
ด้วยการเปิด-ปิดตาที่ Layer ที่ต้องการจะโชว์หรือไม่

7. ลูกศรสีแดงชี้ไว้ที่เฟรม 1 ส่วนสีฟ้าชี้ที่เฟรม 2 เลือกทำงานที่เฟรมไหนก็ได้
แต่สำหรับเฟรมที่ 1 เมื่อทำการปรับค่าหรือแก้ไขจะมีผลต่อเฟรมหลังด้วย
กรอบสีม่วงสำหรับเซ็ตค่าเวลาในเฟรมนั้นๆ ว่าจะให้โชว์อยู่นอนเท่าไหร่
ค่า Fever ด้านล่างกรอบสีม่วง เป็นการกำหนดให้ภาพ gif ที่ทำเล่นต่อเนื่อง
ตลอดเวลาหรือว่า once คือการเล่นเพียงรอบเดียวไม่มีการวนลูป
กรอบสีเขียวคือ play ไว้สำหรับเล่นเฟรมต่อเนื่อง (เหมือนกัน preview)

8. หลังจากปรับแต่งค่า frame by frame เสร็จแล้วก็ทำการเซฟครับ
โดยต้องเซฟตามวิธีดังภาพ

9. เลือกประเภทการเซฟเป็นแบบ Gif หรือแบบ PNG นะครับ

============================================

++++++++++++++++++++++++++++++++++++++++

============================================

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

|||||||||||||||

===========================================

วิธีการสร้างภาพโปร่งใสด้วย Photoshop

1. สร้างชิ้นงานใหม่ขนาด 50 x 50 โดยกำหนดพื้นหลัง
ให้เป็นแบบ Transparent (ทำให้พื้นหลังโปร่งใส)

2. ผมวาดกรอบขึ้นมาเป็นสีเหลี่ยม จะทำที่ Layer 1 หรือ 2 ก็ได้ครับ

3. กด M หรือคลิกเลือกภาพเส้นปะที่ tool bar เพื่อใช้งาน
โดยลากกรอบสี่เหลี่มที่มุมทั้ง 4
(กด shift เมื่อลากครั้งที่ 2 จะทำให้กรอบเดิมที่ลากไว้ไม่หายไป)

4. หลังจากลบเส้นในกรอบที่ได้ลากไว้ตามภาพด้านบนแล้ว
ก็วาดเส้นเชื่อมกันตามภาพด้านล่าง

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

6. จากนั้นใช้ไม้กายสิทธิ์หรือ Magic Wand Tool (W)
โดยต้องทำงานอยู่ที่ Layer กรอบ แล้วคลิกที่พื้นที่ที่ต้องการลบภาพส่วนเกินออก

7. หลังจากที่ทำการลบไปแล้ว ส่วนนั้นจะเป็นพื้นที่โปร่งใสครับ

8. จากนั้นผมทำสร้างกรอบอีกกรอบทับกรอบเดิมโดยอยู่คนละ Layer
ด้วยการคลิก ctrl พร้อมกับกดที่ Layer กรอบเก่าที่ได้ทำไว้นั้น
ที่ภาพจะมีเส้นปะขึ้นรอบกรอบที่ได้ทำการคลิกเลือกเอาไว้

9. จากนั้นสร้าง Layer ขึ้นมาใหม่โดยให้อยู่บน Layer เส้นกรอบเดิม
โดยยังมีเส้นปะรอบๆ อยู่ก็ให้เลือก Pencil Tool มาใช้ โดยลงสีอ่อน
ลงไปบน Layer ใหม่ จะลากไปมาให้ทั่วๆ หรือลงทั้งหมดก็ได้ครับ
โดยอย่าให้เส้นปะหายไปนะครับ ซึ่งนี่เป็นการลงสีเฉพาะที่

10. จากนั้นย้ายไปทำงานต่อใน ImageReady ครับ
โดยการทำภาพต่อกัน 2 ภาพ เฟรมแรกไม่มี Layer กรอบสีอ่อน
เฟรม 2 มี Layer กรอบสีอ่อน แล้วให้ play แบบ forever ครับ

อย่าลืมนะครับว่าต้องเซฟเป็น .gif นะครับ

============================================

++++++++++++++++++++++++++++++++++++++++

===========================================

จบหลักสูตรกันเท่านี้ครับ ^__^
ภาพทั้งหมดนี้เป็นลิกขสิทธิ์ของบล็อคผม
เพราะฉะนั้นหากทำการ copy ไปกรุณาโพสขอก่อนนะครับ
แล้วอย่าลืม Credit นะครับ (เรื่องใหญ่นะครับ สำคัญมาก)