201901

Content vol.63 ที่ปรกึ ษา ฉบบั ท่ี 63 ประจำ�เดอื นมกราคม พ.ศ.2562 ผชู้ ว่ ยศาสตราจารย์ ดร.ธชั วีร์ ลลี ะวฒั น์ รักษาการแทนรองอธิการบดี ฝา่ ยสารสนเทศ 3 บทบรรณาธิการ และวิทยาเขตกาญจนบรุ ี นายธรี พนั ธ์ุ วิมลสาระวงค์ 4 ออกแบบงานน�ำ เสนอให้โดดเด่นดว้ ย ผอู้ ำ�นวยการกองเทคโนโลยีสารสนเทศ Interactive PowerPoint กองบรรณาธิการ โดย....ศภุ ลกั ษณ์ จุเครือ ณัฐพล สว่างจิตต,์ วรี ะพล แสงนาค, หนว่ ยออกแบบเวบ็ ไซต์และกราฟิกดีไซน์ นงค์นชุ พุทธศภุ ะ, ศุภลกั ษณ์ จเุ ครือ ศิลปกรรม 17 ย(Aอ่ pรpปู ภfrาoพmงM่ายicๆroดs้วoยftImStaogree)Resizer ศุภลักษณ์ จเุ ครอื โดย....วิริยา อุย่ เจริญ ติดต่อสอบถาม หน่วยออกแบบเวบ็ ไซตแ์ ละกราฟิกดไี ซน์ กองเทคโนโลยสี ารสนเทศ ส�ำ นกั งานอธิการบดี มหาวิทยาลยั มหดิ ล 23 สรา้ งสรรค์ Animation ดว้ ยโปรแกรม 999 ถ.พุทธมณฑลสาย 4 Adobe Illustrator CC และ ต.ศาลายา อ.พทุ ธมณฑล จ.นครปฐม 73170 โทร. 0-2849-6022 FAX. 0-2849-6039 Adobe Photoshop CC โดย...ศุภลกั ษณ์ จเุ ครอื หน่วยออกแบบเว็บไซต์และกราฟกิ ดีไซน์

บทบรรณาธกิ าร Editorial การสรา้ งงานน�ำ เสนอต่าง ๆ ด้วยโปรแกรม PowerPoint นน้ั สิ่งที่เป็นตัวบอกว่างานนำ�เสนอประสบความสำ�เร็จหรือไม่นั้น คือการท่ผี ชู้ มมคี วามสนใจในขณะที่เรานำ�เสนอมากแคไ่ หน ตง้ั ใจ ฟังจนจบ และเขา้ ใจ จดจ�ำ เนือ้ หาที่นำ�เสนอได้มากน้อยแค่ไหน และ การท่ีทำ�ให้ PowerPoint มคี วามนา่ สนใจมากย่ิงข้ึนวธิ ีหน่งึ กค็ ือ การทำ�ให้ PowerPoint มีรปู แบบเปน็ Interactive PowerPoint ซึ่งใน Multimedia e-News ฉบบั นี้ จะมาบอกเล่าเรอ่ื งราว วิธกี าร ท�ำ Interactive PowerPoint โดยละเอยี ด ซึ่งท่านผ้อู า่ นสามารถ นำ�ไปประยุกต์ในการสร้าง Slide งานน�ำ เสนองาน หรือสไลด์ ประกอบการสอนๆ ได้ สำ�หรบั เร่อื ง สรา้ งสรรค์ Animation ดว้ ยโปรแกรม Ado- be Illustrator CC และ Adobe Photoshop CC น้นั เป็นอกี เร่อื ง หนงึ่ ทเ่ี ป็นประโยชน์มาก ๆ ส�ำ หรบั นักออกแบบกราฟกิ ดีไซน์ ท่ตี อ้ ง สรา้ งงานอนเิ มชนั่ เล็ก ๆ ประกอบเว็บไซต์ หรือออกแบบ Banner ประชาสัมพนั ธ์ กระดุ๊กกระดกิ๊ ง่าย ๆ โดยไม่ต้องใช้โปรแกรมสรา้ ง Animation ที่ซบั ซอ้ นอยา่ งโปรแกรม Adobe Aftereffect ทา่ นสามารถใช้โปรแกรมออกแบบเชน่ Adobe Illustrator และ Adobe Photoshop ทำ� Animation ไดเ้ ชน่ เดยี วกนั ข้ันตอนก็ไม่ยงุ่ ยากซับซ้อนมากนัก อีกทั้งยงั Render ออกมาใช้งาน ไดท้ งั้ ในรปู แบบไฟล์Videoและไฟลภ์ าพขชนาดเลก็ นามสกุลGifได้ สำ�หรบั ทา่ นทมี่ ีความสนใจ หรือมขี ้อตดิ ขดั ใด ๆ เม่ือทดลองท�ำ Animation ด้วยโปรแกรม Adobe Illustrator CC และ Adobe Photoshop CC แล้วท่านสามารถสอบถามเพ่ิมเตมิ แลกเปลี่ยน ประสบการณก์ ันไดน้ ะคะ ขอบคุณทุกทา่ นทตี่ ิดตามอ่านวารสาร อิเลก็ ทรอนิกส์ Multimedia e-News คะ่ ศภุ ลักษณ์ จุเครอื

โปรแกรม Microsoft Powerpoint เปน็ โปรแกรมท่เี ราใช้สร้าง Slide Presentation เพ่ือนำ�เสนอข้อมลู หรือนำ�เสนองานท่ีได้รบั ความนิยมมาอยา่ ง ตอ่ เนอื่ ง ยาวนาน ทง้ั ในวงการธรุ กจิ และดา้ นการศึกษา ด้วยความท่มี เี ครื่องมอื ต่าง ๆ ทรี่ องรับการทำ�งานครบครัน ใช้งานง่าย ทัง้ ในการพมิ พ์ขอ้ ความ แทรก รูปภาพ แทรกเสยี งเพลงประกอบ แทรกไฟล์วิดโี อประกอบการบรรยายลงใน แต่ละ Slide ฯลฯ การสรา้ งสรรคง์ านน�ำ เสนอ Slide Presentation ทม่ี รี ปู แบบทน่ี า่ สนใจ จะชว่ ยกระตนุ้ ใหผ้ ชู้ มการน�ำ เสนอ หรอื ผู้เรยี น มคี วามสนใจมากขึ้น ซง่ึ หนง่ึ ใน วธิ นี ั้นกค็ ือ การสร้างสรรค์ Slide ให้เป็นรูปแบบ Interactive Slide ตวั อยา่ งเช่น ตอ้ งการสรา้ ง Slide Presentation ประกอบการน�ำ เสนอ เรือ่ งระบบย่อยอาหารซง่ึ เม่ือเราคลิกทบ่ี ริเวณทเ่ี ปน็ ล�ำ ไส้เลก็ คำ�ว่า“ลำ�ไส้เลก็ ” กจ็ ะแสดงขึ้นมา เปน็ ต้น งานพฒั นาสอื่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหิดล

วิธีการท�ำ Interactive Slide น้นั เราจะใช้เครอื่ งมอื ทีช่ อ่ื วา่ Trigger ซึ่งเปน็ เคร่ืองมอื ย่อยท่ีอยูใ่ น Ribbon Animations ซ่งึ Trigger คอื การ ทำ� ลง้ิ คก์ ารเคลอ่ื นไหวไว้ที่ Object หน่ึง เม่ือคลิก ในบรเิ วณท่ีกำ�หนดกจ็ ะมี อีก Object หนึง่ แสดงขึน้ มา วธิ กี ารสรา้ ง Interactive Slide ด้วยเคร่ืองมอื Trigger มขี น้ั ตอนดงั น้ี 1. เปดิ โปรแกรม Microsoft PowerPoint 2016 แลว้ คลิกท่ี Ribbon Insert เลอื ก Picture เลอื กภาพท่เี ตรยี มไว้ จากน้นั กดปมุ่ Insert 2. คลกิ แถบ Ribbon Insert จากนน้ั สร้างกล่องขอ้ ความด้วย Textbox แลว้ พมิ พ์ข้อความท่ีเปน็ ค�ำ อธบิ าย อวยั วะตา่ ง ๆ ของระบบย่อยอาหาร งานพัฒนาสอ่ื ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหิดล

3. เมอ่ื สร้างกลอ่ งขอ้ ความค�ำ อธบิ ายครบแลว้ ใหเ้ ลือก Ribbon Insert > line > Freeform เพือ่ วาดรูป Object ตามรปู ทรงอวัยวะ ทจ่ี ะ เชอ่ื มโยง กับขอ้ ความอธบิ าย 4. ใส่สใี ห้กบั Object โดย ใส่เฉพาะสี Shape Fill งานพฒั นาสอื่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหิดล

4.เลอื กRibbonInsert > line > Freeform(เครอื่ งมอื วาดรปู ทรงอสิ ระ) เพ่อื วาดรปู Object ตบั อ่อน ลำ�ไสเ้ ล็ก ล�ำ ไส้ใหญ่ ถงุ น�้ำ ดี ตับ ต่อมน้ำ�ดี ทวาร หนกั โดยใส่สีใหแ้ ต่ละ Object มีความแตกต่างกัน เพื่อสะดวกในแก้ไข งานพัฒนาสอื่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลัยมหิดล

งานพฒั นาส่อื ผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหดิ ล

5. เมอื่ วาดจนครบทุก Object แล้วให้ยา้ ย Object ท้งั หมดมาไวด้ ้านข้าง แล้วแก้ไขสขี อง Textbox ค�ำ อธิบาย ชอื่ อวยั วะตา่ ง ๆ ใหม้ ีความสวยงาม 6. เอารปู ภาพอวยั วะต่าง ๆ มาวางซอ้ นกับรปู ภาพหลัก แล้ววาดเสน้ ตรงชี้ อวยั วะต่าง ๆ คลกิ ที่ Ribbon Insert > Shape > Line ให้ครบทุกเส้น จากนั้น Group ขอ้ ความอธบิ ายและเสน้ ชี้อวยั วะให้เปน็ Group เดยี วกัน งานพฒั นาสอื่ ผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหิดล

คลกิ เลอื กรปู ทรงสเี่ หลี่ยม ข้อความชือ่ อวัยวะ และเสน้ ตรงท่ชี ี้ไปที่อวยั วะ พร้อม ๆ กนั จากน้ันคลิกขวา เลือก Group > Group งานพฒั นาส่ือผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหิดล

7. ในตอนนี้เราจะได้ รปู ทรง 2 ประเภทคือ 1.กล่มุ ขอ้ ความท่ีเปน็ ชือ่ อวัยวะ 2. กลุ่มของรปู ทรงอวัยวะ เราตอ้ งการให้เมอ่ื คลกิ เมาส์ท่บี รเิ วณอวัยวะใด ช่อื อวยั วะน้ันจะแสดง ข้นึ มา *โดยรปู อวยั วะทเี่ ราวาดไว้ เปน็ ตัวก�ำ หนดขอบเขตของบริเวณท่คี ลกิ เมาส์ ลากจะปรากฏชอ่ื อวัยวะนัน้ ๆ ขนึ้ มา 8. กำ�หนดรูปแบบการ Animation ขาเขา้ (Entrance) ให้กับ Group ขอ้ ความทเี่ ปน็ ชอ่ื อวยั วะทกุ ๆ Group ไดแ้ ก่ ฟัน (Teeth) ต่อมน้�ำ ลาย (Sali- vary Grand) หลอดอาหาร (Esophagus) ตบั (Liver) ถงุ น�ำ้ ด ี (Gallbladder) กระเพาะอาหาร (Stomach) ลำ�ไส้เล็ก (Small intestine) ตับออ่ น (Pan- creas) ลำ�ไส้ใหญ่ (Large intestine) ทวารหนกั   (Anus) คลกิ ทป่ี ุ่ม Group ฟัน (Teeth) เลือก Ribbon Animations > Ani- mation pane > Add Animation > Entrance > Fade งานพฒั นาส่อื ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหดิ ล

เม่อื ก�ำ หนด Animation Entrance ใหก้ ับ Group ขอ้ ความ แลว้ ท่ี หน้าต่าง Animation Pane จะมี Effect การเคล่อื นไหวของ Group นน้ั ๆ แสดงอยู่ ตามล�ำ ดบั โดยตรงคำ�วา่ Start on click ใหก้ �ำ หนดเป็น ใส่ Effect Animation Entrance ให้ครบทุก Group ขอ้ ความ งานพัฒนาสื่อผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหดิ ล

เม่อื กำ�หนด Animation Entrance ครบแลว้ เราจะตอ้ งเช่ือมโยง Group ข้อความ กบั บริเวณทเี่ ปน็ อวัยวะนั้นๆ แต่เน่อื งจากโปรแกรมจะแทนชื่อรูปทรง (Object) ทีเ่ ราวาด ดว้ ยคำ�ว่า “ Freeform” ซึ่งตอนนี้เราไมท่ ราบว่า แตล่ ะรูป คอื Freeform ใด เราจงึ ตอ้ งทราบชอื่ ของ แต่ละ Freeform กอ่ น ด้วยวิธีดงั น้ี 1. เลือก Object > Ribbon Format > Selection Pane เพอื่ เปิด หน้าต่าง Selection งานพฒั นาส่ือผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหดิ ล

เมือ่ เปิดหน้าต่าง Selection แลว้ เม่ือเราคลกิ ท่ี Object ใด ชื่อของ Object น้ัน ๆ กจ็ ะมีแถบ Highlight แสดงให้เห็นชัดเจนขึ้น 9. เราต้องการให้ Object อวัยวะตา่ งๆ ที่เราวาดนั้นเป็นแค่ตวั กำ�หนด บรเิ วณพ้นื ทก่ี ารคลกิ เมาส์ ดงั นั้น เคราจึงไมต่ ้องการเห็น Object อวยั วะ บน Slide Presentation ดังนน้ั เราจึงจะตอ้ งปรับค่า Transparency ของ Object นั้นๆให้จางลงโดยคลกิ ท่ี Objectแล้วปรับเลื่อนScale ปรบั ค่าTransparency ให้เปน็ 100 % (ทกุ Object ค่า Transparency เป็น 100%) งานพฒั นาสอื่ ผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหิดล

10. เชอ่ื มโยง Group ข้อความอวัยวะ กับ Freeform พืน้ ท่ี ดว้ ยคำ�ส่งั Trigger โดยเลือก Group ข้อความอวัยวะ(ฟัน) > Animation Pane > Trigger > Freeform 20 11. เชอ่ื มโยง Group ขอ้ ความชอ่ื อวัยวะตา่ ง ๆ กับ Freeform ใหค้ รบทุก อวัยวะ งานพัฒนาสอ่ื ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหดิ ล

12. เมื่อทำ�ครบแลว้ กด Save จากน้ันกด ปุม่ Slide show ดา้ น ลา่ ง จะเห็นวา่ เมือ่ เราคลกิ ทบี่ รเิ วณอวยั วะนั้น ๆ ข้อความจะแสดงข้นึ มา โดยไม่ จำ�เปน็ ตอ้ งคลกิ ตามลำ�ดับ งานพัฒนาสอื่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหิดล

ปจั จบุ ันอปุ กรณ์ท่ีใชใ้ นการถา่ ยภาพมปี ระสิทธิภาพสงู คุณภาพของรูปที่ ไดก้ ม็ ขี นาดไฟลท์ ี่ใหญต่ ามมา การนำ�รูปภาพไปใชง้ าน บางครง้ั มีขนาดทีใ่ หญจ่ น เกนิ ความจ�ำ เป็น แน่นอนว่าตอ้ งน�ำ ไปยอ่ ขนาดใหเ้ ลก็ ลง วันน้มี ีวธิ ียอ่ ภาพแบบ ใหม่ ท่งี า่ ย และไมต่ ้องยงุ่ ยาก ไม่ต้องเปิดโปรแกรมอะไรมาก แคค่ ลกิ ขวาย่อรปู เทา่ นัน้ ! Image Resizer โปรแกรม ลดขนาดของรปู ภาพใหเ้ ลก็ ลงของ Microsoftช่วยอำ�นวยความ สะดวกและช่วยลดระยะเวลาใน การปรับขนาดรูปภาพ สามารถใชง้ านได้อย่างรวดเรว็ ไม่ตอ้ งผ่านโปรแกรมปรับ แต่งรปู ภาพขนาดใหญใ่ หเ้ สียเวลา อกี ทั้งไฟลต์ ดิ ตัง้ โปรแกรม Image Resizer ยงั มขี นาดเลก็ และตวั โปรแกรมก็ไมก่ ินเน้ือที่ในฮาร์ดดิส นับได้วา่ เปน็ โปรแกรม สามญั ทค่ี วรมีติดเครื่องคอมพิวเตอรไ์ ว้ วธิ ีการตดิ ตัง้ โหลดโปรแกรม Image Resizer ดาวน์โหลดโปรแกรมไดท้ ่ี https://www.microsoft.com/en-us/p/resize-image/9p87m9tknk vl?&activetab=pivot:reviewstab งานพฒั นาสื่อผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหิดล

เลอื ก Get จากน้นั ระบบจะให้ Login E-mail Account ของ Microsoft แล้วจงึ ท�ำ การดาวนโ์ หลดโปรแกรม เมื่อดาวน์โหลดและตดิ ต้งั เรยี บรอ้ ยแล้ว จะแสดงผลตามรูปภาพด้านล่าง เลอื กกด “Launch” จะแสดงหน้าตา่ งข้อมลู โปรแกรม Image Resizer ให้กด “OK” เพอ่ื เข้าสหู่ น้าจอการทำ�งาน งานพัฒนาส่ือผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลัยมหดิ ล

วิธกี ารใชง้ าน สามารถเลอื กเขา้ โปรแกรมปรับขนาดภาพได้ 2 แบบ คือ แบบท1่ี เปดิ โปรแกรมดว้ ยการเลือก Start Menu ไปที่ Resize Image จากนั้นจะเปดิ หนา้ โปรแกรมข้ึนมาใหท้ ำ�การ เลือกภาพทีต่ อ้ งการปรับขนาด งานพัฒนาส่อื ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหิดล

ท�ำ การกดเลือกไฟลภ์ าพทต่ี ้องการปรับขนาด แลว้ กดปมุ่ Open แบบท่ี 2 ท�ำ การคลกิ ขวาทไ่ี ฟลร์ ปู ภาพ เลอื ก Open with -> Resize Image การเขา้ ใชง้ านดว้ ยแบบที่ 2 จะตา่ งจากแบบแรก คอื ไมต่ อ้ งทำ�การเลอื กไฟล์ ภาพ สามารถปรับขนาดภาพได้เลย งานพฒั นาสือ่ ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหิดล

เม่อื เปิดโปรแกรมและเลอื กไฟลภ์ าพท่ตี อ้ งการปรบั แล้ว สามารถเลอื ก ปรับต้งั คา่ ไฟล์ภาพไดด้ ังนี้ - Small (fits a 640 x 480 screen) จะปรับขนาดของภาพใหต้ ามขนาดท่กี �ำ หนดมา - Medium (fits a 800 x 480 screen) ใหเ้ ลย โดยไมค่ ำ�นงึ ถงึ ขนาดเดิม อาจมกี ารยืด หรือขยาย ท�ำ ใหเ้ สียอตั ราสว่ นของภาพ - Custom (fits a by screen) สามารถปรับขนาดของภาพไดต้ ามต้องการ แตห่ ากไมค่ �ำ นึงถงึ ขนาดภาพเดมิ จะท�ำ ให้เสยี อัตราส่วนของภาพ แกไ้ ขได้โดยกดเลอื ก “Keep aspect ratio” เพอ่ื ทำ�การล็อคอัตราส่วนไว้ เมอ่ื เลือกปรับขนาดความกวา้ ง หรอื ความสูง อกี ค่าจะปรบั ให้อตั โนมตั ิ เพื่อให้รปู ภาพยังคงสัดส่วนองคป์ ระกอบภายในสัมพันธ์ กบั ขนาดของรูป - Percent by % ปรับขนาดภาพเปน็ เปอรเ์ ซน็ ต์ งานพฒั นาสื่อผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหิดล

จากภาพดา้ นบนขนาดเดิมของไฟลภ์ าพ 5760 x 3840 pixels และได้กด เลอื ก “Keep aspect ratio” เม่อื เลอื กปรับขนาดที่ Custom ความกว้าง 720 pixels ความยาวปรับใหอ้ ัตโนมัตเิ ป็น 480 pixels เมอ่ื ได้ขนาดตามทต่ี ้องการ แลว้ ใหก้ ด “Save As” เมอ่ื นำ�ทง้ั 2 ไฟลม์ าเปรียบเทียบกัน ไฟลภ์ าพตน้ ฉบับมีขนาด 8.42 MB ไฟลภ์ าพทท่ี �ำ การปรับขนาดลดขนาดเหลือ 54.5 KB เพยี งเทา่ นก้ี ส็ ามารถปรบั ขนาดไฟล์ภาพงา่ ยๆ ได้ตามต้องการ งานพฒั นาสื่อผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหิดล

เปน็ ที่ทราบกันวา่ โปรแกรม Adobe Photoshop CC เป็นโปรแกรมที่ ใชใ้ นการตกแตง่ แก้ไขภาพถา่ ยและออกแบบงานกราฟิก การออกแบบหนา้ ปก หนังสือ และสื่อสง่ิ พิมพต์ ่าง ๆ และโปรแกรม Adobe Illustrator CC คอื โปรแกรมที่ใชใ้ นการวาดภาพ โดยจะสร้างภาพทีม่ ลี กั ษณะเปน็ ลายเสน้ หรือที่ เรียกวา่ Vector สามารถทำ�งานออกแบบต่างๆ เชน่ ส่งิ พมิ พ์ บรรจุภณั ฑ์ และ ภาพเคล่ือนไหวตลอดจนการสร้างภาพ เพ่อื ใชเ้ ป็นภาพประกอบในการท�ำ งาน อน่ื ๆ เช่น การ์ตูน ภาพประกอบหนังสอื แตม่ ใี ครทราบบา้ งวา่ เราสามารถใช้ ทัง้ 2 โปรแกรมนี้ในการสร้าง วิดีโอ Animation แบบงา่ ย ๆ ไดด้ ว้ ย อีกทงั้ ยงั สามารถ Export file ได้ทัง้ ในรูปแบบไฟล์ Video Animation และไฟล์ Gif Animation ในโปรแกรม Adobe Illustrator CC เรา สามารถใชเ้ ครอื่ งมอื ทีเ่ ก่ียวกับการวาดภาพ ใน กลุม่ Pen Tool วาดเสน้ และดดั เส้นใหเ้ ปน็ รูปทรงตามทเ่ี ราต้องการ ใสส่ ีเพม่ิ ความสวยงามดว้ ย เครื่องมอื Fill / Stoke หรือเลือกสีจาก Panel Color หลักการสร้าง Animation น้นั คือ การสรา้ งภาพ เคล่อื นไหวโดยการฉายภาพนิ่งหลาย ๆ ภาพต่อเน่อื งกนั ด้วยความเรว็ ตัง้ แต่ 16 เฟรมต่อวินาทขี ้ึนไป เราจะเหน็ เหมอื นวา่ ภาพดงั กล่าวเคล่ือนไหวได้ งานพัฒนาสอ่ื ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหดิ ล

จากหลักการข้างต้น แสดงว่าใน 1 วินาที เราจะตอ้ งวาดภาพการต์ ูน จ�ำ นวน 16 ภาพ ท่ีมี Step การเคลื่อนไหวตอ่ เนื่องกันท�ำ ใหต้ ้องใช้เวลานาน ดงั นั้น เราสามารถใช้เครอ่ื งมือ Puppet Wrap Tool ในโปรแกรม Adobe Illustrator CC ชว่ ยปรบั ขยับ รูปทรงให้เคลื่อนไหว ตาม Step เพือ่ ประหยัดเวลาได้ ขนั้ ตอนการเตรยี มภาพการ์ตนู ด้วยโปรแกรม Adobe Illustrator CC 1. วาดภาพตวั การต์ นู ทจี่ ะนำ�มาทำ� Animation โดยแยกเลเยอร์ตวั การ์ตูนและเลเยอรพ์ น้ื หลังออกจากกนั ตามภาพดา้ นล่าง 2. เลอื กเคร่อื งมอื Selection Tool จากน้นั ลากคลุมรูปตัวการต์ ูน เลอื ก เมนู Object > Group งานพัฒนาสื่อผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหิดล

3. เลอื กเครอ่ื งมือ Puppet Wrap Tool เมาศ์เคอร์เซอรจ์ ะเปลยี่ น เปน็ รปู เขม็ หมุด จากนนั้ แลว้ คลิกเมาส์ซา้ ยท่ีตวั การ์ตูนเป็นการก�ำ หนดจดุ Pin (ปกั Pin) จดุ ยดึ บริเวณภาพ ทำ�ใหเ้ ราสามารถปรับ ย้ายภาพตรงจดุ นน้ั ๆ ไปยงั ตำ�แหน่งใหม่ งานพัฒนาสื่อผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหิดล

4. ถา้ มีรปู ทรงอืน่ ๆ ทไี่ มเ่ กี่ยวข้อง หรอื ไมต่ อ้ งการให้เคลื่อนตามจงั หวะ การเคล่อื นไหว เราควรแยกเลเยอรไ์ วต้ ่างหากจากตัวการ์ตนู ตัวอย่างเช่น เรา ไมต่ ้องการให้ Skateboard ขยับ เรากแ็ ยกเลเยอร์ Skateboard ไว้ด้านล่าง 6. Lock เลเยอร์ Skateboard และ เลเยอร์ Background ไว้ เพ่อื ให้ ไมม่ ีผลกระทบ และสะดวกในการท�ำ งาน 7. Duplicate เลเยอรต์ วั การ์ตนู (boy) เพิ่มข้ึน 1 เลเยอร์ จะไดเ้ ลเยอร์ (Boy copy) โดยการลากเลเยอรต์ ัวการ์ตนู ไปวางที่ Create New layer จากนัน้ กด Lock เลเยอร์ boy และซ่อนเลเยอร์ Boy ไว้

8. เลือกเคร่ืองมอื Puppet Wrap tool แลว้ คลกิ ทีจ่ ดุ Pin ให้มีลกั ษณะ แล้วยา้ ย pin ใหเ้ ลอ่ื นลงมา เหมอื นกบั การขยบั ขาลงมาด้านล่าง

เลเยอร์ Boy copy 2 จะปรับรูปแขน และขาของตวั การต์ ูนเปน็ ดังภาพ 9. Duplicate เลเยอรต์ ัวการ์ตูน (Boy copy 2) เพม่ิ ขน้ึ 1 เลเยอร์ จะได้เลเยอร์ (Boy copy 3) แล้ว Lock เลเยอร์ Boy copy 2 และซ่อนเลเยอรไ์ ว้

10. เลือกเครอื่ งมือ Puppet Wrap tool คลิกทจ่ี ุด Pin แลว้ ยา้ ย Pin ให้ เล่ือนลงมา เหมือนกับการขยับขา และแขนลงมาดา้ นล่าง

จะได้ลกั ษณะการขยับขาดังภาพ งานพฒั นาส่อื ผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลยั มหดิ ล

11. เม่อื ทำ� Step การขยบั แขนขาครบ ตามทต่ี ้องการแล้ว ให้คลกิ เลอื ก เลเยอร์ Stepที่ 1 (boy) แลว้ เลือกเมนู File > Export > Export As... 12. ตง้ั ชอื่ ไฟลภ์ าพ แล้วเลือก Save as type เปน็ .JPG แลว้ กดปุม่ Save งานพฒั นาส่อื ผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหดิ ล

ก�ำ หนดคา่ ของภาพ JPG ให้โหมดสเี ปน็ RGB คณุ ภาพภาพเปน็ 10 ค่า ความละเอยี ด 72 หรอื 150 DPI แล้วกดปุม่ OK แลว้ โดย Export ใหค้ รบทกุ Step ดังนนั้ จะไดร้ ูปภาพน่งิ ท้ังหมด 4 ภาพ 4 Step การเคลือ่ นไหว ในตวั อยา่ ง ก�ำ หนดชอ่ื เรียงกนั เป็น Animation 1, Animation 2, Animation 3, Anima- tion 4 โดย Save ให้อยใู่ น โฟลเดอรเ์ ดียวกัน งานพฒั นาส่ือผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลยั มหดิ ล

ขน้ั ตอนการท�ำ Animation ด้วยโปรแกรม Adobe Photoshop CC 1.เปดิ โปแกรม Adobe Photoshop CC จากน้นั เลือกเมนู File > Scripts > Load Files in to stack... ทห่ี นา้ ตา่ ง Load Layers กดปมุ่ Browse...เลอื กรปู ท่ี Export ไว้ กดปุ่ม OK 2. เมอ่ื กดปมุ่ Ok ภาพจะถูก Import เขา้ มาในโปรแกรม Adobe Photoshop อัตโนมตั ิ ซง่ึ เรียงเลเยอร์ตามทเ่ี ราเลือกตอน Browse ซง่ึ ถา้ Step การเคลอื่ นไหวไม่ถกู ต้อง กใ็ หส้ ลบั ลำ�ดับใน หน้าตา่ ง Layer ให้ ถูกต้อง เพอื่ ง่ายตอนการท�ำ Animation งานพัฒนาส่ือผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลัยมหิดล

3. คลกิ ทีเ่ มนู Window > Timeline เพ่อื เปิดหนา้ ตา่ ง Timeline ของ การสรา้ ง Animation ขึ้นมา จากนั้นเลอื ก Create Video Timeline งานพัฒนาสื่อผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหดิ ล

4. เม่ือกดป่มุ Create Video Timeline แลว้ หน้าต่าง Timeline มีเสน้ Timeline ของแตล่ ะภาพในเลเยอร์ ถา้ มภี าพ 4 เลเยอร์ ก็จะมแี ถบเสน้ Time- line 4 แถบ ในหน้าต่าง Timeline จะประกอบไปดว้ ย Video Track แถบสมี ว่ ง (จ�ำ นวนแถบตามจ�ำ นวนเลเยอร)์ Audio Track ที่เราสามารถ Import เสยี ง ดนตรี หรอื เพลงประกอบ Animation เพม่ิ ได้ ตัวเลขแสดงเวลาของ Anima- tion และ Scale ยอ่ ขยายคลปิ วดิ ีโอใน Timeline งานพฒั นาส่อื ผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลัยมหิดล

5. เราต้องการให้ภาพแสดงทลี ะภาพ ทีละ Step ดงั นัน้ เราจะต้องเลือ่ น ปรับภาพทแ่ี ถบ Timeline (แถบสีมว่ ง) วางเรียงต่อกนั การแสดงภาพแต่ละ ภาพเพยี งเสย้ี ววินาที ดงั น้ัน ตอ้ งยอ่ แถบสีมว่ งของแต่ละภาพใหส้ น้ั ทดลองกด ปุ่ม Play เพือ่ ดตู ัวอย่าง งานพฒั นาสอ่ื ผสม กองเทคโนโลยีสารสนเทศ มหาวิทยาลัยมหิดล

6. เพิม่ เสยี งดนตรปี ระกอบ โดยกดปุ่ม ที่ Audio Track แล้วเลือก เพลงที่อย่ใู นเครือ่ งคอมพิวเตอร์ 7. เสียงดนตรีประกอบท่ีนำ�เขา้ มาอาจจะยาวกวา่ เวลาของ Animation ท่ี เราสร้างไว้ ให้เราย่อแถบ Audio ใหม้ คี วามยาวเทา่ กบั Animation งานพัฒนาสอ่ื ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลัยมหดิ ล

8. ก�ำ หนดให้ Animation เล่นวนซำ�้ คลกิ ท ่ี แลว้ คลกิ ตรงค�ำ ว่า “Loop Playback” งานพัฒนาสือ่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลัยมหดิ ล

9. กดปมุ่ Render Video เลอื กรปู แบบวิดโี อท่ตี ้องการ โฟลเดอรท์ ่ี ต้องการ Save ไฟล์ แล้วกดปุ่ม Render เพยี งเทา่ นี้เราก็จะได้ Animation แลว้ ค่ะ งานพัฒนาสื่อผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั มหดิ ล

ในกรณที ่ีตอ้ งการ Export เปน็ ไฟล์ Gif Animation สำ�หรบั การนำ�ไฟล์ Animation ไปใชง้ านบนเวบ็ ไซต์ อาจจะมขี อ้ จ�ำ กัด เรอื่ งขนาดของไฟลว์ ีดีโอที่มีขนาดไฟล์ใหญ่ เราสามารถเปลี่ยน Animation ท่ี สร้าง ในรปู แบบ Video Animation ให้เปน็ แบบ “Frame Animation” จา กนัน้ ก็ Export ไฟล์ เปน็ ไฟลน์ ามสกุล GIF เพอื่ ความสะดวกรวดเรว็ ในการ แสดงผลไฟล์ โดยวิธีดงั น้ี ถ้าสรา้ งในรปู แบบ Video Animation แลว้ การเปลีย่ นเปน็ frame Ani- mation ให้คลกิ ท่ีปมุ่ ท่ีอยดู่ า้ นลา่ ง ถ้าเปน็ การเริ่มตน้ สร้างในตอนแรกหลงั จาก Import ภาพเขา้ มาใหเ้ ลือก ปุ่ม create frame Animation ที่ หนา้ ต่าง Timeline งานพฒั นาส่ือผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหดิ ล

ก�ำ หนดเวลาที่แสดงในแตล่ ะเฟรม ท่ีตัวเลขด้านล่างภาพ และกำ�หนด Loop เปน็ Forever จากนน้ั กดปุม่ File > Export > Save for web (Legacy).... แล้วเลือกรูปแบบ ไฟล์ งานพฒั นาสือ่ ผสม กองเทคโนโลยีสารสนเทศ มหาวทิ ยาลัยมหดิ ล

เลือกไฟล์เปน็ .Gif คา่ looping option เลือกเป็น Forever เลือก No Dither ทดลองกดปุม่ Play ถ้าโอเคแล้วกดปุ่ม Save งานพฒั นาสือ่ ผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหดิ ล

จะมีหน้าตา่ ง Save optimize as แสดงข้ึนมา ใหต้ ง้ั ช่อื ไฟล์จากน้นั เลือก Format เป็น Image Only แล้วกดปุ่ม Save สำ�หรับขั้นตอนการสรา้ ง Cartoon Animation ด้วยโปรแกรม Adobe Illustrator CC และ Adobe Photoshop CC กม็ เี พียงเท่านีค้ ะ่ จะเห็นไดว้ า่ เคร่อื งมือ Puppet wrap Tool ในโปรแกรม Adobe Illustrator CC ช่วยใหเ้ ราสามารถปรับแต่งรูปทรงตวั การต์ ูน ได้สะดวกขน้ึ เร็วขึ้น ไม่ตอ้ งเสีย เวลาในการสรา้ งรูปทรงใหม่ ทีละชน้ิ ๆ อกี ตอ่ ไป และท่านยังสามารถน�ำ วธิ ีการข้างตน้ ไปประยกุ ต์ใชใ้ นการสร้าง Banner ส�ำ หรับเวบ็ ไซต์ หรอื งาน Animation อน่ื ๆ ได้ แล้วพบกนั ใหมฉ่ บบั หนา้ ค่ะ สามารถดูไฟล์ Animation ตัวอยา่ งไดท้ ี่ https://youtu.be/iV-LvKVZiYU งานพัฒนาส่ือผสม กองเทคโนโลยสี ารสนเทศ มหาวิทยาลยั มหิดล

งานพฒั นาส่อื ผสม กองเทคโนโลยสี ารสนเทศ มหาวทิ ยาลัยมหดิ ล