บทที่-4-การออกแบบกราฟิกและภาพเคลื่อนไหวสำหรับงานมัลติมีเดีย

1 บทท่ี 4 การออกแบบกราฟกิ และภาพเคล่ือนไหวสำหรับงานมัลตมิ เี ดีย งานออกแบบกราฟิกด้านมลั ติมเี ดยี (Multimedia Graphics) เป็นงานออกแบบกราฟกิ ท่ี ประกอบส่ือหลากหลายส่ือ ไม่ว่าจะเป็นรูปภาพ ภาพเคล่ือนไหว เสียง ตัวอักษร การโต้ตอบ (Interactive) ถือได้ว่าเป็นการนำเสนอหรือส่ือสารข้อมูลที่มีประสิทธิภาพมากและช่วยให้ผู้รับสารมี ความสะดวกอย่างมาก ในปัจจุบันมีการใช้งานออกแบบกราฟิกด้านมัลติมีเดียมาประยุกต์ใช้กับงาน ต่างๆ มากมาย เชน่ ไตเติ้ลภาพยนตร์ การออกแบบเว็บไซต์ การออกแบบแอพลิเคชัน่ เป็นตน้ 1. แนวคดิ เกยี่ วกับงานออกแบบกราฟิกด้านมัลตมิ เี ดีย 1.1 ความหมายของงานออกแบบกราฟกิ ด้านมัลตมิ ีเดีย คำว่า “มัลติ” (Multi) หมายถึง หลายๆ อยา่ งผสมรวมกัน และคำว่า “มีเดยี ” (Media) หมายถึง สอื่ ข่าวสาร ชอ่ งทางการตดิ ตอ่ สื่อสาร เมื่อนำมารวมกันเป็นคำวา่ “มลั ตมิ เี ดีย” จงึ หมายถงึ การนำองค์ประกอบของสอ่ื ชนิดตา่ งๆ ผสมผสานด้วยกัน ซ่งึ ประกอบด้วยตวั อกั ษร (Text) ภาพน่งิ (Still Image) ภาพเคลอื่ นไหวหรอื อนเิ มช่นั (Animation) เสยี ง (Sound) และวดิ โี อ (Video) โดย ผ่านกระบวนการทางระบบคอมพิวเตอร์เพ่ือสื่อความหมายกับผู้ใช้อย่างมีปฏิสัมพันธ์ (Interactive Multimedia) และได้บรรลุผลตามวัตถุประสงค์การใช้งาน โดยผลงานท่ีมีคุณภาพน้ันจะสามารถ สะท้อนบุคลิกได้เป็นอย่างดี และมีลูกเล่นท่ีน่าสนใจโดยสามารถส่งข้อมูลไปยังผู้รับสารได้อย่าง ครบถ้วน (ปาพจน์ หนนุ ภกั ดี, 2553, น. 327) ภาพที่ 4.1 ส่ือการเรยี นการสอน CAI ท่มี า: สุธาทพิ ย์ หอมสวุ รรณ (2559ก)

2           ภาพที่ 4.2 งานโมชั่นกราฟิก (Motion Graphic) ที่มา: สุธาทพิ ย์ หอมสวุ รรณ (2559ข) 1.2 องคป์ ระกอบของงานออกแบบกราฟิกด้านมัลติมเี ดีย มัลตมิ ีเดยี ประกอบด้วยหลากสื่อ 5 ชนิด ประกอบด้วย 1) ข้อความหรือตวั อกั ษร (Text) 2) ภาพนิง่ (Image) 3) ภาพเคลอื่ นไหว (Animation) 4) เสยี ง (Sound) 5) ภาพวิดีโอ (Video) สื่อต่างๆ นำมาผสมผสานเข้าด้วยกันเพ่ือใช้สำหรับการปฏิสัมพันธ์หรือโต้ตอบ (Interaction) ระหว่างคอมพิวเตอร์กับผู้ใช้ซ่ึงถือได้ว่าเป็นกิจกรรมที่ผู้ใช้สามารถเลือกกระทำต่อ มัลติมีเดียได้ตามต้องการ ข้ึนกับลักษณะของการออกแบบระบบเช่ือมโยงต่างๆ จึงถือได้ว่า การปฏสิ ัมพันธใ์ นมัลติมีเดยี เป็นส่วนหนงึ่ ท่ีมคี วามสำคัญอยา่ งมาก          1.3 ประโยชน์ของงานออกแบบกราฟกิ ดา้ นมัลติมเี ดีย ประโยชน์ของงานออกแบบกราฟิกด้านมัลตมิ เี ดียมมี ากมายดงั ท่ฉี ตั รชัย ศรีสม (2553) อธบิ ายไวส้ รุปไดด้ งั น้ี - ง่ายต่อการใช้งานและสัมผัสได้ถึงความรู้สึก การออกแบบมัลติมีเดียผู้ออกแบบจำเป็น ต้องมีการจัดทำให้มีรูปลักษณ์ที่เหมาะสมและง่ายต่อการใช้งานตามกลุ่มเป้าหมายเพื่อประโยชน์ใน การเพิม่ ประสิทธิภาพในการใชง้ าน ผูใ้ ชส้ ามารถรบั รูไ้ ดถ้ งึ ความรสู้ ึกจากการสมั ผัสกับวตั ถทุ ่ปี รากฎอยู่ บนจอภาพ ได้แก่ รูปภาพ ไอคอน ป่มุ และตวั อกั ษร เปน็ ตน้ ทำให้ผ้ใู ช้สามารถควบคุมและเข้าถึง ขอ้ มลู ตา่ งๆ ได้อยา่ งทั่วถงึ ตามความต้องการ

3 - สรา้ งเสรมิ ประสบการณ์ ผ้ใู ช้จะไดร้ ับการส่ังสมประสบการณ์จากการใช้สอื่ เหล่านี้ในแง่ มุมที่แตกต่างกันซึ่งจะทำให้สามารถเข้าถึงวิธีการใช้งานได้อย่างถูกต้องและแม่นยำ ตัวอย่างเช่น ผู้ใชไ้ ด้เคยเรยี นรวู้ ิธีการใชป้ มุ่ ต่างๆ เพอ่ื เล่นเกมส์บนคอมพิวเตอร์มาก่อน และเมอื่ ได้มาสัมผัสเกมส์ ออนไลนใ์ หม่ๆ กส็ ามารถเลน่ เกมส์ออนไลนไ์ ด้อย่างไม่ตดิ ขดั - เพิ่มขีดความสามารถในการเรียนรู้ จากประสบการณ์ท่ไี ด้รับการสั่งสมมา ดงั นน้ั การนำ สอ่ื มัลตมิ เี ดียมาประยกุ ตใ์ ชจ้ ะช่วยเพ่มิ ขดี ความสามารถในการเรียนรดู้ ้วยตนเอง ตวั อยา่ งเชน่ การเลน่ เกมส์คอมพิวเตอร์ ผู้ใช้สามารถเรียนรู้และพัฒนาทักษะในการเล่นจากระดับท่ีง่ายไปยังระดับที่ยาก ยิง่ ๆ ขน้ึ ไป - เขา้ ใจเน้ือหามากยง่ิ ข้ึน ด้วยคณุ ลักษณะขององคป์ ระกอบของมลั ตมิ ีเดยี ไมว่ า่ จะเป็น ข้อความหรอื ตวั อกั ษร ภาพนง่ิ ภาพเคลอื่ นไหว เสยี งและวิดโี อ สามารถทจี่ ะส่อื ความหมายและเร่ือง ราวตา่ งๆ ได้แตกต่างกันทั้งนีข้ ึ้นอยู่กบั วิธีการนำเสนอ - คุ้มค่าในการลงทุน การใช้โปรแกรมด้านมัลติมีเดียจะช่วยลดระยะเวลา ไม่ว่าจะเป็น เร่ืองการเดนิ ทาง การจัดหาวทิ ยากร การจดั หาสถานที่ การบรหิ ารตารางเวลา และการเผยแพร่ช่อง ทางเพอ่ื นำเสนอส่อื เป็นตน้ ทำให้ประหยัดค่าใช้จ่าย - เพ่มิ ประสทิ ธิผลในการเรียนรู้ งานออกแบบมัลตมิ ีเดียมขี ีดความสามารถในการผลิตส่อื การนำเสนอและการติดต่อสื่อสารได้หลากหลายรูปแบบ ผู้ใช้สามารถได้รับประโยชน์และยังได้รับ ความเพลดิ เพลินในการเรยี นรู้อีกดว้ ย เช่น การออกแบบเวบ็ เพ็จ (Web Page) ท่มี คี วามสวยงามและ สามารถประยุกต์ใชส้ อื่ ต่างๆ ไดห้ ลากหลาย และมีรูปแบบทีน่ า่ สนใจกจ็ ะสามารถสรา้ งประสิทธิผลใน การเรยี นรู้ให้มากขน้ึ ได้ 2. แนวคดิ เก่ียวกบั การออกแบบเว็บเพจ การออกแบบและสร้างสรรค์เว็บไซต์จะต้องใช้จินตนาการหรือความคิดสร้างสรรค์ เกิดจาก การได้พบเห็นส่ิงรอบตัวแล้วนำมาดัดแปลงให้เข้ากับงานท่ีต้องการการออกแบบเว็บไซต์เช่นเดียวกัน  นักออกแบบสามารถดัดแปลงสิ่งรอบตัวต่อไปนี้เพ่ือใช้เป็นแนวคิดในการออกแบบเว็บให้สร้างสรรค์ และมปี ระสิทธภิ าพได้ แหล่งท่มี าของแนวความคดิ อาจได้จากการศึกษาเว็บไซต์ต่างๆ และสืง่ ส่งิ พมิ พ์ เวบ็ ไซตเ์ ปน็ พน้ื ฐานการศกึ ษาทสี่ ามารถพบเหน็ ไดง้ า่ ย  ซง่ึ แสดงถงึ แนวคดิ   ประสบการณ ์ ความสามารถ ของนกั พัฒนาเว็บ ส่อื ส่ิงพิมพ์ ได้แก่ นติ ยสาร แผน่ พับ โปสเตอร์ ส่ิงพิมพ์เหลา่ น้มี ักจะมีการออกแบบ ให้สวยงามอยู่แล้ว ดังน้ันนักออกแบบจึงสามารถเรียนรู้การจัดองค์ประกอบตามสิ่งพิมพ์เหล่านั้นท้ัง ด้านโทนสี ตำแหน่งข้อมูล รูปแบบตัวอักษรและการเลือกรูปภาพประกอบมาประยุกต์ใช้กับ การออกแบบหน้าเวบ็ ได้

4 1) โฮมเพจ (Home Page) หมายถึง หนา้ แรกท่แี สดงขอ้ มลู ของเวบ็ ไซต์ โดยสว่ นใหญ่จะ ออกแบบใหม้ หี น้าตาและสสี ันทีด่ งึ ดดู ใจ และมกั มีการสร้างลิงคเ์ พอื่ เชอ่ื มโยงไปยังหน้าเว็บเพจอ่นื ๆ ภาพที่ 4.3 หนา้ โฮมเพจ (Home Page: Milwaukee Ballet School & Academy) ที่มา: Milwaukee Ballet School & Academy (n.d.) 2) เวบ็ เพจ (Web Page) หมายถงึ หนา้ เวบ็ ท่ีใช้แสดงข้อมูลตา่ งๆ โดยมีการใสข่ ้อความ ภาพ เสียง วิดีโอ และภาพเคลอ่ื นไหว ซง่ึ แต่ละเวบ็ เพจจะมีการเชอ่ื มโยงหรอื ลงิ คเ์ พื่อให้ผเู้ ขา้ มาชมสามารถ คลกิ เรยี กดหู นา้ เวบ็ เพจอน่ื ๆ ได้อย่างสะดวก 3) เว็บไซต์ (Website) หมายถึง หน้าเวบ็ เพจหลายๆ หนา้ รวมถึงหนา้ โฮมเพจทแ่ี สดงข้อมลู ทง้ั หมดและเชื่อมโยงถึงกนั ด้วยลงิ ค์ 4) โดเมนเนม (Domain Name) หมายถงึ ช่ือในการเรียกเขา้ เวบ็ ไซต์ ซึง่ ในการต้งั ชอ่ื โดเมน เนมจะต้องพิจารณาถึงจุดประสงค์ในการสร้างสรรค์เว็บไซต์ ได้แก่ www.iamneedesign.com www.corperate.com เป็นตน้ สามารถแบ่งเว็บไซต์ออกเป็นกล่มุ ใหญๆ่ ได้ 8 ประเภท ตามลกั ษณะของเน้อื หาและรูปแบบ ของเวบ็ ไซต์ ซึ่งกลมุ่ เวบ็ ไซตท์ ง้ั 8 ประเภทนน้ั ไดแ้ ก่ 1) เว็บไซตท์ ่า (Portal Site) หมายถึงเว็บไซตท์ ่ีให้บรกิ ารต่างๆ ได้แก่ การบริการค้นหาทรี่ วม ลงิ ค์ของเว็บไซตไ์ ว้จำนวนมาก ข้อมูลท่มี สี าระและบนั เทิงหลากหลายประเภท บรกิ ารดหู นงั ฟังเพลง ดดู วง ท่องเทีย่ ว ไอที เกม สุขภาพ เป็นตน้ 2) เวบ็ ไซตข์ า่ ว (News Site) คอื เว็บไซตท์ ่ีพัฒนาโดยองคก์ รข่าวหรอื สถาบันสือ่ สารมวลชน ต่างๆ เพอ่ื ใหผ้ ูใ้ ช้บรกิ ารสามารถค้นหาข้อมลู และตดิ ตามขา่ วไดท้ ุกเวลา

5 ภาพท่ี 4.4 เว็บไซต์ข่าว (Website: BBC News) ทม่ี า: BBC News (n.d.) 3) เวบ็ ไซตข์ ้อมลู (Information Site) คอื เวบ็ ไซตท์ ีใ่ ห้บริการการสืบคน้ ขอ้ มลู หรือขอ้ เท็จจริง ตา่ งๆ องค์กรตา่ งๆ นยิ มพัฒนาเวบ็ ข้อมลู ของตนขึน้ มาเพอื่ เปน็ ช่องทางให้ผใู้ ช้บรกิ ารคน้ คว้าข้อมูลที่ เกยี่ วข้องกับองค์กรของตน ภาพท่ี 4.5 เวบ็ ไซต์ขอ้ มลู (Website: Public Agenda) ทีม่ า: Public Agenda (n.d.) 4) เว็บไซตธ์ ุรกจิ หรอื การตลาด (Business/Marketing Site) คอื เว็บไซต์ท่สี ร้างข้ึนโดย องคก์ รธุรกิจตา่ งๆ มีวัตถปุ ระสงคใ์ นการประชาสัมพันธอ์ งคก์ รและใหข้ อ้ มูลเกย่ี วกับสนิ คา้ และบรกิ าร เพอ่ื เพิ่มผลกำไรทางการค้าดว้ ย

6 ภาพท่ี 4.6 เว็บไซต์ธรุ กิจหรือการตลาด (Website: Benefit Cosmetics) ทมี่ า: Benefit Cosmetics (n.d.) 5) เวบ็ ไซต์การศึกษา (Educational Site) คอื เวบ็ ไซต์ท่สี ร้างขึน้ โดยสถาบนั การศกึ ษาหรอื องค์กรที่มีวัตถุประสงค์ในการเผยแพร่ความรู้หรือข้อมูลเกี่ยวกับการเรียนรู้ท่ีเป็นทางการและไม่เป็น ทางการ บริการการเรยี นรแู้ บบออนไลน์ หรอื ทีเ่ รยี กวา่ อีเลิรน์ นิ่ง (E-Learning) ภาพที่ 4.7 เว็บไซต์มหาวทิ ยาลัยราชภฏั บ้านสมเดจ็ เจ้าพระยา ทมี่ า: มหาวทิ ยาลัยราชภฏั บ้านสมเดจ็ เจ้าพระยา (ม.ป.ป.)

7 6) เว็บไซตบ์ นั เทิง (Entertainment Site) คอื เว็บไซต์ทนี่ ำเสนอเร่อื งเก่ียวกับความบันเทงิ อาทิเช่น ดนตรี ภาพยนตร์ ดารา กฬี า เกม ความรกั บทกลอน การต์ ูน เร่อื งขำขนั เปน็ ต้น 7) เว็บไซต์องคก์ รท่ีไมแ่ สวงหาผลกำไร (Non-profit Organization Site) คอื เวบ็ ไซต์ท่สี ร้าง ขน้ึ โดยองค์การทีม่ วี ัตถปุ ระสงคใ์ นการสร้างและชว่ ยเหลือสงั คมโดยท่ีไมห่ วงั ผลกำไร ได้แก่ สมาคม ชมรม มูลนิธิ และโครงการต่างๆ อาจมีจุดประสงค์เฉพาะท่ีแตกต่างกัน เช่น เพื่อทำความดี สร้างสรรค์สงั คม พทิ ักษ์ส่งิ แวดล้อม ปกป้องสทิ ธิมนษุ ยชน เปน็ ตน้ ภาพที่ 4.8 เวบ็ ไซต์องคก์ รที่ไมแ่ สวงหาผลกำไร (Website: World Wildlife Fund) ทมี่ า: World Wildlife Fund (n.d.) 8) เวบ็ ไซตส์ ่วนตวั (Personal Site) คอื เว็บไซต์ท่สี ร้างโดยบุคคล กลมุ่ คน หรือครอบครวั โดย อาจจะจัดทำข้ึนด้วยเหตผุ ลท่แี ตกตา่ งกัน เชน่ แนะนำตนเอง โชว์รูปภาพ แสดงความคดิ เหน็ เขียน ไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอดประสบการณเ์ ก่ยี วกับส่ิงท่เี ชย่ี วชาญหรอื สนใจ ภาพที่ 4.9 เว็บไซตส์ ว่ นตัว (Website: WISIT PO) ทีม่ า: WISIT PO (n.d.)

8 2.1 ส่วนประกอบสำคัญของเว็บเพจ สว่ นประกอบของหนา้ เวบ็ เพจ  สามารถจำแนกออกเป็น  4  สว่ น  ไดแ้ ก่ ภาพท่ี 4.10 ส่วนประกอบของหน้าเวบ็ เพจ ทมี่ า : สธุ าทิพย์ หอมสุวรรณ (2559ค) 2.1.1 ส่วนหวั ของเว็บเพจ  (Page  Header)  เป็นองค์ประกอบทีม่ ีความสำคญั มาก ที่สุดประกอบดว้ ยช่ือของเวบ็ ไซต์หรือช่ือหัวข้อของเว็บเพจยอ่ ย  เมนูรายการเชอ่ื มโยง  (Navigation  Bar)  และแบนเนอร์โฆษณา  (Banner)  หลกั การออกแบบสว่ นหวั ของเว็บเพจ  คือ  ตอ้ งระบชุ ่ือหรอื สญั ลกั ษณ์ขององค์กรทุกคร้งั   เพอื่ ให้ผูช้ มเว็บไซตท์ ราบอยู่เสมอวา่ กำลังชมเว็บใดอยู่  นอกจากจะระบุ ชื่อเว็บไซตท์ กุ คร้ังทม่ี ีการเชอ่ื มโยงแล้ว อาจใชว้ ิธีสรา้ งความสมำ่ เสมอให้เกบ็ เวบ็ เพจยอ่ ยโดยออกแบบ รปู ลกั ษณ์ใหเ้ ปน็ รปู แบบเดียวกัน  ซงึ่ ผู้ชมเวบ็ ไซตจ์ ะเขา้ ใจงา่ ยข้ึนวา่ เปน็ เพจย่อยของเวบ็ ใด 2.2.2 ส่วนของเนอื้ หา (Page Content) “เน้อื หา” เป็นองคป์ ระกอบท่ีมผี ลตอ่ การตดั สินใจเลอื กชมข้อมูลของผชู้ มเว็บวา่ ควรออกจากเว็บไซตน์ ้หี รือไม่ การออกแบบสว่ นเนอ้ื หา  จะ ตอ้ งกำหนดวตั ถุประสงคก์ อ่ นวา่ หน้าเวบ็ นน้ั ตอ้ งการนำเสนอขอ้ มูลเกี่ยวกับเร่ืองใด จากน้ันจงึ คน้ หา ข้อมลู ให้ครอบคลุมเร่อื งที่เกย่ี วขอ้ งมากทีส่ ดุ โดยใชว้ ธิ คี าดเดาความต้องการของผ้ชู มเวบ็ ไซต์ต่อขอ้ มูล ที่ไดร้ บั

9 2.2.3 สว่ นคอลมั นก์ ารเชอื่ มโยง (Page Sidebar) คอลมั นก์ ารเชอ่ื มโยง เปน็ เครอื่ งมอื ท่พี ฒั นาเว็บจะกำหนดไว้เพิ่มเติม (ไมจ่ ำเป็นตอ้ งกำหนดไว้กไ็ ด)้ เพอื่ อำนวยความสะดวกใหก้ บั ผูช้ ม การออกแบบส่วนคอลัมน์เชื่อมโยงจะเน้นคุณสมบัติด้านความง่ายต่อการใช้งานและความสม่ำเสมอ บนหนา้ เว็บ 2.2.4 สว่ นทา้ ยของเว็บเพจ (Page Footer) ส่วนทา้ ยของเวบ็ เพจ เป็นส่วนท่รี ะบุ รายละเอยี ดเกีย่ วกับเวบ็ ไซต์ เชน่ ลิขสทิ ธ์ิ ผู้จัดทำ สถานท่ตี ิดต่อ รวมท้ังรายการเช่ือมโยง โดย การออกแบบส่วนท้ายของเว็บเพจจะเน้นความสม่ำเสมอเช่นเดียวกับส่วนหัวของเว็บเพจ กล่าวคือ ส่วนทา้ ยของเวบ็ เพจจะต้องปรากฏอยูใ่ นทกุ เวบ็ เพจยอ่ ย 2.3 ข้ันตอนการออกแบบเว็บเพจ ในการออกแบบเวบ็ เพจน้นั จำเปน็ ต้องเข้าใจถึงวัตถุประสงคใ์ นการออกแบบเวบ็ ไซต์นั้นๆ วา่ ต้องการให้มีภาพลักษณ์ขององค์กรมีลักษณะอย่างไร นักออกแบบจะต้องทำการศึกษาข้อมูลต่างๆที่ เกยี่ วข้องกบั องค์กร กลุ่มเป้าหมายและศกึ ษาขอ้ มลู ของคแู่ ขง่ ให้ชดั เจน เพ่อื นำมาวิเคราะหข์ อ้ มลู เพือ่ การออกแบบจนนำมาสู่แนวความคดิ ในการออกแบบ 2.3.1 กำหนดเป้าหมายและวางแผนงาน - กำหนดเปา้ หมายของเวบ็ ไซต์ - กำหนดกลมุ่ ผชู้ มเป้าหมาย - กำหนดขอบเขตเน้ือหา และรวบรวมขอ้ มลู เนื้อหา - เตรียมเครอื่ งมอื อปุ กรณ์ท่ีจำเป็น - เตรียมทกั ษะและบคุ ลากร - ประมาณการค่าใชจ้ ่าย 2.3.2 เลอื กเว็บโฮสต้งิ (Web Hosting) และจดทะเบียนโดเมนเนม (Domain Name) - เลอื กเวบ็ โฮสต้ิง (Web Hosting) - จดทะเบียนโดเมนเนม (Domain Name) 2.3.3 ออกแบบเวบ็ ไซต์ - การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) - การออกแบบระบบเนวเิ กช่ัน (Site Navigation Design) - การออกแบบเว็บเพจ (Page Design) 2.3.4 ลงมอื สรา้ งและทดสอบ - รปู แบบของเว็บไซต์ - ภาษาโปรแกรมทใี่ ชใ้ นการสร้างเว็บไซต์

10 - โปรแกรมทใ่ี ชใ้ นการสร้างเวบ็ ไซต์ - ลงมอื สรา้ งเว็บไซต์ 2.3.5 ประชาสัมพันธ์ให้เวบ็ ไซต์เป็นทร่ี ู้จัก 2.3.6 ดแู ล และพัฒนาอยา่ งต่อเน่ือง 2.4 การใช้งานเครื่องมอื สำหรับออกแบบเวบ็ เพจ เมื่อทำการออกแบบเว็บเพจจำเป็นต้องทำความเข้าใจและเรียนรู้การใช้งานเคร่ืองมือท่ี เก่ยี วข้อง 2 ตัว คอื เครื่องมือตดั ภาพ (Slice Tool) และเครอื่ งมอื แก้ไขการตัดภาพ (Slice Select Tool) ซ่งึ มีความสำคญั มากในขัน้ ตอนสดุ ทา้ ยหลังจากการออกแบบเลย์เอาทข์ องเวบ็ เพจเสร็จ เรียบร้อยแล้ว 2.4.1 เครื่องมอื ตดั ภาพ (Slice Tool) ใช้เมื่อตอ้ งการตดั ภาพออกเป็นส่วนๆ ซง่ึ ใช้งานกับการสรา้ งเว็บเพจ โดยมีวธิ ีการใชง้ าน ดังนี้ - เปดิ งานออกแบบเลย์เอาท์ของเวบ็ เพจ - ใช้เครื่องมือแดรกเมาส์คลุมภาพที่ต้องการ จะปรากฏกรอบรอบภาพและตัวเลข แสดงลำดบั ของภาพ - แดรกเมาส์คลมุ ภาพซำ้ ๆ ไปบนงานท่เี หลือ โดยจะตอ้ งให้กรอบเส้นทบั กันพอดี เพ่อื ปอ้ งกนั ปัญหาเมอ่ื นำไปใช้งาน เพราะจะเกดิ ภาพเล็กๆ ซ้อนกนั 2.4.2 เครื่องมอื แก้ไขการตัดภาพ (Slice Select Tool) หลงั จากที่ตัดภาพด้วยเครื่องมอื ตัดภาพ (Slice Tool) แล้ว และพบว่าเสน้ ท่ีสร้างไว้ ยงั ไม่ชดิ กันพอดีหรือสร้างมากเกนิ ไป สามารถใชเ้ ครื่องมือแก้ไขการตัดภาพ (Slice Select Tool) จดั การได้ดงั นี้ - งานออกแบบเลย์เอาท์ของเว็บเพจหลังจากท่ีตัดภาพด้วยเคร่ืองมือตัดภาพ (Slice Tool) แลว้ - ใช้เครอื่ งมือแก้ไขการตดั ภาพ (Slice Select Tool) คลิกในสว่ นที่ต้องการ แกไ้ ข - แดรกเมาสป์ รบั แตง่ ขอบเขต - หากมีส่วนทตี่ ดั มากเกนิ ไปให้คลกิ ขวาเปดิ ชุดคำส่งั จากน้ันเลือกคำสง่ั Delete Slice เพอ่ื ลบทงิ้ ไป สามารถปรับแตง่ Slice ภาพท่สี รา้ งขนึ้ ให้เทา่ กนั ไดด้ ้วยคำสัง่ Divide Slice โดยสามารถ กำหนดขนาดแตล่ ะช้นิ ให้เท่ากันจากออปช่นั บาร์ (Option Bar)

11 - ใชเ้ คร่อื งมือตดั ภาพ (Slice Tool) แดรกเมาสค์ ลมุ สว่ นท่ีตอ้ งการใหม้ ีขนาด เท่ากนั - ใชเ้ ครอ่ื งมอื แกไ้ ขการตัดภาพ (Slice Select Tool) แล้วคลิกปมุ่ Divide... ท่อี อปชน่ั บาร์ (Option Bar) - คลกิ เครอื่ งหมายถูกหน้า Divide Vertically Into จากนนั้ กำหนดจำนวนชอ่ งท่ี ต้องการ แล้วคลิกปมุ่ OK - จะได้สว่ นของภาพทั้งหมด 5 ชอ่ ง โดยจะมขี นาดเทา่ กันตามท่กี ำหนด 2.5 การบนั ทกึ ไฟลเ์ พอ่ื งานออกแบบเวบ็ ไซต์ การบนั ทึกไฟลภ์ าพสำหรบั เวบ็ ไซต์น้นั แตกต่างจากการบันทกึ โดยทวั่ ไป เนือ่ งจากจะตอ้ งบบี อัดขนาดไฟล์ภาพให้เล็กลงเพื่อให้โหลดแสดงผลได้รวดเร็วแต่สามารถแสดงผลรายละเอียดที่คงเดิม สามารถเรยี กใช้คำสั่งในการบนั ทึกไฟลส์ ำหรับเว็บไซต์ได้จากการคลกิ เมนู File > Save for Web ภาพที่ 4.11 ส่วนประกอบของหนา้ ต่าง Save for Web ที่มา: สุธาทิพย์ หอมสุวรรณ (2559ก) 1) ชุดเครื่องมือสำหรับการเลอื กภาพที่ Slice ไว้ หรอื เล่ือนดูภาพส่วนตา่ งๆ 2) เลือกจำนวนภาพในการเปรยี บเทยี บไฟล์ผลลพั ธ์แตล่ ะแบบ 3) กำหนดคุณสมบัตภิ าพ เช่น ประเภทของไฟล์ การบีบอดั สี คุณภาพของไฟล์ จะแตก ตา่ งไปตามประเภทไฟลท์ ่เี ลอื กบนั ทกึ

12 4) ขนาดไฟล์ภาพเดมิ 5) ประเภทไฟลภ์ าพ ขนาดภาพหลงั จากบีบอดั แล้ว และเวลาในการดาว์โหลดภาพเม่ือ นำไปใช้บนเว็บไซต์ 6) ระบคุ วามกวา้ งและความสงู ของไฟลผ์ ลลพั ธ์ 7) กำหนดคณุ สมบตั ิสำหรบั ภาพ Animation การบันทึกภาพสำหรับเว็บไซต์ จะต้องเลือกรูปแบบไฟล์ให้เหมาะสมกับภาพท่ีใช้ เช่น ภาพถ่ายควรเลอื กสกุลเป็น JPEG ภาพลายเสน้ และภาพเคล่อื นไหวควรเลอื กสกลุ เป็น GIF ถา้ ต้องการ บนั ทกึ ภาพใหม้ พี น้ื หลงั เปน็ แบบโปร่งใสควรเลอื กสกลุ เป็น PNG ภาพที่ 4.12 การเลือกสกุลของไฟล์ ทม่ี า: สธุ าทิพย์ หอมสวุ รรณ (2559ข) 1) ชุดเครื่องมือสำหรบั การเลอื กภาพ 2) คลกิ เลอื ก 2-Up เพ่ือใชเ้ ปรยี บเทียบคา่ ปรับแต่ง 3) ขนาดไฟลภ์ าพเดิม 4) ขนาดไฟล์ภาพที่เลก็ ลง

13 5) คลกิ เลอื กสกุลของไฟลท์ ่ีต้องการ 6) จากนั้นบันทกึ ไฟลโ์ ดยคลกิ ปุ่ม Save... 3. แนวคิดเกยี่ วกบั การออกแบบภาพเคล่อื นไหว ภาพเคลือ่ นไหวหรืออนเิ มชนั่ นั้นสร้างและกระตนุ้ ความสนใจไดอ้ ยา่ งมากกับคนทุกเพศ ทกุ วัย ดว้ ยพฤติกรรมของมนุษย์ท่มี ักจะสนใจดภู าพกอ่ นตวั อกั ษร และหากเป็นภาพทเ่ี คลอ่ื นไหวด้วยแลว้ ย่ิง สร้างความสนใจมากยิ่งขึ้น ภาพเคลื่อนไหวหรืออนิเมช่ันน้ันมีบทบาทกับงานหลายด้านและหลาย วงการ ซงึ่ องค์กรต่างๆ นำไปประยกุ ต์ใช้ในงานหลายประเภท สอดแทรกไปกับงานสอื่ สารข้อมูล งาน ประชาสมั พันธ์ หรอื ในแวดวงการศึกษาก็มกี ารใช้ภาพเคล่ือนไหวหรอื อนเิ มช่ันในการผลติ สือ่ การเรยี น การสอนเพื่อให้ผู้เรียนเกิดความเข้าใจในบทเรียนได้ง่ายขึ้น จดจำมากยิ่งข้ึน ภาพเคลื่อนไหวหรือ อนิเมชั่นนั้นสามารถอธิบายเรื่องราวท่ีซับซ้อน เข้าใจยากให้เข้าใจได้ง่ายข้ึน เพราะมีความสวยงาม น่ารกั สดใสประกอบกับเสียงที่ทำใหน้ า่ สนใจย่งิ ขน้ึ การสร้างภาพเคล่ือนไหวเกดิ จากการฉายภาพน่ิงหลายๆ ภาพด้วยความเรว็ สงู จากหลกั การ เรือ่ งภาพตดิ ตา โดยเม่อื เหน็ ภาพน่ิงภาพหนง่ึ กจ็ ะเกิดการจดจำและเขา้ ใจว่าภาพนน้ั ๆ คืออะไรแลว้ เมอ่ื นำเอาภาพน่งิ หลายๆ ภาพมาเล่นตดิ ตอ่ กนั ด้วยความเร็วอย่างเชน่ 25 ภาพต่อ 1 วินาที จะรสู้ ึกได้ วา่ กำลังเหน็ ภาพเคลือ่ นไหว อนิเมชั่นถือกำเนิดอย่างจริงจังเม่ือนักวิทยาศาสตร์ช่ือโธมัส อันวา เอดิสัน (Thomas Alva Edison) ประดิษฐก์ ล้องถา่ ยภาพและเครอื่ งฉายได้ พร้อมๆ กบั บรษิ ทั อีสท์แมนไดป้ รับปรุง คุณภาพของฟิล์ม ในปัจจุบันหลังจากนั้นการสร้างอนิเมชั่นก็ได้มีวิวัฒนาการมาโดยตลอด โดยแบ่งตามวิธีการ สรา้ งผลงานเปน็ 2 ประเภทใหญ่ๆ คือ 1) อนเิ มช่ันแบบดั้งเดมิ (Traditionnal Animation) ไดแ้ ก่ อนิเมชั่น 2 มติ ิ ที่วาดดว้ ยมอื และระบายสีลงสใี นแผ่นเซลลลู อยด์ (Cels Animation) คทั -เอาท์ อนิเมชน่ั (Cut-Out Animation) ท่เี ป็นการตดั กระดาษใหเ้ ป็นรปู ต่างๆ หรอื สต็อปโมช่นั (Stop Motion) ทส่ี รา้ งจากวสั ดุตา่ งๆ ที่อยู่ รอบตวั เรา

14 ภาพที่ 4.13 อนเิ มชน่ั แบบด้งั เดิม (Traditional Animation: Sleeping Beauty) ท่ีมา: Joshuanava (n.d.) ภาพที่ 4.14 อนเิ มชน่ั แบบสตอปโมช่ัน (Stop Motion: Chicken Run) ท่ีมา: The Telegraph (n.d.) 2) คอมพิวเตอรอ์ นเิ มชัน่ (Computer Animaton) ท่ีเกดิ จากการสรา้ งด้วยระบบดจิ ทิ ลั ทัง้ 2 มติ ิและ 3 มติ ิ คอมพิวเตอรอ์ นเิ มชน่ั เปน็ การสรา้ งภาพเคลอ่ื นไหวด้วยคอมพิวเตอร์โดยอาศัย เคร่อื งมือท่ีสร้างจากซอฟตแ์ วร์ในคอมพิวเตอร์กราฟิกชว่ ยในการสรา้ ง ดดั แปลง และใหแ้ สง-เงาภาพ ตลอดจนการบันทึกประมวลผลการเคลื่อนไหวต่างๆ โดยเครื่องมือท่ีว่าประกอบด้วยฮาร์ดแวร์ ซอฟต์แวร์ ทีส่ ร้างขน้ึ จากระเบียบวธิ ี ขน้ั ตอนวธิ ี หลกั การหรอื การคำนวณต่างๆ

15 ภาพที่ 4.15 คอมพวิ เตอรอ์ นเิ มช่ัน (Computer Animation: Monster Inc.) ทมี่ า: Online The Telegraph (n.d.) ปิยกุล เลาวัณย์ศริ ิ (2532) ไดส้ รปุ หลกั การและคุณสมบตั ิของงานอนิเมช่นั ไว้ดงั น้ี      1) สามารถใช้จินตนาการไดอ้ ยา่ งไม่มีขอบเขต      2) สามารถอธบิ ายเรือ่ งที่ซบั ซ้อนและเข้าใจยากให้งา่ ยข้ึน      3) ใชอ้ ธบิ ายหรอื แสดงความคิดเหน็ ทีเ่ ป็นนามธรรมให้เปน็ รปู ธรรมได้      4) ใช้อธิบายหรือเนน้ ส่วนสำคัญใหช้ ดั เจนและกระจ่างขึ้นได้ ภาพเคลื่อนไหวและงานอนิเมชั่นสามารถนำไปประยุกต์ใช้กับงานต่างๆ ได้มากมายเช่นงาน ภาพยนตรแ์ ละโทรทศั น์ งานพฒั นาเกมส์ งานสถาปัตยกรรม งานก่อสร้าง งานดา้ นวิทยาศาสตร ์  หรือ งานพัฒนาเว็บไซต์  เปน็ ตน้ (ทวีศักดิ ์  กาญจนสวุ รรณ, 2552: 222) โดยเฉพาะในการสอื่ สารผา่ นทาง เครือข่ายอนิ เทอร์เนต็ ภาพเคลอ่ื นไหวมีบทบาทอย่างมากในการประชาสมั พันธ์ การใหข้ ้อมูล ซึง่ จะ เห็นได้จากการพัฒนาผลงานอินโฟกราฟิกแบบเคลื่อนไหวซึ่งเป็นท่ีนิยมอย่างมากในยุคที่ผู้บริโภครับ ข้อมูลข่าวสารอย่างรวดเร็ว อินโฟกราฟิกสามารถตอบโจทย์นี้โดยการย่อยและจัดข้อมูลให้เป็นหมวด หมนู่ ำเสนอผา่ นภาพและตัวอักษรท่ีสวยงามและสอื่ สาร ภาพที่ 4.16 โมชั่นกราฟิก (Motion Graphic : Care to Click Infographic Animation) ที่มา: MotionDesignCommun (2012)

16 3.1 การเตรียมไฟลเ์ พอื่ การสรา้ งภาพเคลื่อนไหว การสร้างภาพเคล่ือนไหวคือการนำภาพน่ิงหลายๆ ภาพมาเรียงกันอย่างต่อเนื่องด้วยระยะ เวลาที่รวดเรว็ เพราะฉะนนั้ ผอู้ อกแบบจะต้องวางแผนการทำงานและเตรยี มภาพน่ิงล่วงหน้า ในการ เตรียมภาพนิ่งน้ันอาจใช้ภาพถ่าย ภาพท่ีออกแบบจากโปรแกรมสำหรับตกแต่งภาพ หรือภาพจาก โปรแกรมสร้างภาพก็ได้ สำหรับการสร้างภาพเคล่ือนไหวในโปรแกรมโฟโต้ชอปน้ันสามารถทำได้โดย เรียกใช้พาเนลสร้างภาพเคล่อื นไหว (Timeline Panel) ผ่านทางเมนู Window > Timeline ภาพที่ 4.17 ตัวอย่างภาพน่ิงที่มคี วามเคล่อื นไหวต่อเนอื่ ง ทีม่ า : สุธาทพิ ย์ หอมสุวรรณ (2559ฆ) ในการสรา้ งภาพเคลอื่ นไหวจากพาเนลสร้างภาพเคล่ือนไหว (Timeline Panel) มี 2 รูปแบบ ใหเ้ ลอื กใช้ คือ แบบ Create Video Timeline และแบบ Create Frame Animation ภาพท่ี 4.18 สว่ นประกอบของพาเนลสร้างภาพเคล่อื นไหว (Timeline Panel) ท่มี า : สุธาทิพย์ หอมสุวรรณ (2559ค) เมอ่ื คลิกเลอื กทำงานกับ Create Video Timeline จะมีเครอื่ งมอื สนบั สนนุ การสรา้ งภาพ เคล่อื นไหวในรปู แบบ Video โดยมีส่วนประกอบดังน้ี

17 ภาพที่ 4.19 เคร่ืองมือการทำงานในรปู แบบ Create Video Timeline ทมี่ า : สุธาทพิ ย์ หอมสวุ รรณ (2559ฆ) 1) ปรบั อนิเมชน่ั แบบวดิ ีโอเปน็ แบบเฟรม 2) เรนเดอร์ (Render) วดิ โี อ 3) ใสเ่ สียงลงใน Timeline 4) ใสว่ ิดีโอลงใน Timeline 5) เพมิ่ มเี ดยี ใหม่ลงไปในแทรก็ ทท่ี ำงานอยู่ 6) ปุม่ ควบคุมการเล่น 7) ป่มุ เปดิ ปิดเสยี ง 8) ป่มุ ควบคุมการเล่นวิดีโอ 9) ตัดคลปิ ทีเ่ พลยเ์ ฮด (Playhead) 10) ใสท่ รานซิสชน่ั (Transition) 11) เพลย์เฮด (Playhead) เมื่อคลิกเลือกทำงานกบั Create Frame Animation จะมีเครื่องมอื สนับสนุนการสรา้ งภาพ เคล่อื นไหวในรูปแบบเฟรม (Frame) โดยมีส่วนประกอบดงั นี้

18 ภาพท่ี 4.20 เคร่อื งมอื การทำงานในรปู แบบ Create Frame Animation ทีม่ า : สธุ าทิพย์ หอมสุวรรณ (2559ง) 1) เฟรม (Frame) คอื สว่ นท่ีใชแ้ สดงลำดับของภาพต่อเนอ่ื ง 2) กำหนดเวลาในการแสดงภาพในแต่ละเฟรม 3) ปรบั อนเิ มชัน่ แบบเฟรมเปน็ แบบวดิ ีโอ 4) จำนวนรอบในการแสดงภาพ 5) ปุ่มควบคุมการเล่น 6) สรา้ งภาพเคลอ่ื นไหวแบบทวนี (Tween) 7) สรา้ งเฟรมใหม่ 8) ลบเฟรม 3.2 การสรา้ งภาพเคลือ่ นไหวแบบทวนี (Tween) ในการสร้างภาพเคลือ่ นไหวในโปรแกรมโฟโต้ชอปนน้ั ควรเตรยี มภาพและข้อความไว้ โดย แยกเปน็ เลเยอร์ไว้จะชว่ ยให้การสรา้ งภาพเคล่ือนไหวสะดวกยิ่งข้นึ ภาพเคล่ือนไหวแบบทวนี (Tween) เปน็ ภาพเคลื่อนไหวจากจุดหน่งึ ไปสอู่ กี จดุ หนงึ่ สามารถ ทำได้โโยการกำหนดจุดเร่ิมต้นและจุดสุดท้ายของวัตถุ หลังจากน้ันคำส่ังจะจัดการสร้างเฟรมใหม่ต่อ เน่อื งใหโ้ ดยอัตโนมตั ิ 1) เปดิ ภาพท่ีเตรยี มไว้ คลิกเลือกเลเยอร์ท่ตี ้องการทำงาน 2) ใชเ้ ครอ่ื งมือลกู ศร (Move Tool) ยา้ ยวัตถไุ ปยังจุดเริ่มตน้ 3) คลกิ เมนู Window > Timeline เพื่อเปดิ พาเนลสรา้ งภาพเคลอ่ื นไหว 4) คลกิ ปมุ่ Create Frame Animation ในพาเนลจะสรา้ งเฟรมที่ 1 ใหท้ ันที 5) คลิกปุม่ (Duplicates selected frames) ในพาเนลจะสรา้ งเฟรมที่ 2 ให้ ทนั ที 6) ใชเ้ ครือ่ งมอื ลูกศร (Move Tool) ย้ายวัตถุไปยงั จดุ สุดทา้ ยท่ตี ้องการใหห้ ยดุ 7) กดแป้น Shift แล้วคลิกเลือกเฟรมท้ังสองเฟรมในพาเนลสร้างภาพเคล่ือนไหว (Timeline Panel) จากนั้นคลกิ ปมุ่ (Tweens animation frames)

19 8) จะปรากฏหนา้ ตา่ ง Tween จากนน้ั กำหนดจำนวนเฟรมทต่ี ้องการแล้วคลิกปมุ่ OK ภาพที่ 4.21 หน้าตา่ ง Tween ทม่ี า : สธุ าทพิ ย์ หอมสวุ รรณ (2559จ) 9) คำสัง่ จะแทรกเฟรมใหมเ่ ข้าไประหวา่ งเฟรมท่ี 1 และเฟรมท่ี 2 ภาพที่ 4.22 เฟรมใหมท่ ี่เข้าแทรกระหว่างเฟรมที่ 1 และเฟรมท่ี 2 ทีม่ า : สธุ าทิพย์ หอมสุวรรณ (2559ฉ) 10) สามารถคลิกป่มุ เล่น (Plays animation) เพือ่ แสดงภาพเคล่อื นไหวได้ทันที การกำหนดเวลาและจำนวนรอบของภาพเคลื่อนไหว สามารถระบุความเร็วในการเปล่ียน ภาพจากเฟรมหน่ึงไปยังอีกเฟรมหน่ึงได้ และสามารถระบุจำนวนรอบในการแสดงภาพเคลื่อนไหวได้ ด้วยวธิ ีการดังนี้ 1) กดแปน้ Shift คา้ งไว้ แล้วคลิกเลือกเฟรมทตี่ อ้ งการหรือเลอื กทัง้ หมด 2) คลิกป่มุ ลกู ศร จากนน้ั เลอื กชว่ งเวลาท่ีต้องการ คลกิ เลอื ก Other...เพือ่ กำหนดชว่ ง เวลาดว้ ยตนเอง 3) คลิกปุม่ ลกู ศร จากนน้ั คลกิ จำนวนรอบหรอื เลอื ก Forever เพ่ือใหแ้ สดงตอ่ เน่อื ง คลกิ เลือก Other...เพื่อกำหนดจำนวนรอบดว้ ยตนเอง

20 3.3 การสรา้ งภาพเคลอ่ื นไหวแบบเฟรมบายเฟรม (Frame by Frame) การสร้างภาพเคลื่อนไหวแบบเฟรมบายเฟรม (Frame by Frame) มีหลกั การที่การซ่อนหรอื แสดงภาพบนพาเนล layer โดยมีวธิ ีการดงั น้ี 1) เปดิ ภาพที่เตรียมไว้ คลิกเลอื กเลเยอรท์ ตี่ ้องการทำงาน 2) คลกิ เมนู Window > Timeline เพ่ือเปดิ พาเนลสร้างภาพเคลื่อนไหว 3) คลิกปมุ่ (Duplicates selected frames) ในพาเนลจะสรา้ งเฟรมท่ี 2 ให้ ทนั ที 4). คลิกปิดตาเพือ่ ซ่อนวตั ถุท่ีพาเนลเลเยอร์ ภาพท่ี 4.23 การคลิกปดิ ตาเพ่อื ซอ่ นวัตถุ ทีม่ า : สธุ าทพิ ย์ หอมสุวรรณ (2559ช) 5) เม่ือคลกิ ปุ่มเลน่ (Plays animation) จะเห็นภาพกระพรบิ สลบั ไปมาทนั ที ภาพที่ 4.24 การเล่นภาพกระพริบสลบั ไปมา ทมี่ า : สุธาทิพย์ หอมสุวรรณ (2559ซ)

21 3.4 การสร้างภาพเคลอื่ นไหวจากไฟลว์ ิดโี อ เพื่อให้ภาพเคล่ือนไหวดูสมจริงมากข้ึน สามารถนำไฟล์วิดีโอเข้ามาใช้งานประกอบได้ โดย คลกิ เมนู File > Import > Video Frames to Layers สำหรบั วธิ กี ารนำเขา้ (Import) ไฟล์วิดีโอมวี ธิ ี การดังนี้ 1) คลกิ เมนู File > Import > Video Frames to Layers จากน้ันเลือกไฟลว์ ิดีโอที่ ตอ้ งการใชง้ าน 2) เม่ือคลิกเลอื กไฟล์แลว้ จะปรากฏหน้าต่างของ Import Video to Layers ข้ึน จาก น้นั คลิกเลอื ก Selected Range Only ภาพที่ 4.25 หน้าต่างของ Import Video to Layers ท่ีมา : สุธาทิพย์ หอมสุวรรณ (2559ฌ) 3) กำหนดจำนวนเฟรมทต่ี ้องการ เพอื่ นำมาสร้างเป็นอนิเมช่นั 4) คลิกเคร่ืองหมายถกู หนา้ คำสัง่ Make Frame Animation 5) กำหนดชว่ งทตี่ ้องการนำมาใช้งาน จากนัน้ คลกิ ป่มุ OK 6) เฟรมภาพในชว่ งท่เี ลือกไว้ จะถูกนำมาใส่ไว้ในพาเนลสร้างภาพเคล่อื นไหว (Timeline Panel) สามารถปรบั แตง่ โดยการเพิ่มข้อความหรือใส่ลกั ษณะพเิ ศษ (Effect) เพม่ิ เตมิ ได้ ตามตอ้ งการ 3.5 การบนั ทึกภาพ การบนั ทกึ ภาพอนเิ มชั่นไปใชง้ าน จะตอ้ งกำหนดคา่ ต่างๆ เพือ่ ให้เหมาะสมกบั ลกั ษณะงาน มี วิธีการดงั นี้ 1) คลกิ เมนู File > Save for Web เพ่ือเปิดคำสั่ง 2) คลกิ เลอื กไฟล์แบบ GIF พร้อมกบั ปรับแต่งคณุ ภาพไฟล์ 3) กำหนดจำนวนรอบในการเลน่ อนิเมช่นั 4) คลิกปมุ่ Preview... เพ่ือตรวจสอบ 5) คลิกปุ่ม Save... เมอ่ื ผลลพั ธท์ ีต่ รวจสอบมคี วามถูกต้องแล้ว

22 ภาพที่ 4.26 หนา้ ตา่ งของคำสง่ั Save for Web ทีม่ า : สุธาทพิ ย์ หอมสุวรรณ (2559ญ) สรุป งานออกแบบกราฟกิ ด้านมลั ติมีเดีย (Multimedia Graphics) เปน็ การผสมผสานส่ือที่หลาย หลายเข้าดว้ ยกนั เพื่อเพิม่ ความน่าสนใจและสามารถสือ่ สารได้อยา่ งมปี ระสิทธิภาพมากย่งิ ขึ้น อาทิเชน่ ส่อื เพ่อื การเรียนการสอน เวบ็ ไซต์ ภาพเคลอื่ นไหว เป็นต้น เว็บไซต์มีบทบาทอย่างมากต่อการประชาสัมพันธ์ การสื่อสารข้อมูล ทั้งภาครัฐและภาค เอกชนล้วนแตใ่ ช้ประโยชน์จากเวบ็ ไซต์ในการทำธรุ กรรมตา่ งๆ ทำใหเ้ กิดการแข่งขันกนั อย่างมาก ส่ง ผลต่อการพฒั นารปู แบบในการออกแบบเวบ็ เพจให้มคี วามดงึ ดดู เปน็ ที่สนใจกบั ผ้เู ข้ามาชม สว่ นประกอบสำคญั ของหนา้ เวบ็ เพจม ี 4  สว่ น  ไดแ้ ก่ - ส่วนหัวของเว็บเพจ  (Page  Header) - ส่วนของเนื้อหา  (Page Content)  - ส่วนคอลมั นก์ ารเช่ือมโยง  (Page Sidebar)  - สว่ นทา้ ยของเวบ็ เพจ  (Page Footer) ขัน้ ตอนในการออกแบบเวบ็ ไซต์ จะตอ้ งมกี ารคน้ คว้าหาข้อมลู เพอ่ื วางแผนงาน วางโครงสร้าง ของเว็บ จากนั้นจึงจะสามารถทำการออกแบบเว็บเพจได้ เครื่องมือสำคัญหลังจากการออกแบบ เลยเ์ อาท์ของเวบ็ เพจเสร็จสมบูรณ์แล้วคอื เคร่อื งมือตัดภาพ (Slice Tool) และเคร่ืองมอื แกไ้ ข

23 การตดั ภาพ (Slice Select Tool) ซง่ึ ใชใ้ นการตดั ชิน้ ส่วนของภาพเพ่อื นำไปประกอบเป็นเวบ็ เพจ ในอกี โปรแกรมหนงึ่ การสร้างภาพเคลื่อนไหวหรืองานอนิเมชั่นนั้นมีบทบาทกับงานหลายด้านและหลายวงการ หลายองคก์ รนำไปประยุกตใ์ ช้งานสื่อสารข้อมูล งานประชาสมั พนั ธ์ หรอื เพ่ิมรายไดจ้ ากการประกอบ ธรุ กิจ เพราะภาพเคลื่อนไหวหรืองานอนิเมช่ันชว่ ยกระต้นุ ความสนใจได้อยา่ งมากกับคนทกุ เพศ ทุกวัย ภาพเคลื่อนไหวเกิดจากการฉายภาพน่ิงหลายๆ ภาพด้วยความเร็วสูง จากหลักการเรื่องภาพติดตา มองเห็นเปน็ ภาพเคลอ่ื นไหว การสร้างอนิเมช่นั มวี ธิ ีการสรา้ งผลงานเปน็ 2 ประเภทใหญๆ่ คือ 1) อนิ เมชั่นแบบด้งั เดมิ (Traditionnal Animation) เป็นภาพเคล่ือนไหวทส่ี รา้ งจากการวาดด้วยมอื หรอื ประดิษฐ์จากมือ 2) คอมพวิ เตอรอ์ นิเมชัน่ (Computer Animaton) เป็นภาพเคลื่อนไหวทีเ่ กดิ จาก การสรา้ งดว้ ยระบบดจิ ทิ ัล การสร้างภาพเคล่ือนไหวในโปรแกรมโฟโต้ชอปน้ันสามารถทำได้โดยเรียกใช้พาเนลสร้างภาพ เคล่อื นไหว (Timeline Panel) ผ่านทางเมนู Window > Timeline มีรูปแบบการสร้าง 2 รูปแบบให้ เลอื กใช้ คอื แบบ Create Video Timeline จะมเี ครือ่ งมอื สนับสนนุ การสรา้ งภาพเคลอื่ นไหวในรูป แบบ Video และแบบ Create Frame Animation จะมเี คร่อื งมือสนับสนุนการสรา้ งภาพเคล่อื นไหว ในรปู แบบเฟรม (Frame)

24 คำถามทบทวน คำสัง่ จงตอบคำถามต่อไปนี้ 1. จงอธิบายความหมายของคำวา่ โฮมเพจ (Home Page) 2. ส่วนประกอบสำคญั ในการออกแบบเวบ็ เพจมีอะไรบ้าง อธบิ าย 3. อธบิ ายกระบวนการในการออกแบบเวบ็ ไซต์ 4. หนา้ ท่ีของเครอื่ งมือตดั ภาพ (Slice Tool) คืออะไร 5. เมื่อตอ้ งการบันทกึ ภาพเพ่ือนำไปใช้ในการออกแบบเว็บไซตจ์ ะเลือกคำสงั่ ใด 6. การสร้างภาพเคลอื่ นไหวหรอื งานอนิเมช่นั มีวธิ กี ารสรา้ งผลงานกป่ี ระเภท อธบิ าย 7. การสร้างภาพเคลื่อนไหวในโปรแกรมโฟโตช้ อปมีกร่ี ูปแบบ อธบิ าย 8. อธบิ ายกระบวนการสร้างภาพเคลอ่ื นไหวแบบทวนี (Tween) 9. อธิบายกระบวนการสรา้ งภาพเคล่ือนไหวแบบเฟรมบายเฟรม (Frame by Frame) 10. อธบิ ายกระบวนการนำเข้าไฟลว์ ิดีโอเข้ามาใช้ในโปรแกรมโฟโตช้ อป

25 บทปฏบิ ัติการเรือ่ ง การออกแบบเว็บเพจ วตั ถุประสงค์ 1. เพอื่ ให้ผู้เรยี นสามารถคน้ ควา้ ข้อมลู และวเิ คราะหข์ ้อมูลเพื่อนำผลมาใช้ในการออกแบบเว็บเพจ 2. เพื่อให้ผเู้ รียนบรู ณาการองค์ความร้แู ละเทคนคิ วิธกี ารตา่ งๆ เพอ่ื สร้างงานออกแบบเวบ็ เพจ 3. เพ่ือให้ผ้เู รียนสามารถนำเสนอแนวคิดและผลงานออกแบบเว็บเพจไดอ้ ยา่ งมปี ระสิทธิภาพ อปุ กรณ์ คอมพวิ เตอร์ และโปรแกรมสำเร็จรูปสำหรับงานกราฟิก แบบฝึกปฏบิ ัติ ให้ผเู้ รยี นออกแบบเวบ็ เพจโดยใช้โปรแกรมโฟโต้ชอป (Photoshop) ข้อเสนอแนะ 1. ออกแบบเว็บเพจคณะมนุษยศาสตร์และสังคมศาสตร์โดยใช้โปรแกรม Photoshop 2. ขนาดงาน : ความกว้าง 2880 Pixels, ความสงู เป็นไปตามขนาดของงานออกแบบ 3. ใสโ่ ลโก้คณะมนุษยศาสตรแ์ ละสงั คมศาสตร์ 4. ชอื่ คณะ : คณะมนุษยศาสตรแ์ ละสงั คมศาสตร์ มหาวทิ ยาลยั ราชภฏั บ้านสมเดจ็ เจา้ พระยา Faculty of Humanities and Social Sciences Bansomdejchaopraya Rajabhat University 5. สว่ น Navigator : หลกั สตู ร / สมคั รเรยี น / ผลงานและนวัตกรรม / ขา่ วและกจิ กรรม / เกย่ี ว กับคณะ / ตดิ ต่อคณะ / ดาวนโ์ หลด 6. ส่วน Main Content : (ใสภ่ าพประกอบใหส้ วยงาม) บทเรียนออนไลน์ / ขา่ วสาร / ประกาศ / กจิ กรรม 7. สว่ น Footer : สัญลกั ษณ์ Facebook / ทีอ่ ยู่ : 1061 ซ.อสิ รภาพ 15 ถ.อิสรภาพ แขวงหิรญั รจู ี เขตธนบุรี กทม. 10600 โทร : 0-2473-7000 ตอ่ 2000 แฟกซ์ : 0-2466-6539 E-Mail : [email protected] 8. การสง่ งาน : นำเสนอผลงานในช้นั เรยี นและสง่ ผลงานในรูปแบบสงิ่ พิมพ์ ผลการศึกษาและปฏบิ ัติงาน 1. ผูเ้ รยี นสามารถค้นคว้าขอ้ มูลและวเิ คราะหข์ อ้ มลู เพือ่ นำผลมาใชใ้ นการออกแบบเวบ็ เพจ 2. ผเู้ รียนสามารถบูรณาการองค์ความรู้และเทคนิควธิ ีการต่างๆ เพ่อื สรา้ งงานออกแบบเวบ็ เพจ 3. ผูเ้ รียนสามารถนำเสนอแนวคดิ และผลงานออกแบบเว็บเพจได้อย่างมปี ระสิทธภิ าพ

26 เอกสารอา้ งองิ หนังสอื และบทความในหนังสอื เกยี รติพงษ์ บุญจติ ร. (2557). Professional Guide Photoshop CC. นนทบรุ ี : ไอดซี ฯี . ฉตั รชัย ศรีสม. (2553). ประโยชนข์ องมัลตมิ ีเดยี . สบื ค้น 30 เมษายน 2560, จาก http:// blog.rmutp.ac.th/chantana.p/2010/06/14/ประโยชนข์ องมลั ติมเี ดีย/ ทวศี กั ดิ์ กาญจนสุวรรณ. (2552). เทคโนโลยมี ัลติมเี ดยี . กรงุ เทพฯ : เคทพี ี คอมพ์ แอนด์ คอนซลั ท์. ปาพจน์ หนุนภักด.ี (2553). หลักการและกระบวนการออกแบบงานกราฟกิ ดไี ซน.์ พมิ พ์ครง้ั ที่ 1. นนทบรุ ี : ไอดีซฯี . ปิยกุล เลาวณั ย์ศิริ. (2552). การ์ตูนแอนเิ มชัน่ . ไดจ้ าก http://thanetnetwork.com/aniamtion/ web/animation.htm [สบื คน้ เม่อื 5 กนั ยายน 2558]. เอกสารอ่ืนๆ มหาวทิ ยาลัยราชภัฏบ้านสมเดจ็ เจ้าพระยา. (ม.ป.ป.). เวบ็ ไซตม์ หาวิทยาลัยราชภฏั บ้านสมเด็จ เจา้ พระยา. สบื คน้ 30 เมษายน 2559, จาก http://www.bsru.ac.th สุธาทิพย์ หอมสุวรรณ. (นกั ออกแบบ). (2559ก). ส่ือการเรยี นการสอน CAI. [ภาพกราฟกิ ]. กรุงเทพฯ: สาขาวิชาออกแบบนเิ ทศศลิ ป์ มหาวทิ ยาลยั ราชภัฏบ้านสมเด็จเจา้ พระยา. ________. (นักออกแบบ). (2559ข). งานโมชั่นกราฟิก (Motion Graphic). [ภาพกราฟิก]. กรงุ เทพฯ: สาขาวิชาออกแบบนิเทศศิลป์ มหาวิทยาลัยราชภฏั บา้ นสมเดจ็ เจา้ พระยา. ________. (นักออกแบบ). (2559ค). ส่วนประกอบของหน้าเว็บเพจ. [ภาพกราฟิก]. กรงุ เทพฯ: สาขา วิชาออกแบบนิเทศศลิ ป์ มหาวทิ ยาลยั ราชภฏั บา้ นสมเดจ็ เจ้าพระยา. ________. (นกั ออกแบบ). (2559ฆ). ภาพน่ิงที่มีความเคลื่อนไหวตอ่ เนอื่ ง. [ภาพกราฟกิ ]. กรงุ เทพฯ: สาขาวชิ าออกแบบนเิ ทศศิลป์ มหาวทิ ยาลัยราชภฏั บา้ นสมเดจ็ เจา้ พระยา. ________. (ผูถ้ า่ ยภาพ). (2559ก). ส่วนประกอบของหน้าต่าง Save for Web. [ภาพถ่าย]. กรุงเทพฯ: สาขาวชิ าออกแบบนิเทศศลิ ป์ มหาวิทยาลัยราชภฏั บา้ นสมเดจ็ เจา้ พระยา. ________. (ผู้ถ่ายภาพ). (2559ข). การเลอื กสกลุ ของไฟล.์ [ภาพถ่าย]. กรุงเทพฯ: สาขาวิชาออกแบบ นเิ ทศศลิ ป์ มหาวิทยาลยั ราชภัฏบ้านสมเด็จเจ้าพระยา. ________. (ผถู้ า่ ยภาพ). (2559ค). ส่วนประกอบของพาเนลสร้างภาพเคลื่อนไหว (Timeline Panel). [ภาพถา่ ย]. กรุงเทพฯ: สาขาวิชาออกแบบนเิ ทศศิลป์ มหาวิทยาลยั ราชภฏั บา้ นสมเดจ็ เจ้าพระยา.

27 ________. (ผถู้ า่ ยภาพ). (2559ฆ). เคร่ืองมือการทำงานในรูปแบบ Create Video Timeline. [ภาพถา่ ย]. กรงุ เทพฯ: สาขาวชิ าออกแบบนิเทศศิลป์ มหาวิทยาลยั ราชภัฏบ้านสมเด็จ เจา้ พระยา. ________. (ผถู้ า่ ยภาพ). (2559ง). เครอื่ งมือการทำงานในรูปแบบ Create Frame Animation. [ภาพถ่าย]. กรุงเทพฯ: สาขาวชิ าออกแบบนเิ ทศศิลป์ มหาวทิ ยาลยั ราชภฏั บา้ นสมเดจ็ เจ้าพระยา. ________. (ผูถ้ ่ายภาพ). (2559จ). หนา้ ตา่ งคำสั่ง Tween. [ภาพถ่าย]. กรุงเทพฯ: สาขาวชิ า ออกแบบนิเทศศลิ ป์ มหาวทิ ยาลัยราชภฏั บ้านสมเด็จเจ้าพระยา. ________. (ผถู้ า่ ยภาพ). (2559ฉ). เฟรมใหมท่ ่ีเข้าแทรกระหว่างเฟรมท่ี 1 และเฟรมท่ี 2. [ภาพถ่าย]. กรุงเทพฯ: สาขาวิชาออกแบบนิเทศศลิ ป์ มหาวทิ ยาลัยราชภัฏบา้ นสมเด็จเจ้าพระยา. ________. (ผูถ้ ่ายภาพ). (2559ช). การคลิกปิดตาเพอ่ื ซอ่ นวัตถุ. [ภาพถา่ ย]. กรุงเทพฯ: สาขาวชิ า ออกแบบนิเทศศลิ ป์ มหาวิทยาลัยราชภฏั บา้ นสมเด็จเจ้าพระยา. ________. (ผถู้ ่ายภาพ). (2559ซ). การเล่นภาพกระพริบสลับไปมา. [ภาพถา่ ย]. กรงุ เทพฯ: สาขาวชิ า ออกแบบนิเทศศลิ ป์ มหาวิทยาลัยราชภฏั บ้านสมเดจ็ เจ้าพระยา. ________. (ผถู้ ่ายภาพ). (2559ฌ). หน้าตา่ งของ Import Video to Layers. [ภาพถ่าย]. กรุงเทพฯ: สาขาวิชาออกแบบนิเทศศิลป์ มหาวทิ ยาลัยราชภฏั บ้านสมเดจ็ เจ้าพระยา. ________. (ผถู้ า่ ยภาพ). (2559ญ). หน้าตา่ งของคำสั่ง Save for Web. [ภาพถ่าย]. กรงุ เทพฯ: สาขา วิชาออกแบบนเิ ทศศลิ ป์ มหาวทิ ยาลัยราชภฏั บา้ นสมเดจ็ เจ้าพระยา. Reference Other document(s) BBC News. (n.d.) Website: BBC News. Retrieved April 16, 2016, from http:// www.bbc.com Benefit Cosmetics. (n.d.) Website: Benefit Cosmetics. Retrieved April 16, 2016, from http://www.bbc.com Joshuanava. (n.d.) Traditional Animation: Sleeping Beauty. Retrieved April 20, 2016, from https://www.joshuanava.biz/disney-animation/marc-davis.html Milwaukee Ballet School & Academy. (n.d.) Home Page: Milwaukee Ballet School & Academy. Retrieved April 16, 2016, from http://www.freepik.com/ asierromero

28 MotionDesignCommun. (2012) Care to Click Infographic Animation (Motion Graphics) [Video file]. Retrieved April 20, 2016, from https://www.youtube.com/ watch?v=QViCXgkcBRM Public Agenda. (n.d.) Website: Public Agenda. Retrieved April 16, 2016, from http:// www.bbc.com The Telegraph. (n.d.) Computer Animation: Monster Inc. Retrieved April 20, 2016, from http://www.telegraph.co.uk/film/monsters-inc/review The Telegraph. (n.d.) Stop Motion: Chicken Run. Retrieved April 20, 2016, from http:// www.telegraph.co.uk/culture/film/filmreviews/11307478/chicken-run- review.html Wisit Po. (n.d.) Website: WISIT PO. Retrieved April 16, 2016, from https:// www.behance.net/wpotiwat818e World Wildlife Fund. (n.d.) Website: World Wildlife Fund. Retrieved April 16, 2016, from https://www.worldwildlife.org