การออกแบบ Banner แนะนำตัวเอง

นายบุญมี  เมืองนา

รหัส 5321300153 กลุ่มเรียน 201

ศิลป์กรรม แขนงออกแบบนิเทศศิลป์

คณะมนุษย์ศาสตร์และสังคมศาสตร์ 

วิชา ARTI3322 - Animation design

เสนอ

ผู้สอน : ผู้ช่วยศาสตราจารย์ประชิด  ทิณบุตร

การสร้าง animation

ก่อนการลงมือทำควรศึกษาและวิธีการใช้โปรแกรมต่างๆเราและคิดเรื่องที่จะทำเตรียมไว้ก่อนและข้อมูลที่จะทำให้พร้อมก่อน
ฉนั้นขั้นตอนการเตรียมการจึงสำคัญต่อการสร้าง animation หรือภาพเคลื่อนไหว และการสืบค้นจะแหล่งข้อมูลต่างๆ
ต่องานของเราทุกครั้ง เพื่อให้งานออกมาอย่างสมบุรณ์

ขั้นตอนการสร้าง animation

ขั้นตอนที่ 1

ให้เตรียมรูปภาพที่จะนำมาสร้างเป็น banner แนะนำตัวเราเอง

ขั้นตอนที่ 2

ให้เปิดโปรแกรม Photoshop ขึ้นมา และเปิดไฟล์รูปภาพที่เตรียมเอาไหว้ขึ้นมา จากนั้นให้รัทัชเอาแต่รูป

ตัวเอง ลบส่วนที่ไม่ต้องการออกดังรูปตัวอย่าง แล้ว save ไฟล์ใหม่เป็นไฟล์ psd

ขั้นตอนที่ 3

ถัดจากขั้นตอนที่ 2 ที่เราได้รีทัชรูปเสร็จเรียบร้อยแล้ว ก็จะเริ่มขั้นตอนการทำ banner แนะนำตัวต่อไป
ด้วยรูปที่เราได้เตรียมเอาไหว้แล้ว

1.ไปทีหน้าต่างของโปรแกรม photoshop คลิกที่ window > animation เพื่อเปิดหน้าต้างการทำงาน
    ของ animatio

  

 

 2.จากข้อ1 คลิกที่ window > animation เราก็จะได้หน้าต่างการสร้างภาพเคลื่อนไหวของ    

    photoshop

 

ขั้นตอนที่ 4

1. คลิกที่เมนู File>New เพื่อเปิดกล่องหน้างต่างการกำหนดขนาดของงานเรา

 

2. เมื่อกล่องกำหนดขนาดขึ้นมา ให้กำหนดขนาดเป็น width = 300 pixels    height = 480 pixels 

    กำหนดเสร็แล้ว คลิกปุ่ม OK

 

เมื่อคลิกปุ่ม OK แล้วก็จะได้พื้นที่การทำงานของเราที่ขนาด width = 300 pixels    height = 480 pixels

 

ขั้นตอนที่ 5

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

 

ขั้นตอนที่ 6

ให้ออกแบบ banner แนะนำตัวของเราให้เสร็จไปก่อนแต่จากตัวอย่างนี้ เราได้ออกแบบ banner 

เรียบร้อยแล้ว จะสังเกตุเห็นว่าทุกเลเยอร์ดวงตาจะเปิดทุกเลเยอร์ รูปทั้งหมดก็จะโชว์ขึ้นมาท้งหมด

 

ขั้นตอนที่ 7

1.ให้ปิดตาที่เลเยอร์ทั้งหมด แล้วจะเห็นว่าจะไม่มีรูปที่เราได้ออกแบบเอาไว้ สาเหตุที่ให้ปิเเอาไว้นี้ก็เพื่อ

  ว่าเราจะให้เปิดตาที่ละเลเยอร์นั้นเอง เพื่อเวลาเล่น animation ภาพจะได้ไม่ปรากฎขึ้นพร้อมกันที่เดียว

 

2. ให้เปิดตาที่เลเยอร์ animation 1 เฟรมที่ 1

 

3. ให้เพิ่มจำนวนเฟรมที่ 2 ขึ้นมา คลิมที่ปุ่ม Duplicates ก็จะได้เฟรมที่ 2 ตามตัวอย่าง

 

4. ในเฟรมที่ 2 ให้เปิดตาเลเยอร์ที่จะแสดงถัดต่อจากเฟรมที่ 1 คลิกเปิดตา animation 2

5. ให้เพิ่มจำนวนเฟรมที่ 3 ขึ้นมา คลิมที่ปุ่ม Duplicates   ให้เปิดตาเลเยอร์ที่จะแสดงถัดต่อจากเฟรมที่ 2   
    คลิกเปิดตา animation 3 จากนั้นให้ทำตามหัวข้อ 1-2-3-4 จนครบทุกเลเยอร์ที่เราได้ออกแบบเอาไว้

 

6. เมื่อทำครบทุกเลเยอร์แล้วลองเล่นดูว่าที่เราทำนั้นเป็นยังไงกันบ้างสวยงามอย่างที่คิดหรือไม่ คลิกที่

   ปุ่ม plays เพื่อเล่น animation ครับ

 

7. การกำหนดให้การแสดงจะให้เล่นเร็วหรือช้าให้กำหนดดังนี้ คลิกที่ปุ่ม 3 เหลี่ยมสีดำที่อยู่ใต้เฟรม 

    แล้ว  จะปรากฎเวลาให้เราเลือกว่าจะให้เฟรมไหนเล่นเร็วหรือช้านั้นเอง นี้เป็นเพียงการอธิบายอย่าง

    คราวๆถ้าอยากรู้ให้มาขึ้นลองศึกษาหรือทำตามขั้นตอนต่างๆได้ดังกล่าว

 

 8. การกำหนดเวลาการเล่นว่าจะให้เล่นครั้งเดียวหรือเล่นวนไปมาหลาลอบ ให้คลิกที่ 3 เหลี่ยมเล็กๆ

     ที่มุมด้านล้างแล้วจะปรากฎเมนูคำสั่งให้เราเลือก Once = เล่นครั้งเดียวแล้วหยุด  times = กำหนด

     เวลาเล่นได้เองตามใจเรา  Forever = เล่นวนไปมา

ขั้นตอนที่ 8

การนำไฟล์ที่สร้างไปใช้งานบนเว็บก่อนอื่นให้ คลิกที่เมนุ File > Save for web & Devices เมื่อปรากฎ

หน้าต่าง Save for web & Devices ขึ้นมา จากนั้นให้เลือกเป็นนาสกุล GIF แล้วคลิก OK ก็เป็นอันเสร็จ

ขั้นตอนการสร้าง animation (ภาพเคลื่อนไหว) และไปใช้งานบนเว็บได้เลยครับ