Motion Infographic 1
LEKRUTHAI KHANTONGCHAI
@Lekruthai Khantongchai 2
หลักสูตรนีเ้ รยี นอะไรบ้าง?
▪ Motion Infographic คอื อะไร ▪ การเลือกใชส้ ี ขอ้ ความ การจดั วางเคา้ โครง
และแทรกวตั ถตุ า่ ง ๆ
▪ เทคนคิ การออกแบบสื่อ Motion Infographic ▪ การปรับแต่งเอฟเฟกต์และเสียงให้น่าสนใจ
▪ การเขยี นแบบรา่ งกระดาน Storyboard ▪ การส่งออกงานและเผยแพร่สู่สังคมออนไลน์
▪ ใบงานที่ 1 เขียน Storyboard คนละ 1 เรอื่ ง ▪ ใบงานท่ี 2 สรา้ งส่ือ Motion Infographic คน
ละ 1 เร่ือง
@Lekruthai Khantongchai ** กาหนดการสามารถปรับเปลยี่ นไดต้ ามสถานการณ์ 3
อยากถามคุณครูวา่ … 4
คณุ ครูใชเ้ ครอื่ งมืออะไรในการสร้าง
ส่ือการสอนรูปแบบ VDO กนั บ้างคะ?
https://www.menti.com/ucm4rzuyp5
@Lekruthai Khantongchai
@Lekruthai Khantongchai 5
PROCESS OF INFOGRAPHIC & GIFOGRAPHIC
DATA IDEA DESIGN
@Lekruthai Khantongchai 6
Motion Infographic คอื อะไร
นำไปใชก้ ับงำนรูปแบบใดไดบ้ ำ้ ง
@Lekruthai Khantongchai 7
Motion Infographic คอื
Information + Graphic + Motion
กำรแปลงขอ้ มลู ให้เป็นภำพกรำฟิกเคลื่อนไหวหรอื ทำเอฟเฟ็กตใ์ ห้กบั งำนวดิ โี อ
เพื่อส่ือสำรข้อมลู กบั บุคคลใหเ้ ข้ำใจได้โดยงำ่ ยในเวลำอนั รวดเร็ว
@Lekruthai Khantongchai 8
Motion Infographic นำไปใชก้ บั งำนรูปแบบใด?
1. งานด้านรายการโทรทัศน์ (Television)
รายการ Loukgolf's English Room รายการ CAT English
@Lekruthai Khantongchai 9
Motion Infographic นำไปใชก้ ับงำนรูปแบบใด?
2. งานด้านภาพยนตร์ ละคร หรือมิวสิควิดโี อ (Movie/Series/MV)
วดี ทิ ศั นแ์ นะนากรมสรรพสามิต ประจาปี พ.ศ. 2560 MV Tom Room39
@Lekruthai Khantongchai 10
Motion Infographic นำไปใชก้ บั งำนรูปแบบใด?
3. งานด้านการต์ นู (Animation)
Animation Virus Sika Animated Short Films. net
@Lekruthai Khantongchai 11
Motion Infographic นำไปใชก้ ับงำนรูปแบบใด?
4. งานด้านการนาเสนอส่ือมลั ติมีเดยี (Presentation & Multimedia)
CV Motion Graphic อว้ นลงพุง คอื อะไร
@Lekruthai Khantongchai 12
Motion Infographic นำไปใช้กับงำนรูปแบบใด?
@Lekruthai Khantongchai 13
@Lekruthai Khantongchai 14
MOTION INFOGRAPHICS
กาลามสูตร คือ พระสูตรท่ีพระพุ ทธเจ้าทรงแสดงแก่ชาวกาลามะ หมู่บ้านเกสปุตตนิคม แคว้นโกศล (เรียกอีกอย่างว่า เกสปุตต
สูตร) กาลามสูตรเป็นหลักแห่งความเช่ือท่ีพระพุทธองค์ทรงวางไว้ให้แก่พุทธศาสนิกชน ไม่ให้เช่ือสิ่งใด ๆ อย่างงมงายโดยไม่ใช้ปัญญา
พิจารณาให้เห็นจริงถึงคุณโทษหรอื ดีไมด่ ีก่อนเช่ือ
อย่าเชื่อด้วยการถอื สืบ ๆ กันมา โดย PTT Public Company Limited อยา่ เชื่อเพราะฟงั ตามกนั มา โดย PTT Public Company Limited
@Lekruthai Khantongchai 15
อยำกได้ Motion Infographic ดี ๆ
ต้อง “เร่มิ ” จำกอะไร
@Lekruthai Khantongchai 16
Motion Infographic and The creative process
1. สรา้ ง Direction Concept
วางแผนความคดิ
สรา้ งทศิ ทางของเนื้อเรื่อง แหล่งทม่ี ารูปภาพ: http://infographic.in.th/infographic/เบอื้ งหลงั การทา-motion-graphic-1-ชนิ้
ท่ีจะเล่าให้หลากหลาย 17
@Lekruthai Khantongchai
Motion Infographic and The creative process
1. สรา้ ง Direction Concept ดว้ ย Mind map
@Lekruthai Khantongchai 18
ข้ันตอนกำรสร้ำง Direction Concept
1. กาหนดจดุ ประสงค์ 2. กาหนดกลมุ่ เปา้ หมาย 3. มีใจความสาคญั 4. เน้อื หาทันสมยั ส้ัน 5. สารวจ รวบรวมข้อมลู
การนาเสนอใหช้ ัดเจน ใหต้ รง เพียงเร่อื งเดียว กระชบั ตรงประเดน็ ท่ีถูกต้อง นา่ เชือ่ ถือ
6. หวั เรื่องดงึ ดูด 7. ออกแบบใหส้ วย 8. เผยแพร่ 9. ระบุและอา้ งองิ ทม่ี า
ความสนใจ นา่ ติดตาม โดดเด่น สะดดุ ตา ให้ชาวโลกรู้ อย่างชัดเจน
@Lekruthai Khantongchai 19
Motion Infographic and The creative process
2. สร้าง Script
เขยี นบทพูด
ระยะเวลา 1.30 – 2.30 นาที แหลง่ ที่มารูปภาพ: http://infographic.in.th/infographic/เบื้องหลงั การทา-motion-graphic-1-ช้นิ
20
เพื่อความกระชับและความเขา้ ใจงา่ ย
โดยตอ้ งไม่ส้ันและไม่ยาวจนเกนิ ไป
@Lekruthai Khantongchai
ข้ันตอนกำรสร้ำง Script
1. Introduction 2. Main Idea 3. Ending
@Lekruthai Khantongchai 21
Motion Infographic and The creative process
3. สร้าง Storyboard
เขยี นแบบรา่ งกระดาน
ร่างภาพแบบง่าย ๆ ด้วยมอื แหล่งท่มี ารปู ภาพ: http://infographic.in.th/infographic/เบือ้ งหลังการทา-motion-graphic-1-ช้นิ
ควบคู่กบั Script เพ่ือเล่า 22
เร่อื งราวใหเ้ ห็นภาพชดั ขึน้
@Lekruthai Khantongchai
Motion Infographic and The creative process
3. สรา้ ง Storyboard
@Lekruthai Khantongchai 23
แบบร่ำงกระดำน Storyboard
Scene Intro/Main Idea/End Shot……………... Time…………………… Scene Intro/Main Idea/End Shot………………... Time……………………
❑ เสียงบรรยาย ❑ เสียงบรรยาย
...................................................................................................................................................... .........................................................................................................................................................
.................................................................................................................................................. ...............................................................................................................................................
❑ เสียงดนตรบี รรเลง / เสียงเอฟเฟก็ ต์ ❑ เสียงดนตรบี รรเลง / เสียงเอฟเฟก็ ต์
...................................................................................................................................................... .........................................................................................................................................................
.................................................................................................................................................. ...............................................................................................................................................
❑ การเคลอ่ื นไหว (Animate/Effect) ❑ การเคลอื่ นไหว (Animate/Effect)
........@........L......e......k......r....u......t..h........a....i........K......h......a......n......t....o......n......g......c......h......a......i...................................................................................................................................................................... .........................................................................................................................................................
...............................................................................................................................2..4..............
พิมพช์ อื่ ลิงค์
สำหรับทำ
Workshop 1
bit.ly/sb-vdo
พมิ พ์ชื่อลงิ ค์
สำหรับสง่
Workshop 1
bit.ly/sentsbvdo
Motion Infographic and The creative process
4. สรา้ ง Mood Board
กระดานบรรยาย
อารมณ์ของงาน
เพ่ือใหส้ มาชิกท่ีทาและหัวหนา้ งาน
เห็นภาพไปในทิศทางเดียวกนั
แหล่งทม่ี ารปู ภาพ: http://infographic.in.th/infographic/เบอื้ งหลังการทา-motion-graphic-1-ช้นิ
@Lekruthai Khantongchai 27
Motion Infographic and The creative process
4. สรา้ ง Mood Board
@Lekruthai Khantongchai 28
Motion Infographic and The creative process
4. สรา้ ง Mood Board
@Lekruthai Khantongchai 29
Motion Infographic and The creative process
5. สรา้ ง Animate
กาหนดการเคลือ่ นไหว
การทาภาพกราฟกิ เคลื่อนไหว แหลง่ ท่มี ารปู ภาพ: http://infographic.in.th/infographic/เบอื้ งหลงั การทา-motion-graphic-1-ช้นิ
หรือทาเอฟเฟก็ ต์ เพ่ิมความ 30
น่าสนใจให้กบั งานวิดโี อ
@Lekruthai Khantongchai
Motion Infographic and The creative process
5. สร้าง Animate
@Lekruthai Khantongchai 31
Motion Infographic and The creative process
สรา้ ง Animate ดว้ ยโปรแกรม PowerPoint
Entrance Emphasis
@Lekruthai Khantongchai 32
Motion Infographic and The creative process
สรา้ ง Animate ดว้ ยโปรแกรม PowerPoint
Exit Motion Path
@Lekruthai Khantongchai 33
Motion Infographic and The creative process
สรา้ ง Animate ดว้ ยโปรแกรม Canva
@Lekruthai Khantongchai 34
Motion Infographic and The creative process
6. สร้าง Mix Sound
การใส่เสียง
เพ่ิมความเรา้ ใจ
เพ่ือสร้างให้เกิดอารมณร์ ่วม แหลง่ ทีม่ ารูปภาพ: http://infographic.in.th/infographic/เบอื้ งหลงั การทา-motion-graphic-1-ช้นิ
ในการชมภาพวดิ โี อ 35
@Lekruthai Khantongchai
Motion Infographic and The creative process
6. สร้าง Mix Sound
1. เสียงดนตรีบรรเลง (BG Music)
2. เสียงเอฟเฟก็ ต์ (Sound Effects)
3. เสียงบรรยาย (Voice)
https://bit.ly/youtubesoundef แหลง่ ท่มี ารปู ภาพ: https://studio.youtube.com/channel/UCoeLPHkI5G5lwcl-
yA6zSQA/music
@Lekruthai Khantongchai
36
พรอ้ มแล้ว “ลยุ ”
@Lekruthai Khantongchai 37
ตั ว อ ย่ า ง
ก า ร วิ เ ค ร า ะ ห์ เ นื้ อ ห า
Motion Infographic
@Lekruthai Khantongchai 38
กิจกรรม
ให้วิเคราะห์เน้ือหาจากข้อมูลต่อไปน้ี เพื่ อผลิตสื่อมัลติมีเดียอินโฟกราฟิก
ไวรัสซกิ า หรอื ไข้ซกิ า เป็นเชอ้ื ไวรัสในตระกูลเฟลวไิ วรสั (flavivirus) มลี กั ษณะคล้ายคลึงกับ ไวรสั ไขเ้ หลอื ง
ไวรสั เดงกี ซ่งึ เป็นสาเหตุของไขเ้ ลือดออก โรคตดิ ต่อทีไ่ ร้วัคซนี ป้องกนั ภัยเงยี บจากยุงลาย กลมุ่ เส่ยี งตดิ เช้อื
ไวรสั ซกิ ามากที่สดุ คอื กล่มุ สตรตี ง้ั ครรภ์ ซึ่งหากตดิ เชื้อแลว้ จะทาใหท้ ารกในครรภไ์ ดร้ บั อันตรายด้วย คอื จะ
ทาใหเ้ ดก็ มศี ีรษะเล็กกว่าปกติ ดังนัน้ จงึ มีคาเตอื นหญงิ ตัง้ ครรภ์ไมค่ วรเดนิ ทางไปในประเทศที่มกี ารระบาด
ของโลก หรือหากเป็นประชากรในประเทศท่มี กี ารระบาดก็ขอให้ชะลอการต้ังครรภ์ออกไปกอ่ น แต่หากหญิง
ต้ังครรภม์ ีอาการไขข้ น้ึ สูง ผน่ื แดงขึน้ ตามตัว เย่ือบตุ าอักเสบ ปวดกลา้ มเนอื้ และขอ้ ต่อ รูส้ กึ ไม่สบายเนอ้ื
สบายตวั และปวดหัว ตอ้ งรบี พบแพทย์ เพอื่ ทาการเจาะเลือดตรวจหาเช้ือ องค์การอนามยั โลกระบุวา่ มผี ู้
ติดเช้อื ราว 1 ใน 4 ท่ีจะแสดงอาการออกมาให้เหน็ หลงั ไดร้ บั เชือ้ ซง่ึ จะปรากฏอาการคล้ายคลงึ กับอาการ
ของโรคไขเ้ ลอื ดออก แตอ่ าการเหลา่ นีส้ ามารถทเุ ลาลงภายในเวลา 2-7 วัน หากไดร้ บั การรักษาอยา่ ง
ถูกตอ้ งและทันท่วงที ไมร่ ุนแรงเทา่ โรคไขเ้ ลอื ดออก
@Lekruthai Khantongchai 39
@Lekruthai Khantongchai 40
@Lekruthai Khantongchai 41
@Lekruthai Khantongchai 42
Story Board Mood Board
@Lekruthai Khantongchai 43
ขนำดทเ่ี หมำะสำหรับ 44
FACEBOOK
INSTRGRAM
LINE
1 : 1 1080x1080 Pixels
@Lekruthai Khantongchai
นำเสนอกำรออกแบบ 45
Motion Infographic
สำหรับกำรส่ือสำรข้อมูล
@Lekruthai Khantongchai
พิมพช์ ่อื ลงิ ค์
สำหรับสง่
Workshop 2
bit.ly/sentvdo
46
เอกสำรประกอบกำรบรรยำย
https://bit.ly/sharetrain 47
@Lekruthai Khantongchai
การส่ือสารแนวใหมเ่ ปล่ยี นได้ด้วยมือเรา
@Lekruthai Khantongchai 48