Photoshop: อนิเมชั่นอักษรเบลอสั่นไหว (Animated Vibrating Blur Text)


ขั้นตอนที่ 1. สร้างไฟล์ Photoshop ขึ้นมาขนาดพื้นที่ทำงาน 300x300 วาดพื้นหลังขึ้นมาตามต้องการหรือจะลองตั้งค่าตามตัวอย่างข้างล่างนี้ดูก็ได้โดยตั้งชื่อเลเยอร์พื้นหลังอันนี้ว่า Layer 1



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

พื้นที่ด้านบนให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ffc600 และ Background: #ffba00
เส้นสีที่แบ่งด้านบนและส่วนกลางคือ #e0750d และ #fff600 ตามลำดับ
พื้นที่ตรงกลางให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ffa800 และ Background: #ff8800
เส้นสีที่แบ่งส่วนกลางและด้านล่างคือ  #c64000  และ #ece100 ตามลำดับ
พื้นที่ด้านล่างให้ไล่สี Gradient จากบนลงล่างโดยตั้งค่า Foreground: #ff9d00 และ Background: #ff9000


ขั้นตอนที่ 2. พิมพ์ตัวอักษรสีขาว (#ffffff) ใส่ลงไปตามต้องการ โดยในตัวอย่างนี้ใช้ อักษรแบบ Bookman Old Style แบบ Bold ขนาด 72 Pt จากนั้นตั้งชื่อเลเยอร์อักษรนี้ว่า "Quick"


ขั้นตอนที่ 3. สั่งคัดลอกเลเยอร์ "Quick" ขึ้นมาอีกหนึ่งอันโดยนำไปวางไว้ด้านบนสุดแล้วให้ตั้งชื่อเลเยอร์ที่เพิ่มขึ้นมาใหม่นี้ว่า "Shadow"


ขั้นตอนที่ 4. ไปที่เลเยอร์ "Shadow" จากนั้นเปลี่ยนสีตัวอักษรในเลเยอร์นี้ให้เป็น #753e12 จากนั้นขยับตำแหน่งตัวอักษรในเลเยอร์  "Shadow" นี้เลื่อนไปด้านขวา 1 px และเลื่อนลงด้านล่าง 1 px


ขั้นตอนที่ 5. ย้ายเลเยอร์ "Shadow" ไปไว้ใต้เลเยอร์ "Quick"


ขั้นตอนที่ 6. เปลี่ยนเลเยอร์ตัวอักษรให้เป็นรูปภาพโดยเลือกเลเยอร์ "Quick" และ "Shadow" ไว้พร้อมกันแล้วไปที่ Layer > Rasterize > Type
จากนั้นให้รวมเลเยอร์ตัวอักษรทั้งสองอันนี้เข้าด้วยกันโดยเลือกเลเยอร์ "Quick" และ "Shadow" ไว้พร้อมกันแล้วไปที่ Layer > Merge Layers หรือใช้การกดปุ่ม Ctrl+E แทนก็ได้โดยให้ตั้งชื่อเลเยอร์ที่รวมกันแล้วว่า "Text Stop"


ขั้นตอนที่ 7. ให้สั่งคัดลอกเลเยอร์ "Text Stop" เพิ่มขึ้นมาอีกหนึ่งอันแล้ววางไว้ด้านบนสุดโดยตั้งชื่อว่า "Text Blur"


ขั้นตอนที่ 8. ไปที่เลเยอร์ "Text Blur" แล้วเลือกที่  Filter > Blur > Motion Blur โดยตั้งค่าดังนี้
Angle: 0
Distance : 16 px



ขั้นตอนที่ 9. สั่งซ่อนเลเยอร์ "Text Blur" แล้วเลือกที่ Window > Animation
เปิดใช้หน้าจอทำงานแบบ "Convert to frame animation"
ตั้งค่ารูปแบบการแสดงของ Animation เป็น Forever
และตั้งค่า Delay ในเฟรมแรกเป็น 0.2 sec


ขั้นตอนที่ 10. สั่งคัดลอกเฟรมแรกที่มีอยู่เพิ่มขึ้นมาอีก 4 อัน แล้วเลือกทำงานในเฟรมที่ 5 โดยในเฟรมนี้ให้สั่งซ่อนเลเยอร์ "Text Stop" แต่ให้เปิดแสดงภาพเลเยอร์ "Text Blur" แทน


ขั้นตอนที่ 11. เลือก File > Save for Web & Devices โดยให้เลือกเซฟเป็น GIF ก็จะได้อนิเมชั่นอักษรเบลอตามต้องการ

Credit: http://www.voidix.com/imageready_blur_text.html

Post Status




0 ความคิดเห็น:

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