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 (ตอนที่ 1)
 

สำหรับบทความนี้ Webmaster จะสอนการทำภาพ Animation แบบง่าย ๆ นั้นก็คือแบบกระพริบค่ะ จะมีวิธีการทำอย่างไรนั้น ใครที่สนใจอยากเริ่มทำ Animation ได้ ก็เชิญทางนี้เลยค่ะ

     
 
 
     

เริ่มแรกก่อนก็เปิดโปรแกรมโฟโต้ชอป และทำการสร้างภาพและข้อความเตรียมไว้ทั้งหมด 6 Layers ดังภาพด้านบนค่ะ จากนั้นเราจะมาเริ่มทำ Animation โดยการคลิกที่ตำแหน่งด้านล่างสุดของ Tool box ตามภาพด้านล่าง เพื่อเปิดใช้งานโปรแกรม ImageReady ซึ่งเป็นโปรแกรมสำหรับทำภาพ Animation

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

 
 
     

จากนั้นเมื่อเราเรียกพาเล็ตที่ต้องการได้เรียบร้อยแล้ว ให้เราทำการสังเกตที่พาเล็ต Animation จะปรากฏเฟรมหมายเลข 1 อยู่ ซึ่งการสร้าง Animation นั้นเราจะสร้างได้โดยการสร้างเฟรมในพาเล็ต Animation

วิธีการสร้างเฟรมเพิ่มขึ้น ทำได้โดยการคลิกที่ตำแหน่ง คลิกเพื่อคัดลอกเฟรม ตามภาพด้านล่างค่ะ ซึ่งจะทำให้มีเฟรมเพิ่มขึ้น


 
 
     

เมื่อเราคัดลอกเฟรมได้แล้ว ให้ทำการคัดลอกเฟรมให้ได้ทั้งหมด 4 เฟรมตามภาพด้านล่างค่ะ เอาล่ะค่ะเมื่อได้เฟรมทั้งหมด 4 เฟรมแล้ว ให้ทำตามขั้นตอนต่อไปนี่นะค่ะ

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

ขึ้นตอนที่ 2 คลิกที่เฟรมที่ 2 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 และ 3 เท่านั้น ส่วนเลเยอร์ที่ 4, 5, 6 ให้เอารูปตาออก

ขึ้นตอนที่ 3 คลิกที่เฟรมที่ 3 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 และ 4 เท่านั้น ส่วนเลเยอร์ที่ 3, 5, 6 ให้เอารูปตาออก

ขึ้นตอนที่ 4 คลิกที่เฟรมที่ 4 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 , 5 และ 6 เท่านั้น ส่วนเลเยอร์ที่ 3 และ 4 ให้เอารูปตาออก (ทำเหมือนในภาพเลเยอร์ด้านล่างเลยค่ะ)

 
 
     

ตอนนี้เราก็จะได้เฟรมของภาพ Animation เรียบร้อยแล้วค่ะ เราสามารถลองเล่นภาพ Animation ได้โดยการกดที่ปุ่ม Play Animation ตามภาพได้เลยค่ะ จากผลลัพธ์จะเห็นว่าภาพ Animation กระพริบเร็วมาก ๆ ทั้งนี้เนื่องมาจากเรายังไม่ได้กำหนดความเร็วของเฟรมเลย ทำให้มีค่าความเร็วเริ่มต้นอยู่ที่ 0 ซึ่งเร็วมาก ๆ

เราจำเป็นต้องมาตั้งค่าหน่วงเวลาการแสดงผลของเฟรมแต่ละเฟรม เพื่อให้ Animation ของเราสามารถเล่นและผู้มองภาพ Animation สามารถเห็นรายละเอียดที่เราต้องการนำเสนอผ่านภาพ Animation การกำหนดเวลาหน่วงของแต่ล่ะเฟรมสามารถทำได้ โดยคลิกที่ตำแหน่งการตั้งเวลาการแสดงเฟรมตามภาพค่ะ ซึ่งค่าตัวเลขของเวลายิ่งเยอะ ก็จะทำให้ภาพในเฟรมนั้น ๆ แสดงผลเป็นเวลานานตามไปด้วย จากในตัวอย่าง Webmaster กำหนดให้มีการแสดงผลเฟรมละ 1 sec. ทุก ๆ เฟรมค่ะ


 
 

เอาละค่ะ...ทีนี้ก็มาถึงขั้นตอนสุดท้ายกันแล้วละค่ะ นั้นก็คือการบันทึกภาพ Animation ซึ่งทำได้โดยการใช้คำสั่ง File --> Save Optimized As... จากนั้นเมื่อมีไดอะล็อกบ็อกปรากฏขึ้น ก็ให้เราตั้งชื่อไฟล์ค่ะ และที่สำคัญสั่งเกตที่ Save as type ให้เซฟเป็นสกุล .gif เท่านั้นค่ะ ภาพที่เราเซฟไปจึงจะแสดงผลการเล่นภาพเป็นแบบ Animation

ผลลัพธ์จากตัวอย่างที่ Webmaster ได้สร้างภาพ Animation ก็ได้ผลตามภาพด้านซ้ายมือค่ะ ออกจะกวน ๆ ไปหน่อย อิอิ อย่าถือสานะค่ะ เอามันส์ กวน ๆ อิอิ

 
   
วันที่บทความ : 28 ต.ค. 2550              ที่มา : Webmaster

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