12/14/2016

1

หลกสตร เทคนคการใช

MOTION GRAPHIC เพ อสรางภาพลกษณและการสอสารงานบรหารจดเกบภาษสรรพสามต

หวขอวชา■ 1)ความรพ นฐานเกยวกบ Infographic

■ 2)ความรพ นฐานเกยวกบ Motion Graphic (Gifographic)

■ 3)การสราง Layout ใหกบงาน Motion Graphic (Gifographic)

■ 4)การใชงานตวอกษรใหเหมาะสมกบการออกแบบ และการประยกตใชในลกษณะตางๆ

■ 5)การใชภาพสญลกษณ และสเพ อเพ มความนาสนใจ

■ 6)พ นฐานเครองมอทจ าเปนและการปรบแตงในเครองมอน นๆ

■ 7)เครองมอในการสรางกราฟ และ Symbols

■ 8)การน าเสนองานผานโซเชยลเนตเวรค หรอเผยแพรผานโลกออนไลน

12/14/2016

2

1)ความรพ นฐานเก ยวกบ

INFOGRAPHIC

1)ความรพ นฐานเกยวกบ Infographic■ Infographics คออะไร

■ หวใจของ Inforgraphics

■ ความเปนมาของ Infographics

■ หมวดหมของ Infographics

■ ค าถามกอนจดท า Infographic

■ เครองมอท จะท าใหทกคนสามารถสรางInfographic ไดงายกวาการวาดรปทกรปข นมาเอง

■ การออกแบบอนโฟกราฟกส ออกแบบงานโดยยดความงาย สบายตา ไมรก และสามารถสอถงขอมลอยางรวดเรว

■ การสรางอนโฟกราฟกสใหดงดดความสนใจ(Designing An Amazing Infographics)

■ การสรางอนโฟกราฟกสใหมประสทธภาพ(Designing Effective Infographics)

■ สงท ไมควรท าในการออกแบบอนโฟกราฟกส

■ การสรปใจความไวใน Infographic

12/14/2016

3

Infographics คออะไร■ Infographic ยอมาจาก

Information Graphic คอ ภาพหรอกราฟกซงบงช ถงขอมล ไมวาจะเปน

สถต ความร ตวเลข ฯลฯ

หวใจของ Inforgraphics■ ทกษะทางดานอนโฟกราฟกนนจ าเปนตองจดระเบยบขอมลททงมากและ

หลากหลายให

“จบไดในภาพเดยว”

12/14/2016

4

ความเปนมาของ Infographics■ กหลาบของไนตงเกล อนโฟกราฟกยคบกเบก

หมวดหมของ Infographics ■ 1.ขาวเดน ประเดนรอน และสถานการณวกฤต

■ 2.สอน ฮาวท

■ 3.ใหความร Did You Know

■ 4.บอกเลาต านานหรอววฒนาการ

■ 5.อธบายผลส ารวจ และงานวจย

■ 6.กระตนใหเกดการเปลยนแปลงพฤตกรรม

■ 7.โปรโมทสนคาและบรการ

12/14/2016

5

ค าถามกอนจดท า Infographic ■ อยากสราง Infographic งายๆ ท าอยางไร?

■ ขอควรจ าในการออกแบบ Infographics

– ควรต งค ำถำมกอนลงมอท ำ

– เตรยมขอมลทถกตอง

– วำงรปแบบโครงรำง

– ออกแบบโดยยดควำมงำย

– อยำลมสรปใจควำมส ำคญ

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/

การออกแบบอนโฟกราฟกส ออกแบบงานโดยยดความงาย

สบายตา ไมรก และสามารถสอถงขอมลอยางรวดเรว

เรยบงายเขาไว

ตรวจสอบขอเทจจรง

ใชสใหเปน

ใสเฉพาะตวเลขทจ าเปน

ท าค าบรรยายใหนาอาน

กระชบเนอหาเขาไว

ขนาดมผล

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 ittell a story)

การออกแบบทดท าใหม ประสทธภาพ (Good

design is effective)

ใชสท ดงดดความสนใจ (Choose

attractive colors)

ใชค าพดทกระชบ (Use short

texts)

ตรวจสอบตวเลขขอมล (Check your numbers)

ท าไฟลอนโฟกราฟกใหเลก (Make

the file size small)

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

12/14/2016

9

การสรปใจความไวใน Infographic■ ดไซน ‘สวย’ แตไม ‘สอ’ ■ ดไซน ‘สอ’ แต ‘ผดสาร’

มาเลนกนเถอะhttps://quizlet.com/live

12/14/2016

10

2)ความรพ นฐานเกยวกบ MOTION GRAPHIC

(GIFOGRAPHIC)

2)ความรพ นฐานเกยวกบ Motion Graphic (Gifographic)

■ Gifographic : แนวทางใหมของ Infographic ป 2017

■ ท า ‘Gifographic’ Infographic แบบเคล อนไหวไดแบบไหนถงเวรค

■ Top 5 ตลาด Gifographics และวธการสราง

12/14/2016

11

Gifographic : แนวทางใหมของ Infographic ป 2017

■ ‘Gifographic’ น นคอ สวนผสม

ระหวาง 3 สง ไดแก GIF ,

Information และ Graphic หรอจะเรยกวามนเปนววฒนาการหน งของ

Infographic กวาได มการใชภาพเคล อนไหวในการใหขอมลแทน

Infographic แบบด งเดม

Gifographic แนวทางใหมทนาจบตามอง

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.เรองเบาสมอง

12/14/2016

13

Top 5 ตลาด Gifographics และวธการสราง

■ gifographics เหลาน ไมเพยง

รนรมยตา แตมประโยชนอยางไมนาเช อ

ส าหรบนกการตลาดไดเปนอยางด

12/14/2016

14

3)การสราง LAYOUT ใหกบงานMOTION GRAPHIC

(GIFOGRAPHIC)

12/14/2016

15

3)การสราง Layout ใหกบงาน Motion Graphic (Gifographic)

■ ออกแบบ Infographic ดวย 9 Layou

■ วธการสราง Gifographics

■ 10 ข นตอน เปล ยน Infographic ใหเคล อนไหวไดแบบ Gifographic

ออกแบบ Infographic ดวย 9 Layou■ ถาเลอกรปแบบของ

Infographic ไมเหมาะสมกบขอมล

กจะท าใหขอมลถกลด

ความหมาย หรอไม

นาสนใจเทาทควร

12/14/2016

16

วธการสราง Gifographics■ ขอส าคญกอนทจะเรมสราง gifographic A: ตองแนใจวาขนาดของมนจะพอดกบท

คณจะโพสตไว

10 ข นตอน เปล ยน Infographic ใหเคล อนไหวไดแบบGifographic

12/14/2016

17

12/14/2016

18

4)การใชงานตวอกษรใหเหมาะสม

กบการออกแบบ และการประยกตใชในลกษณะตางๆ

4)การใชงานตวอกษรใหเหมาะสมกบการออกแบบ และการ

ประยกตใชในลกษณะตางๆ

■ การสรางตวอกษร

12/14/2016

19

5)การใชภาพสญลกษณ

และสเพ อเพ มความนาสนใจ

5)การใชภาพสญลกษณ และสเพ อเพ มความนาสนใจ

■ เทคนคการเลอกใชส ส าหรบการออกแบบ วางรปแบบโครงรางของส

12/14/2016

20

รวมกลมกนคด

6)พ นฐานเครองมอทจ าเปน

และการปรบแตงในเครองมอน นๆ

12/14/2016

21

6)พ นฐานเครองมอท จ าเปนและการปรบแตงในเครองมอน นๆ

■ โปรแกรมทใชสราง Infographics

■ การใช Gimp ตกแตงภาพ

■ การสรางภาพกราฟกดวย Inkscape

■ การสรางงาน Infographic ดวยบรการบนเวบไซต Piktochart

■ วธการ 2 วธงายๆในการท าภาพเคล อนไหว GIF

โปรแกรมทใชสราง Infographics■ โปรแกรมทมลขสทธ ไดแก Illustrator, Photoshop หรอ

Powerpoint

■ โปรแกรม Opensource ไดแก Inkscape, Gimp หรอ Scribus

■ การสราง Infographics จากแหลงทใหบรการฟรและดทมอยบนโลกออนไลน

12/14/2016

22

การใช Gimp ตกแตงภาพ■ GIMP เปนโปรแกรมสรางสรรคงานกราฟกหรอตกแตงภาพของ Linux ม

ความสามารถเทยบเทาโปรแกรม Adobe Photoshop ไมวาจะเปนเรอง

Layer, Channel หรอ Filter

การสรางภาพกราฟกดวย Inkscape■ Inkscape เปนโปรแกรมวาดภาพแบบเวกเตอร 2 มต มลกษณะการใชงานเหมอนกบ

Adobe Illustrator หรอ Corel Draw ซงเปนทรจกกนเปนอยางด แต

Inkscape เปนซอฟตแวรโอเพนซอรสทเปนของฟร

12/14/2016

23

การสรางงาน Infographic ดวยบรการบนเวบไซตPiktochart

■ เปนเวบไซตทใหบรการดานการสรางงาน Infographic ซงภายในเวบไซตมเครองมอมากมายทจะชวยอ านวยความสะดวกในการออกแบบงาน รวมถงมแมแบบส าเรจรปใหเลอกใช

อกดวย

วธการ 2 วธงายๆในการท าภาพเคล อนไหว GIF■ สรางภาพเครองไหว GIF แบบงายๆ ผานทางออนไลน

■ สรางภาพเคล อนไหว GIF ผานโปรแกรม GIMP

12/14/2016

24

7)เครองมอในการสรางกราฟ

และ SYMBOLS

7)เครองมอในการสรางกราฟ และ Symbols■ การสราง Infographics จากแหลงทใหบรการฟรและดท มอยบนโลกออนไลน

■ ลขสทธรป เรองทคนท างานกราฟกและเวบไซตทกคนตองร

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” กเสรจ แตในการท างานจรงๆ

อาจท าใหเสยเงนหลายแสนได

12/14/2016

26

8)การน าเสนองานผานโซเชยลเนตเวรค

หรอเผยแพรผานโลกออนไลน

8)การน าเสนองานผานโซเชยลเนตเวรค หรอเผยแพรผานโลกออนไลน

■ การเผยแพร Infographics ผาน Social Network หรอโลกออนไลน

■ การแทรกลงคขอมลแจงหนวยงานทรบผดชอบ

12/14/2016

27

การเผยแพร Infographics ผาน Network หรอโลกออนไลน

■ การออกแบบ Infographic ไมควรยดเยยดดวยตวอกษรปรมาณมากลงในรป

■ ความถกตองของขอมลคอสงส าคญทสด

■ วางไวบนเวบไซตของตวเองกอนเปนอนดบแรก

■ ท าเปนหลายๆ ช นมาประกอบกนเปนช นใหญได

■ อยาลมนกถงงบประมาณ และปรมาณคนทตองมาลงแรงในการท า

การแทรกลงคขอมลแจงหนวยงานทรบผดชอบ

■ การแทรก URL ลงกขอมล รวมถงเวบไซตสวนตวหรอหนวยงานของเพ อบอกใหคนอนร

วา Infographic น เปนความรบผดชอบของใครน นเอง