Un title page
Thainextstep.com สอนทำเว็บไซต์ด้วย Dreamweaver Photoshop  PHP & MySql และ การทำ SEO  
Un title page
Thainextstep.com สอน HTML บทความ Dreamweaver สอน Photoshop บทความ PHP & MySql Web Tips SEO Guide
Un title page
สอน Photoshop
  ประวัติ photoshop
  เริ่มต้นติดตั้งโปรแกรม
  เริ่มต้นใช้งานโปรแกรม
  การทำภาพแบบขอบฟุ้ง
  มาสร้างภาพจิ๊กซอว์กันเถอะ
  การสร้างภาพเซ็นเซอร์
  การทำภาพแบบ Sepia
  การทำข้อความเวทมนต์
  การสร้างข้อความแบบโลหะ
  การหมุนและกลับด้านภาพ
  การทำภาพ Animation (1)
  การทำภาพ Animation (2)
  การทำภาพ Animation (3)
  การ Selection ภาพที่มีขน
  ลบริ้วรอย จุดไฝ บนใบหน้า
  เทคนิคทำภาพแนว LOMO
  สร้างภาพวาดสีน้ำ
 


  การทำภาพ Animation (ตอนที่ 3)
 

บทความนี้เป็นการทำภาพ Animation อีกรูปแบบหนึ่ง ที่ใช้หลักการในการเลื่อนภาพ (Move) จากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่ง แล้วก็ทำได้ไม่ยากค่ะ ลองเข้ามาดูกันได้ที่นี่

     
 

ช่วงนี้สำหรับคนทำเว็บไซต์แล้วก็มีขึ้น Event ลอยกระทง วันก่อน Webmaster ก็ได้รับมอบหมายงาน (จากที่ทำงาน) ให้ทำ Baner Animation สำหรับขึ้นต้อนรับกิจกรรม ลอยกระทง

เลยได้ไอเดียว่าน่าจะเอาเทคนิคการทำภาพ Animation (ตอนที่ 3) ที่ได้ค้างเพื่อน ๆ ไว้ซะนานมาฝาก ๆ เพื่อน ๆ ซะที (ได้ฤกษ์งามยามดี) และเพื่อให้เข้ากับช่วงนี้เลยทำออกมาเป็น Animation สำหรับงานลอยกระทง ...เอ้า เรามาเริ่มกันได้เลยค่ะ

 
   
 
 
     

ขั้นตอนที่ 1 อย่างแรกเลยก็คือ การเตรียมภาพ ในแต่ละ Layer โดยตามภาพที่ 1 ที่มีการเตรียมไว้ก็คือ
- Layer ของภาพ กระทง
- Layer ของภาพพื้นหลังเป็น ท้องยามค่ำคืนและดวงจันทร์
- Layer ของภาพ น้ำ (ที่ดูไม่เหมือนน้ำเท่าไหร่ หัวไม่ศิลปต้องขอโทษด้วยค่ะ)
- Layer ของภาพ เอฟเฟคภาพแสงไฟ ระยิบระยับ มีประกาย (อันนี้ก็ทำออกมาไม่ค่อยได้เรื่องเท่าไหร่ ถือซะว่าเป็นไอเดียก็แล้วกันนะค่ะ)

เมื่อเตรียมภาพได้หมดแล้ว ก็ส่งภาพไปยังโปรแกรม โดยคลิกที่ด้านล่างของ Tool box ที่เป็นรูปของ ImageReady


 
 





ขั้นตอนต่อมาให้เราสร้างเฟรม 2 เฟรมในพาเล็ต Animation สร้างเฟรมเพิ่มโดยการกดที่ตำแหน่ง 1 จากนั้นกำหนดให้เฟรมแรกภาพกระทงอยู่ขวามือ และเฟรมที่ 2 ให้เลื่อน Layer กระทงให้กระทรงอยู่ซ้ายมือ (ดังภาพที่ 2)

จากนั้นให้คลิกที่เฟรมที่ 2 และกดที่ตำแหน่งหมายเลข 2 เพื่อเปิดไดอะล็อก Tween และกำหนดค่าต่าง ๆ ตามภาพด้านล่าง จากนั้นคลิก OK

มาถึงขั้นนี้หากไม่มีอะไรผิดพลาดเมื่อคลิกที่ปุ่ม Play ก็จะแสดงภาพกระทงเลื่อนจากทางขวามาทางด้านซ้าย ซึ่งนั้นหมายความว่าเพื่อได้ทำเทคนิคนี้สำเร็จแล้วค่ะ

และเพื่อความสมจริง ๆ จริง ๆ แล้วเราควรเลื่อนภาพทีละนิดแล้วใส่ Tween ทีละช็อต ๆ เพื่อน ๆ ลองประบดูนะค่ะ ซึ่งจะทำให้ดูเลื่อนสมจริงขึ้น

 
 
 
     

 
 
     

ภาพสุดท้าย Webmaster ปรับให้มันค่อยเลื่อนที่ละนิด จากนั้นเมื่อเราทำครบทุกช็อตแล้ว เราก็มาปิด - เปิด Layer ที่เป็นแสงไฟเพื่อให้มันดูเหมือนมีการกระพริบแสงไฟค่ะ

เพื่อน ๆ ลองเอาเทคนิคในบทความนี้ไปดัดแปลงดูค่ะ Webmaster คิดว่าเพื่อน ๆ คงทำออกมาได้ดีกว่าเว็บมาสเตอร์แน่ ๆ เพราะเว็บมาสเตอร์ ไม่มีหัวศิลปเอาซะเลย 555 เอาเป็นว่าเอาเป็นไดเดียก็แล้วกันนะค่ะ ... ขอจบบทความนี้แต่เพียงเท่านี้ค่ะ แล้วติดตามบทความต่อ ๆ ไปด้วยนะค่ะ

   
วันที่บทความ : 09 พ.ย. 2551              ที่มา : Webmaster

สอนทำเว็บไซต์   |   สอนภาษา HTML   |   สอน Dreamweaver   |   สอน Photoshop   |   สอนภาษา PHP & MySql   |   รวมทิป เทคนิคการทำเว็บไซต์   |   สอนการทำ SEO
:: Copyright © 2005 by Chatta design. All rights reserved. Do not duplicate or redistribute in any form.::