แนวทางใหม่ของการสร้างสื่อ 'Gifographic' Infographic แบบเคลื่อนไหว

1. 12/14/2016
1
หลักสูตร เทคนิคการใช้
MOTION GRAPHIC
เพื่อสร้างภาพลักษณ์และการสื่อสารงานบริหารจัดเก็บภาษีสรรพสามิต
หัวข้อวิชา
■ 1)ความรู้พื้นฐานเกี่ยวกับ Infographic
■ 2)ความรู้พื้นฐานเกี่ยวกับ Motion Graphic (Gifographic)
■ 3)การสร้าง Layout ให้กับงาน Motion Graphic (Gifographic)
■ 4)การใช้งานตัวอักษรให้เหมาะสมกับการออกแบบ และการประยุกต์ใช้ในลักษณะต่างๆ
■ 5)การใช้ภาพสัญลักษณ์ และสีเพื่อเพิ่มความน่าสนใจ
■ 6)พื้นฐานเครื่องมือที่จาเป็นและการปรับแต่งในเครื่องมือนั้นๆ
■ 7)เครื่องมือในการสร้างกราฟ และ Symbols
■ 8)การนาเสนองานผ่านโซเชียลเน็ตเวิร์ค หรือเผยแพร่ผ่านโลกออนไลน์

2. 12/14/2016
2
1)ความรู้พื้นฐานเกี่ยวกับ
INFOGRAPHIC
1)ความรู้พื้นฐานเกี่ยวกับ Infographic
■ Infographics คืออะไร
■ หัวใจของ Inforgraphics
■ ความเป็นมาของ Infographics
■ หมวดหมู่ของ Infographics
■ คาถามก่อนจัดทา Infographic
■ เครื่องมือที่จะทาให้ทุกคนสามารถสร้าง
Infographic ได้ง่ายกว่าการวาดรูปทุกรูป
ขึ้นมาเอง
■ การออกแบบอินโฟกราฟิกส์ ออกแบบงานโดยยึด
ความง่าย สบายตา ไม่รก และสามารถสื่อถึง
ข้อมูลอย่างรวดเร็ว
■ การสร้างอินโฟกราฟิกส์ให้ดึงดูดความสนใจ
(Designing An Amazing
Infographics)
■ การสร้างอินโฟกราฟิกส์ให้มีประสิทธิภาพ
(Designing Effective
Infographics)
■ สิ่งที่ไม่ควรทาในการออกแบบอินโฟกราฟิกส์
■ การสรุปใจความไว้ใน Infographic

3. 12/14/2016
3
Infographics คืออะไร
■ Infographic ย่อมาจาก
Information Graphic คือ
ภาพหรือกราฟิกซึ่งบ่งชี้ถึงข้อมูล ไม่ว่าจะเป็น
สถิติ ความรู้ ตัวเลข ฯลฯ
หัวใจของ Inforgraphics
■ ทักษะทางด้านอินโฟกราฟิกนั้นจาเป็ นต้องจัดระเบียบข้อมูลที่ทั้งมากและ
หลากหลายให้
“จบได้ในภาพเดียว”

4. 12/14/2016
4
ความเป็นมาของ Infographics
■ กุหลาบของไนติงเกล อินโฟกราฟิกยุคบุกเบิก
หมวดหมู่ของ Infographics
■ 1.ข่าวเด่น ประเด่นร้อน และสถานการณ์วิกฤต
■ 2.สอน ฮาวทู
■ 3.ให้ความรู้ Did You Know
■ 4.บอกเล่าตานานหรือวิวัฒนาการ
■ 5.อธิบายผลสารวจ และงานวิจัย
■ 6.กระตุ้นให้เกิดการเปลี่ยนแปลงพฤติกรรม
■ 7.โปรโมทสินค้าและบริการ

5. 12/14/2016
5
คาถามก่อนจัดทา Infographic
■ อยากสร้าง Infographic ง่ายๆ ทา
อย่างไร?
■ ข้อควรจาในการออกแบบ
Infographics
– ควรตั้งคำถำมก่อนลงมือทำ
– เตรียมข้อมูลที่ถูกต้อง
– วำงรูปแบบโครงร่ำง
– ออกแบบโดยยึดควำมง่ำย
– อย่ำลืมสรุปใจควำมสำคัญ

6. 12/14/2016
6
เครื่องมือที่จะทาให้ทุกคนสามารถสร้าง Infographic
ได้ง่ายกว่าการวาดรูปทุกรูปขึ้นมาเอง
■ 1. Hohli ผู้ช่วยสร้างแผนภูมิออนไลน์
http://charts.hohli.com
■ 2. Wordle สร้างก้อนเมฆข้อความ
http://www.wordle.net/
■ 3. Cacoo สร้างแผนภาพไดอะแกรม
สุดง่าย http://cacoo.com
■ 4. Inkscape ดึงภาพมาใช้ฟรี
http://inkscape.org/
■ 5. Visual.ly สร้างและค้นหา
Infographic
http://visual.ly/
การออกแบบอินโฟกราฟิกส์ ออกแบบงานโดยยึดความง่าย
สบายตา ไม่รก และสามารถสื่อถึงข้อมูลอย่างรวดเร็ว
เรียบง่ายเข้าไว้
ตรวจสอบ
ข้อเท็จจริง
ใช้สีให้เป็ น
ใส่เฉพาะตัว
เลขที่จาเป็ น
ทาคาบรรยาย
ให้น่าอ่าน
กระชับเนื้อหา
เข้าไว้
ขนาดมีผล

7. 12/14/2016
7
การสร้างอินโฟกราฟิกส์ให้ดึงดูดความสนใจ
(Designing An Amazing Infographics)
การสร้างอินโฟกราฟิกส์ให้มีประสิทธิภาพ
(Designing Effective Infographics)
เน้นที่หัวข้อหลักหัวข้อ
เดียว (Focus
on a single
topic)
ออกแบบให้เข้าใจง่าย
(Keep it
simple)
ข้อมูลเป็นสิ่งสาคัญ
(Data is
important)
แน่ใจว่าข้อเท็จจริง
ถูกต้อง (Be
sure facts
are correct)
ให้อินโฟกราฟิกเป็นตัว
เล่าเรื่อง (Let it
tell a story)
การออกแบบที่ดีทาให้มี
ประสิทธิภาพ
(Good
design is
effective)
ใช้สีที่ดึงดูดความสนใจ
(Choose
attractive
colors)
ใช้คาพูดที่กระชับ
(Use short
texts)
ตรวจสอบตัวเลขข้อมูล
(Check your
numbers)
ทาไฟล์อินโฟกราฟิกให้
เล็ก (Make
the file size
small)

8. 12/14/2016
8
สิ่งที่ไม่ควรทาในการออกแบบอินโฟกราฟิกส์
■ อย่าใช้ข้อมูลมากเกินไป (Don’t use too much text)
■ อย่าทาข้อมูลที่นาเสนอให้ยุ่งยากซับซ้อน (Don’t make confusing data presentation)
■ อย่าใช้สีมากเกินไป (Don’t overuse color)
■ อย่าใส่ตัวเลขมากเกินไป (Don’t place too much numbers)
■ อย่าละเลยข้อมูลที่ไม่สามารถระบุแยกแยะได้ (Don’t leave figures unidentified)
■ อย่าสร้างอินโฟกราฟิกส์ให้น่าเบื่อ (Don’t make it boring)
■ อย่าใช้วิธีการพิมพ์ผิด (Don’t misuse typography)
■ อย่านาเสนอข้อมูลที่ผิด (Don’t present wrong information)
■ อย่าเน้นที่การออกแบบ (Don’t focus on design)
■ อย่าใช้แบบเป็นวงกลม (Don’t use a circus layout

9. 12/14/2016
9
การสรุปใจความไว้ใน Infographic
■ ดีไซน์ ‘สวย’ แต่ไม่ ‘สื่อ’ ■ ดีไซน์ ‘สื่อ’ แต่ ‘ผิดสาร’
มาเล่นกันเถอะ
https://quizlet.com/live

10. 12/14/2016
10
2)ความรู้พื้นฐานเกี่ยวกับ MOTION GRAPHIC
(GIFOGRAPHIC)
2)ความรู้พื้นฐานเกี่ยวกับ Motion Graphic (Gifographic)
■ Gifographic : แนวทางใหม่ของ Infographic ปี 2017
■ ทา ‘Gifographic’ Infographic แบบเคลื่อนไหวได้แบบไหนถึงเวิร์ค
■Top 5 ตลาด Gifographics และวิธีการสร้าง

11. 12/14/2016
11
Gifographic : แนวทางใหม่ของ Infographic ปี 2017
■ ‘Gifographic’ นั้นคือ ส่วนผสม
ระหว่าง 3 สิ่ง ได้แก่ GIF ,
Information และ Graphic
หรือจะเรียกว่ามันเป็นวิวัฒนาการหนึ่งของ
Infographic ก็ว่าได้ มีการใช้
ภาพเคลื่อนไหวในการให้ข้อมูลแทน
Infographic แบบดั้งเดิม
Gifographic แนวทางใหม่ที่น่าจับตามอง

12. 12/14/2016
12
มาลองดูกันให้ชัด ๆ ว่า Gifographic มีประโยชน์อย่างไรบ้าง
1. อ่านง่าย อ่านได้ไว ไม่เสียเวลา
2. เปลี่ยน Infographic ที่น่าเบื่อ ให้สนุกขึ้น
3.ทุกกระบวนการ เข้าใจได้ในภาพเดียว
4. สร้างเอกลักษณ์ให้แบรนด์ได้
ทา ‘Gifographic’ Infographic แบบเคลื่อนไหว
ได้แบบไหนถึงเวิร์ค
■ 1.ตัวเลข สถิติ
■ 2.การเคลื่อนไหวของสิ่งมีชีวิต
■ 3.How To แบบ Step By Step
■ 4.การทางานของแบรนด์ หรือ SME ต่าง ๆ
■ 5.เชิงธุรกิจ การตลาด
■ 6.ให้ข้อมูลเชิงลึก
■ 7.กีฬา การออกกาลังกาย
■ 8.สุขภาพ
■ 9.เรื่องเบาสมอง

13. 12/14/2016
13
Top 5 ตลาด Gifographics และวิธีการสร้าง
■gifographics เหล่านี้ไม่เพียง
รื่นรมย์ตา แต่มีประโยชน์อย่างไม่น่าเชื่อ
สาหรับนักการตลาดได้เป็นอย่างดี

14. 12/14/2016
14
3)การสร้าง LAYOUT ให้กับงาน
MOTION GRAPHIC
(GIFOGRAPHIC)

15. 12/14/2016
15
3)การสร้าง Layout ให้กับงาน Motion
Graphic (Gifographic)
■ ออกแบบ Infographic ด้วย 9 Layou
■ วิธีการสร้าง Gifographics
■ 10 ขั้นตอน เปลี่ยน Infographic ให้เคลื่อนไหวได้แบบ Gifographic
ออกแบบ Infographic ด้วย 9 Layou
■ถ้าเลือกรูปแบบของ
Infographic
ไม่เหมาะสมกับข้อมูล
ก็จะทาให้ข้อมูลถูกลด
ความหมาย หรือไม่
น่าสนใจเท่าที่ควร

16. 12/14/2016
16
วิธีการสร้าง Gifographics
■ ข้อสาคัญก่อนที่จะเริ่มสร้าง gifographic A: ต้องแน่ใจว่าขนาดของมันจะพอดีกับที่
คุณจะโพสต์ไว้
10 ขั้นตอน เปลี่ยน Infographic ให้เคลื่อนไหวได้แบบ
Gifographic

17. 12/14/2016
17

18. 12/14/2016
18
4)การใช้งานตัวอักษรให้เหมาะสม
กับการออกแบบ และการประยุกต์ใช้ในลักษณะต่างๆ
4)การใช้งานตัวอักษรให้เหมาะสมกับการออกแบบ และการ
ประยุกต์ใช้ในลักษณะต่างๆ
■ การสร้างตัวอักษร

19. 12/14/2016
19
5)การใช้ภาพสัญลักษณ์
และสีเพื่อเพิ่มความน่าสนใจ
5)การใช้ภาพสัญลักษณ์ และสีเพื่อเพิ่มความน่าสนใจ
■ เทคนิคการเลือกใช้สี สาหรับการออกแบบ วางรูปแบบโครงร่างของสี

20. 12/14/2016
20
รวมกลุ่มกันคิด
6)พื้นฐานเครื่องมือที่จาเป็น
และการปรับแต่งในเครื่องมือนั้นๆ

21. 12/14/2016
21
6)พื้นฐานเครื่องมือที่จาเป็นและการปรับแต่งในเครื่องมือนั้นๆ
■ โปรแกรมที่ใช้สร้าง Infographics
■ การใช้ Gimp ตกแต่งภาพ
■ การสร้างภาพกราฟิกด้วย Inkscape
■ การสร้างงาน Infographic ด้วยบริการบนเว็บไซต์ Piktochart
■วิธีการ 2 วิธีง่ายๆในการทาภาพเคลื่อนไหว GIF
โปรแกรมที่ใช้สร้าง Infographics
■ โปรแกรมที่มีลิขสิทธิ์ ได้แก่ Illustrator, Photoshop หรือ
Powerpoint
■ โปรแกรม Opensource ได้แก่ Inkscape, Gimp หรือ Scribus
■ การสร้าง Infographics จากแหล่งที่ให้บริการฟรีและดีที่มีอยู่บนโลก
ออนไลน์

22. 12/14/2016
22
การใช้ Gimp ตกแต่งภาพ
■ GIMP เป็นโปรแกรมสร้างสรรค์งานกราฟิกหรือตกแต่งภาพของ Linux มี
ความสามารถเทียบเท่าโปรแกรม Adobe Photoshop ไม่ว่าจะเป็นเรื่อง
Layer, Channel หรือ Filter
การสร้างภาพกราฟิกด้วย Inkscape
■ Inkscape เป็นโปรแกรมวาดภาพแบบเว็กเตอร์ 2 มิติ มีลักษณะการใช้งานเหมือนกับ
Adobe Illustrator หรือ Corel Draw ซึ่งเป็นที่รู้จักกันเป็นอย่างดี แต่
Inkscape เป็นซอฟต์แวร์โอเพ่นซอร์สที่เป็นของฟรี

23. 12/14/2016
23
การสร้างงาน Infographic ด้วยบริการบนเว็บไซต์
Piktochart
■ เป็นเว็บไซต์ที่ให้บริการด้านการสร้างงาน Infographic ซึ่งภายในเว็บไซต์มีเครื่องมือ
มากมายที่จะช่วยอานวยความสะดวกในการออกแบบงาน รวมถึงมีแม่แบบสาเร็จรูปให้เลือกใช้
อีกด้วย
วิธีการ 2 วิธีง่ายๆในการทาภาพเคลื่อนไหว GIF
■ สร้างภาพเครื่องไหว GIF แบบง่ายๆ ผ่านทางออนไลน์
■ สร้างภาพเคลื่อนไหว GIF ผ่านโปรแกรม GIMP

24. 12/14/2016
24
7)เครื่องมือในการสร้างกราฟ
และ SYMBOLS
7)เครื่องมือในการสร้างกราฟ และ Symbols
■ การสร้าง Infographics จากแหล่งที่ให้บริการฟรีและดีที่มีอยู่บนโลกออนไลน์
■ ลิขสิทธิ์รูป เรื่องที่คนทางานกราฟิกและเว็บไซต์ทุกคนต้องรู้

25. 12/14/2016
25
การสร้าง Infographics จากแหล่งที่ให้บริการฟรีและดี
ที่มีอยู่บนโลกออนไลน์
■ 1. Hohli ผู้ช่วยสร้างแผนภูมิออนไลน์ http://charts.hohli.com
■ 2. Wordle สร้างก้อนเมฆข้อความ http://www.wordle.net/
■ 3. Cacoo สร้างแผนภาพไดอาแกรมสุดง่าย http://cacoo.com
■4. Inkscape ดึงภาพมาใช้ฟรี http://inkscape.org/
■ 5. Visual.ly สร้างและค้นหา Infographic http://visual.ly/
ลิขสิทธิ์รูป เรื่องที่คนทางานกราฟิกและเว็บไซต์ทุกคนต้องรู้
■ การนารูปมาใช้ในงานกราฟิกหรือเว็บไซต์น่ากลัวกว่าที่ทุกคนคิด แค่ Copy รูปจากกูเกิ้ล
แล้วเขียนในรายงานว่า “ขอบคุณรูปภาพจาก Google” ก็เสร็จ แต่ในการทางานจริงๆ
อาจทาให้เสียเงินหลายแสนได้

26. 12/14/2016
26
8)การนาเสนองานผ่านโซเชียลเน็ตเวิร์ค
หรือเผยแพร่ผ่านโลกออนไลน์
8)การนาเสนองานผ่านโซเชียลเน็ตเวิร์ค หรือเผยแพร่ผ่านโลกออนไลน์
■ การเผยแพร่ Infographics ผ่าน Social Network หรือโลกออนไลน์
■ การแทรกลิงค์ข้อมูลแจ้งหน่วยงานที่รับผิดชอบ

27. 12/14/2016
27
การเผยแพร่ Infographics ผ่าน Network หรือโลกออนไลน์
■ การออกแบบ Infographic ไม่ควรยัดเยียดด้วยตัวอักษรปริมาณมากลงในรูป
■ ความถูกต้องของข้อมูลคือสิ่งสาคัญที่สุด
■ วางไว้บนเว็บไซต์ของตัวเองก่อนเป็นอันดับแรก
■ ทาเป็นหลายๆ ชิ้นมาประกอบกันเป็นชิ้นใหญ่ได้
■อย่าลืมนึกถึงงบประมาณ และปริมาณคนที่ต้องมาลงแรงในการทา
การแทรกลิงค์ข้อมูลแจ้งหน่วยงานที่รับผิดชอบ
■ การแทรก URL ลิงก์ข้อมูล รวมถึงเว็บไซต์ส่วนตัวหรือหน่วยงานของเพื่อบอกให้คนอื่นรู้
ว่า Infographic นี้เป็นความรับผิดชอบของใครนั่นเอง