IT NURSE & INFOGRAPHIC
SUMONTHIRA
1
¡Í§¡ÒþÂÒºÒÅ Êҹѡ§Ò¹»ÅÑ´¡ÃзÃǧÊÒ¸ÒóÊØ¢ Ñ´»ÃЪØÁàªÔ§» ԺѵԡÒà àÃ×ͧ “¡ÒþѲ¹ÒÈÑ¡ÂÀÒ¾¾ÂÒºÒÅÊÒÃʹà·È” ÃÐËÇÒ§Çѹ·Õ 14-15 ¸Ñ¹ÇÒ¤Á 2560 «Ö§ã¹¡ÒûÃЪØÁ¤Ãѧ¹Õ à¾×;Ѳ¹ÒÊÁÃö¹Ð´Ò¹à·¤â¹âÅÂÕÊÒÃʹà·È·Ò§¡ÒþÂÒºÒÅ ÊÃÒ§¤ÇÒÁÃÙ¤ÇÒÁà¢Òã¨ã¹¡Ò÷ҧҹÂؤ´Ô Ô·ÑÅ áÅÐÊÒÁÒö໹¼Ù¹ÒãËà¡Ô ¡ÒÃà»ÅÕ¹á»Å§ ÊÙâç¾ÂÒºÒÅä´ ªÇ»ÃÐÊÒ¹§Ò¹ ¤ÇÒÁà¢Ò㨠໹¾×¹·ÕáÅ¡à»ÅÕ¹àÃÕ¹Ã٢ͧà¤Ã×Í¢Ò áÅÐ໹áËŧ¢ÍÁÙŢͧÊǹ¡ÅÒ§ à¾×Í»ÃСͺ¡ÒõѴÊÔ¹ã¨ÊÒËÃѺ¼ÙºÃÔËÒÃä´ ã¹¡ÒûÃЪØÁ¤Ãѧ¹ÕÁÕËÅÒÂàÃ×ͧ·Õ¹Òʹ㨠áÅÐ Infographic : ¡ÒÃà»ÅÕ¹¢ÍÁÙÅ·Õ à¢Òã¨ÂÒ¡ãË໹ÀÒ¾·Õ·Ã§¾Åѧà¾×Í¡ÒâѺà¤Å×͹ ¡à»¹àÃ×ͧ¹Ö§·Õ¹Òʹ㨹ÒÁÒ½Ò¡¡Ñ¹
ตนกำเนด อนโฟกราฟก
2
INFOGRAPHICINFOGRAPHIC
ชวยใหผอานเขาใจเนอหามากขน เปลยนขอมลทดยงยากซบซอนใหเขาใจงายผานกราฟกรปแบบตางๆ โดยไมจำเปนตองมใครมานำเสนอเพมเตม
INFOGRAPHIC
ทโดงดงเกดขนในป ค.ค.1857 โดย ฟลอเรนซ ไนตงเกล (Florence Nightingale) ทอธบายถงสาเหตการตายของทหารในแตละเดอน ซงจดทำขนเพอเสนอตอราชนวคตอเรย
ผลงานชนนเรยกวา Nightingale Rose Diagram
1
อนโฟกราฟกแบบภาพนง (Static infographics)
การสรปเนอหาในหนงหนา โดยใช ไอคอน รปภาพ และขอความ ขอด : ผลตไดงาย ตนทนตำ สามารถแชรไดงาย ขอเสย : หากขอมลสามารถจดแบงไดหลายกลมจะยากตอการทำความเขาใจ ไมดงดด
01
มปฏสมพนธโตตอบกบผชม เปลยนการแสดงผลไดตามทเลอก มกใชในเวปไซด ขอด. : เขาใจงาย หากขอมลมหลายกลม สามารถปรบปรงขอมลไดตลอดเวลา ขอเสย : ผผลตตองมความเขาใจในการเขยนโปรแกรมและการจดการฐานขอมล
02
03
ประเภทของอนโฟกราฟก
อนเตอรแอคทฟอนโฟกราฟก (Interactive infographics)
อนโฟกราฟกทมการเคลอนไหว เชน VDO หรอไฟลเคลอนไหวอนๆ กลมคนเลนเวฟ มกใชในการเลาเรองหรออธบายกลไกตางๆ ขอด. : ดงดดความสนใจไดมาก ขอเสย : ตนทนการผลตสง มขนาดไฟลใหญทสด
โมชนอนโฟกราฟก (Motion infographics)
อนโฟกราฟกเปนสารสนเทศทตองสรางขนมาอยางเปนระบบในเอกสารน อ.กฤษณพงศ เลศบำรงชย จะอธบายแนวคดในการผลตอนโฟกราฟกใหเขาใจงายๆ
ÊØÁŸÔÃÒ
อนโฟกราฟกและหลกการออกแบบ
วทยากร : อ.กฤษณพงศ เลศบ ารงชย
สาขาวชาเทคโนโลยมลตมเดย คณะเทคโนโลยสอสารมวลชน มหาวทยาลยเทคโนโลยราชมงคลธญบร
คดขอมลใหโดนใจ จดไอเดยใหปง
[email protected] | Khaooat.comfacebook.com/TouchPoint.in.th
ความหมายของ Infographic
หมายถง สอความหมายดวยเสน
สญลกษณ รปวาด ภาพถาย กราฟ
แผนภม การตน ฯลฯ เพอให
สามารถสอความหมายขอมลได
ถกตองตรงตามทผสอสารตองการ
Informationหมายถง ขอมลทถกยอยในลกษณะ
ของสารสนเทศ
Graphic
ความหมายของ Infographic
หมายถง การน าขอมลมาสรปเปน
สารสนเทศ ในลกษณะของกราฟก
เพอสอความหมายทเขาใจงาย ตรง
ตามทผสอสารตองการ
Infographic
ขนตอนการท า Infographic
ก าหนดประเดน
รวบรวมขอมลทเกยวของ
1 32 4 5 6 7 8 9
คดเลอกสาระส าคญ
จดหมวดหม
สรางไอเดยการเลาเรอง
วางเลยเอาท
หาภาพประกอบ
ท าใหสวยงาม
เผยแพรผลงาน
ขนตอนการท า Infographic1. ก ำหนดประเดน
• Who >> กลมผอานเปนใคร (มผลตอการออกแบบ)• What >> ท าเรองเกยวกบอะไร• Why >> ท าไปท าไม ท าดวยเหตผลใด ท าเพอ...• Where >> ท าทไหน หรอเหตการณของสงทท าอยทไหน• When >> ท าเมอไหร เสรจเมอไหร• How >> ท าอยางไร ใชเครองมออะไร
ขนตอนการท า Infographic2. รวบรวมขอมลทเกยวของ
เมอไดเรองทจะท าแลว จะตองรวบรวมขอมลและขอเทจจรงทเกดขนทกอยางใหละเอยด
ไมวาจะเปนขอความ หรอขอมลทางสถต
ขนตอนการท า Infographic3. คดเลอกสำระส ำคญ
คดแยกขอมลทส าคญและจ าเปนตองใช โดยพจารณาจาก อะไรทคนอยากรหรอไมอยากร จดหรอไฮทไลท
ประโยคหรอค าทเราอานแลวรสก Wow แลวลองถามเพอนวา Wow เหมอนเราหรอไม
ขนตอนการท า Infographic4. จดหมวดหม
น าขอมลทกระจายมาจดเปนกลม เชน ความหมาย สาเหต วธแกไข เทคนค เปนตน
ขนตอนการท า Infographic5. สรำงไอเดยกำรเลำเรอง
การสราง Infographic ใหปง ควรตงชอเรองใหกระชบ นาฟง ชวนอาน และควรน าเสนอเปนภาพดวยการเลาเรอง เพอความไมนาเบอจากการ
เลาตรงๆ คดถงการเชอมโยงระหวางขอมลกบรปภาพใหได จะไดรวา
ควรใชภาพแบบใดในการเลาเรอง
ขนตอนการท า Infographic6. วำงเลยเอำท
แบงสดสวนขอมล ภาพประกอบ และทส าคญ
ตองค านงถงพนทวางดวย เพราะพนทวางจะ
ชวยใหรสกสบายตา และชวยใหผอานโฟกส
ขอมลส าคญไดงายมากขน
ขนตอนการท า Infographic7. หำภำพประกอบ
ภาพประกอบมความส าคญมาก ภาพ 1 ภาพ ใชแทนค าพดไดมาก ตองเปนภาพทสมพนธกบขอมล
รวมถงไอคอนตางๆ ดวย เวบภาพประกอบฟร freepik.com และ flaticon.com แตวาดเองจะดกวา
ขนตอนการท า Infographic8. ท ำใหสวยงำม
ควำมสวยงำมขนอยกบ
เลยเอาท | รปภาพประกอบ | โทนส ฟอนต | ทวาง
โปรแกรมทใช เชน Adobe Photoshop | Adobe Illustrator | Piktochart
ขนตอนการท า Infographic9. เผยแพรผลงำน
น า Infographic ทสมบรณเผยแพรสโลกออนไลน เชน Website | Facebook พรอมแคปชนทนาดงดดตด TAG หรอ HASHTAG # เพอให Search Engine หาเจอไดงาย
กจกรรมท 1ฝกหำขอมลเพมเตมแลวยอยขอมลจำกเรองทก ำหนดให
FoMO (Fear of Missing Out) อาการทคนรนใหมมกจะเปน คอ กลวตกกระแส กลวเชย และกลวไมเขากบเพอนๆ
แนวความคด FoMO ไมใชเรองใหมทเพงเกดขนในชวงเวลา 2-3 ปมาน แตไดถกกลาวถงครงแรกในป 1996 โดย
Dan Herman เขาไดกลาววา FoMO เปนประสบการณทไดรบจากความกลวทจะรสกวาตวเองลมเหลวหรอตนเอง
พลาดโอกาส คนทมอาการ FoMO ถาเปรยบเสมอนมน าอยครงแกว จะรสกกงวลอยางรนแรงตอการมน าเหลอ
ครงแกวอยเสมอ และใหความสนใจไปในการทจะเตมน าใหเตมพนทอกครงหนงทวางเปลาของแกวอยตลอดเวลา
รปแบบของภาพ
1. ภำพแบบเวกเตอร (Vector)เป น ร ปแบบภาพท ป ระมวลผลด วยการค านวณทาง
คณตศาสตร มสและต าแหนงของสทแนนอน สามารถยอหรอขยายได
โดยไมเสยคณภาพไฟล
2. ภำพแบบรำสเตอร (Raster/Bitmap)เปนรปแบบภาพทคาสจะถกเกบไวในแตละพกเซล มการเกบ
คาสทเฉพาะเจาะจงในแตละต าแหนง หากยอหรอขยายรปภาพกจะเสย
คณภาพของไฟลไป
โหมดสของภาพ
x RGB ประกอบดวยสหลกคอ Red (สแดง), Green (สเขยว), Blue (สน าเงน) ผสมกน เหมาะส าหรบ
ภาพทใชแสดงผลบนจอภาพ
x CMYK ประกอบดวยสหลกคอ
Cyan (สฟาอมเขยว) , Magenta (ชมพอมมวง), Yellow (สเหลอง), Black (สด า) เหมาะส าหรบภาพท
ใชในงานพมพ
ความละเอยดของภาพ (Resolution)
Resolution คอ ความละเอยดในการแสดงผลของภาพ ยงมคามากยงมความละเอยดสงและมขนาดไฟลทใหญ เชน หากภาพมความละเอยด 150 Pixels/Inch หมายความวาใน 1 ตารางนวประกอบดวยเมดส 150 พกเซล
• ส าหรบงานในจอภาพควรปรบ 72 Pixels/Inch• ส าหรบงานในจอภาพ Retina Display ควรปรบ 150 Pixels/Inch• ส าหรบงานพมพควรปรบ 300 Pixels/Inch
ชนดของภาพทนยมใชในงานกราฟก
Photoshop (.psd) เปนไฟลมาตรฐานของ Adobe Photoshop สามารถบนทกและเปดเพอแกไขได
ตลอดเวลา โดยยงรกษาคณสมบตตางๆ เชน ส เอฟเฟกต เลเยอร เอาไว
Illustrator (.ai) เปนไฟลมาตรฐานของ Adobe Illustrator สามารถบนทกและเปดเพอแกไขได
ตลอดเวลา โดยยงรกษาคณสมบตตางๆ เชน ส เอฟเฟกต เลเยอร เอาไว
Bitmap (.bmp) เปนไฟลมาตรฐานของระบบปฏบตการ Windows มขนาดใหญ
JPEG (.jpg) เปนไฟลทถกบบอดขอมลใหมขนาดเลก แตยงคงความคมชด นยมใชสรางเวบไซต
ชนดของภาพทนยมใชในงานกราฟก
PNG (.png) เปนไฟลทถกบบอดขอมลใหมขนาดเลก แตสญเสยรายละเอยดของภาพนอยมาก และ
สามารถท าภาพโปรงใสไดดวย นยมใชบนเวบไซต
GIF (.gif) เปนไฟลภาพทถกบบอดขอมลใหมขนาดเลกมาก แตจ ากดสเพยง 256 สเทานน
สามารถท าภาพโปรงใสและภาพเคลอนไหวได
TIFF (.tiff) เปนไฟลทไมบบอดขอมล มความคมชดสงมาก มขนาดไฟลทใหญ เหมาะกบงานสอ
สงพมพ
RAW (.raw) เปนไฟลภาพทไดจากกลองดจตอลทไมมการบบอด เกบคาแสงและสทกคา ท าใหไฟลม
ขนาดใหญ เหมาะกบการน าไปปรบแตง
องคประกอบของงานกราฟก
• เสนแนวนอน ใหความรสกสงบราบเรยบ
• เสนตรงแนวตง ใหความรสกมนคงแขงแรง
• เสนทแยง ใหความรสกรวดเรว แสดงถงการเคลอนไหว
• เสนตดกน ใหความรสกประสาน แขงแกรงหนาแนน
• เสนโคง ใหความรสกออนชอย ออนนอม
• เสนประ ใหความรสกโปรง บางกรณใชเปนสญลกษณในการแสดงถงสวนทสรางไว
• เสนโคงกนหอย ใหความรสกเคลอนไหวไมมทสนสด
• เสนโคงแบบคลน ใหความรสกเคลอนไหวอยางนมนวล
• เสนซกแซก ใหความรสกนากลว อนตราย
1. เสน
องคประกอบของงานกราฟก
รปรางเกดจากการน าเสนมาตอกนจนไดรปราง 2 มตทมความกวางและความยาว หรอความสง รปรางแบง
ออกเปน 2 ลกษณะ ไดแก
• รปรางทคนตา คอ แบบทเหนแลวรวาคออะไร เชน ดอกไมหรอคน
• รปรางแบบฟรฟอรม คอ แบบทไมมรปรางแนนอน แตดแลวเกดจนตนาการถงอารมณทตองการสอได
2. รปรำง
องคประกอบของงานกราฟก
รปทรง เปนรปรางทมมตเพมขนมากลายเปนงาน 3 มต คอ มความลกเพมเขามาดวย
3. รปทรง
องคประกอบของงานกราฟก
น าหนกเปนสวนทเสรมใหรปทรงมน าหนก เบาหรอหนก ทบหรอโปรงแสง โดยน าหนก
จะเกดจากการเตมแสงและเงา
4. น ำหนก
องคประกอบของงานกราฟก
พนผว คอ สงทแสดงใหรวารปรางหรอรปทรงทน ามาใชงานมสมผสอยางไร โดยแบงเปน 2 สมผส ไดแก
• ส าผสไดดวยมอ เชน พนผวขรขระของรปปนทแสดงออกถงความแขงแกรง หยาบกระดาง
• สมผสไดดวยสายตา เชน พนผวของสวนตางๆ ในภาพทเพยงมองเหนกรวาหมายถงผวสมผสแบบใด
5. พนผว
องคประกอบของงานกราฟก
ทวาง ไมไดหมายถงพนทวางเปลาเพยงอยางเดยว แตหมายรวมถงพนททไมส าคญหรอ Background ดวย ในการออกแบบพนทวางจะท าใหงานดไมหนกจนเกนไป และชวยเสรมจดเดนใหชดเจนมากขน
6. ทวำง
องคประกอบของงานกราฟก
ส ถอเปนหวใจส าคญของงานกราฟก เพราะการเลอกใชสจะแสดงถงอารมณทตองการไดอยางชดเจนมากกวา
สวนประกอบอนๆ ทงหมด เชน
7. ส
สโทนรอน ส าหรบงานทตองการ
ความตนเตน ทาทาย
สโทนเยน ส าหรบงานท
ตองการใหดสภาพ สบายๆ
องคประกอบของงานกราฟก
ตวอกษร เปนสงส าคญในงานกราฟกดไซน บางครงเพยงใชแคตวอกษรและสเปนสวนประกอบ
เพยงสองอยาง กสามารถสรางสรรคงานทสอความหมายอกมาไดในดไซนทสวยงาม
8. ตวอกษร
ความหมายของส
• สแดง ใหความรสกอนตราย เรารอน รนแรง มนคง อดมสมบรณ
• สสม ใหความรสกสวาง เรารอน ฉดฉาด
• สเหลอง ใหความรสกสวาง สดใส สดชน ระวง
• สเขยว ใหความรสกงอกงาม พกผอน สดชน
• สน ำเงน ใหความรสกสงบ ผอนคลาย สงางาม
• สมวง ใหความรสกหนก สงบ มเลศนย
• สน ำตำล ใหความรสกเกา หนก สงบเงยบ
ความหมายของส
• สขำว ใหความรสกบรสทธ สะอาด ใหม สดใส
• สด ำ ใหความรสกหนก หดห เศราใจ ทบตน
• สทองเงนและสทมนวำว แสดงถงความรสกมนคง
• สด ำทอยกบสขำว แสดงถงความรสกทางอารมณทถกกดดน
• สเทำปำนกลำง แสดงถงความนงเฉย สงบ
• สเขยวแกผสมกบสเทำ แสดงถงความสลด รนทด ชรา
• สสดและสบำงๆ ทกชนด แสดงความรสกกระชมกระชวย แจมใส
เทคนคการน าสไปใชงาน
เทคนคการเลอกสไมไดมสตรส าเรจตายตว แตโดยมากแลวจะเลอกจากวธโยงความสมพนธจากวงลอ
ความสมพนธจากวงลอส กอนจะท างานทกครง แนะน าวาใหเปดวงลอสขนมา แลวเลอกสหลกๆ ส าหรบใชในการ
ท างานกนกอน เทคนคทนยมใชมอย 4 รปแบบ ไดแก
เทคนคการน าสไปใชงาน
• Mono เปนการใชสโทนเดยวกนทงหมด เชน จดเดนเปนสแดง สสวนทเหลอจะใชสทใกลเคยงกบสแดง โดย
ใชวธลดน าหนกความเขมของสแดงลงไป
• Complement คอสทตดกนหรอสตรงกนขามกนในวงจรส เชน สฟาจะตรงขามกบสสม หรอสแดงจะตรง
ขามกบสเขยว สามารถน ามาใชงานไดหลายอยาง ไมควรใชปรมาณเทากน ควรใช 80/20 หรอ 70/30
โดยประมาณ ท าใหพนทนอยกลายเปนจดเดนของภาพ
• Triad คอ การเลอกสสามสทมระยะหางเทากนเปนสามเหลยมดานเทามาใชงาน• Analogic คอ การเลอกสใดสหนงขนมาใชงานพรอมกบสทอยตดกนอกขางละส หรอสสามสทอยตดกนใน
วงจรสนนเอง
เทคนคการน าสไปใชงาน
ส ำหรบยคปจจบน วงลอสพรอมวธเลอก
มใหใชงำนสะดวกกวำสมยกอนมำก เชน
โปรแกรม Kuler ของ Adobe ทเปน
โปรแกรมในกำรเลอกสในอำรมณตำงๆ
หรอเวบไซตทมวงลอสส ำเรจรปพรอม
โ ค ด ส ส ำ ห ร บ น ำ ไ ป ใ ช ง ำ น เ ช น
http://paletton.com/
ตวอกษร
1. Body & Proportion
• Body หลกๆ จะประกอบไปดวย Body และแขนขา สงส าคญทสดจะสงผลถงการเลอกใชงานฟอนต• Proportion หมายถง ลกษณะของตวอกษร ไดแก ตวปกต (Regular) ตวหนา (Bold) และตวเอยง (Italic)
ในบางครงอาจจะมแยกยอยลงไปอก เชน ตวหนาเอยง (Bold Italic) เปนตน
ตวอกษร
2. รปแบบของตวอกษร
• Serif เปนตวอกษรแบบมเชงหรอมฐานอยตรงปลาย ดเปน
ระเบยบ เปนทางการ เหมาะจะใชในงานทเปนทางการ และ
ตองการความนาเชอถอ
• San Serif เปนตวอกษรทไมมเชงหรอไมมฐานตรงสวนปลาย
อานงาย ดทนสมยมากกวาแบบอนๆ เหมาะจะใชในงานทตองการ
ความทนสมย ไมเปนทางการมากนก
AA
ตวอกษร
2. รปแบบของตวอกษร
• Antique เปนตวอกษรประดษฐแบบโบราณ
เหมาะกบงานทตองการความชดเจนของยค
สมย หรอตองการอารมณยอนยคนดหนอย
• Script เปนตวอกษรทมลกษณะเหมอนลายมอ
เหมาะกบงานทไมเปนทางการ ตองการความเปน
กนเองและดสนกสนานมากกวาแบบอนๆ
A B C
การเลอกฟอนตไปใชในงาน Infographic
กำรเลอก Font ไปใชงำนในกำรออกแบบมอย 2 ขอ ไดแก
• ควำมหมำยตองเขำกน หมายถง ความหมายของค าและฟอนตทเลอกใชควรจะไปดวยกนได เชน ค าวานารก
กควรใชฟอนตทดนารกไปดวย ไมควรใชฟอนตทดเปนทางการ
• อำรมณของฟอนต หมายถง อารมณของงานกบฟอนตทเลอกใชควรไปในทศทางเดยวกน เชน งานทตองการ
ความนาเชอถอจะเลอกใชฟอนตแบบ San Serif ทดหนกแนน นาเชอถอ สวนงานทตองการความฉดฉาดอบางปายโปสเตอรลดราคาจะเลอกใชฟอนตทไมเปนทางการมากนกอยางฟอนตในกลม Script
การวางต าแหนงตวอกษร
• ธรรมชาตการอานของคนไทยจะอานจากซายไปขวาและบนลงลาง ถาอยากใหอานงายควรจะวางเรยงล าดบ
ใหด ไมเชนนนจะเปนการอานขามไปขามมาท าใหเสยความหมายของขอความไป
• จดเดนควรจะมเพยงจดเดยว มตวอกษรตวใหญๆ อยเพยงชดเดยว จงจะเปนจดเดนทมองเหนไดงาย ไม
สบสน สวนจดอนๆ ขนาดควรจะเลกลงมาตามล าดบความส าคญ
• ไมควรใชฟอนตหลากหลายรปแบบมากเกนไป เนองจากการใชฟอนตหลากหลายรปแบบท าใหอานยาก
แนะน าใหใช Font เดมแตไปตกแตงขนาด ก าหนดความหนาหรอความเอยง เพอเพมความนาสนใจจะดกวา
[email protected] | Khaooat.comfacebook.com/TouchPoint.in.th
สอบถามขอมลเพมเตม
ขอบคณส าหรบการรบชม
[email protected] | Khaooat.comfacebook.com/TouchPoint.in.th
Top Related