Post on 14-Oct-2020
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
แบบประเมนผลการอบรม