Photoshop ตอนที่ 12: มาทำตัวอักษรแอนนิเมชั่นกัน(1)

เราอาจจะเคยเห็นภาพเคลื่อนไหวต่างๆ ทั้งตัวอักษรและที่เป็นรูปภาพ ไม่ว่าจะอยู่ในรูปของ Banner Animation Card รวมถึงข้อความที่นิยมนำไปคอมเม้นท์ตาม Network Communication ต่างๆ ซึ่งวิธีการทำก็ไม่ยากอย่างที่คิด

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

วิธีการทำก็เริ่มกันเลยค่ะ เปิดโปรแกรม Photoshop ขึ้นมาค่ะ เราจะต้องสร้างตัวอักษรก่อน โดยไปที่ File > New แล้วกำหนดขนาดที่ต้องการ เลือกสีพื้นหลังหากต้องการให้พื้นหลังโปร่งใสให้คลิกเลือกที่ Transparent เมื่อกำหนดขนาดและเลือกพื้นหลังเสร็จคลิกที่ OK

จะได้พื้นที่งานตามที่เราตั้งขนาดไว้ เลือกเครื่องมือพิมพ์ตัวอักษร แล้วคลิกที่พื้นที่งาน เลือกแบบอักษร ขนาด ตำแหน่งและสีของตัวอักษร

จากนั้นพิมพ์ข้อความที่ต้องการ

เมื่อพิมพ์เสร็จ สังเกตที่ Layers จะมี Layer ของตัวอักษรที่เราพิมพ์อยู่ เราต้องการ Copy Layer ขึ้นมาอีก Layer เพื่อทำสีที่แตกต่างอีกหนึ่งสี วิธีการ Copy Layer ให้คลิกที่ Layer นั้นแล้วลากไปวางตรงตำหน่งดังภาพ หรือคลิกขวาที่ Layer นั้น แล้วเลือก Duplicate Layer

จะได้ Layer เพิ่มมาอีก 1 Layer ที่มีตัวอักษรเหมือนกัน แต่เรามองไม่เห็นเนื่องจากตัวอักษรซ้อนทับกันอยู่

จากนั้นเลือกคลิกที่ Layer ตัวอักษร Layer ใด Layer หนึ่ง ควรจะเป็น Layer ด้านบนเพื่อจะได้เห็นความเปลี่ยนแปลง จากนั้นคลิกที่เครื่องมือตัวอักษร Drag เม้าส์คลุมแล้วเปลี่ยนสีตัวอักษรตามต้องการ ในที่นี้เปลี่ยนเป็นสีน้ำเงิน

ในตอนนี้เราจะมีตัวอักษรสองสีทับกันอยู่ คือด้านล่างเป็นสีชมพูด้านบนเป็นสีน้ำเงิน จากนั้นเราจะมาทำภาพเคลื่อนไหวกันโดยคลิกที่ Jump to ImageReady หรือกด Ctrl+Shift+M

จะเข้ามาที่หน้าต่าง ImageReady ส่วนสำคัญที่ต้องใช้ในหน้าต่างนี้คือ Layer กับ Animation ในกรณีที่ไม่มีทั้งสองหน้าต่าง ให้ไปคลิกที่คำสั่ง Window ที่แถบเมนูแล้วเลือก Layers และ Animation
ดูในหน้าต่าง Animation จะมี Frame อยู่ 1 เฟรม คลิกที่ด้านล่างเพื่อเพิ่ม Frame ให้มีจำนวนตามที่ต้องการ ซึ่งในที่นี้ต้องการเพียง 2 เฟรมเท่านั้น

สังเกตว่าจะได้เฟรมมาเป็น 2 เฟรม ขออภัยที่ในรูปเขียนเป็น Layer ซึ่งในแต่ละเฟรมก็จะมี Layer ต่างๆ (ดูในหน้าต่าง Layer) ที่ทำมาใน Photoshop เหมือนกัน

สังเกตด้านล่างเฟรมจะมีให้เลือกเวลาในการเล่น เลือกเวลาตามที่ต้องการเลขยิ่งน้อยจะยิ่งเร็ว

ในที่นี้เลือกเวลาเป็น 0.2 ในหน้าต่าง Layers เราจะปิดตา Layer แรกก่อนจะทำให้มองเห็นตัวอักษรสีชมพูที่อยู่ด้านหลัง ซึ่งภาพเคลื่อนไหวในที่นี้จะใช้หลักการของการเปิดปิด Layer

จากนั้นมาคลิกที่ Frame ที่ 2 ในหน้าต่าง Layers คลิกเปิดตาที่ Layer บนแล้วปิดตาที่ตัวอักษร Layer ล่างจะเห็นตัวอักษรเป็นสีน้ำเงิน ตามภาพ

จากนั้นลองคลิกปุ่ม Play ด้านล่างเพื่อดูการเคลื่อนไหว ปรับเวลาตามต้องการ

เมื่อเสร็จแล้ว Save ไฟล์โดยไปที่ File > Save Optimized As...

ตั้งชื่อไฟล์และเลือกที่เก็บไฟล์ ไฟล์ที่ได้จะเป็นไฟล์นามสกุล .gif หรือ Animation gif

เพียงเท่านี้ก็จะได้ภาพแอนิเมชั่นไปใช้งาน ^_^

ส่วนไฟล์ Photoshop ก็สามารถ Save เก็บไว้ได้ เมื่ออยู่ใน ImageReady ให้คลิกที่ File > Save ตามปกติ จะเป็นการบันทึกค่าไว้ สามารถเปิดมาแก้ไขในภายหลังได้ แต่รูปที่เป็น .gif จะไม่สามารถแก้ไขได้ ต้องแก้ไขจากไฟล์ที่เป็น Photshop เท่านั้น

ตอนต่อไปจะมาแนะนำการทำ Animation กันต่อนะคะ โปรดติดตามตอนต่อไป

ขอบคุณค่ะที่เข้ามาเยี่ยมชม Blog ของ bombik

 

17 comments on "Photoshop ตอนที่ 12: มาทำตัวอักษรแอนนิเมชั่นกัน(1)"

ArtKung©'s picture
ArtKung© (visitor) said on Mon, 09/28/2009 - 22:02:

ทำได้ง่ายๆแบบนี้เลยจิงๆเหรอเนี่ย™

bombik's picture
bombik said on Tue, 09/29/2009 - 20:18:

จริงๆ

คนแซ่บื้อ's picture
คนแซ่บื้อ (visitor) said on Sat, 06/19/2010 - 14:29:

YOU ARE GOOD AT จริงๆ

ลูกครายหว่า อิอิ ขอบคุณคราบ

Anonymous's picture
Anonymous (visitor) said on Tue, 09/21/2010 - 23:44:

แต่พอเอาไปใส่ มันเห็นสีขาวอะ

ทำไง ช่วยตอบด้วย

ketsuda's picture
ketsuda (visitor) said on Fri, 09/24/2010 - 07:53:

นายตัวอ้วนกะยัยตัวเล็ก

คน's picture
คน (visitor) said on Thu, 10/28/2010 - 13:36:

ทำไมต้องเป็นภาษาอังกฤษทำภาษาไทยไม่ได้หรือไง.....คนทำทำไมไม่คิดถึงคนที่เค้าทำไม่เป็นบ้าง...ทำก็ไม่เป็นอยู่แล้วยังจะมาเป็นภาษาภาษาอังกฤษอีกเซง

Anonymous's picture
Anonymous (visitor) said on Thu, 11/04/2010 - 10:15:

แล้ว จะ เอา โค้ด ไป ลง ไฮ ไฟ ได้ ยัง ไง คับ

bombik's picture
bombik said on Thu, 11/04/2010 - 19:51:

ต้องเอารูปไปฝากไว้ในเว็บที่รับฝากรูปก่อนค่ะ เมื่อฝากเสร็จก็ Copy Code ไปแปะใน Hi5
เว็บฝากรูปมีเยอะมาก เช่น
www.uppicweb.com หรือ www.temppic.com

Mako's picture
Mako (visitor) said on Mon, 11/15/2010 - 21:35:

แล้วถ้าจะเอาไปลงในเฟสบุ๊กล่ะคะ ทำได้ป่าวเอ่ย

bombik's picture
bombik said on Tue, 11/16/2010 - 13:16:

เอาไปใส่ใน Facebook มันจะไม่เคลื่อนไหวค่ะ

แต่ถ้าไปฝากไว้ที่เว็บฝากรูปแล้ว Copy Link มาแปะใน Wall
จะเห็นมันเคลื่อนไหวค่ะ แต่ก็เป็นแค่โชว์รูปเล็กๆ เท่านั้น

m@lang's picture
[email protected] (visitor) said on Sun, 12/05/2010 - 19:18:

สุดยอด ขอบคุณที่แชร์ครับ อยากรู้วิธีทำภาพ .gif มานานละ พอดีไม่เป็น Photoshopเลย

chonburi's picture
chonburi (visitor) said on Thu, 01/27/2011 - 08:37:

ขอบคุณ สำหรับข้อมูลครับ

Anonymous's picture
Anonymous (visitor) said on Fri, 03/25/2011 - 16:41:

ขอบคุณมาก หนูทำได้แล้วคะ

minzaza03's picture
minzaza03 (visitor) said on Sat, 04/09/2011 - 20:52:

ขอบคุณสำหรับสิ่งดีๆๆๆๆๆๆนะครับ
ขอให้มีความสุขมากๆๆๆนะคับ

Yoongie's picture
Yoongie (visitor) said on Sun, 08/28/2011 - 15:25:

ขอบคุณมากค่ะ เป็นประโยชน์จริงๆ

reddragon88's picture
reddragon88 (visitor) said on Mon, 04/02/2012 - 21:25:

ขอบคุณคะ

แทงหวยออนไลน์'s picture
แทงหวยออนไลน์ (visitor) said on Mon, 04/02/2012 - 21:26:

ขอบคุณสำหรับข้อมูลดีค่ะ

Powered by Drupal, an open source content management system

Copyright © 2009 bombik - Theme ported to Drupal by kong
CSS Templates by Inf Design - Valid XHTML & CSS