วิธีทำ Text Emo. ด้วย Adobe Imageready | ** ニュビーズ ☆彡

2006/Oct/17

หวัดดีคร้าบบ ^^* เขียนไปเขียนมา ล่อไป เอนทรีที่ 4 แล้ว วันนี้ขอเปลี่ยนแนว มาเล่น Imageready มั่งครับ

เคยเห็น Text Emotionมั้ย ที่ชอบใช้ทำให้เครื่องกระตุกๆใน MSN อะครับ

คิดว่าสวยมั้ยหล่ะ อยากลองทำเองดูมั่งป้ะหล่ะ อยากทำก็มาเลย เดี๋ยวเราจัดให้

>> วิธีทำ Text Emo. ด้วย Adobe Imageready

1. สร้างหน้ากระดาษขึ้นมาครับ ไปที่ File > New (Ctrl+N ก็ได้) เลือกขนาดตามต้องการครับ
ในแถบ Contents of first layer ให้เลือก Transparent (พื้นหลังเป็นโปร่งใส) นะครับ เสร็จแล้วกด OK เลย

2. ได้หน้ากระดาษแล้วครับ

3. ทำการสร้าง Text ครับ โดยคลิกที่ตัว T ในแถบเครื่องมือ > คลิกแล้วลากให้เป็นกรอบสี่เหลี่ยมที่หน้ากระดาษ > เลือก Font ขนาด สี ตามต้องการ > แล้วพิมพ์ข้อความครับ

4. เพื่อความสวยงามนะครับ เราจึงเอาเทคนิค Stroke+Gradient Overlay มาใช้ด้วยนะครับ วิธีทำก็เช่นเดียวกันเอนทรีที่ได้เสนอไปเอนทรีแรกเลยครับ

Stroke

Gradient Overlay

อ้อ... เกือบลืมไป Photoshop กับ Imageready ไม่มีอะไรแตกต่างกันครับ เทคนิคที่เสนอไปสามารถประยุกต์ใช้ได้ทั้ง 2 โปรแกรมเลยครับ ไม่ต้องกลัวครับว่าจะงง

5. ได้ Text สวยงาม...

6. ไปดูที่แถบ Animation ครับ ให้คลิกที่รูปแผ่นกระดาษ (Duplicates current frames) ดังภาพครับ เพื่อเพิ่มเฟรมในการทำ Animation ครับ

7. เมื่อคลิกแล้ว ตรงแถบ Animation จะมีหน้าเพิ่มมาหน้านึง ให้คลิกที่หน้าที่ 2 แล้วตกแต่งให้แตกต่างจากหน้าแรกครับ
(ตกแต่งยังไงก็ได้ครับตามใจชอบครับ ในภาพเราเปลี่ยนสีอย่างเดียวพอ)

8. เสร็จเรียบร้อยแล้ว ให้คลิกที่ไอค่อน Tween... ดังภาพเลยครับ

9. ใน Tween จะมี Options ให้เล่นเยอะครับ มีดังนี้...

Tween With - ก็คือการเพิ่มเฟรมในการ Tween ครับ ซึ่ง Next Frame ก็คือจะ Tween ไปยังเฟรมถัดไป Previous Frame ไปยังเฟรมก่อนหน้านั้นครับ
Frame to add - ใส่ตัวเลขในช่องครับว่าจะเพิ่มไปกี่เฟรม
Layer - ให้เลือกครับว่าจะ Tween ไปทุก Layer หรือเฉพาะ Layer ที่เลือกครับ
Parameters - ตรงนี้ขอร่ายยาวครับ เพราะว่าเป็นเอนโดรฟินเลยทีเดียว (สิ่งสำคัญ)

มาดูในแถบ Parameters ครับ...
Position - ตำแหน่งครับ ถ้าเฟรมแรก เราจัดข้อความให้ไปอยู่ทางซ้ายสุด เฟรม 2 เราให้อยู่ขวาสุด ถ้าเราคลิกถูกเลือกข้อนี้ ข้อความจะ Tween จากซ้ายไปขวาครับ
Opacity - ความโปร่งใสครับ เช่นเดียวกันกับข้อแรก ถ้าเฟรมแรก เราใส่ค่า Opacity ที่ 100% เฟรม 2 เราใส่ค่า Opacity ที่ 50% ถ้าเราคลิกถูกเลือกข้อนี้ ข้อความทำการไล่ Opacity ครับ จาก 100% ไปยัง 50% ก็คือค่อยๆเลือน แต่ยังไม่หาย (หรือ Fade)
Effect - ตรงตัวเลยครับ ไม่ว่าจะเป็นสี หรืออะไรก็แล้วแต่ครับ ถ้าเฟรมแรก เราใส่สีข้อความด้วยสีฟ้า เฟรม 2 เราใส่สีข้อความด้วยสีชมพู ถ้าเราคลิกถูกเลือกข้อนี้ ข้อความจะทำการไล่สีตั้งแต่ฟ้าไปยังชมพูเลยครับ ^^

ตั้งค่าเสร็จแล้ว คลิก OK เลยครับ

10. จะเห็นได้ว่าจะมีเฟรมในแถบ Animation เพิ่มขึ้นมาครับ สังเกตสีด้วยว่าจะไล่สีไปเลย
มาถึงนี่แล้วก็อยากรู้ใช่มั้ยครับว่าฝืมือเราเป็นยังไง คลิกที่ Plays/stops animation ดังภาพครับ

11. ถ้าไม่มีข้อผิดพลาดหรือไม่ตกแต่งเพิ่มก็เซฟครับ โดยไปที่ File > Save Optimized As... (Ctrl+Shift+Alt+S ก็ได้) หาที่อยู่ ตั้งชื่อ แล้วกด OK เป็นอันเสร็จพิธี

12. ตามผลงานครับ

ก็ เอวัง ลงด้วย ประการ ละ ฉะนี้ - -*

tag: artwork, emotion, imageready
posted by aquariz, at 2006-Oct-17 12:18:1331

อุ้ ย ต๊ า ย เ จ อ b l o g มี ส า ร ะ
ไม่เหมือนบล็อกสุ่ยเลย

ขอบคุณสำหรับความรู้นะคะ
ไว้ว่างๆเอาไปทำเล่นมั่ง
( ว่ า ง ต อ น ไ ห น เ นี่ ย ชั้ น )

#1 by 김용훈★ At 2006-10-17 12:30,

โอ้วววว สาระความรู้
ขอแอดนะคะ

#2 by ♬ เ ด็ ก ห ญิ ง ง้ อ ง แ ง้ ง ♬ At 2006-10-17 12:31,

แวะมาเยี่ยมครับ^^
โอ้วในที่สุดก้อเจอบล็อกมีสาระกะเค้าซะที

*รอบตัวมีแต่ของไร้สาระ555*

#3 by At 2006-10-17 12:38,

อิๆๆๆ
นานๆจะมีคนเขียนบล็อคมีสาระ
แอบจำไปทำมั่งดีก่า

#4 by MadSatan (161.200.255.161) At 2006-10-17 12:57,

ขอบคุณครับ แอดไว้นะครับ

#5 by ~the xnux~ At 2006-10-17 14:24,

อืมม อยากลองทำการ์ตูนจาก image ready เลย มีใครเคยทำมั่งครับ

#6 by Tang-mae At 2006-10-17 17:42,

อืม..ม.. ถึงงัยก้อทำไม่เป็นอยู่ดี
แต่จะพยายามนะ

#7 by pLOiiZ At 2006-10-17 18:45,

เจ๋งๆครับ Imageready ทำ GIF เยี่ยมเลย
เอาไฟล์จาก photoshop ลงมาทำได้เลย ^^ ชอบครับ
เอา technicมาลงเยอะๆนะ ชอบๆ

#8 by meddlesome_ At 2006-10-17 22:39,

ตอบคุณ Tang-mae ครับ..

เราก็เคยลองทำดูนะครับ ยากพอสมควรเลยเพราะว่ากว่าจะได้รูปนึงใช้ไปหลายเฟรมเลยครับ เพราะว่ามันต้องมีรูปต้นฉบับที่ใช้ต่อเนื่องกันหลายรูปเลยครับ (เราลองทำดูใช้ต้นฉบับประมาณ 20 รูปได้มั้ง - -*)

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

ขอน้อมรับความคิดเห็น มา ณ ที่นี้ครับ ^^*

#9 by ニュビーズ ☆彡 At 2006-10-17 22:59,

ว้าววววว

บล๊อคมีสาระ ชอบๆๆๆคับ

เพราะเรานั้นทำโฟโต้ไม่เป็น 555+

ขอมาศึกษาจากบล๊อคนี้นะ

งั้นแอด Fv เลยนะคับ

#10 by ::|| プロイ At 2006-10-18 22:49,

thx q

#11 by Tang-mae At 2006-10-18 23:24,

ทำได้แล้ววว

ประกอบกับเคยเรื่องมาแล้ว(ลืม- -)เลยเข้าใจกระจ่าง สีฟ้าสวยดีเนอะ ของข้าน้อยน้ำเงินเทา เอิ๊ก

ขอแอดไว้นะขอรับท่าน

#12 by Ritsuka At 2006-10-19 19:03,

พี่ค่ะทำเสร็จแร้วแต่ไม่รู้จาใช้ยังงัย

#13 by (203.113.33.9) At 2007-04-12 03:15,

ขอบคุณสำหรับความรู้ครับแต่อยากให้มีเทคนิคการทำตัวอักษร เครื่อนไหวให้มากกว่านี้อีกอ่ะ แต่แค่นี้ก็ดีแล้วคับ

#14 by เต้ (222.123.167.147) At 2007-10-08 12:13,

อ่านแล้วเกิดไอเดีย สามารถนำไปทำให้มันเปลี่ยนรูปเมื่อภาพเหมือนการเลื่อนสไลด์ ภาพได้หรือเปล่า มีการหน่วงเวลาหรือเปล่า อยากจะนำมาใช้ Headder ของ web เพราะเบื่อกับการที่จะต้องนำภาพไปฝากไว้ที่ server อื่น ๆ มันช้าเพราะต้อง connect กันอีกทั้งเวปล่มก็มี ช่วยบอกวิธีหน่อยครับ

#15 by ตองไกว (58.9.56.222) At 2007-10-27 04:52,

โอววว....ขอบคุณมากๆเลยครับ กะลังงงมากๆ ได้ประโยชน์และเข้าใจง่ายมากเลยครับ ขอบคุณจริงๆ big smile

#16 by Shong At 2007-10-28 11:11,

แล้วมีวิธีทำ emotion แบบภาพมั้ยค่ะ

อยากทำมากๆ

#17 by kissthy (124.157.205.91) At 2008-01-14 00:22,

ตรงนี้ทำไม่ได้ ไม่รู้ จะมีคน มาตอบ หรือ ป่าว

ตรง ที่จะ เปลี่ยน สี
7. เมื่อคลิกแล้ว ตรงแถบ Animation จะมีหน้าเพิ่มมาหน้านึง ให้คลิกที่หน้าที่ 2 แล้วตกแต่งให้แตกต่างจากหน้าแรกครับ

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

#18 by (202.6.107.59) At 2008-01-15 12:42,

#19 by บุ๋ม (202.6.107.59) At 2008-01-15 12:43,

#20 by (202.6.107.59) At 2008-01-15 13:00,

Hello! Good Site! Thanks you! nfvsfaocwtaf

#21 by bjsngbaegq (195.5.20.194) At 2008-01-28 09:16,

เซฟม่ายได้อ่ะทำงัยอ่ะลองเซฟหลายทีแล้วมันขึ้นแบบเนี่ย because jpeg,png and wbmp do not support animation,imagereddy will save only the currently selected frame แล้วต้องทำงัยถึงจาเป็นภาพ animationได้อ่ะ บอกทีสิแอดมาก้อได้นะพยายามแล้วอ่ะ tong_t_t@hotmail.com

#22 by Nuu Tong (58.8.86.28) At 2008-02-01 11:51,

เก่งมาก ๆ นะ

#23 by อ้อม (118.172.173.136) At 2008-02-26 19:02,

#24 by (125.24.232.20) At 2008-03-25 08:39,

ขอบคุณมากค่า

#25 by กัน (124.120.10.68) At 2008-04-17 09:44,

ของคุงค่ะ
กามลังงพอดี
หะๆ *

#26 by nr41 (118.174.41.129) At 2008-04-26 11:48,

ดีมากสวยมา big smile

#27 by อ๋อ (125.26.116.238) At 2008-05-02 10:59,

ดีมากๆๆๆๆๆๆๆดลยครับผม กำลังต้องการทำอยู่พอดีครับ

#28 by 88 (125.24.123.212) At 2008-06-08 02:30,

ทำเป็นแล้วค่ะ
ขอบคุนมากนะคะ

#29 by เช็ค (125.26.120.100) At 2008-06-29 16:29,

ขอบคุณค่ะ
ลองทำดูก่อนค่ะ
ว่าจะสำเร็จมั้ยน้า

#30 by (124.121.8.37) At 2008-08-14 21:47,

ดีมากเลยค่ะ ได้ความรู้เพิ่ม
อิอิ
double wink

#31 by gill_za (124.121.210.186) At 2008-08-18 10:36,

<< Home

ニュビーズ ☆彡
View full profile