Imageready

2007/May/18

กลับมาและ ช่วงนี้เพื่อนๆหลายๆคน คงจะเปิดเทอมกันแล้วสินะครับ เราเองก็เปิดเทอมแล้วเช่นกัน อีกทั้งยังต้องเตรียมตัวกับการเรียน และ แอดมิชชั่น ด้วย แต่ก็ยังจะอุตส่าห์มาอัพเอนทรีให้เพื่อนๆอ่านกันอีกเนอะ -*-

สำหรับเอนทรีนี้ จะมานำเสนอในเรื่องการทำ Banner แบบ GIF Animation ซึ่งวิธีทำจะเหมือนกับการทำ GIF Animation ธรรมดานี่แหละ (ดูเพิ่มเติมได้จากเอนทรีนี้ >> Click !!) แต่ว่าเปลี่ยนมาเป็น Banner เท่านั้นเอง เนื้อหา จะแบ่งเป็น 2 ส่วน คือ ส่วนของการทำภาพต้นฉบับ เพื่อจะนำมาใช้ใน ImageReady และส่วนของการทำ GIF Animation เอาเป็นว่ามาดูกันเลยดีกว่า - -

>> ส่วนแรก - ทำภาพต้นฉบับ เพื่อจะนำมาใช้ใน ImageReady

1. สร้างหน้ากระดาษ ขนาดตามต้องการ แล้วตกแต่งด้วยแบบใดก็แล้วแต่ (อาจจะใช้ Brush หรือดึงรูปต่างๆ มาใช้ก็ได้)

2. ใส่ Text โดยใช้ Horizontal Type Tool

แล้วใส่ตัวอักษรที่ต้องการ อย่างเช่น Banner เรา ต้องการใส่คำว่า AqUariZ ก็ให้ใส่ตัวอักษรทีละตัว ลงไปในภาพ จัดตำแหน่งให้ดี ให้เรียงกัน แล้วเซฟเลยครับ

** Tips ** - การเซฟ เซฟเป็นไฟล์ .gif นะ และควรตั้งชื่อไฟล์ให้เรียงกัน เช่น banner1 , banner2 , ... จะได้สะดวกในการเรียงในขั้นตอนถัดไปครับ และการใส่ข้อความ อาจใช้ Blending Options ช่วยในเรื่องของตัวอักษรได้ด้วย ^^*

ตัวอย่างเช่น - ชื่อเรา AqUariZ แต่ละภาพก็ควรใส่อักษรตามนี้ >> A , q , U , a , r , i , Z , AqUariZ , ภาพเปล่าๆ ไม่มีตัวอักษร

มาดูภาพกัน...

>> ตัว A

>> ใส่ไปเรื่อยๆ จนถึงคำว่า AqUariZ

>> ภาพนี้ไม่ต้องใส่ตัวอักษร

เสร็จแล้วเราจะได้ภาพต้นฉบับ เพื่อนำไปใช้ใน ImageReady แล้วครับ ^^*

>> ส่วนที่ 2 - ทำ GIF Animation

3. เข้าโปรแกรม Adobe ImageReady เลยครับ สร้างหน้ากระดาษให้ขนาดเท่ากับภาพต้นฉบับที่เพิ่งทำเสร็จมะตะกี้

4. เปิดภาพต้นฉบับ (มีเท่าไหร่เปิดมาให้หมดเลยครับ) แล้วใช้ Move Tool ลากภาพลงกระดาษเลย

5. ลากแล้ว ดูแถบ Animation คลิกที่ Duplicates Current Frame

6. เฟรมเพิ่มมาอีกเฟรมนึงแล้ว

7. ดูแถบ Animation > คลิกเฟรมที่เพิ่งเพิ่มมาใหม่ > ลากภาพต้นฉบับต่อไปลงกระดาษเลย

จากภาพ จะเห็นได้ว่า เมื่อลากมาแล้วนั้น จะต้องจัดเรียงภาพทั้ง 2 เฟรมอีก - -*

** Tips ** - การจัดเรียงภาพนั้น เมื่อลากภาพต้นฉบับมา ให้ไปที่เฟรมแรกสุด แล้วเลื่อนภาพให้ออกจากกรอบ (ดังรูป)

แต่จะเห็นได้ว่ารูปในเฟรมถัดไป ยังไม่ตรง ก็ไปที่เฟรมถัดไป แล้วจัดให้ตรงกรอบครับผม (ดังรูป)

ถ้ามีหลายเฟรม อย่าไปกลัวครับ ให้ใช้วิธีเดียวกันกับข้างต้นเลย

8. เสร็จแล้วจะได้ดังนี้ครับ

9. ตั้งเวลาเฟรมทั้งหมดตามต้องการครับผม โดยการคลิกที่รูปสามเหลี่ยมใต้เฟรม (Selects frame delay time)

10. ตั้งเวลาแล้ว ลอง Preview ดูครับ โดยคลิกที่ Plays/Stops animation เรียบร้อยแล้วก็ไปที่ File > Save Optimized As... เพื่อทำการเซฟเลย แค่นี้ก็เรียบร้อยครับ ^^

11. ตามผลงานเช่นเคย ^^*

สำหรับผู้ที่จะนำไปใช้ครับผม ^^* http://aquariz.exteen.com/images/Others/Banners/Banner_Anime.gif

วิธีการใส่ Banner อยู่นี่น้า >> Click !!

>> So Say..

ได้ฤกษ์ เปลี่ยน Theme ซะทีครับผม หลังจากซุ่มทำมา(ไม่นาน) และก็กำลังจะหาฤกษ์ ปล่อย Theme ใหม่ให้ชมกัน ก็ถือเอาเอนทรีนี้ซะเลย -*- กับ "Distressed" ครับ ในเรื่อง Style ก็จะเป็น Style เดิมๆ สีขาวดำ , ลายเส้นรกๆ เช่นเคย เป็น Theme ที่ใช้ Brush ทำเกือบทั้งหมด (ยกเว้น Head ที่เป็นรูปคนวิ่งแหละ) ส่วนการออกแบบนั้น เราเองออกแบบให้เข้ากับชื่อ Theme ครับผม มันก็เลยออกมาเป็น Style แบบนี้... ^^*

ก็อยากจะให้เพื่อนๆ ช่วยกัน Comments ละกันครับผม Thx. มา ณ ที่นี้ครับ ^^*

ส่วนเราเอง เราว่า Theme นี้ มันดูรกๆ นะ (ฮา) เอาเถอะๆ... เอาเป็นว่าเอนทรีหน้าเจอกันใหม่ครับผม (แต่ว่าอาจจะมาอัพช้านิดนึงเน้อ) บ๊ายบายครับ ^^*

>> ปั จ ฉิ ม ลิ ขิ ต

ภาพและบทความ ในทุกเอนทรี อนุญาติให้นำไปลองทำดู และนำไปโพสในที่ต่างๆ ได้ (ในส่วนของ Tips-Technics ต่างๆ) แต่อย่างไรก็ตาม ก็รบกวนช่วยให้ Credits บลอคนี้ ไว้ด้วยนะครับ จักขอบพระคุณยิ่งๆ

2006/Dec/19

>> Come Back Again ~~~!!!!!

กลับมาแล้วครับผม หลังจากที่หายไปประมาณเกือบๆเดือนได้ อันเนื่องจากว่า มีภาระงานหลายอย่างมากมายเช่นเคยครับ

ตอนนี้ กำลังแบบว่า เห่อ Visual Style อันใหม่มากๆเลยครับ ทั้ง Theme Mac OS X และ Vista เลย

และด้วยความซนเกินเหตุ ทำให้คอมเราตอนนี้ ไม่สามารถเปลี่ยน Theme อื่นๆ ได้เลยครับ เป็นเรื่องที่น่าเศร้ามาก T.T"

ด้วยความที่อยากระบาย(ความซน)ของเรื่องนี้มากมาย ดังนั้นเราขอยกยอดไปเป็นเอนทรีหน้าแล้วกันครับ (เอ๊ะยังไง)



และแล้ว เราก็มาต่อเนื่องกันกับเทคนิคการประยุกต์ใช้ Opacity กับ Adobe Imageready เช่นเคยนะ ซึ่งคราวนี้ จะเป็นการประยุกต์ใช้กับ Shape ที่สร้างจาก Photoshop ครับ โดยต้องสร้าง Shape ใน Photoshop ก่อน แล้วนำมาทำเป็นภาพเคลื่อนไหวใน Imageready ครับ

เราว่านะ บางคนอาจจะเคยเห็นไปบ้างแล้วหล่ะ (ถ้าสังเกตดีๆนะ) สำหรับภาพที่ทำจากเทคนิคนี้น่ะครับ เอาเป็นว่า เริ่มกันเลยดีกว่าครับผม

>> Getting Started

:: Chapter 1 - สร้าง Shape จาก Photoshop ::

1. ทำการสร้างหน้ากระดาษใหม่ใน Photoshop ครับผม ขนาดเท่าไหร่ก็ได้แล้วแต่ใจ ตั้ง BG Contents เป็น Transparent ด้วยครับ

Chapter 1 - ขั้นตอนที่ 1

2. ได้หน้ากระดาษมาแล้วนะ

Chapter 1 - ขั้นตอนที่ 2

3. คลิกขวาที่ Rectangle Tool แล้วเลือก Custom Shape Tool ที่แถบเครื่องมือด้านซ้าย

Chapter 1 - ขั้นตอนที่ 3

4. เสร็จแล้วดูที่แถบเครื่องมือด้านบน ตรง Shape สามารถเลือกรูปแบบ Shape ต่างๆ ได้ตามใจ ดังภาพครับ

Chapter 1 - ขั้นตอนที่ 4

5. เลือกแล้วจับลากเลยครับ

Chapter 1 - ขั้นตอนที่ 5

6. ลากเสร็จแล้ว ให้ไปที่แถบ Layers คลิกขวาที่ Layer แล้วเลือก Rasterize Layer ครับ เพื่อสะดวกในการมอง ^^

Chapter 1 - ขั้นตอนที่ 6

7. ใส่ Effects ต่างๆ โดยคลิกที่โลโก้รูปแฟลชด้านล่าง แล้วเลือก Blending Options ครับ

Chapter 1 - ขั้นตอนที่ 7

8. ได้ Shape (รูปลูกศร) มาแล้วครับผม (Effects ใช้ Gradient Overlay + Stroke)

Chapter 1 - ขั้นตอนที่ 8

9. ไปที่ File > Save For Web > ตั้งชื่อไฟล์ > OK > เสร็จพิธีสำหรับการสร้าง Shape เพื่อเอาไปใช้ใน Imageready ต่อไป

Chapter 1 - ขั้นตอนที่ 9


:: Chapter 2 - นำ Shape ไปใช้ใน Imageready ::

10. ไปที่ Imageready เลยครับ และทำการสร้างหน้ากระดาษใหม่ (ขนาดควรใช้ขนาดเดียวกันกับรูป Shape ที่ทำเสร็จไปเมื่อกี้นี้นะครับ) เลือก Contents of First Layer ให้เป็น Transparent ด้วยครับ เรียบร้อยแล้วกด OK

Chapter 2 - ขั้นตอนที่ 10

11. ได้หน้ากระดาษมาแล้ว

Chapter 2 - ขั้นตอนที่ 11

12. นำรูป Shape ที่ทำเสร็จไปมาใส่ลงในหน้ากระดาษเลยครับ และจัดรูปไปทางซ้ายสุดเลย (ดูตามภาพน้า)

Chapter 2 - ขั้นตอนที่ 12

13. ไปที่แถบ Animation แล้วคลิก Duplicates Current Frame เพื่อเพิ่มเฟรมครับ

Chapter 2 - ขั้นตอนที่ 13

14. ได้เฟรมเพิ่มมาเฟรมนึงแล้ว ให้จัดรูปไปทางขวาสุดเลย (ดูตามภาพเอาจ้ะ)

Chapter 2 - ขั้นตอนที่ 14

15. ตั้งค่า Opacity ตามใจฉัน

Chapter 2 - ขั้นตอนที่ 15

16. เสร็จแล้ว ไปที่แถบ Animation แล้วคลิกเลือก Tween...

Chapter 2 - ขั้นตอนที่ 16

17. จะมี Options ขึ้นมา ให้ตั้งค่าตามภาพนะครับ ส่วน Frames to Add ใส่ค่าตามใจเลย (ประมาณ 4-6 กำลังดีนะครับ) แล้วกด OK

Chapter 2 - ขั้นตอนที่ 17

18. จะมีเฟรมเพิ่มมาครับผม ไม่ต้องสนใจครับ รอตามผลงานอย่างเดียว ตอนนี้ให้คลิก Duplicates Current Frame ก่อน เพื่อเพิ่มเฟรมอีกเฟรมนึง แล้วจัดรูปให้เหมือนเฟรมแรก (จัดไปทางซ้ายสุด ค่า Opacity 100%) เสร็จแล้วไปที่แถบ Animation แล้วคลิก Tween เหมือนเดิมเลยครับ

Chapter 2 - ขึ้นตอนที่ 18

19. มีเฟรมเพิ่มมาอีกครับผม ลอง Play ดูได้ โดยคลิกที่ ลูกศร ในแถบ Animation ตามภาพเลยครับ

Chapter 2 - ขั้นตอนที่ 19

20. เรียบร้อยแล้วก็ทำการ Save โดยไปที่ File > Save Optimized As... ครับผม

Chapter 2 - ขั้นตอนที่ 20

21. ตามผลงานครับ ^^"

ตามผลงานน้า ~~*

ก็จบลงไปได้ด้วยดีนะครับ - - และก็เช่นเคยครับ สำหรับผู้ที่มีข้อเสนอแนะ ติ-ชม สงสัยตรงไหนก็ Comments มาได้เช่นเคยครับผม ขอบคุณทุกท่านนะครับที่รอติดตามผลงานของเราเป็นอย่างดีครับผม Thx. So Much ^^"

┌――┐
|\/│>> ก็..เอวัง ด้วยประการ ละ ฉะนี้...
└――┘

2006/Nov/19

ซา-หวาด-เด-จ้า ~~~"

ดอง Blog ครบอาทิตย์นึงพอดีเลย ^^*(ฮา) ใจจริงก็ไม่ได้ตั้งใจดองหรอกนะครับ กะว่าจะอัพอาทิตย์ละครั้งเท่านั้นเอง

พอดีเมื่อวานไปอบรมที่ รร. ครับ หัวข้อก็ "พาน้องท่องอนาคต ปีที่ 3" ครับ เนื้อหาโดยรวมก็เกี่ยวกับรุ่นพี่ มาแนะนำประสบการณ์เกี่ยวกับ มหาวิทยาลัยต่างๆ , คณะที่สนใจ , Admission เป็นต้นครับผม

ซึ่งก็ขอบอกเลยว่าการอบรมครั้งนี้ ได้อะไรๆมากมายเลยครับ ถึงเราจะกลับบ้านก่อนงานจบก็เถอะ - -"

เพื่อนๆ ที่กำลังจะ Admission ในปีนี้ หรือปีโน้น (ม.5 , ม.6) ยังไงก็ขอให้สมหวังกับคณะที่ชอบๆ ละกันครับผม ^^"


มาคราวนี้จะเป็นเทคนิคต่อเนื่องจากเอนทรีที่แล้วนะครับ ที่เราได้กล่าวถึงการใช้ Opacity สำหรับภาพนิ่งไปแล้ว ซึ่งเอนทรีนี้จะเป็นการนำ Opacity มาประยุกต์ใช้กับ Imageready ครับผม โดยจะเป็นการใส่ Opacity ให้กับ Text แบบ Fade (แบบเลื่อนไปมา) ซึ่งจริงๆแล้วนั้น การ Fade จะมีหลายลูกเล่นมากครับ เดี๋ยวจะค่อยๆทยอยมาในเอนทรีถัดไป วิธีทำก็ไม่ยากเช่นเคยครับ มาดูกันเลย...

1. เข้าโปรแกรม Adobe Imageready แล้วสร้างหน้ากระดาษตามขนาดที่ต้องการเลย ด้านล่างให้เลือกเป็น Transparent ครับ

2. ใส่ Text ที่ต้องการครับ โดยใส่ทีละตัวๆ นะครับ

3. จัด Text ให้พอเหมาะพอดี

4. ในแถบ Layers ให้คลิกที่ Layer ของตัวอักษรตัวอะไรก็ได้แล้วคลิกที่ Add a layer style > Blending Options ครับ เพื่อทำการใส่ Effects ให้กับ Text (เราใช้ Gradient Overlay กับ Stroke ครับ)

5. ใส่เสร็จแล้ว ให้คลิกขวาที่ Layer เมื่อกี้ แล้วเลือก Copy Layer Style

6. แล้วคลิกขวา เลือก Paste Layer Style ให้กับทุก Layer เลยครับ

7. เสร็จแล้วครับสำหรับการใส่ Effects ให้กับ Text

8. ต่อไปให้ตั้งค่า Opacity ของ Text ให้มีค่าจากมากไปน้อยตามลำดับครับ
(Layer แรกจะอยู่อันล่างสุดนะครับ เราใส่ไป 100% เลย แล้วค่อยๆไล่ไป จากมากไปน้อยครับ ดูภาพเอานะ)

เสร็จแล้วให้คลิก Duplicates current frame ครับ

9. ให้ตั้งค่า Opacity ของ Text ให้มีค่าจากน้อยไปมากตามลำดับครับ หรือตั้งค่าสลับกันกับข้อ 8 ก็ว่าได้
(เราใส่ค่า Opacity ของ Layer แรกให้น้อยสุดครับ แล้วค่อยๆไล่ไป จากน้อยไปมากครับ สังเกตภาพข้อ 8. กับ 9. ดูครับ แล้วจะรู้ว่าต้องใส่ค่ายังไง)

เสร็จแล้วคลิก Tween... ครับ

10. ตรงช่อง Tween With : ให้เลือกเป็น Previous Frame ครับ
ส่วน Frames to add : ให้ใส่ตามต้องการเลยครับว่าจะให้ Add Frames เพิ่มมากี่เฟรม เสร็จแล้ว OK เลยครับ

11. เฟรมจะถูก Add ขึ้นมาครับ พร้อมกับ Tween เรียบร้อย
ต่อไปให้คลิกที่ Duplicates current frame ครับ จะมีเฟรมเพิ่มขึ้นมาอันนึง > ให้ใส่ค่า Opacity ให้เหมือนกันเฟรมแรกสุดครับ > แล้วคลิก Tween... > แล้วเลือกค่า > เสร็จแล้ว กด OK ครับ

12. กำหนดเวลาให้กับทุกเฟรมครับ โดยคลิกที่รูปสามเหลี่ยมเล็กๆ แล้วเลือกเวลาเลย

(ถ้าต้องการใส่ค่าเป็นทศนิยม 2 หลัก ให้เลือกที่ Other... ครับ พอดีในภาพเราใช้ 0.2 แต่ Preview ออกมามันช้าไปครับ ใน Preview เราเลยเปลี่ยนมาเป็น 0.13 ครับผม)

13. เสร็จแล้วให้ไปที่ File > Save Optimized As... เพื่อทำการเซฟ เป็นอันเสร็จพิธี

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


เพื่อความไม่ซ้ำซากจำเจ เราสามารถไล่สีตัวอักษรได้ด้วย โดยการ Tween ครับผม วิธีทำน่ะหรอ.. ก็...

ในข้อ 9. นะครับ >> เมื่อ Duplicates current frame แล้ว จะมีเฟรมเพิ่มขึ้นมา ให้เปลี่ยนสีตัวอักษรในเฟรมที่ 2 ให้ต่างจากเฟรมแรกครับผม (ถ้าใช้ Gradient Overlay กับ Stroke ก็ให้เปลี่ยนสีที่ Blending Options ครับ)

แล้วทำตามขั้นตอนข้างต้นครับ ก็จะได้ดังนี้...

ตามผลงานอีกรอบครับ...


เป็นไงมั่งครับ ไม่ยากเลยเนอะ ^^" (ใน Preview เราใช้ 0.13 นะครับ เพราะว่า 0.2 เราว่ามันช้าไปอ่า - -")

ทิ้งท้ายไว้ซักนิดนะครับ นานๆ เราจะเข้ามาเชคเรทติ้งทีนึง - -"

ยังไงก็ขอฝาก Blog นี้ไว้ ในอ้อมใจ ของทุกคนคร้าบผม ^^"

เช่นเคยครับ สำหรับผู้ใด มีข้อติ-ชม สงสัยประการใด ยังไงก็ Comments มาได้ครับผม รับฟังทุกปัญหาครับ

และต้องขอขอบคุณสำหรับทุกๆ Comments ที่ผ่านมา ณ ที่นี้ ครับผม

สำหรับวันนี้พอแค่นี้ก่อนครับผม ไปล่ะครับ บะบายยยย.... ~~~"

┌――┐
|\/│>> ปล. ใกล้ 1000 Hitz แล้วน้าครับ อยากเปิดตัว Theme ใหม่ ใจจะขาด...แล้วเอย ~~~"
└――┘



ニュビーズ ☆彡
View full profile