1

สารบญ

เรอง หนา 1. Infographic คออะไร? 2

2. ขนตอนการสราง Infographic 2-3

3. การออกแบบ 4

3.1 ออกแบบ Infographic ดวย 9 Layout 4-8

3.2 การเลอกส และธม 8-10

3.3 สงทควรท า / ไมควรท า 10

4. เครองมอทใชในการออกแบบ 11

4.1 Canva 11-14

4.2 Piktochart 15-19

แบบฝกหด 20

แหลงอางอง 21

แบบประเมนผลการอบรม 22

2

1.ท ำควำมเขำใจจดประสงคในกำรท ำ

2. ก ำหนดหวเรอง

3. ศกษำขอมล

4. ก ำหนดเนอหำ และ Concept

5. ออกแบบ

6. ตรวจสอบ

Infographic มาจากค าวา Information (ขอมล) + Graphic (รปภาพ)

อนโฟกราฟก หมายถง การน าขอมลหรอองคความรมาสรปเปนสารสนเทศ

ในลกษณะของกราฟกทออกแบบเปนภาพนงหรอภาพเคลอนไหว ดแลว

เขาใจงายในเวลารวดเรวและชดเจน สามารถสอใหผชมเขาใจความหมาย

ของขอมลทงหมดไดโดยไมจ าเปนตองมผน าเสนอมาชวยขยายความเขาใจ

อก

3

1. ใชการท าขอมลใหเปนภาพอยางมความหมาย

2. เขาใจงาย ไมซบซอน เปนมตรกบผอาน

3. นาสนใจ เตะตาผอาน

4. เนอหาด มประโยชน ท าใหคนอานรสกอยากจะเกบเอาไว

5. จดประกายใหคนอานคด หรอท าอะไรตอ

1. ชอเรอง : ควรใสไวตรง Header เพอเตะตาคนอาน เลอกชอเรองทครอบคลม

เนอหาโดยรวมไดทงหมด

2. แหลงทมาของขอมล : สวนมากจะเขยนสรปไวตรงดานลางสด

3. เครดตผเผยแพร/ผจดท า : ใสชอ Logo, URL ไว ใหผอานรวาใครเปนผจดท าและ

เผยแพร

4. อน ๆ : อธบายเนอหาคราวๆ เขยนชอหวขอของแตละเรอง

4

3.1 ออกแบบ Infographic ดวย 9 Layout

เหมาะส าหรบการน าบทความ งานเขยน มาเลาผาน Infographic จ าเปนตองใชการน าเสนอทเหมาะสมกบขอมลแตละชนด เชน ถามตวเลขกควรน าเสนอผานกราฟแบบตาง ๆ เทคนค : สรปบทความ และเลอกประเดนกอนน าเสนอ

เหมาะกบการเลาเ รองทม หวขอหลก

เพยงขอเดยว เชน “5 วธ” การน าเสนอแบบเปนขอ ๆ แบบนเหมาะกบเรองทไมยาวนก และไมควรเปนเรองทเครยดมากเกนไป เทคนค : ลองวเคราะหวาขอไหนสามารถรวบเปนขอเดยวกนได เพราะยงมหลายขอจะจดจ าไดยาก

หมายเหต * ภาพตวอยางการออกแบบจาก Infographic Thailand

1) Visualised

3

2) Listed

5

เหมาะกบใชเพอเปรยบเทยบระหวางของสงหนงกบอกสง โดยการน าเสนอคกนแบบนท าใหเหนภาพไดชดเจนวาแตกตางอยางไรบาง เทคนค : ใชการจดวางทเหมอนกนทงสองฝง ท าใหเหนความตางทชดเจน ใชสคตรงขามเปนตวแบง

เหมาะกบการแสดงใหเหนและใชอธบายสวนประกอบของบางสงใดสงหนง เทคนค : พยายามสรางภาพใหเหนแตละสวนประกอบ เชน ภาพเหมอนสแกนเขาไปภายใน หรอ การแยกแตละสวนออกหางกน ไมซอนกน

หมายเหต * ภาพตวอยางการออกแบบจาก Infographic Thailand

3) Comparison

4) Structure

6

เหมาะส าหรบใชเลาประวตความเปนมาเปนไปของสงใดสงหนง โดยใชเสนแทนระยะเวลา สามารถใชไดกบทกอยาง เชนประวตคน ประวตองคกร ประวตสถานท เทคนค : ใชความหางของแตละจด ชวยบอกความหางของแตละชวงเวลาได

เปนการน าเสนอแบบเปนล าดบขน เหมาะกบการเสนอเปนควซใหผอานไดทราบค าตอบทตองการโดยการอานไลลงไปตามเสนจนถงดานลางสด เทคนค : ระวงเรองความยงเหยงของเสน ใชสชวยแยกเสน ลดความสบสนในการอาน หมายเหต * ภาพตวอยางการออกแบบจาก Infographic Thailand

5) TimeLine

6) Flow chart

7

เปนการอธบายทละขนตอน เหมาะกบการอธบายขนตอนการท างาน หรอการเดนทาง เชน

ขนตอนการท างานขององคกร ขนตอนการรบพนกงานเขาท างาน เปนตน เทคนค : เรองตองนาสนใจพอทคนอยากจะรทละขนตอนขนาดน

เปน Infographic ทท าใหเราเหนวธท าบางอยาง โดยทเราเหนแลวสามารถน าไปใชไดทนท

เทคนค : ตองใหความส าคญกบการอานงาย และความเขาใจงาย มากกวาความสวยงาม

หมายเหต * ภาพตวอยางการออกแบบจาก Infographic Thailand

7) Road Map

8) Useful Bait

8

คอ Infographic ทเตมไปดวยตวเลข และกราฟ หากคณมตวเลขทนาสนใจมากเพยงพอ กสามารถน าเสนอในรปแบบนได เทคนค : ไมใชแคมตวเลขมาก แตตวเลขตองนาสนใจ หรอเกยวของกบคนอานมากพอ ถงจะมกราฟหลายประเภทแตควรเลอกสไตลกราฟกแบบเดยวกนทงภาพ เชน 3D, Flat

3.2 การเลอกส และธม

แหลงดเวบส IG : @colours.cafe

Web : https://www.color-hex.com , https://colorpalettes.net

9) Number Porn

9 1) กฎ 3 ส : ใชแค 3 ส กเพยงพอแลว

2) ใชทฤษฏ 60 30 10 โดยการแบงการออกแบบอนโฟกราฟกเปนหนวยแบบ

เปอรเซน ดงน

60% แรกคอการใชสพนของอนโฟกราฟก

30% ตอมาส าหรบสท 2 ทใชในอนโฟกราฟก

10% สดทายคอการน าสไปใชในการเนนสวนทส าคญ

วธนจะชวยใหความสมดลของสใหเขากนและเปนไปในทศทางเดยวกน

10

3) สรางความแตกตางของส เชน ถาสตวหนงสอเปนสออน ควรเลอกสพนหลงเปน

สเขม และถาสพนหลงเปนสออนกควรเลอกใหตวหนงสอเปนสเขม เพอสรางความแตกตาง

ของสใหผชมสามารถอานขอความไดงายขน

เนนทหวขอหลกขอเดยว อยาท าขอมลทท าใหซบซอน

ออกแบบใหเขาใจ อยาใชขอมลมากเกนไป

ขอมลเปนสงส าคญ อยาใสตวเลขมากเกนไป

ออกแบบใหเหมาะกบกลมเปาหมาย อยาสรางอนโฟกราฟกใหนาเบอ

ใหอนโฟกราฟกเปนตวเลาเรอง อยาใชวธการพมพผด

การออกแบบทดท าใหมประสทธภาพ อยาน าเสนอขอมลทผด

ใชสทดงดดความสนใจ อยาเนนทการออกแบบ

ใชค าพดทกระชบ อยาใชแบบเปนวงกลม

ตรวจสอบตวเลขขอมล อยาใชสมากเกนไป

สงทควรท า สงทไมควรท า 3.3

11

เวบไซต Canva เปนเครองมอออกแบบงานตาง ๆ แบบออนไลนสามารถท ากราฟกไดหลากหลาย ตงแตเอกสารสงพมพ ไปจนถงการท า Web Banner, Facebook Ads, Infographic, ปกหนงสอ ฯลฯ

4. เครองมอทใชในการออกแบบ

4.1 Canva

12

ขนตอนการใชงาน 1. เขาสเวบไซต www.canva.com

2. ลงทะเบยนใชงานโดยเลอก Facebook หรอ Gmail และสามารถลงทะเบยนผาน

Email อน ๆ ได

3. เมอลงทะเบยนเรยบรอยแลวใหเลอกท Personal และเลอกอาชพ

13

4. วธการสราง Infographics ใหเลอกไปทเครองมอ Templates (หมายเลข 1) หลงจาก

นนใหเลอก Infographics (หมายเลข 2)

5. ใหเลอก Templates ตามความเหมาะสมกบเนอทก าลงจะออกแบบ

1

2

14

6. Canva สามารถเลอกใส Graphic ตวอกษร อพโหลดรปภาพ เปลยน Font ตวอกษร และใสแผนภมตาง ๆ ไดฟร

7. วธบนทกภาพใหกดปม Download ทมมบนขวามอ เลอกเปนชนดไฟล jpg หรอ PDF

15

Piktochart เปนเวบไซตทชวยในการสรางสอการเรยนการสอนในรปแบบตาง ๆ เชน

Infographic, Presentation, Poster, Card และ Report เปนตน Piktochart ประกอบดวย

เครองมอหลากหลายทชวยในการออกแบบชนงานและม Template ส าเรจรปหลายแบบ

ชวยใหการออกแบบชนงานมความสะดวก สวยงามและมประสทธภาพ นอกจากนนยง

สามารถบนทกชนงานเปนไฟลรปสกล PNG และJPEG ไดอกดวย รวมทงยงสามารถเผยแพร

และแบงปนสสาธารณะได

4.2 Piktochart

16 ขนตอนการใชงาน

1. เขาสเวบไซต www.piktochart.com

2. ลงทะเบยนใชงานโดยเลอก Facebook หรอ Gmail และสามารถลงทะเบยนผาน

Email อน ๆ ได

3. ส าหรบการเขาใชงานครงแรกจะปรากฏหนาตางขนมาใหกรอกขอมลพนฐานทงหมด

4 Step หลงจากนนใหคลกปม Submit

17 4. วธการสราง Infographics ใหเลอกไปท Templates และ หวขอ Infographic

จากนนใหเลอก Templates ส าเรจรปตามความเหมาะสมกบเนอหาทจะออกแบบ

5. แถบเครองมอมเมน Graphics ประกอบดวยเมนยอย 4 เมน คอ

- Shapes & Line เปนตวชวยในการสรางรปทรง

ตาง ๆ และเสนตรง

- Icons เปนสญลกษณหรอรปภาพทใชสอแทน

ความหมายตาง ๆ

- Photos คลงรปภาพทอยในเวบไซตโดยแบงเปน

หมวดหม

- Photo Frame คลงกรอบรปภาพในรปแบบตาง ๆ

1

2

18 6. นอกจากนยงมเมน Background สามารถเลอกพนหลง และเมน Text สามารถ

ใสตวอกษรส าเรจรปไดอกดวย

7. เมน Tools ประกอบดวย

- Charts แผนภม หรอ แผนกราฟ ทเขยน

ขนโดยอาศยการกรอกขอมลรายละเอยดท

ตองการเขาไป

- Maps การแทรกแผนทเขาไปในชนงาน

โดยแบง ตามโซนพรอมบอกรายละเอยด

ของพนทตางๆ

- VDO การแทรกวด โอเขาไปในชนงาน

โดยการใสLinkวดโอในชอง Video URL

และคลกปม INSERT

19 8. วธการ Download File ม 2 วธ ดงน

- คลกทเมน File มมบนดานซายมอ แลวคลกท Download as Image

- คลกทเมน Download มมบนดานขวามอ จะปรากฏหนาจอใหคลกเลอกความละเอยด

ของรปภาพ และประเภทของไฟลขอมล ซงในโหมดฟรสามารถดาวนโหลดไฟล

ประเภท PNG และ JPEG เทานน และรปภาพทไดจะมโลโก Piktochart ตดอย

ดานลางของรปภาพกรณทตองการดาวนโหลดเปนไฟล PDF จะตองท าการอพเกรด

สมาชกซงจะมคาใชจายเพมเตม

20

แบบฝกหด

ท าแผนผบ ประชาสมพนธสายดวนส านกงาน กสม. 1377

เสรจแลวสงผลงานท Line@ ศนยสารสนเทศสทธมนษยชน กสม.

หรอ E-mail NHRCT.Library@gmail.com

21

เอกสารอางอง

Infographic Thailand. (2563). Infographic Design Rules.

สบคนจาก: http://wow.in.th/0y8G

Infographic Thailand. (2563). ออกแบบ Infographic ดวย 9 Layout.

สบคนจาก: http://wow.in.th/O23L

learningstudio.info. (2563). การสรางแบบอนโฟกราฟกส

(Infographics Design). สบคนจาก: http://wow.in.th/Zn1B

PresentationX. (2563). เทคนคการเลอกใชส ส าหรบการออกแบบ

Presentation. สบคนจาก: http://wow.in.th/i5LD

22

แบบประเมนผลการอบรม