แบบฝึกทักษะเรื่อง
 


                                                                                           

         

กลุ่มสาระการงานอาชีพและเทคโนโลยี

รายวิชา  อินเทอร์เน็ตและการสร้างเว็บเพจ     รหัสวิชา   ง  40217     เรื่อง  การสร้างอักษรเคลื่อนไหว

ผลการเรียนรู้ที่คาดหวัง     มีทักษะในการใช้โปรแกรม Adobe Photoshop และ Image Ready สร้าง อักษรเคลื่อนไหว

จุดประสงค์การเรียนรู้       

                   1.     ใช้เครื่องมือ ของโปรแกรม Adobe Photoshop สร้างอักษรกราฟิกได้
                        
 2.     สร้างไฟล์กราฟิกแบบเคลื่อนไหว (Animation) ด้วยโปรแกรม Image Ready และได้

 

สาระการเรียนรู้            

                      การใช้โปรแกรม  Adobe Photoshop และ Adobe Image Ready

                                1.    เครื่องมือใช้งานของโปรแกรม

                                2.    การสร้างอักษรกราฟิกแบบเคลื่อนไหว (Animation)

                                       -  ตัวอักษรกระพริบ

   

ประโยชน์ของแบบฝึกทักษะ

                     ทำให้นักเรียน สามารถ ใช้โปรแกรม Photshop สร้างตัวอักษรแบบเคลื่อนไหว นำไปใช้งานตามวัตถุประสงค์ได้
 

คำชี้แจง  :    นักเรียนทบทวนความรู้ เรื่อง การสร้างอักษรเคลื่อนไหว  แล้วจึงทำแบบฝึกตามขั้นตอนต่อไปนี้
                 
                  
                  

ขั้นตอนที่ 1   ขั้นที่ 1   เปิดโปรแกรม   Adobe Photoshop  กำหนดขนาด พื้นที่ทำงาน width = 350 px  height= 80    Background  contents  โปร่ง (Transparent) 
 

ขั้นตอนที่ 2    พิมพ์ข้อความ  ตกแต่งและจัดตำแหน่งให้เรียบร้อย (หากไม่เข้าใจ ดูใบงานเรื่อง สร้างสรรค์  อักษรสวย) ใส่ Stroke  ขอบเบลอ ขนาด 1                    

ขั้นตอนที่ 3    เมื่อได้ข้อความแล้ว ดูที่ พาเลท Layer   จะเห็นตัวอักษร อยู่ที่ Layer ที่ 1  ดังรูป

     
ตัวอย่าง  

                             

 

ขั้นตอนที่ 4   ทำการ Copy Layer  โดย คลิกเมาส์ค้างที่ Layer  แรก แล้วลากมาที่  Create  a new  Layer  ดังรูป  จะเกิดเป็น Layer  ที่สองอยู่ด้านบนเหนือ Layer แรกขึ้นไป

       ตัวอย่าง

                                                          

ขั้นตอนที่ 5    ปิด Layer แรก ด้วยการคลิกเมาส์ ที่รูปลูกตา หน้า Layer  แล้วคลิกที่ Effect  ตั้งค่า Stroke  ขอบเบลอ ขนาด 2 อาจปรับสีให้อ่อนหรือแก่กว่าเดิมเพื่อให้เห็นความแตกต่าง


       ตัวอย่าง

                              

ขั้นตอนที่ 6   Copy  Layer  ที่ 2  ทำเหมือน ข้อ  4  แต่คลิกเมาส์ค้างลาก Layer ที่สองลงมาที่ Create a new Layer     จะเกิดเป็น Layer ที่ 3 เรียงขึ้นไปด้านบนอีกชั้น 

                    

ขั้นตอนที่ 7   ปิด Layer  ที่ 1 และ 2 โดยคลิกเมาส์ที่รูปลูกตา หน้า Layer 1 และ 2 (ทำเหมือน ข้อ 5)     แล้ว คลิก Effect เลือก Stroke  ขอบ ขนาด 3  ปรับสีขอบให้ต่างไปจากเดิม
                        
     
ตัวอย่าง

                                                        

ขั้นตอนที่ 8   เมื่อทำครบ 3 Layer  แล้ว ให้นักเรียน คลิก  คำสั่ง  Window …….Animation
      
     
ตัวอย่าง         

                                                

ขั้นตอนที่ 9   จากข้อ 8  เมื่อคลิก Window……… Animation แล้วจะเกิด  กรอบ Animation  ขึ้นมาดังรูปข้างล่าง

     
ตัวอย่าง

                   

 
 
          
 ขั้นตอนที่ 10   ขั้นที่ 10   กรอบ Animation นี้ต้องสัมพันธ์กับ Layer เพราะเป็นการแสดงผลของ Layer   ภาพที่ปรากฏบน กรอบAnimation  เรียกว่า เฟรม  ภาพแรก
                       คือเฟรมที่ 1  ตั้งค่า ความเร็วในการแสดงผล 0.2 Sec. (ปรับได้ตามต้องการ)และตั้งการเคลื่อนไหวของภาพ ให้วนต่อเนื่อง (Forever)
     
  ตัวอย่าง
 
                                          

                      

                         
      ขั้นตอนที่ 11   ที่กรอบ Animation  ทำการ Copy  เฟรม โดยคลิกเมาส์ลาก มาปล่อยที่  Duplicates selected frames   ที่  กรอบ Layer  ปิดรูปลูกตา Layer 1 และ 3 
                            เปิดรูปลูกตา Layer 2  

              ตัวอย่าง      

                           

 

      ขั้นตอนที่ 12   ทำการ  Copy   เฟรม อีกครั้ง  และเปลี่ยนตำแหน่ง การใส่รูปลูกตาที่ Layer

           ตัวอย่าง   

                           

      ขั้นตอนที่ 13   เมื่อทำครบทุก เฟรม และ Layer แล้ว ลองแสดงผลดู  โดยคลิกที่ Plays  animation  หลังจากตรวจสอบความเรียบร้อยแล้ว  คลิก save for web 
                           และ เมื่อมีอีกหน้าต่างเปิดขึ้นมาให้คลิก  save  เก็บไฟล์แบบ  .gif

           ตัวอย่าง  

                           

            

                         จะได้ตัวอักษร เคลื่อนไหว ขั้นพื้นฐาน ให้ พัฒนาทักษะ โดยฝึกทำบ่อยๆ หลายๆ แบบเพิ่มเฟรมและ
             Layer ให้มากขึ้นตามลำดับ จะได้ภาพที่เคลื่อนไหวละเอียดขึ้น

            ตัวอย่างผลงาน          

                           
                                       

      ขั้นตอนที่ 13   ขั้นที่ 14    เก็บผลงานไว้ในโฟลเดอร์ ชื่อ แบบฝึกทักษะ  และส่งผลงานทางจดหมายอิเล็กทรอนิกส์ (E-mail)   ตามที่อยู่  jrpd83@gmail.com  หรือที่ปุ่มส่งงาน
 
                                                      

                     


                                                                             

                       ข้อเสนอแนะ นักเรียนอาจทำออกมาไม่เหมือนตัวอย่าง  สามารถออกแบบได้ตามความถนัด  แต่ควรเป็นไปตามขั้นตอน
                        ตามแบบฝึกหรือใกล้เคียง  และผลสำเร็จของงาน ใกล้เคียงกัน ก็ถือว่า ไม่ผิด แต่หากมีข้อผิดพลาดในผลสำเร็จของงาน  ให้นักเรียนกลับไปเริ่มขั้นตอนที่
1 ใหม่อีกครั้ง
                      
                     

 


แบบประเมินผลงาน