slide infographic 17-5-62

การพฒั นาสมรรถนะบคุ ลากรด้วยการจดั ทาสอ่ื การเรียนการสอนในยุคดจิ ิทลั Infographic “การสร้างสรรคอ์ นิ โฟกราฟิกเบอ้ื งต้น” วันพฤหสั บดที ี่ 16 และวนั ศกุ รท์ ่ี 17 พฤษภาคม 2562 ณ ห้องคอมพวิ เตอร์ ช้นั 3 อาคารอานวยการวิทยาลยั พยาบาล บรมราชชนนี วิทยาเขตสวรรค์ประชารกั ษ์

History of education 2550 Bachelor’s Degree in Computer Education, KMUTNB 2555 Master Degree , Information Technology, KMUTNB 2560– Present Candidate PhD. Student DICT, KMUTNB

Link เอกสารออนไลน์

WHY ? Infographic ทม่ี า: http://www.wickmarketing.com



อนิ โฟกราฟกิ คืออะไร ? Information + Graphic การนาขอ้ มลู หรอื ความรมู้ าสรปุ เป็นสารสนเทศ ในลกั ษณะของขอ้ มลู และกราฟิก ทอ่ี อกแบบเป็นภาพนิง่ หรอื ภาพเคลอ่ื นไหว ดูแลว้ เขา้ ใจงา่ ยในเวลารวดเรว็ และชดั เจน Information Graphic MEETS ทม่ี า: ฝ่ายบรกิ ารความรทู้ างวทิ ยาศาสตรแ์ ละเทคโนโลยี สานกั งานพฒั นาวทิ ยาศาสตรแ์ ละเทคโนโลยแี หง่ ชาติ

อินโฟกราฟิกคอื อะไร ? อนิ โฟกราฟิกคอื “การแปลงข้อมลู ให้เป็นภาพ” เพอ่ื ใหง้ า่ ยต่อการทาความเขา้ ใจขอ้ มลู เขา้ ถงึ ภาพรวมหรอื สาระสาคญั ของขอ้ มลู ทต่ี อ้ งการสอ่ื สารไดอ้ ยา่ งรวดเรว็ กวา่ การใชเ้ พยี งขอ้ ความในการนาเสนอ อนิ โฟกราฟิกไมใ่ ชก่ ารสรปุ ขอ้ มลู ทงั้ หมดมานาเสนอในภาพหน่งึ ภาพ แต่ในภาพหน่งึ ภาพจะเลอื กวธิ กี าร นาเสนอในภาพรวมหรอื อธบิ ายรายละเอยี ดในเรอ่ื งใดเรอ่ื งหน่งึ เชน่ แผนท่ี มที งั้ แผนทโ่ี ลก แผนทท่ี วปี และ แผนทข่ี องแตล่ ะประเทศ ขน้ึ อยกู่ บั วา่ ภาพๆ นนั้ ตอ้ งการนาเสนอในขอบเขตขอ้ มลู ระดบั ใด

ใช้ Infographic สาหรบั อะไรบา้ ง? • เลา่ เรอ่ื งราวหรอื แนวคดิ ทซ่ี บั ซอ้ นใหเ้ ขา้ ใจงา่ ยขน้ึ • งานนาเสนอหรอื รายงานทต่ี อ้ งการใหผ้ อู้ า่ นทาความเขา้ ใจสาระสาคญั ไดโ้ ดยเรว็ • อธบิ ายวธิ กี ารหรอื กระบวนการทางาน • แสดงขอ้ มลู เชงิ สถติ ิ • แสดงขอ้ มลู สาคญั เพอ่ื ประกอบการตดั สนิ ใจ • อธบิ ายเหตุการณ์หรอื เรอ่ื งราวตามลาดบั เวลา • ขอ้ ความเพยี งอยา่ งเดยี วไมส่ ามารถอธบิ ายไดห้ รอื อธบิ ายไมค่ รอบคลมุ

ทาไมตอ้ ง Infographic ? • บทความทใ่ี ช้ Infographic เพมิ่ ยอดการเขา้ ชมมากกวา่ บทความทไ่ี มใ่ ชถ้ งึ 12% • คนเลอื กอ่านบทความ Infographic มากกวา่ บทความตวั หนงั สอื 30 เท่า

หลกั การออกแบบทศั นศิลป์

สดั สว่ น สดั สว่ นมี 2 แบบ • สดั สว่ นตามธรรมชาติ • สดั สว่ นตามความรสู้ กึ

ความสมดลุ ซา้ ย-ขวา เทา่ กนั ซา้ ย-ขวา ไมเ่ ทา่ กนั

จงั หวะ การใชจ้ งั หวะเดยี วกนั ซ้าๆ จะเป็นการชว่ ยจดั กลุม่ ของขอ้ มลู ในการนาเสนอ

การเน้น • เพอ่ื การดงึ ดดู สายตาก่อนอ่าน ▪ การใชอ้ งคป์ ระกอบตดั กนั ▪ เน้นใหอ้ ยโู่ ดดเดย่ี ว ▪ เน้นโดยการจดั วางตาแหน่ง

ความเป็นเอกภาพ • สรา้ งใหท้ ุกอยา่ งไปดว้ ยกนั ได้ ▪ เน้อื หา ▪ สี ▪ องคป์ ระกอบ ▪ พน้ื หลงั ▪ รปู ภาพ

การใชส้ ี • ก่อใหเ้ กิดความสวยงาม น่าสนใจ • กอ่ ใหเ้ กิดอารมณ์รว่ ม • ก่อให้เกิดความเร้าอารมณ์ • ก่อให้เกิดผลกระทบต่อการ ตดั สินใจและการสอื่ สารของ สมอง

การจาแนกสีตามทฤษฎี • สีสามารถจาแนกได้ 3 ขน้ั ได้แก่ ▪ Primary Colors (สีขั้นท่ี 1) ▪ Secondary Colors (สขี นั้ ท่ี 2) ▪ Tertiary Colors (สีข้ันท่ี 3)

ข้นั ตอนการสร้างอนิ โฟกราฟกิ (ออฟไลน)์ 1 234

1. Research เตรียมข้อมูล 2. Plan วางแผนการนาเสนอขอ้ มูล 3. Design ลงมือออกแบบ 4. Feedback ปรับปรุงใหด้ ขี น้ึ

1. Research เตรยี มขอ้ มลู 1. การเตรียมข้อมูล 1.1 การเตรยี ม Resource ขอ้ มูล - ขอ้ มูลประวตั สิ ว่ นตัว - รปู ภาพส่วนตัวและรูปภาพกจิ กรรม - ขอ้ มลู ประวัตกิ ารศึกษา - ข้อมลู อนื่ ๆ ทตี่ ้องการ

2. Plan วางแผนการนาเสนอข้อมูล 2. หัวข้อทีเ่ ราต้องการนาเสนอใน Digital-Portfolio - ประวัติการศกึ ษา - ประสบการณ์การทางาน - ภาระงาน - ทกั ษะและความสามารถพิเศษ - ตดิ ตอ่ เรา

3. Design ลงมอื ออกแบบ

เคร่ืองมือสร้างอินโฟกราฟิ ก

เครอื่ งมอื ในการสรา้ งงานอินโฟกราฟิก Offline Online PPT, PHOTOSHOP, AI, ETC. piktochart

EP1 การต้งั ค่าหน้ากระดาษ Link Vdo การสอน https://youtu.be/PODU3w-6lZU

EP2 การใชห้ ลอดดดู สี (Eye Dropper) Link Vdo การสอน https://youtu.be/3KRTzPb3pt8

เครื่องมอื สร้างอนิ โฟกราฟกิ (ออนไลน)์ www.piktochart.com

Step 1 : เลอื กชอ่ งทางเขา้ สรู่ ะบบ piktochart.com ทม่ี า : https://campus.campus-star.com/variety/97720.html

Step 2 : เลอื กรปู แบบ (Template)

Step 3 : เรมิ่ ออกแบบ    ส่วนท่ี 1 ครอ่ื งมอื ทส่ี ามารถหยบิ และเลอื กมาสรา้ งงาน ส่วนท่ี 2 เรยี กวา่ ผา้ ใบ หรอื stage สว่ นการปรบั แต่งและแสดง Infographic ทส่ี รา้ งขน้ึ ส่วนที่ 3 การบนั ทกึ ดาวน์โหลดหรอื เผยแพรผ่ ลงาน

แหลง่ ทรัพยากรประกอบการจัดทาอนิ โฟกราฟิก https://www.freepik.com/

แหลง่ ทรัพยากรประกอบการจัดทาอนิ โฟกราฟกิ (ตอ่ ) https://stocksnap.io

แหลง่ ทรัพยากรประกอบการจดั ทาอนิ โฟกราฟิก (ตอ่ ) https://www.pexels.com

แหล่งทรพั ยากรประกอบการจดั ทาอนิ โฟกราฟิก (ต่อ) https://openclipart.org

แหล่งทรพั ยากรประกอบการจดั ทาอนิ โฟกราฟกิ (ตอ่ ) http://www.iconfinder.com

แหลง่ ทรัพยากรประกอบการจัดทาอนิ โฟกราฟิก (ต่อ) https://www.f0nt.com/