เอกสาร infographics
TRANSCRIPT
รจกกบ Infographic ................................................................................................................................................... 3
Infographics คออะไร ......................................................................................................................................... 3
ความเปนมาของ Infographics ......................................................................................................................... 4
หมวดหมของ Infographics .............................................................................................................................. 5
การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได ...................................................... 10
วธหารปมาใชฟรโดยไมผดลขสทธจาก Google Search ..................................................................... 10
วรรณะของส ..................................................................................................................................................... 11
ระบบส RGB ...................................................................................................................................................... 12
ขนตอนการออกแบบอนโฟกราฟกส (Infographics) ............................................................................ 13
ออกแบบ Infographic ดวย 9 Layout ............................................................................................................ 15
การสรปใจความไวใน Infographic ............................................................................................................. 25
การสรางภาพกราฟกดวย Illustrator ................................................................................................................ 29
รจกกบภาพ Vector และ Bitmap .................................................................................................................. 29
พนฐานการสรางภาพกราฟกชนด Vector ............................................................................................... 31
หนาจอของ ..................................................................................................................................... 32 Illustrator
แถบคาสง (Menu Bar) ..................................................................................................................................... 32
กลองเครองมอ (Tool Box) ............................................................................................................................. 33
สรางรปทรงตางๆ ........................................................................................................................................... 34
การจดการวตถ ................................................................................................................................................. 39
การสรางตวอกษร ........................................................................................................................................... 41
.............................................................................................................................................. 45 การระบายสภาพ
2 รจกกบ Infographic
..................................................................................................................... 50 การเกบไฟลในรปแบบตาง ๆ
แหลงทมาของขอมล และรปภาพ ................................................................................................................... 53
3 รจกกบ Infographic
รจกกบ Infographic
Infographics คออะไร
Infographic ยอมาจาก Information Graphic คอ ภาพหรอกราฟกซงบงชถงขอมล ไมวาจะเปนสถต ความร
ตวเลข ฯลฯ เรยกวาเปนการยนยอขอมลเพอใหประมวลผลไดงายเพยงแคกวาดตามอง ซงเหมาะสาหรบผคนในยคไอท
ทตองการเขาถงขอมลซบซอนมหาศาลในเวลาอนจากด (เหตผลเพราะมนษยชอบและจดจาภาพสวยๆ ไดมากกวาการ
อาน) และในปจบนกาลงเปนทนยมในโลกของ Social Network
ขอความนาทวมทง ตารางซบซอน ภาพประกอบสดเชย และอกหลายเครองมอเลาเรองยคเกาททาใหมนษย
โลกเบอหนายกาลงจะกลายเปนอดต เพราะวนนโลกม Infographic เครองมอเลาเรองพนธใหมทจะเปลยนขอมลยากๆ
ใหเปนเรองงายๆททกคนจะชมไดอยางสนกสนาน
Infographic นนมาจากคาในภาษาองกฤษสองคาคอ Information และ Graphics คาแรกนนหมายถง
สารสนเทศ หรอขอมลทถกประมวลผลและจดระบบไวแลว สวนคาท 2 นนเปนคาทใชเรยกภาพหรอลวดลายประกอบ
ตางๆ ซงสามารถปรากฏในมมมองหรอวสดทหลากหลาย เมอรวมกนแลว Infographic จงเปนการแสดงขอมลหรอ
แหลงทมารปภาพ : http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
4 รจกกบ Infographic
ความรทผานการสรปยอแลวเปนแผนภาพ เพอใหเนอหาหรอขอมลทตองการนาเสนอสามารถอานและเขาใจไดงาย
วนน Infographic จงมอทธพลมากในการบอกเลาเรองราวทกแขนง ทงวทยาการ ประวตศาสตร คณตศาสตร และ
สถตศาสตร และกลายเปนเครองมอสาคญของนกการตลาด นกการเงน นกประวตศาสตร บรษทหางราน รวมถงนก
การศกษาเพอการแสดงขอมลทซบซอนใหดเขาใจงาย
ประโยชนและพลงของ Infographic นนมอยมากมาย เพราะดวยแผนภาพสวยๆน สามารถทาใหคนทวๆไป
สามารถเขาถง เขาใจ ขอมลปรมาณมากๆ ดวยแผนภาพภาพเดยวเทานน ดวยขอมลทถกคดกรองมาเปนอยางด ทาให
ผอานเขาใจไดงาย เปนวธการนาเสนอขอมลเชงสรางสรรค ซงสามารถหยบยกเรองราวเลกๆ ไปจนถงเรองราวใหญโต
มานาเสนอ ในมมมองทแปลกตา ทนสมย ทนตอเหตการณในโลกปจจบน โดยรปแบบหรอประเภทของ Infographic
ตามวตถประสงคในการใชงาน
ความเปนมาของ Infographics
กหลาบของไนตงเกล อนโฟกราฟกยคบกเบก
กอนทจะมาคลายขอสงสยกนวา ทาไมถงอนจง? ลองกลบไปดการทางานของอนโฟกราฟกในยคแรกๆ กน คง
คดไมถงวานอกจากฟลอเรนซ ไนตงเกล (Florence Nightingale) จะเปนพยาบาลในตานานผอทศตนดแลคนไขอยาง
ไมเหนแกเหนดเหนอยแลว ไนตงเกลยงเปนผออกแบบอนโฟกราฟกทมคณปการตอการสาธารณสข (ของทหารและชน
ชนลาง) อยางมหาศาล ดวยการอทศเวลารวบรวมขอมลและออกแบบ “กหลาบไนตงเกล” ไดอะแกรมทรงพลงระดบ
เปลยนสงคมขนมาได
จากการไดเขาไปดแลทหารทผานสงครามมาในคาย เธอพบวาสงทคราชวตของทหารผานศกไดในจานวนมาก
เทาๆ กบทหารทตายในสงคราม กคอสภาพความเปนอยในสถานพยาบาลของทหารททงสกปรกและแออดยดเยยด ทา
ใหเกดการตดเชอรนแรงและการสญเสยชวตโดยไมจาเปน ไนตงเกลเสนอขอมลนตอรฐ แตสถาบนชนสงไมสนใจเสยง
แหลงทมารปภาพ : http://www.learningstudio.info/infographics-design/
5 รจกกบ Infographic
เรยกรองของพยาบาลตวเลกๆ คนหนง เธอจงคดคนหาทางนาเสนอขอมลใหมโดยปรกษากบนกสถตศาสตร จนในทสด
ไนตงเกลกสามารถออกแบบ Diagram of the Causes of Mortality ทเปรยบเทยบสวนตางของจานวนการเสยชวต
ของทหารจากเหตสดวสย และเหตทสามารถปองกนไดดวยการสาธารณสขทดขน แทนทจะนาเสนอเปนตารางบรรจ
ขอมลยาวเหยยด ไดอะแกรมของไนตงเกลบงชความตางของขอมลดวยสและขยายพนทออกจากศนยกลางจนดเหมอน
กลบดอกกหลาบ (ในเวลาตอมาผคนจงเรยกผลงานชนนวา Nightingale Rose Diagram)
ฟลอเรนซ ไนตงเกล รวาเธอมเวลาดงความสนใจจากผมอานาจไดไมมาก ฉะนน เธอจงตองนาเสนอขอมล
ในรปแบบททงดงดดทสดและเขาใจงายทสดไปพรอมกน เธอเรมเผยแพรไดอะแกรมนสผมอานาจทเกยวของ (ไป
จนถงพระราชนวคตอเรยทกมโอกาสไดทอดพระเนตร) จนในทสด ขอเสนอของเธอกถกรบฟง สงผลใหการ
สาธารณสขในคายทหารคอยๆ พฒนาดขน
หมวดหมของ Infographics
สามารถแบงไดเปน 7 กลมใหญๆ ดงน
1.ขาวเดน ประเดนรอน และสถานการณวกฤต
เปน Infographics ทไดรบการแชรมากๆ มกจะเปนประเดนใหญระดบประเทศ เชน ประเดนการแกไข
รฐธรรมนญ
แหลงทมารปภาพ : http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
6 รจกกบ Infographic
2.สอน ฮาวท
บอกเลากลยทธตางๆอยางเปนขนเปนตอน เชน เลาถงกลยทธการออมเงน ทใครๆ กมกมองขาม
3.ใหความร
ในรปแบบของ Did You Know หรอ สถตสาคญทางประชากรตางๆตลอดจนการถายทอดความรทางวชาการ
ทนาเบอ ใหมสสน สนก และ นาตดตาม
แหลงทมารปภาพ : http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
7 รจกกบ Infographic
4.บอกเลาตานานหรอววฒนาการ
เรองราวบางอยางอาจตองถายทอดผานตาราหนาๆ แตดวย Infographics จะชวยทาใหตานานเหลานนบรรจ
อยในพนทๆ จากดไดอยางนาทง
5.อธบายผลสารวจ และงานวจย
Infographics เหมาะทสดทจะถายทอดงานวจยทดยงเหยงไปดวยตวเลขและขอมลมหาศาลออกมาเปน
แผนภาพสวยๆ และทรงพลง มหลายบรษทเรมใชเครองมอน เพอทาใหงานวจยของตวเองเขาถงคนหมมาก
แหลงทมารปภาพ : http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
8 รจกกบ Infographic
6.กระตนใหเกดการเปลยนแปลงพฤตกรรม
เชน ภยของการสบบรทมตอคนสบและคนทไมไดสบแตตองไดรบผลกระสบจากการสบบรดวย ขอเทจจรงเหลานลวน
มงหวงใหคนอานเกดการเปลยนแปลงพฤตกรรมของคนในสงคมใหดขน หากไดรบการแชรมากๆ ในโลกออนไลน กอาจ
สรางกระแส จนถงขนนาพาไปสการเปลยนแปลงพฤตกรรมในโลกออนไลนในทสด
7.โปรโมทสนคาและบรการ
ตวอยางการใช Infographic ในการโปรโมทสนคา เหตผลวาทาไมถงเปลยนไปใช Nokia Lumia ในสไตล
Infographic
แหลงทมารปภาพ : http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
9 รจกกบ Infographic
เหตผลอนดบหนงทมาพรอมกบตวเลขทสงถง 25% กลาววาเหตผลทตองการใช Nokia Lumia นนเปนเพราะ
มนใจในแบรนด ชอดง และยงหลงรกหรอเปนแฟนพนธแทของ Nokia อยางเหนยวแนน ในขณะทเหตผลอนดบสองท
ตามมาท 20.8% กลาววา ชอบในการออกแบบทมความโดดเดนและไมเหมอนใครของ Nokia Lumia อยางไรกตาม
ภาพ Infographic ท Nokia จดทาขนนเปนสวนหนงของการโปรโมทแคมเปญทมชอวา “Switched to Lumia” ซง
Nokia ตงใจใหเหนถงเหตผลของความตองการทจะเปลยนใจมาใช Nokia Lumia นนเอง
10 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
สวนประกอบหลกของ Infographics คอ ขอมลหรอความรทตองการนาเสนอ และภาพกราฟกซง
ประกอบดวยเสน กลอง ลกศร สญลกษณตางๆ รวมไปถงสญลกษณ pictogram ทอธบายความหมายในตวของมนเอง
ผานภาพเลยนแบบวตถตางๆ เชน สญลกษณหนาหองนาชายและหญง, สญลกษณหามนาเครองดม อาหาร และสตว
เขาในสถานท เปนตน ดงนน ผทตองการสราง Infographic จะตองจดหาวตถดบเหลานมาใหได
วธหารปมาใชฟรโดยไมผดลขสทธจาก Google Search
วธคนหารปภาพจาก Google เพอใหสามารถนาไปใชไดอยางสบายใจไมตองกลวเรองลขสทธ
• เขาเวบไซท Google.com แลวคลกทรปเฟอง แลวเลอกคาสง
• • กาหนดคา usage rights
11 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
Free to use share or modify นาไปใช แบงปน หรอแกไขไดฟร
Free to use, share or modify, even commercially นาไปใช แบงปน หรอแกไขไดฟรแมในเชงพาณชย
วรรณะของส
คอ สทใหความรสกรอน-เยน ในวงจรสจะมสรอน 7 ส และสเยน 7 ส ซงแบงท สมวงกบสเหลอง ซงเปนไดทง
สองวรรณะ
1. สตรงขาม หรอสตดกน หรอสคปฏปกษ เปนสทมคาความเขมของส ตดกนอยางรนแรง ในทางปฏบตไมนยม
นามาใชรวมกน เพราะจะทาใหแตละสไมสดใสเทาทควร การนาสตรงขามกนมาใชรวมกน อาจกระทาไดดงน
1. มพนทของสหนงมาก อกสหนงนอย
2. ผสมสอนๆ ลงไปสสใดสหนง หรอทงสองส
3. ผสมสตรงขามลงไปในสทงสองส
2. สกลาง คอ สทเขาไดกบสทกส สกลางในวงจรส ม 2 ส คอ
a. สนาตาล กบ สเทา
i. สนาตาล เกดจากสตรงขามกนในวงจรสผสมกน ในอตราสวนทเทากน สนาตาลมสมบต
สาคญ คอ ใชผสมกบสอนแลวจะทาใหสนน ๆ เขมขนโดยไมเปลยน แปลงคาส ถาผสมมาก ๆ
เขากจะกลายเปนสนาตาล
แหลงทมารปภาพ : http://www.prc.ac.th/newart/webart/colour09.html
12 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
ii. สเทา เกดจากสทกส ๆ สในวงจรสผสมกน ในอตราสวนเทากน สเทา มสมบตทสาคญ คอ ใช
ผสมกบสอน ๆ แลวจะทาให มด หมน ใชในสวนทเปนเงา ซงมนาหนกออนแกในระดบตาง ๆ
ถาผสมมาก ๆ เขาจะกลายเปนสเทา
ระบบส RGB
ระบบส RGB เปนระบบสของแสง ซงเกดจากการหกเหของแสงผานแทงแกวปรซม จะเกดแถบสทเรยกวา สรง
(Spectrum) ซงแยกสตามทสายตามองเหนได 7 ส คอ แดง แสด เหลอง เขยว นาเงน คราม มวง ซงเปนพลงงานอยใน
รปของรงสทมชวงคลนทสายตาสามารถมองเหนได
แสงสมวงมความถคลนสงทสด คลนแสงทมความถสงกวาแสงสมวง เรยกวา อลตราไวโอเลต (Ultra Violet)
และคลนแสงสแดง มความถคลนตาทสด คลนแสงทตากวาแสงสแดงเรยกวา อนฟราเรด (InfraRed) คลนแสงทม
ความถสงกวาสมวง และตากวาสแดงนน สายตาของมนษยไมสามารถรบได และเมอศกษาดแลวแสงสทงหมดเกดจาก
แสงส 3 ส คอ สแดง (Red) สนาเงน (Blue) และสเขยว (Green) ทงสามสถอเปนแมสของแสง เมอนามาฉายรวมกน
จะทาใหเกดสใหมอก 3 ส คอ สแดงมาเจนตา สฟาไซแอน และสเหลอง และถาฉายแสงสทงหมดรวมกนจะไดแสงสขาว
จากสมบตของแสงนไดนามาใชประโยชนทวไปในการฉายภาพยนตร การบนทกภาพวดโอ ภาพโทรทศน
การสรางภาพเพอการนาเสนอทางจอคอมพวเตอร และการจดแสงสในการแสดง เปนตน
แหลงทมารปภาพ : http://www.prc.ac.th/newart/webart/colour06.html
13 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
ขนตอนการออกแบบอนโฟกราฟกส (Infographics)
1. ดานขอมล ขอมลทจะนาเสนอ ตองมความหมาย มความนาสนใจ เรองราวเปดเผยเปนจรง มความถกตอง
แหลงทมารปภาพ : https://sites.google.com/a/hoksib.ac.th/kar-srang-websit/home/chud-si-baeb-infographic
14 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
a. การเลอกหวขอ
b. สบคนขอมลวจยและสถตทเกยวของกบหวขอทเลอก
c. วเคราะหขอมล
d. เลอกวธการนาเสนอขอมล
• กราฟ ไดอะแกรม แผนผง
• ภาพถาย
• สญลกษณ
• ภาพประกอบ
• ตวหนงสอ ขอความ
2. ดานการออกแบบ การออกแบบตองมรปแบบ แบบแผน โครงสราง หนาทการทางาน และความสวยงาม โดย
ออกแบบใหเขาใจงาย ใชงานงาย และใชไดจรง
1. การเลอกใชโปรแกรมหรอเครองมอ
เครองมอวเคราะหขอมลเพอออกแบบ Infographics ไดแก
1. ผงกราฟกแบบผงโยงใย (Webbing)
2. ผงกราฟกแบบผงจดกลมขอมล (Cluster Diagram)
3. ผงกราฟกแบบผงแสดงความสมพนธเหมอนตาง (Venn Diagram)
4. ผงกราฟกแบบผงอภปญญา (KWLH)
5. ผงกราฟกแบบผงกางปลา (Fishbone Diagram)
6. ผงกราฟกแบบผงแกปญหา (Problem / Solution)
7. ผงกราฟกแบบผงแมงมม (Spider Map)
8. ผงกราฟกแบบผงความคดรวบยอด (Concept Map)
เครองมอสาหรบสราง Infographics
15 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
2. การเลอกโทนสเพอใหดเปนอนหนงอนเดยวกน กาหนดสหลก สรอง
3. การจดลาดบความนาสนใจของขอมล อะไรควรขนกอน อะไรควรอยหลง อะไรควรเนน
4. การออกแบบวางระบบการรบขอมล เชน บนลงลาง ซายไปขวา ตรงกลางกอน
5. การออกแบบภาพประกอบใหออกมาแนวเดยวกน และเขาใจงาย นาสนใจ
6. ตรวจสอบความถกตองและภาพรวมความสวยงาม
7. เผยแพร
ออกแบบ Infographic ดวย 9 Layout
เชอหรอไมวา หากมขอมลดๆอยในมอ แตนาเสนอมนไมถกวธ ขอมลดๆกอาจกลายเปนไมดได (เหมอนเจตนา
ดแตพดไมเปนกกลายเปนไมดไปซะงน) การทา Infographic กเชนกน ถาเลอกรปแบบของ Infographic ไมเหมาะสม
กบขอมล กจะทาใหขอมลถกลดความหมาย หรอไมนาสนใจเทาทควร
วนน Infographic Thailand เลยมาเสนอรปแบบ Infographic แบบตางๆ ทสามารถนาไปใชสรางงาน
Infographic ของใหเปน Infographic ภาพไดทนท!
แหลงทมารปภาพ : http://www.learningstudio.info/infographics-design/
16 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
1. Visualised Article
เหมาะสาหรบการนาบทความ งานเขยน มาเลาผาน Infographic เพราะฉะนน Infographic แบบ
นจงตองใชการนาเสนอทเหมาะสมกบขอมลแตละชนด เชน ถามตวเลขกควรนาเสนอผานกราฟแบบตางๆ หรอ
ตวหนงสอกสามารถสอสารดวยภาพประกอบ หรอ icon
เทคนค : สรปบทความ และเลอกประเดนกอนนาเสนอ
ตวอยาง จาก Infographic Thailand
17 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
2. Listed
เปน Infographic ทคนไทยนาจะคนเคยกนด มกจะใชตวเลขนาในเฮดไลน เชน “5วธ” ดแลหนสวย, “4
เทคนค” พชตใจนายจาง การนาเสนอแบบเปนขอๆแบบนเหมาะกบเรองทไมยาวนก และไมควรเปนเรองทเครยดมาก
เกนไป
เทคนค : ลองวเคราะหวาขอไหนสามารถรวบเปนขอเดยวกนได เพราะยงมหลายขอยงจดจาไดยาก
ตวอยาง จาก Infographic Thailand
18 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
3. Comparison
เหมาะกบใชเพอเปรยบเทยบระหวางของสงหนงกบอกสง โดยการนาเสนอคกนแบบนทาใหเหนภาพได
ชดเจนวาแตกตางอยางไรบาง
เทคนค : ใชการจดวางทเหมอนกนทงสองฝง ทาใหเหนความตางทชดเจน, ใชสคตรงขามเปนตวแบงฝง ทาให
ดงายขน
ตวอยาง โดย Infographic Thailand
19 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
4. Structure
เหมาะกบการใชอธบายสวนประกอบของบางสง
เทคนค : พยายามสรางภาพใหเหนแตละสวนประกอบ เชน ภาพเหมอนสแกนเขาไปภายใน หรอ การแยกแต
ละสวนออกหางกน ไมซอนกน
ตวอยางโดย Infographic Thailand
20 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
5. TimeLine
เหมาะสาหรบใชเลาประวตความเปนมาเปนไปของสงใดสงหนง โดยใชเสนแทนระยะเวลา สามารถใชได
กบทกอยาง เชนประวตคน ประวตองคกร ประวตสถานท
เทคนค : ใชความหางของแตละจด ชวยบอกความหางของแตละชวงเวลาได
ตวอยาง โดย visual.ly
21 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
6. Flowchart
เปนการนาเสนอแบบเปนลาดบขน เหมาะกบการเสนอเปนควซใหผอานไดทราบคาตอบทตองการโดย
การอานไลลงไปตามเสนจนถงดานลางสด
เทคนค : ระวงเรองความยงเหยงของเสน, ใชสชวยแยกเสน ลดความสบสนในการอาน
ตวอยางโดย Infographic Thailand
22 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
7. RoadMap
เปนการอธบายทละขนตอน เหมาะกบการอธบายขนตอนการทางาน หรอการเดนทาง เชน ขนตอนการ
ทางานขององคกร ขนตอนการรบพนกงานเขาทางาน การเดนทางของเดกนกเรยนสการเปนนสต
เทคนค : เรองตองนาสนใจพอทคนอยากจะรทละขนตอนขนาดน
ตวอยาง โดย Infographic Thailand
23 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
8. Useful Bait
เปน Infographic ททาใหเหนวธทาบางอยาง โดยทเหนแลวสามารถนาไปใชไดทนท
เทคนค : ตองใหความสาคญกบการอานงาย และความเขาใจงาย มากกวาความสวยงาม
ตวอยาง โดย Infographic Thailand
24 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
9. NumberPorn
คอ Infographic ทเตมไปดวยตวเลข และกราฟ หากมตวเลขทนาสนใจมากเพยงพอกสามารถนาเสนอ
ในรปแบบนได
เทคนค : ไมใชแคมตวเลขมาก แตตวเลขตองนาสนใจ หรอเกยวของกบคนอานมากพอ,
ถงจะมกราฟหลายประเภทแตควรเลอกสไตลกราฟฟคแบบเดยวกนทงภาพ เชน 3D, Flat
ตวอยาง โดย Infographic Thailand
25 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
เปนอยางไรกนบางกบ รปแบบ Infographic ทง 9 แบบ ทาง Infographic Thailand หวงเปนอยางยง
วาบทความนจะชวยใหผอานไดเพมพนความร Infographic มากยงขน และสามารถนาไปปรบใชในงาน Infographic
ของเพอใหเปน Infographic ทสมบรณมากยงขนนะ
การสรปใจความไวใน Infographic
‘หวใจ’ ของการทาอนโฟกราฟฟกทด นนคอ ความเขาใจในความหมายของขอมล ปญหาหนงทพบบอยคอ
อนโฟกราฟฟกจานวนมากดดแตทาใหคนสบสนวาตองการจะสออะไร เนองจากไมไดจดวางขอมล (โดยเฉพาะตวเลข)
ในทางทรกษาความหมายของมนเอาไว
ดไซน ‘สวย’ แตไม ‘สอ’
เสนทลากรปถวยกาแฟแตละยหอไปยงราคา รวมถงการจดวางตาแหนงถวยกาแฟตางๆ ไมมความเกยวของ
ใดๆ กบตวเลข “ราคา” ทแสดง
ใช “ขนาด” ของแทงกราฟเพอสอราคาของกาแฟแตละยหอ ซงกทาไดงายๆ เรมจากการพลอตราคาของกาแฟยหอตางๆ โดยเรยงลาดบราคาจากแพงสดไปถกสด หรอถกสดไปแพงสด และเปลยนความยาวของเสนใหไดสดสวนตามราคา คนมองปราดเดยวจะไดเหนชดวายหอไหนแพงกวากน
แหลงทมารปภาพ : http://thaipublica.org/2012/09/good-infographics-1/
26 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
ดไซน ‘สอ’ แต ‘ผดสาร’
จากรปเปนการนาเอารปถวยกาแฟแตละยหอมาวางแทนกราฟ ปรบความสงของถวยใหเทากบความสงของ
กราฟแทง (ไมนบหลอด)
จดแขงของภาพนคอนอกจากจะเหนชดทนทวากาแฟยหอไหนแพงกวากนแลว ยงสอระดบความแตกตางของ
ราคาดวย เชน ในเมอกาแฟคาปชโนเยนของสตารบคสแพงกวายหอบลคพประมาณ 1.5 เทา (125 เทยบกบ 85 บาท)
และแพงกวากาแฟยหอแอมะซอน 2.8 เทา (125 เทยบกบ 45 บาท) ถวยกาแฟสตารบคสในรปจงสงกวาถวยกา
แฟบลคพ 1.5 เทา และสงกวาถวยกาแฟแอมะซอน 2.8 เทาตามลาดบ
จดออนทใหญกวาจดแขงของภาพนคอ เนองจากมนใช ‘ขนาด’ ของถวยกาแฟแทน ‘ราคา’ จงมความเสยงสง
ทผดจะเขาใจผดวา กาแฟเหลานมขนาดถวยแตกตางกนมาก ทงทในความจรงไมใช และในอนโฟกราฟฟกตนฉบบ
รวมทงฉบบเลยนแบบของผเขยนดานบนกมขอความ “ราคาแกวขนาดใหญสดของแตละยหอ มปรมาณประมาณ 22
ออนซ (650 มลลลตร)” เพอสอวาแตละถวยมปรมาณกาแฟใกลเคยงกน
แหลงทมารปภาพ : http://thaipublica.org/wp-content/uploads/2012/09/coffee-myversion.png
แหลงทมารปภาพ : http://thaipublica.org/2012/09/good-infographics-1/
27 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
การทาอนโฟกราฟฟกใหดจงไมงาย ตองใชเวลา ทกษะ ความคดสรางสรรค และความเขาใจอยางลกซงใน
ขอมลและสารทตองการจะสอ คนทา (จะทาคนเดยวหรอเปนทมกตาม) ตองถามตวเองตลอดเวลาวา ดไซนของอนโฟ
กราฟฟกนตอบโจทยหรอไม สอสารหลกทตองการจะสอจรงๆ หรอไม
นอกจากการใชกราฟฟกไมเหมาะสม (ทาใหคนไมเขาใจหรอเขาใจขอมลผด) หลายครงคนทาอนโฟกราฟฟกยง
บกพรองในขนพนฐานกวานนอก คอใชรปแบบกราฟทไมเหมาะสมกบขอมลทตองการจะสอดวย
28 การเตรยมขอมล ขอภาพ และสถตทถกตองสามารถใชอางองได
แบบฟอรมรายละเอยดการออกแบบ Infographics
ชอเรอง :
วตถประสงค :
ประเภท : Static Video
ลกษณะเนอหา : Hot Topic How To Did You Know Legend
: Research & Survey Campaign
: Promote อน ๆ........................................................................
กลมเปาหมาย :
การใชส : Monochrome สเดยว สทเลอกใชคอ(ระบ)
: โครงสขางเคยง สทเลอกใชคอ(ระบ)
: คสตดกน 2 สทเลอกใชคอ(ระบ)
: คสตดกน 3 สทเลอกใชคอ(ระบ)
: คสตดกน 4 สทเลอกใชคอ(ระบ)
: วรรณะรอน สทเลอกใชคอ(ระบ)
: วรรณะเยน สทเลอกใชคอ(ระบ)
สอน ๆ :
แบบอกษรทใช :
เนอหา ขอเทจจรง
:
โครงราง :
ประเภทสอ : สงพมพออนไลน
ระยะเวลาการเผยแพร
:
โลโกหนวยงาน : ใช ไมใช
แหลงขอมลอางอง :
อน ๆ :
29 การสรางภาพกราฟกดวย Illustrator
การสรางภาพกราฟกดวย Illustrator
รจกกบ Illustrator
โปรแกรม Illustrator เปนโปรแกรมสาหรบสรางภาพลายเสนทมความคมชดสง ใชในการวาดภาพ โดยจะ
สรางภาพทมลกษณะเปนลายเสน หรอทเรยกวา Vector Graphic จดเปนโปรแกรมระดบมออาชพทใชกนเปน
มาตรฐานในการออกแบบระดบสากลสามารถทางานออกแบบตางๆ ไดหลากหลาย ไมวาจะเปนสงพมพ บรรจภณฑ
เวบ และภาพเคลอนไหวตลอดจนการสรางภาพเพอใชเปนภาพประกอบในการทางานอนๆ เชน การตน ภาพประกอบ
หนงสอ เปนตน
รจกกบภาพ Vector และ Bitmap
กราฟกแบบ Bitmap
คอ ภาพทเกดจากจดภาพในรปภาพทรวมกนเปนภาพขน โดยภาพหนงๆ จะประกอบไปดวยจดภาพหรอ
พกเซลมากมาย และเเตละภาพทสรางขนจะมความหนาเเนนของจดภาพ หรอบางครงแทนวาความละเอยด (ความ
คมชด)ทเเตกตางกนไป จงใชในการบอกคณสมบตของภาพ จอภาพ หรอ อปกรณแสดงผลภาพได
ไฟลภาพแบบ Bitmap ในระบบวนโดวสคอ ไฟลทมนามสกล .BMP, .PCX. , .TIF, .GIF, .JPG, .MSP, .PCD
เปนตน สาหรบโปรแกรมทใชสรางกราฟกแบบนคอ โปรแกรม Paint ตางๆ เชน Paintbrush, PhotoShop,
Photostyler เปนตน
กราฟกแบบ Vector
ภาพทเกดจากการกาหนดพกดและการคานวณคาบนระนาบสองมต รวมทงมมและระยะทาง ตามทฤษฎ
เวกเตอรในทางคณตศาสตร ในการกอใหเกดเปน เสน หรอรปภาพ
ขอดคอ ทาใหสามารถยอขยายได โดยคณภาพไมเปลยนแปลง ขอเสยคอภาพไมเหมอนภาพจรงเปนไดเพยง
ภาพวาด หรอใกลเคยงภาพถายเทานน ขอมลภาพพวกนไดเเกไฟลสกล eps, ai (adobe illustrator) เปนตน
ลกษณะเดนของ Vector คอ สามารถยดหรอหดภาพเทาใดกได โดยทภาพจะไมแตก ความละเอยดของภาพไม
เปลยนแปลง คงคณภาพของภาพไวไดเหมอนเดม และยงสามารถขยายเฉพาะความกวางหรอความสง เพอใหมองเหน
30 การสรางภาพกราฟกดวย Illustrator
เปนภาพผอมหรออวนกวาภาพเดมไดดวย และไฟลมขนาดเลกกวาภาพ Bitmap ภาพแบบ Vector จงเหมาะสาหรบ
งานแบบวาง Layout งานพมพตวอกษร Line Art หรอ Illustration
ไฟลรปภาพแบบ Vector ในระบบวนโดวสคอ ไฟลทมนามสกล .EPD, .WMF, .CDR, .AI, .CGM, .DRW, .PLT
เปนตน โดยมโปรแกรมประเภทวาดรป (Drawing Program) เชน CorelDraw หรอ AutoCAD เปนโปรแกรมสราง
ขณะทบนแมคอนทอชใช Illustrator และ Freehand
ในกรณทโปรแกรมทใชงานอยไมสามารถอานไฟลแบบ Vector ตนฉบบได วธทดทสดกคอ บนทกไฟลเปน
นามสกล .EPS (Encapsulated Postscript) ไฟลประเภทนสรางขนจาก Vector ซงทาใหมคณสมบตเปนแบบ Vector
นอกจากนเราสามารถบนทกไฟล Bitmap ใหเปนแบบ EPS ได เนองจากโปรแกรมกราฟกทกประเภทลวนสนบสนน
ไฟลแบบ EPS ทงสน
อยางไรกตามอปกรณแสดงผล ไมวาจะเปนเครองพมพแบบ Dot Matrix หรอ Laser รวมทงจอภาพ จะ
แสดงผลแบบ Raster Devices หรอแสดงผลในรปของ Bitmap โดยอาศยการรวมกนของ Pixel ออกมาเปนรป แมวา
ภาพกราฟกทสรางจะเปนแบบ Vector เมอจะพมพหรอแสดงภาพบนหนาจอจะมการเปลยนเปนการแสดงผลแบบ
Bitmap หรอเปน Pixel
ความแตกตางระหวางกราฟกแบบ Bitmap และ Vector
Bitmap Vector
1. ลกษณะภาพประกอบขนดวยจดตางๆ มากมาย 1. ใชสมการทางคณตศาสตรเปนตวสรางภาพ โดยรวม
เอา Object (เชน วงกลม เสนตรง) ตางชนดมาผสม
กน
2. ภาพมจานวนพกเซลคงทจงตองการคาความละเอยดมาก
ขนเมอขยายภาพ โดยจะคานวณคาสทละ pixels ทาใหภาพ
แตกเมอขยายภาพใหใหญ
2. สามารถยอและขยายขนาดไดมากกวา โดยสดสวน
และลกษณะของภาพยงเหมอนเดม ความละเอยดของ
ภาพไมเปลยนแปลง
3. เหมาะสาหรบงานกราฟก ในแบบตองการใหแสงเงาใน
รายละเอยด
3. เหมาะสาหรบงานแบบวาง Layout งานพมพ
ตวอกษร Line Art หรอ Illustration
4. แสดงภาพบนจอทนท เมอรบคาสงยายขอมลจาก
หนวยความจาทเกบภาพไปยงหนวยความจาของจอภาพ
4. คอมพวเตอรจะใชเวลาในการแสดงภาพมากกวา
เนองจากตองทาตามคาสงทมจานวนมากกวา
31 การสรางภาพกราฟกดวย Illustrator
พนฐานการสรางภาพกราฟกชนด Vector
การสรางรปทรงกราฟกประกอบดวย 2 สวนหลก ๆ คอ สวนทเปนเสนขอบ(Stroke) และพนวตถ(Fill)
การสรางภาพดวยวธนมขอดคอ สามารถขยายภาพมากๆ ได โดยไมเสยรายละเอยด (เพราะภาพเกดจากการ
คานวณ) ซงตางจากภาพชนด Bitmap (หรอ Raster) ทเปนภาพอนเกดจากจดสเลกๆ (พกเซล) มารวมกนเปนภาพ
32 การสรางภาพกราฟกดวย Illustrator
หนาจอของ Illustrator
แถบคาสง (Menu Bar)
เปนเมนคาสงหลกโปรแกรม แบงออกเปนหมวดหมตางๆ ดงน
1. File: เปนหมวดของคาสงทจดการเกยวกบไฟลและโปรแกรมทงหมด ไมวาจะเปนการ เปด-ปดไฟล การบนทก
ไฟล การนาภาพเขามาใช (Place) ตลอดจนการออกจากโปรแกรม (Exit)
2. Edit: เปนหมวดของคาสงทจดการแกไข เชน Undo Cut Copy Paste Select รวมทงการกาหนดคณสมบต
ตางๆ ทมผลตอการปรบแตงภาพดวย เชนการสรางรปแบบ (Define Pattern) การกาหนดคาส (Color
Setting)เปนตน
3. Type: เปนหมวดของคาสงทใชจดการตวหนงสอ เชน Fonts Paragraph เปนตน
4. Select: เปนหมวดของคาสงทใชในการเลอกวตถ สามารถเลอกดวยคณสมบตได เชน เลอกวตถทม Fill และ
Stroke แบบเดยวกน วตถทอยบน Layer เดยวกน เปนตน
5. Filter: เปนหมวดของคาสงทใชสรางเทคนคพเศษใหกบภาพ โดยจะมผลตอรปรางของ Path
33 การสรางภาพกราฟกดวย Illustrator
6. Effect: เปนหมวดของคาสงทใชสรางเทคนคพเศษใหกบภาพคลาย Filter แตจะไมมผลกบรปรางของ Path
7. View: เปนหมวดของคาสงเกยวกบการมองทกสงในงาน เชน Zoom Show/Hide Ruler Bounding
BoxOutline Mode/Preview Mode เปนตน
8. Window: เปนหมวดของคาสงเกยวกบการเปด-ปดหนาตางเครองมอตางๆ เชน Palette Tool Box เปนตน
9. Help: เปนหมวดทรวบรวมวธการใชงานและคาแนะนาเพอชวยเหลอผใชโปรแกรม
กลองเครองมอ (Tool Box)
Tool Box เปนเครองมอพนฐานทใชในการทางานเกยวกบภาพทงหมด ซงจะแบงออกเปนชวงๆ ตามกลมการ
ใชงาน ดงน
ขอบคณภาพจาก www.vectordiary.com
34 การสรางภาพกราฟกดวย Illustrator
การใสสและเสนขอบวตถพนฐาน
รปทรงตางๆใน Inkscape จะประกอบไปดวย Fill และ Stroke ซง Fill นนจะหมายถง บรเวณทเปนสวนของ
รปทรง หรอสของรปทรงนน ๆ สวน Stroke นนคอ สวนของขอบของรปทรง หรอเสนขอบ เราสามารถเปลยนคาของส
และความโปรงใสไดโดยการเลอกวดถทตองการใสสหรอเสนขอบ แลวตามดวยการกดคยลด Shift+Ctrl+F เพอทาการ
เรยกหนาตางปรบแตงคา Fill และ Stroke ขนมาได
Fill – สาหรบการกาหนดสของรปทรง
Stroke paint – สาหรบการกาหนดสของเสนขอบ
Stroke style – สาหรบการกาหนดรปแบบของเสนขอบ เชน เสนประ เปนตน
สรางรปทรงตางๆ
การวาดสเหลยมดวย Rectangle Tool
เครองมอวาดภาพสเหลยม สามารถวาดไดสองแบบคอภาพสเหลยมมมมนและภาพสเหลยมมมเหลยม
1. คลกเครองมอ Rectangle ถาตองการแบบมมมนกคลกคางไวสกคร กจะปรากฏเครองมอวาด สเหลยมแบบมมมน
2. คลกเลอกสระบาย (Fill)
3. คลกเลอกสทตองการในจานส
4. ถาไมตองการระบายสภาพ ตองการใหเปนภาพโปรงใส กคลกปมไมระบายส
5. คลกปมสเสนขอบ
6. คลกเลอกสเสนขอบทตองการ
7. ถาไมตองการใหมเสนขอบ เปนภาพทไมมเสนขอบ กคลกปมไมเอาเสนขอบ
35 การสรางภาพกราฟกดวย Illustrator
8. คลกเลอกขนาดของเสนขอบตามตองการ
9. การวาดกเลอนเมาสไปทพนททางาน กดปมซายของเมาสคางไว แลวลากออก เมอไดขนาดของ สเหลยมตาม
ตองการแลว กปลอยปมซายของเมาส
10. การวาดสเหลยมจตรสใหกดปม Shift คางไวขณะวาด วาดเสรจแลวปลอยเมาสกอน แลวปลอย ปม Shift
11. เสรจแลวคลกเครองมอสาหรบเลอก แลวคลกทวางๆ
12. การวาดสเหลยมทมขนาดตามตองการ กคลกเครองมอ Rectangle แลวคลกทพนททางาน
13. จะปรากฏกรอบขอความขนมา ใหกาหนดขนาดกวาง x ยาว (Width x Height)
14. ในกรณทใชเครองมอวาดสเหลยมมมมน กกาหนดคา Corner Radius ตามตองการ ถาตองการ มมเหลยมก
กาหนดคาเทากบ 0
15. กาหนดคาเสรจแลว กคลกปม OK
การวาดวงร วงกลมดวย Ellipse Tool
1. คลกเครองมอ Ellipse Tool โดยคลกทเครองมอ Rectangle Tool คางไวแลวลากเมาสไปเลอก เครองมอวาดวงร
วงกลม
2. คลกเลอกสระบาย (Fill) สเสนขอบ และขนาดเสนขอบใหเรยบรอย
3. ชลกศรทพนททางาน กดปมซายคางไวแลวลากออก วาดวงรหรอวงกลมตามตองการ แลวกปลอย ปมเมาส
36 การสรางภาพกราฟกดวย Illustrator
4. การวาดวงกลมใหกดปม Shift ทแปนพมพคางไวกอน แลววาดวงกลม วาดเสรจแลวกปลอยเมาส กอนแลวจง
ปลอยปม Shift
5. การวาดวงกลมทตองการระบขนาดเสนผาศนยกลางทแนนอนกสามารถทาได โดยคลกเลอกเครอง มอ Ellipse
แลวคลกทพนททางาน
6. จะปรากฏกรอบขอความขนมา กกาหนดคาในสวน Width และ Height ใหเทากนแลวคลก OK
การวาดรปหลายเหลยมดวย Polygon Tool
1. คลกเครองมอ Polygon Tool คลกเลอกสระบาย สเสนขอบ ขนาดเสนขอบใหเรยบรอย
37 การสรางภาพกราฟกดวย Illustrator
2. ลากเมาสวาดภาพตามตองการ
3. การวาดรปหลายเหลยมแบบสมสวน ใหกดปม Shift คางไวขณะวาด
4. การวาดรปทมขนาดตามตองการ กคลกทพนททางาน แลวกาหนดคาตางๆ เชน Radius เปนจา นวนมมรศมของ
ภาพหลายเหลยม และ Sides เปนจานวนดาน เสรจแลวคลกปม OK
การวาดรปดาวดวย Star Tool
1. คลกเครองมอ Star Tool
2. การวาดกลากเมาสวาดภาพตามตองการ
3. การวาดดาวแบบสมสวน ใหกดปม Shift คางไวขณะวาด
4. การวาดทตองการขนาดทแนนอน กคลกทพนททางาน กาหนดคาตางๆ เชน Radius1, Radius2 และ Point เสรจ
แลวคลกปม OK
38 การสรางภาพกราฟกดวย Illustrator
วาดเสนตรงดวย Line Segment Tool
เปนเครองมอไวสาหรบวาดเสนตรง เสนเฉยง 45 องศา
1. คลกเครองมอ Line Segment Tool
2. คลกปมสเสนขอบ แลวคลกเลอกสทตองการ
3. คลกเลอกขนาดของเสน
4. ชทพนททางาน กดปมซายของเมาสคางไว แลวลากออก เพอวาดภาพ
5. เสรจแลวคลกเลอกเครองมอ Selection Tool แลวคลกทวางๆ เสรจสนการวาด
6. อาจวาดอกแบบโดยคลกทพนททางาน กาหนดคาตามตองการแลวคลกปม OK กได
7. วธนสามารถกาหนดความยาวของเสนและมมของเสนได
การวาดเสน/รปทรงอสระ วาดเสนแบบจดดวย Pen Tool
การวาดแบบท 1 หวใจแบบเหลยมๆ
1. คลกเลอกเครองมอ Pen Tool
2. คลกเลอกขนาดของเสนตามตองการ
3. สวนสระบายภายใน ใหยกเลกไมตองมสระบาย
4. ในพนททางาน ใหคลกจดท 1, 2, 3, 4, 5 และ 6
5. เมอคลกจดท 6 เสรจแลว กคลกซาจดท 1 ตาแหนงเดยวกน เพอใหเปนรปแบบปด จงสามารถระบายสได
การวาดแบบท 2 หวใจแบบมนๆ ใน Illustrator CS
39 การสรางภาพกราฟกดวย Illustrator
1. คลกเลอกเครองมอ Pen Tool
2. กาหนดขนาดของเสนใหเรยบรอย สระบายเลอกใหเปนภาพโปรง ไมระบายส
3. คลกจดท 1
4. คลกจดท 2 พรอมกบกดปมซายของเมาสคางไว แลวลากใหเปนเสนโคง ไดทแลวกปลอยเมาส
5. คลกจดอนๆ สวนใดทโคง กกดปมซายคางไว แลวลากใหโคงตามตองการกอน แลวปลอยเมาส
6. เสรจแลวคลกซาจดท 1 ใหตรงกนพอด เพอใหเปนภาพปดระบายสได
การจดการวตถ
การหมนภาพดวยเครองมอ Rotate Tool
1. เลอกภาพดวยเครองมอสาหรบเลอก
2. คลกเครองมอ Rotate Tool
3. ชทบรเวณใดๆ ในพนททางาน ตรงไหนกได กดปมซายของเมาสคางไว แลวลากในลกษณะหมน
การยอขยายขนาดภาพดวยเครองมอ Scale Tool
1. คลกเลอกเครองมอ Selection Tool แลวคลกเลอกภาพทตองการยอหรอขยายขนาด
2. คลกเครองมอ Scale Tool
3. ชทพนททางาน กดปมซายคางไวแลวลากเมาสออก เพอยอหรอขยายขนาดภาพ
4. เมอไดขนาดภาพตามตองการแลว กปลอยเมาส
40 การสรางภาพกราฟกดวย Illustrator
การรวมวตถเปนกลมเดยวกนและการยกเลก (Group และ Ungroup)
ภาพบางภาพทเกดจากการวาดหรอนาภาพเลกๆ หลายๆ ภาพมาประกอบเขาดวยกน กควรทจะรวมเปน กลม
เดยวกนกอน เพอความสะดวกในการยายตาแหนง ซงกสามารถแยกจากกนไดเมอตองการแกไขเพยงสวน หนงสวนใด
ของภาพเทานน
1. เลอกภาพทตองการทงหมดดวยเครองมอ Selection Tool
2. คลกเมน Object>>Group
3. การยกเลกกคลกเลอกภาพนนๆ แลวคลกเมน Object>>Ungroup
4. กรณรวมภาพเขาดวยกนแลว และกตองการแกไขสของภาพบางตว ใหใชเครองมอ Magic Wand คลกเลอก
ภาพทตองการ แลวจงคลกเปสยนสภาพ
จดเรยงภาพดวย Align Palette
เปนรปแบบการจดเรยงภาพ ใหภาพอยในตาแหนงเดยวกน เชน ทกภาพอยตรงกลาง หรอชดขอบ ซาย ชด
ขอบขวามอ เปนตน
1. ภาพตนฉบบกอนจดเรยง
2. จดเรยงทกภาพชดขอบซาย
3. จดเรยงทกภาพชดขอบขวา
4. จดเรยงทกภาพไวตรงกลางในแนวตง
5. จดเรยงทกภาพไวตรงกลางในแนวนอน
6. จดเรยงทกภาพไวดานบนในแนวเดยวกน
7. จดเรยงทกภาพไวดานลางในแนวเดยวกน
วธจดเรยงภาพ ใน Illustrator CS
1. คลกเมน Windows > Align
2. เลอกทกภาพทตองการจดเรยงดวยเครองมอ Selection
3. คลกปมเลอกลกษณะการจดเรยง อาจตองคลกเลอกมากกวา 1 ตวเลอก เพอใหไดรปแบบการจด เรยงภาพ
ตามตองการ
41 การสรางภาพกราฟกดวย Illustrator
การลาดบชนวตถ (Order)
ภาพทวาดขนมานน จะถกจดวางแบบซอนๆ กน ภาพทวาดกอนจะอยดานลาง ภาพทวาดทหลงจะอยดานบน
แตกสามารถจดตาแหนงภาพใหเลอนไปอยดานบนหรอดานลางได
1. วาดภาพซอนกน 3 รปดงตวอยาง
2. คลกเครองมอสาหรบเลอก แลวคลกเลอกภาพสามเหลยมทอยบนสด
3. คลกเมน Object > Arrange > Send to Back
4. ภาพจะถกสงไปอยลางสด
5. คาสงอนๆ ทเหลอ กทดลองคลกแตละคาสง
การสรางตวอกษร
ในโปรแกรมนสามารถพมพขอความไดหลากหลายรปแบบ ทาใหการออกแบบตวหนงสอดนาสนใจมาก ยงขน
เชน สรางตวหนงสอในแนวนอน ในแนวตง หรอโคงไปตามแนวเสน เปนตน
ลกษณะการพมพตวหนงสอแบบตางๆ
1. Type Tool
2. Area Type Tool
3. Type on a Path Tool
4. Vertical Type Tool
5. Vertical Area Type Tool
6. Vertical Type on a Path Tool
การพมพขอความแนวตงดวย Type Tool
1. คลกเครองมอพมพขอความ
2. คลกเลอกตวหนงสอแบบ Times New Roman ขนาด 15 ตวหนา (Bold)
3. คลกและพมพขอความ
4. พมพเสรจแลวคลกเครองมอสาหรบเลอก
5. คลกเลอกสวนระบายสภายใน
6. คลกเลอกสทตองการ
7. คลกเลอกสวนระบายสเสนขอบ
8. คลกเลอกสทตองการ
9. ถาเสนขอบหนาเกนไป กคลกเลอกขนาดทบางลง เชน 0.5 pt
42 การสรางภาพกราฟกดวย Illustrator
10. คลกเมน Effect>>Stylize>>Drop Shardow
11. กาหนดคาตางๆ ตามตองการ ใหคลกตกถก Preview กอนเพอดผลงานขณะปรบแตง
12. เสรจแลวคลกปม OK
พมพขอความดวย Area Type Tool
1. วาดวงร 1 รป แลวกอปปไวดวยคาสง Edit>>Copy
2. คลกเครองมอ Area Type Tool
3. คลกเลอกตวหนงสอแบบ Times New Roman ขนาด 8 pt
4. ชทเสนขอบของวงรทไดวาดไวแลวคลกหนงครง
5. พมพขอความเขาไปไดเลย ขอความจะอยแตในวงกลมเทานน พมพเสรจแลวคลกทวางๆ ระหวาง พมพ ถา
ตวหนงสอเลกเกนไป กลบออก คลกเลอกขนาดตวหนงสอทใหญกวาเดม แลวพมพขอความอกครง
6. ตววงรจะหายไป เพราะถกกาหนดใหโปรงใส
7. นาภาพวงรทกอปปไวเขามา
8. ยายขอความจดไวดวยกน
9. อาจระบายสวงรใหสวยงาม
พมพขอความดวย Type on a Path Tool
เปนการพมพขอความใหไตไปตามเสนโคง
1. คลกเครองมอ Pen Tool แลววาดเสนโคงดงภาพ
2. คลกเครองมอ Type on a Path Tool คลกเลอกตวหนงสอและขนาดตามตองการ
3. คลกทเสนโคงทไดวาดไว
4. พมพคาวา Type on a Path Tool
5. พมพเสรจแลวคลกเครองมอสาหรบเลอก แลวคลกทวางๆ
6. อาจวาดภาพประกอบใหดสวยงาม
การพมพขอความดวย Vertical Type Tool
1. วาดภาพสเหลยม ระบายสตามตองการ
2. คลกเครองมอ Vertical Type Tool
3. คลกเลอกตวหนงสอแบบ Times New Roman ขนาด 27 pt ตวหนา Bold
4. คลกทพนททางานแตหามคลกโดนภาพสเหลยม แลวพมพ CS2 ดงตวอยาง
5. คลกเครองมอสาหรบเลอก แลวยายตาแหนงไวดงตวอยาง
6. เปลยนแปลงคา Opacity โดยคลกและพมพ 50 แลวกด Enter
43 การสรางภาพกราฟกดวย Illustrator
การพมพขอความดวย Vertical Type on a Path Tool ใน Illustrator CS
1. คลกเครองมอ Pen Tool วาดเสนโคงในแนวตงดงตวอยาง
2. คลกเครองมอ Type on a Path Tool เลอกขนาดแบบตวหนงสอตามตองการ
3. คลกทเสนโคงทไดวาดไว
4. พมพขอความลงไป ขณะพมพถาตวหนงสอมขนาดใหญเกนไป กลบออก เลอกขนาดทเลกลง แลวกพมพใหม
5. ขอความทได ใหใชเครองมอ Rotate Tool หมนใหอยในตาแหนงทตองการ
6. อาจวาดภาพอนๆ ประกอบ ตกแตงใหสวยงาม
พมพขอความโคงเปนวงกลม
1. วาดวงกลม 1 วง แบบโปรงใส และจดการกอปปไวกอน ดวยคาสง Edit>>Copy
2. คลกเครองมอ Type on a Path Tool คลกเลอกตวหนงสอตามตองการ
3. คลกทเสนขอบวงกลมทไดวาดไว
4. พมพขอความตามตองการ
5. ถาขอความมขนาดใหญเกนไป กสรางแถบดาทขอความแลวเลอกขนาดทเลกลง
6. เสรจแลวคลกทวางๆ
7. การแกไขภาพ กเลอกภาพดวยเครองมอสาหรบเลอกกอน
8. ชทเสนสแดงทตวขอความ กดปมซายคางไวแลวลากในลกษณะหมน เพอดผลงานทได
9. เสรจแลวกจดการยายวงกลมทไดกอปปไว มาจดเขาดวยกน อาจตองลดขนาดลงเลกนอย
10. แลวกจดการระบายสตามใจชอบ
สรางขอความใหพลวไวกบรบบน
1. สรางขอความ
2. สราง stoke ใหเปนรปรบบน
3. เลอกขอความโดยใช seletion tool
44 การสรางภาพกราฟกดวย Illustrator
4. เลอก Object > Expand
5. เลอก Object > Ungroup
6. กด shift ทแปนพมพ จากนนใหเลอกตวอกษรทจะใหอยบนรบบน
7. เลอก Object > Arrange > Bring to Front
8. จากนนจะไดรปแบบตามทเราตองการเรยบรอยแลว
45 การสรางภาพกราฟกดวย Illustrator
การระบายสภาพ
การระบายสภาพสามารถระบายไดหลายแบบ ถาเครองมอสหรอ Color ไมปรากฏบนหนาจอ กคลก เมน
Windows แลวคลกตกถก Color เพอใหแสดงบนหนาจอ
การระบายดวยสใน Color Palette ใน Illustrator CS
1. คลกเลอกภาพดวยเครองมอ Selection Tool
2. คลกตวเลอกเพอระบายสภายใน
3. คลกสทตองการ
4. คลกตวเลอกเพอระบายสเสนขอบ
5. คลกเลอกสเสนขอบ
6. คลกทวางๆ ใหจดทภาพหายไป เพอยกเลกการเลอกภาพ
วาดรประบายสงายๆ กบ PATHFINDER
เครองมอหลกในครงนนนคอ Pathfinder
เครองมอ pathfinder ใครหาในโปรแกรมไมเจอใหเขาไปท Window > Pathfinder
เอาละเปดขนมาแลวจะเหนมหลายอนมากมาย เรามาไลดไปทละตวดกวา
46 การสรางภาพกราฟกดวย Illustrator
Unite – เปนการรวม shape เขาดวยกนใหเปนชนเดยวกน
Minus Front – เปนการนา shapeชนทอยขางบน มาตด shape ชนทอยขางลาง
Intersect – เปนการนาสวนของ shape ทเลอกไว ทซอนทบกนมาใช สวนอนจะตดทงออกไปจะ
47 การสรางภาพกราฟกดวย Illustrator
Exclude – จะตรงขามกบ Intersect กคอจะเอาแตสวนของ shape ทไมซอนทบกนมาใชงาน
Divide – เปนการตด shape ทซอนๆกน ใหแยกออกมาเปนสวนๆ
Trim – นา shape สวนบนไปตดดานลาง แตวาจะเกบทงคไวไมไดหายไปไหน กจะไดรปสเหลองแบบจนทรเสยว
สวนรปสแดงคงเดม
48 การสรางภาพกราฟกดวย Illustrator
Unite – Merge จะทาหนาทเหมอน Trim แตวาถา shape ทเลอกไวมสเดยวกนจะทาการ merge ไปดวย
Crop – เปนการเอา shape ทอยขางบนสดเปนแมแบบ และshape ทอยขางลางจะอยแตใรกรอบของรป
Outline – จะเหมอนกน Devide แลวเปลยนจาก fill เปน sttroke ใหอตโนมต
49 การสรางภาพกราฟกดวย Illustrator
Minus Back – ตรงขามกบ Minus Front คอเอา shape ขางลางตด shape ขางบน
การเลอกโหมดของสนนสาคญมาก ผใชงานควรเลอกโหมดสใหตรงกบงานทตองการใช เชนถาเปนงาน
สงพมพกควรเลอก CMYK เพอใหไดสทแสดงบนหนาจอทางานตรงกบสทปรนเนองานออกมา ถาเลอกเปน
RGB ภาพทแสดงบนหนาจอกบภาพทปรนออกมาจะแตกตางกนมาก
การเปลยนแปลงโหมดส ตามทเคยกลาวไปแลววาโหมดสนนสาคญมากตอชนงาน ซงถาเราตองการเปลยนแปลงโหมดสนนกทาได
งายๆดงน
ไปทเมนหลก (Menu Bar) เลอก Flie > Document color mode ใหเราเลอกโหมดสทตองการ
50 การสรางภาพกราฟกดวย Illustrator
การเกบไฟลในรปแบบตาง ๆ
กดปม Save document ตามรป (หรอคยลด Ctrl+S) จากนนทาตามลาดบดงตอไปน
1. เลอกโฟลเดอรทตองการเกบงาน
2. เลอกซบโฟลเดอรทจะเกบงานจนกวาจะเจอโฟลเดอรทตองการ
3. พมพชอไฟล
4. เลอกนามสกลทจะเกบงาน นามสกลมาตรฐานของ Inkscape คอ SVG ซงเปนรปแบบมาตรฐานของ W3C สาหรบ
งานกราฟกทเปน Vector อยางไรกตาม Inkscape ยงรองรบการเกบไฟลฟอรแมตอนทสาคญ อยางเชน eps
หรอ ps (Postscript)
การบนทกไฟล และการบนทกใหเปนเวอรชนตางๆกน ถาเรานาไฟลทสรางดวย Illustrator CS6 ไปเปดกบ Illustrator CS5 ยอมมปญหาเกดขนเนองมาจากวา CS6
นนมคาสงใหม ทไมมใน CS5 ทาใหไฟลทเราทามานนเปดไมได ดงนนในหวขอนจะเปนการ Save ไฟล และ
เปลยนใหเปนเวอรช นตางๆ การบนทกชนงานนนมข นตอนดงน
1.ไปทเมนหลก (Menu bar) จากนนไปท File จะเปนดงรป
51 การสรางภาพกราฟกดวย Illustrator
จะมรายละเอยดทเกยวกบการบนทกชนงานดงน
1.1 Save บนทกงานททาอยในปจจบน
1.2 Save as บนทกงานททาอยเปน โดยบนทกเปนไฟลใหม
1.3 Save a copy บนทกงานททาอยในปจจบนโดยบนทกซาไฟลเดม
1.4 Save for web บนทกชนงานเปนไฟลทใชสาหรบเวบไซต ซงจะเหมอนเครองมอของ Photoshop
เมอเราเลอก save แบบใดแบบหนงในครงแรกจะมหนาตางดงรปขนมา
52 การสรางภาพกราฟกดวย Illustrator
เมอคลกทป ม Save จะมหนาตางดงรป
ใหเราเลอกเวอรช นของไฟลทตองการบนทกจากนน คลกทป ม OK
53 แหลงทมาของขอมล และรปภาพ
แหลงทมาของขอมล และรปภาพ
http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2 https://www.facebook.com/infographic.thailand http://www.flashfly.net/wp/?p=33832 http://www.marketplus.in.th/ http://www.socialpost.in.th https://www.facebook.com/Pasit.CRM http://www.qlf.or.th/Mobile/Details?contentId=300 http://www.tcdc.or.th/src/16562/ http://infographic.in.th/infographic https://homegame9.wordpress.com/ http://www.prc.ac.th/newart/webart/colour04.html http://thumbsup.in.th/2014/08/10-tips-for-increasing-infographic-share/ http://th.wikipedia.org/wiki/ http://www.yupparaj.ac.th http://www.infographic.in.th fb.sanook.com www.flashfly.net www.jstpmedia.org www.pinterest.com www.uasean.com blog.eduzones.com www.readyplanet.com coolkidsdesign.com www.infographicunion.com http://thaimarketing.in.th http://piktochart.com/ http://finlawtech.com/ http://www.designil.com/image-photo-license-101.html http://www.zociality.info http://infographic.in.th/ http://www.wikihow.com/Create-Gifographics https://webdam.com/blog/top-5-marketing-gifographics http://th.wikihow.com/GIF