nightingale rose diagram the rose diagram

Nightingale rose diagram ม ช อเร ยกภาษาไทยค อ

1. 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 หน้าจอของ .....................................................................................................................................32Illustrator แถบคําสั่ง (Menu Bar) .....................................................................................................................................32 กล่องเครื่องมือ (Tool Box).............................................................................................................................33 สร้างรูปทรงต่างๆ...........................................................................................................................................34 การจัดการวัตถุ.................................................................................................................................................39 การสร้างตัวอักษร...........................................................................................................................................41 ..............................................................................................................................................45การระบายสีภาพ
2. และรูปภาพ...................................................................................................................53
3. คืออะไร Infographic ยอมาจาก Information Graphic คือ ภาพหรือกราฟกซึ่งบงชี้ถึงขอมูล ไมวาจะเปนสถิติ ความรู ตัวเลข ฯลฯ เรียกวาเปนการยนยอขอมูลเพื่อใหประมวลผลไดงายเพียงแคกวาดตามอง ซึ่งเหมาะสําหรับผูคนในยุคไอที ที่ตองการเขาถึงขอมูลซับซอนมหาศาลในเวลาอันจํากัด (เหตุผลเพราะมนุษยชอบและจดจําภาพสวยๆ ไดมากกวาการ อาน) และในปจุบันกําลังเปนที่นิยมในโลกของ Social Network ขอความน้ําทวมทุง ตารางซับซอน ภาพประกอบสุดเชย และอีกหลายเครื่องมือเลาเรื่องยุคเกาที่ทําใหมนุษย โลกเบื่อหนายกําลังจะกลายเปนอดีต เพราะวันนี้โลกมี Infographic เครื่องมือเลาเรื่องพันธุใหมที่จะเปลี่ยนขอมูลยากๆ ใหเปนเรื่องงายๆที่ทุกคนจะชมไดอยางสนุกสนาน Infographic นั้นมาจากคําในภาษาอังกฤษสองคําคือ Information และ Graphics คําแรกนั้นหมายถึง สารสนเทศ หรือขอมูลที่ถูกประมวลผลและจัดระบบไวแลว สวนคําที่ 2 นั้นเปนคําที่ใชเรียกภาพหรือลวดลายประกอบ ตางๆ ซึ่งสามารถปรากฏในมุมมองหรือวัสดุที่หลากหลาย เมื่อรวมกันแลว Infographic จึงเปนการแสดงขอมูลหรือ แหลงที่มารูปภาพ : //www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
4. Infographic จึงมีอิทธิพลมากในการบอกเลาเรื่องราวทุกแขนง ทั้งวิทยาการ ประวัติศาสตร คณิตศาสตร และ สถิติศาสตร และกลายเปนเครื่องมือสําคัญของนักการตลาด นักการเงิน นักประวัติศาสตร บริษัทหางราน รวมถึงนัก การศึกษาเพื่อการแสดงขอมูลที่ซับซอนใหดูเขาใจงาย ประโยชนและพลังของ Infographic นั้นมีอยูมากมาย เพราะดวยแผนภาพสวยๆนี้ สามารถทําใหคนทั่วๆไป สามารถเขาถึง เขาใจ ขอมูลปริมาณมากๆ ดวยแผนภาพภาพเดียวเทานั้น ดวยขอมูลที่ถูกคัดกรองมาเปนอยางดี ทําให ผูอานเขาใจไดงาย เปนวิธีการนําเสนอขอมูลเชิงสรางสรรค ซึ่งสามารถหยิบยกเรื่องราวเล็กๆ ไปจนถึงเรื่องราวใหญโต มานําเสนอ ในมุมมองที่แปลกตา ทันสมัย ทันตอเหตุการณในโลกปจจุบัน โดยรูปแบบหรือประเภทของ Infographic ตามวัตถุประสงคในการใชงาน ความเปนมาของ Infographics กุหลาบของไนติงเกล อินโฟกราฟกยุคบุกเบิก กอนที่จะมาคลายขอสงสัยกันวา ทําไมถึงอินจัง? ลองกลับไปดูการทํางานของอินโฟกราฟกในยุคแรกๆ กัน คง คิดไมถึงวานอกจากฟลอเรนซ ไนติงเกล (Florence Nightingale) จะเปนพยาบาลในตํานานผูอุทิศตนดูแลคนไขอยาง ไมเห็นแกเหน็ดเหนื่อยแลว ไนติงเกลยังเปนผูออกแบบอินโฟกราฟกที่มีคุณูปการตอการสาธารณสุข (ของทหารและชน ชั้นลาง) อยางมหาศาล ดวยการอุทิศเวลารวบรวมขอมูลและออกแบบ “กุหลาบไนติงเกล” ไดอะแกรมทรงพลังระดับ เปลี่ยนสังคมขึ้นมาได จากการไดเขาไปดูแลทหารที่ผานสงครามมาในคาย เธอพบวาสิ่งที่คราชีวิตของทหารผานศึกไดในจํานวนมาก เทาๆ กับทหารที่ตายในสงคราม ก็คือสภาพความเปนอยูในสถานพยาบาลของทหารที่ทั้งสกปรกและแออัดยัดเยียด ทํา ใหเกิดการติดเชื้อรุนแรงและการสูญเสียชีวิตโดยไมจําเปน ไนติงเกลเสนอขอมูลนี้ตอรัฐ แตสถาบันชั้นสูงไมสนใจเสียง แหลงที่มารูปภาพ : //www.learningstudio.info/infographics-design/
5. เธอจึงคิดคนหาทางนําเสนอขอมูลใหมโดยปรึกษากับนักสถิติศาสตร จนในที่สุด ไนติงเกลก็สามารถออกแบบ Diagram of the Causes of Mortality ที่เปรียบเทียบสวนตางของจํานวนการเสียชีวิต ของทหารจากเหตุสุดวิสัย และเหตุที่สามารถปองกันไดดวยการสาธารณสุขที่ดีขึ้น แทนที่จะนําเสนอเปนตารางบรรจุ ขอมูลยาวเหยียด ไดอะแกรมของไนติงเกลบงชี้ความตางของขอมูลดวยสีและขยายพื้นที่ออกจากศูนยกลางจนดูเหมือน กลีบดอกกุหลาบ (ในเวลาตอมาผูคนจึงเรียกผลงานชิ้นนี้วา Nightingale Rose Diagram) ฟลอเรนซ ไนติงเกล รูวาเธอมีเวลาดึงความสนใจจากผูมีอํานาจไดไมมาก ฉะนั้น เธอจึงตองนําเสนอขอมูล ในรูปแบบที่ทั้งดึงดูดที่สุดและเขาใจงายที่สุดไปพรอมกัน เธอเริ่มเผยแพรไดอะแกรมนี้สูผูมีอํานาจที่เกี่ยวของ (ไป จนถึงพระราชินีวิคตอเรียที่ก็มีโอกาสไดทอดพระเนตร) จนในที่สุด ขอเสนอของเธอก็ถูกรับฟง สงผลใหการ สาธารณสุขในคายทหารคอยๆ พัฒนาดีขึ้น หมวดหมูของ Infographics สามารถแบงไดเปน 7 กลุมใหญๆ ดังนี้ 1.ขาวเดน ประเดนรอน และสถานการณวิกฤต เปน Infographics ที่ไดรับการแชรมากๆ มักจะเปนประเด็นใหญระดับประเทศ เชน ประเด็นการแกไข รัฐธรรมนูญ แหลงที่มารูปภาพ : //www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
6. เชน เลาถึงกลยุทธการออมเงิน ที่ใครๆ ก็มักมองขาม 3.ใหความรู ในรูปแบบของ Did You Know หรือ สถิติสําคัญทางประชากรตางๆตลอดจนการถายทอดความรูทางวิชาการ ที่นาเบื่อ ใหมีสีสัน สนุก และ นาติดตาม แหลงที่มารูปภาพ : //www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
7. Infographics จะชวยทําใหตํานานเหลานั้นบรรจุ อยูในพื้นที่ๆ จํากัดไดอยางนาทึ่ง 5.อธิบายผลสํารวจ และงานวิจัย Infographics เหมาะที่สุดที่จะถายทอดงานวิจัยที่ดูยุงเหยิงไปดวยตัวเลขและขอมูลมหาศาลออกมาเปน แผนภาพสวยๆ และทรงพลัง มีหลายบริษัทเริ่มใชเครื่องมือนี้ เพื่อทําใหงานวิจัยของตัวเองเขาถึงคนหมูมาก แหลงที่มารูปภาพ : //www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
8. ขอเท็จจริงเหลานี้ลวน มุงหวังใหคนอานเกิดการเปลี่ยนแปลงพฤติกรรมของคนในสังคมใหดีขึ้น หากไดรับการแชรมากๆ ในโลกออนไลน ก็อาจ สรางกระแส จนถึงขั้นนําพาไปสูการเปลี่ยนแปลงพฤติกรรมในโลกออนไลนในที่สุด 7.โปรโมทสินคาและบริการ ตัวอยางการใช Infographic ในการโปรโมทสินคา เหตุผลวาทําไมถึงเปลี่ยนไปใช Nokia Lumia ในสไตล Infographic แหลงที่มารูปภาพ : //www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
9. กลาววาเหตุผลที่ตองการใช 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. to use share or modify นําไปใช แบงปน หรือแกไขไดฟรี Free to use, share or modify, even commercially นําไปใช แบงปน หรือแกไขไดฟรีแมในเชิงพาณิชย วรรณะของสี คือ สีที่ใหความรูสึกรอน-เย็น ในวงจรสีจะมีสีรอน 7 สี และสีเย็น 7 สี ซึ่งแบงที่ สีมวงกับสีเหลือง ซึ่งเปนไดทั้ง สองวรรณะ 1. สีตรงขาม หรือสีตัดกัน หรือสีคูปฏิปกษ เปนสีที่มีคาความเขมของสี ตัดกันอยางรุนแรง ในทางปฏิบัติไมนิยม นํามาใชรวมกัน เพราะจะทําใหแตละสีไมสดใสเทาที่ควร การนําสีตรงขามกันมาใชรวมกัน อาจกระทําไดดังนี้ 1. มีพื้นที่ของสีหนึ่งมาก อีกสีหนึ่งนอย 2. ผสมสีอื่นๆ ลงไปสีสีใดสีหนึ่ง หรือทั้งสองสี 3. ผสมสีตรงขามลงไปในสีทั้งสองสี 2. สีกลาง คือ สีที่เขาไดกับสีทุกสี สีกลางในวงจรสี มี 2 สี คือ a. สีน้ําตาล กับ สีเทา i. สีน้ําตาล เกิดจากสีตรงขามกันในวงจรสีผสมกัน ในอัตราสวนที่เทากัน สีน้ําตาลมีสมบัติ สําคัญ คือ ใชผสมกับสีอื่นแลวจะทําใหสีนั้น ๆ เขมขึ้นโดยไมเปลี่ยน แปลงคาสี ถาผสมมาก ๆ เขาก็จะกลายเปนสีน้ําตาล แหลงที่มารูปภาพ : //www.prc.ac.th/newart/webart/colour09.html
12. สีเทา เกิดจากสีทุกสี ๆ สีในวงจรสีผสมกัน ในอัตราสวนเทากัน สีเทา มีสมบัติที่สําคัญ คือ ใช ผสมกับสีอื่น ๆ แลวจะทําให มืด หมน ใชในสวนที่เปนเงา ซึ่งมีน้ําหนักออนแกในระดับตาง ๆ ถาผสมมาก ๆ เขาจะกลายเปนสีเทา ระบบสี RGB ระบบสี RGB เปนระบบสีของแสง ซึ่งเกิดจากการหักเหของแสงผานแทงแกวปริซึม จะเกิดแถบสีที่เรียกวา สีรุง (Spectrum) ซึ่งแยกสีตามที่สายตามองเห็นได 7 สี คือ แดง แสด เหลือง เขียว น้ําเงิน คราม มวง ซึ่งเปนพลังงานอยูใน รูปของรังสีที่มีชวงคลื่นที่สายตาสามารถมองเห็นได แสงสีมวงมีความถี่คลื่นสูงที่สุด คลื่นแสงที่มีความถี่สูงกวาแสงสีมวง เรียกวา อุลตราไวโอเลต (Ultra Violet) และคลื่นแสงสีแดง มีความถี่คลื่นต่ําที่สุด คลื่นแสงที่ต่ํากวาแสงสีแดงเรียกวา อินฟราเรด (InfraRed) คลื่นแสงที่มี ความถี่สูงกวาสีมวง และต่ํากวาสีแดงนั้น สายตาของมนุษยไมสามารถรับได และเมื่อศึกษาดูแลวแสงสีทั้งหมดเกิดจาก แสงสี 3 สี คือ สีแดง (Red) สีน้ําเงิน (Blue) และสีเขียว (Green) ทั้งสามสีถือเปนแมสีของแสง เมื่อนํามาฉายรวมกัน จะทําใหเกิดสีใหมอีก 3 สี คือ สีแดงมาเจนตา สีฟาไซแอน และสีเหลือง และถาฉายแสงสีทั้งหมดรวมกันจะไดแสงสีขาว จากสมบัติของแสงนี้ไดนํามาใชประโยชนทั่วไปในการฉายภาพยนตร การบันทึกภาพวิดีโอ ภาพโทรทัศน การสรางภาพเพื่อการนําเสนอทางจอคอมพิวเตอร และการจัดแสงสีในการแสดง เปนตน แหลงที่มารูปภาพ : //www.prc.ac.th/newart/webart/colour06.html
13. (Infographics) 1. ดานขอมูล ขอมูลที่จะนําเสนอ ตองมีความหมาย มีความนาสนใจ เรื่องราวเปดเผยเปนจริง มีความถูกตอง แหลงที่มารูปภาพ : //sites.google.com/a/hoksib.ac.th/kar-srang-websit/home/chud-si-baeb-infographic
14. การเลือกหัวขอ 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. การเลือกโทนสีเพื่อใหดูเปนอันหนึ่งอันเดียวกัน กําหนดสีหลัก สีรอง 3. การจัดลําดับความนาสนใจของขอมูล อะไรควรขึ้นกอน อะไรควรอยูหลัง อะไรควรเนน 4. การออกแบบวางระบบการรับขอมูล เชน บนลงลาง ซายไปขวา ตรงกลางกอน 5. การออกแบบภาพประกอบใหออกมาแนวเดียวกัน และเขาใจงาย นาสนใจ 6. ตรวจสอบความถูกตองและภาพรวมความสวยงาม 7. เผยแพร ออกแบบ Infographic ดวย 9 Layout เชื่อหรือไมวา หากมีขอมูลดีๆอยูในมือ แตนําเสนอมันไมถูกวิธี ขอมูลดีๆก็อาจกลายเปนไมดีได (เหมือนเจตนา ดีแตพูดไมเปนก็กลายเปนไมดีไปซะงั้น) การทํา Infographic ก็เชนกัน ถาเลือกรูปแบบของ Infographic ไมเหมาะสม กับขอมูล ก็จะทําใหขอมูลถูกลดความหมาย หรือไมนาสนใจเทาที่ควร วันนี้ Infographic Thailand เลยมาเสนอรูปแบบ Infographic แบบตางๆ ที่สามารถนําไปใชสรางงาน Infographic ของใหเปน Infographic ภาพไดทันที! แหลงที่มารูปภาพ : //www.learningstudio.info/infographics-design/
16. Visualised Article เหมาะสําหรับการนําบทความ งานเขียน มาเลาผาน Infographic เพราะฉะนั้น Infographic แบบ นี้จึงตองใชการนําเสนอที่เหมาะสมกับขอมูลแตละชนิด เชน ถามีตัวเลขก็ควรนําเสนอผานกราฟแบบตางๆ หรือ ตัวหนังสือก็สามารถสื่อสารดวยภาพประกอบ หรือ icon เทคนิค : สรุปบทความ และเลือกประเด็นกอนนําเสนอ ตัวอยาง จาก Infographic Thailand
17. Listed เปน Infographic ที่คนไทยนาจะคุนเคยกันดี มักจะใชตัวเลขนําในเฮดไลน เชน “5วิธี” ดูแลหุนสวย, “4 เทคนิค” พิชิตใจนายจาง การนําเสนอแบบเปนขอๆแบบนี้เหมาะกับเรื่องที่ไมยาวนัก และไมควรเปนเรื่องที่เครียดมาก เกินไป เทคนิค : ลองวิเคราะหวาขอไหนสามารถรวบเปนขอเดียวกันได เพราะยิ่งมีหลายขอยิ่งจดจําไดยาก ตัวอยาง จาก Infographic Thailand
18. Comparison เหมาะกับใชเพื่อเปรียบเทียบระหวางของสิ่งหนึ่งกับอีกสิ่ง โดยการนําเสนอคูกันแบบนี้ทําใหเห็นภาพได ชัดเจนวาแตกตางอยางไรบาง เทคนิค : ใชการจัดวางที่เหมือนกันทั้งสองฝง ทําใหเห็นความตางที่ชัดเจน, ใชสีคูตรงขามเปนตัวแบงฝง ทําให ดูงายขึ้น ตัวอยาง โดย Infographic Thailand
19. Structure เหมาะกับการใชอธิบายสวนประกอบของบางสิ่ง เทคนิค : พยายามสรางภาพใหเห็นแตละสวนประกอบ เชน ภาพเหมือนสแกนเขาไปภายใน หรือ การแยกแต ละสวนออกหางกัน ไมซอนกัน ตัวอยางโดย Infographic Thailand
20. TimeLine เหมาะสําหรับใชเลาประวัติความเปนมาเปนไปของสิ่งใดสิ่งหนึ่ง โดยใชเสนแทนระยะเวลา สามารถใชได กับทุกอยาง เชนประวัติคน ประวัติองคกร ประวิติสถานที่ เทคนิค : ใชความหางของแตละจุด ชวยบอกความหางของแตละชวงเวลาได ตัวอยาง โดย visual.ly
21. Flowchart เปนการนําเสนอแบบเปนลําดับขั้น เหมาะกับการเสนอเปนควิซใหผูอานไดทราบคําตอบที่ตองการโดย การอานไลลงไปตามเสนจนถึงดานลางสุด เทคนิค : ระวังเรื่องความยุงเหยิงของเสน, ใชสีชวยแยกเสน ลดความสับสนในการอาน ตัวอยางโดย Infographic Thailand
22. RoadMap เปนการอธิบายทีละขั้นตอน เหมาะกับการอธิบายขั้นตอนการทํางาน หรือการเดินทาง เชน ขั้นตอนการ ทํางานขององคกร ขั้นตอนการรับพนักงานเขาทํางาน การเดินทางของเด็กนักเรียนสูการเปนนิสิต เทคนิค : เรื่องตองนาสนใจพอที่คนอยากจะรูทีละขั้นตอนขนาดนี้ ตัวอยาง โดย Infographic Thailand
23. Useful Bait เปน Infographic ที่ทําใหเห็นวิธีทําบางอยาง โดยที่เห็นแลวสามารถนําไปใชไดทันที เทคนิค : ตองใหความสําคัญกับการอานงาย และความเขาใจงาย มากกวาความสวยงาม ตัวอยาง โดย Infographic Thailand
24. NumberPorn คือ Infographic ที่เต็มไปดวยตัวเลข และกราฟ หากมีตัวเลขที่นาสนใจมากเพียงพอก็สามารถนําเสนอ ในรูปแบบนี้ได เทคนิค : ไมใชแคมีตัวเลขมาก แตตัวเลขตองนาสนใจ หรือเกี่ยวของกับคนอานมากพอ, ถึงจะมีกราฟหลายประเภทแตควรเลือกสไตลกราฟฟคแบบเดียวกันทั้งภาพ เชน 3D, Flat ตัวอยาง โดย Infographic Thailand
25. รูปแบบ Infographic ทั้ง 9 แบบ ทาง Infographic Thailand หวังเปนอยางยิ่ง วาบทความนี้จะชวยใหผูอานไดเพิ่มพูนความรู Infographic มากยิ่งขึ้น และสามารถนําไปปรับใชในงาน Infographic ของเพื่อใหเปน Infographic ที่สมบูรณมากยิ่งขึ้นนะ การสรุปใจความไวใน Infographic ‘หัวใจ’ ของการทําอินโฟกราฟฟกที่ดี นั่นคือ ความเขาใจในความหมายของขอมูล ปญหาหนึ่งที่พบบอยคือ อินโฟกราฟฟกจํานวนมากดูดีแตทําใหคนสับสนวาตองการจะสื่ออะไร เนื่องจากไมไดจัดวางขอมูล (โดยเฉพาะตัวเลข) ในทางที่รักษาความหมายของมันเอาไว ดีไซน ‘สวย’ แตไม ‘สื่อ’ เสนที่ลากรูปถวยกาแฟแตละยี่หอไปยังราคา รวมถึงการจัดวางตําแหนงถวยกาแฟตางๆ ไมมีความเกี่ยวของ ใดๆ กับตัวเลข “ราคา” ที่แสดง ใช “ขนาด” ของแทงกราฟเพื่อสื่อราคาของกาแฟแตละยี่หอ ซึ่งก็ทําไดงายๆ เริ่มจากการพล็อตราคาของกาแฟยี่หอตางๆ โดยเรียงลําดับราคาจากแพงสุดไปถูกสุด หรือถูกสุดไปแพงสุด และเปลี่ยนความยาวของเสนใหไดสัดสวนตามราคา คน มองปราดเดียวจะไดเห็นชัดวายี่หอไหนแพงกวากัน แหลงที่มารูปภาพ : //thaipublica.org/2012/09/good-infographics-1/
26. ‘สื่อ’ แต ‘ผิดสาร’ จากรูปเปนการนําเอารูปถวยกาแฟแตละยี่หอมาวางแทนกราฟ ปรับความสูงของถวยใหเทากับความสูงของ กราฟแทง (ไมนับหลอด) จุดแข็งของภาพนี้คือนอกจากจะเห็นชัดทันทีวากาแฟยี่หอไหนแพงกวากันแลว ยังสื่อระดับความแตกตางของ ราคาดวย เชน ในเมื่อกาแฟคาปูชิโนเย็นของสตารบัคสแพงกวายี่หอบลูคัพประมาณ 1.5 เทา (125 เทียบกับ 85 บาท) และแพงกวากาแฟยี่หอแอมะซอน 2.8 เทา (125 เทียบกับ 45 บาท) ถวยกาแฟสตารบัคสในรูปจึงสูงกวาถวยกา แฟบลูคัพ 1.5 เทา และสูงกวาถวยกาแฟแอมะซอน 2.8 เทาตามลําดับ จุดออนที่ใหญกวาจุดแข็งของภาพนี้คือ เนื่องจากมันใช ‘ขนาด’ ของถวยกาแฟแทน ‘ราคา’ จึงมีความเสี่ยงสูง ที่ผูดูจะเขาใจผิดวา กาแฟเหลานี้มีขนาดถวยแตกตางกันมาก ทั้งที่ในความจริงไมใช และในอินโฟกราฟฟกตนฉบับ รวมทั้งฉบับเลียนแบบของผูเขียนดานบนก็มีขอความ “ราคาแกวขนาดใหญสุดของแตละยี่หอ มีปริมาณประมาณ 22 ออนซ (650 มิลลิลิตร)” เพื่อสื่อวาแตละถวยมีปริมาณกาแฟใกลเคียงกัน แหลงที่มารูปภาพ : //thaipublica.org/wp-content/uploads/2012/09/coffee-myversion.png แหลงที่มารูปภาพ : //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 เปนโปรแกรมสําหรับสรางภาพลายเสนที่มีความคมชัดสูง ใชในการวาดภาพ โดยจะ สรางภาพที่มีลักษณะเปนลายเสน หรือที่เรียกวา Vector Graphic จัดเปนโปรแกรมระดับมืออาชีพที่ใชกันเปน มาตรฐานในการออกแบบระดับสากลสามารถทํางานออกแบบตางๆ ไดหลากหลาย ไมวาจะเปนสิ่งพิมพ บรรจุภัณฑ เว็บ และภาพเคลื่อนไหวตลอดจนการสรางภาพเพื่อใชเปนภาพประกอบในการทํางานอื่นๆ เชน การตูน ภาพประกอบ หนังสือ เปนตน รูจักกับภาพ Vector และ Bitmap กราฟกแบบ Bitmap คือ ภาพที่เกิดจากจุดภาพในรูปภาพที่รวมกันเปนภาพขึ้น โดยภาพหนึ่งๆ จะประกอบไปดวยจุดภาพหรือ พิกเซลมากมาย และเเตละภาพที่สรางขึ้นจะมีความหนาเเนนของจุดภาพ หรือบางครั้งแทนวาความละเอียด (ความ คมชัด)ที่เเตกตางกันไป จึงใชในการบอกคุณสมบัติของภาพ จอภาพ หรือ อุปกรณแสดงผลภาพได ไฟลภาพแบบ Bitmap ในระบบวินโดวสคือ ไฟลที่มีนามสกุล .BMP, .PCX. , .TIF, .GIF, .JPG, .MSP, .PCD เปนตน สําหรับโปรแกรมที่ใชสรางกราฟกแบบนี้คือ โปรแกรม Paint ตางๆ เชน Paintbrush, PhotoShop, Photostyler เปนตน กราฟกแบบ Vector ภาพที่เกิดจากการกําหนดพิกัดและการคํานวณคาบนระนาบสองมิติ รวมทั้งมุมและระยะทาง ตามทฤษฎี เวกเตอรในทางคณิตศาสตร ในการกอใหเกิดเปน เสน หรือรูปภาพ ขอดีคือ ทําใหสามารถยอขยายได โดยคุณภาพไมเปลี่ยนแปลง ขอเสียคือภาพไมเหมือนภาพจริงเปนไดเพียง ภาพวาด หรือใกลเคียงภาพถายเทานั้น ขอมูลภาพพวกนี้ไดเเกไฟลสกุล eps, ai (adobe illustrator) เปนตน ลักษณะเดนของ Vector คือ สามารถยืดหรือหดภาพเทาใดก็ได โดยที่ภาพจะไมแตก ความละเอียดของภาพไม เปลี่ยนแปลง คงคุณภาพของภาพไวไดเหมือนเดิม และยังสามารถขยายเฉพาะความกวางหรือความสูง เพื่อใหมองเห็น
30. 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. 2 สวนหลัก ๆ คือ สวนที่เปนเสนขอบ(Stroke) และพื้นวัตถุ(Fill) การสรางภาพดวยวิธีนี้มีขอดีคือ สามารถขยายภาพมากๆ ได โดยไมเสียรายละเอียด (เพราะภาพเกิดจากการ คํานวณ) ซึ่งตางจากภาพชนิด Bitmap (หรือ Raster) ที่เปนภาพอันเกิดจากจุดสีเล็กๆ (พิกเซล) มารวมกันเปนภาพ
32. (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. เปนหมวดของคําสั่งที่ใชสรางเทคนิคพิเศษใหกับภาพคลาย 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. จะประกอบไปดวย 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. การวาดก็เลื่อนเมาสไปที่พื้นที่ทํางาน กดปุมซายของเมาสคางไว แลวลากออก เมื่อไดขนาดของ สี่เหลี่ยมตาม ตองการแลว ก็ปลอยปุมซายของเมาส 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. Shift ที่แปนพิมพคางไวกอน แลววาดวงกลม วาดเสร็จแลวก็ปลอยเมาส กอนแลวจึง ปลอยปุม Shift 5. การวาดวงกลมที่ตองการระบุขนาดเสนผาศูนยกลางที่แนนอนก็สามารถทําได โดยคลิกเลือกเครื่อง มือ Ellipse แลวคลิกที่พื้นที่ทํางาน 6. จะปรากฏกรอบขอความขึ้นมา ก็กําหนดคาในสวน Width และ Height ใหเทากันแลวคลิก OK การวาดรูปหลายเหลี่ยมดวย Polygon Tool 1. คลิกเครื่องมือ Polygon Tool คลิกเลือกสีระบาย สีเสนขอบ ขนาดเสนขอบใหเรียบรอย
37. การวาดรูปหลายเหลี่ยมแบบสมสวน ใหกดปุม Shift คางไวขณะวาด 4. การวาดรูปที่มีขนาดตามตองการ ก็คลิกที่พื้นที่ทํางาน แลวกําหนดคาตางๆ เชน Radius เปนจํา นวนมุมรัศมีของ ภาพหลายเหลี่ยม และ Sides เปนจํานวนดาน เสร็จแลวคลิกปุม OK การวาดรูปดาวดวย Star Tool 1. คลิกเครื่องมือ Star Tool 2. การวาดก็ลากเมาสวาดภาพตามตองการ 3. การวาดดาวแบบสมสวน ใหกดปุม Shift คางไวขณะวาด 4. การวาดที่ตองการขนาดที่แนนอน ก็คลิกที่พื้นที่ทํางาน กําหนดคาตางๆ เชน Radius1, Radius2 และ Point เสร็จ แลวคลิกปุม OK
38. 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. 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. และ 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. จะถูกจัดวางแบบซอนๆ กัน ภาพที่วาดกอนจะอยูดานลาง ภาพที่วาดทีหลังจะอยูดานบน แตก็สามารถจัดตําแหนงภาพใหเลื่อนไปอยูดานบนหรือดานลางได 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. 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. 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. Object > Expand 5. เลือก Object > Ungroup 6. กด shift ที่แป้นพิมพ์ จากนั้นให้เลือกตัวอักษรที่จะให้อยู่บนริบบิ้น 7. เลือก Object > Arrange > Bring to Front 8. จากนั้นจะได้รูปแบบตามที่เราต้องการเรียบร้อยแล้ว
45. Color ไมปรากฏบนหนาจอ ก็คลิก เมนู Windows แลวคลิกติ๊กถูก Color เพื่อใหแสดงบนหนาจอ การระบายดวยสีใน Color Palette ใน Illustrator CS 1. คลิกเลือกภาพดวยเครื่องมือ Selection Tool 2. คลิกตัวเลือกเพื่อระบายสีภายใน 3. คลิกสีที่ตองการ 4. คลิกตัวเลือกเพื่อระบายสีเสนขอบ 5. คลิกเลือกสีเสนขอบ 6. คลิกที่วางๆ ใหจุดที่ภาพหายไป เพื่อยกเลิกการเลือกภาพ วาดรูประบายสีงายๆ กับ PATHFINDER เครื่องมือหลักในครั้งนี้นั่นคือ Pathfinder เครื่องมือ pathfinder ใครหาในโปรแกรมไม่เจอให้เข้าไปที่ Window > Pathfinder เอาล่ะเปิดขึ้นมาแล้วจะเห็นมีหลายอันมากมาย เรามาไล่ดูไปทีละตัวดีกว่า
46. เป็นการรวม shape เข้าด้วยกันให้เป็นชิ้นเดียวกัน Minus Front – เป็นการนํา shapeชิ้นที่อยู่ข้างบน มาตัด shape ชิ้นที่อยู่ข้างล่าง Intersect – เป็นการนําส่วนของ shape ที่เลือกไว้ ที่ซ้อนทับกันมาใช้ ส่วนอื่นจะตัดทิ้งออกไปจ้ะ
47. จะตรงข้ามกับ Intersect ก็คือจะเอาแต่ส่วนของ shape ที่ไม่ซ้อนทับกันมาใช้งาน Divide – เป็นการตัด shape ที่ซ้อนๆกัน ให้แยกออกมาเป็นส่วนๆ Trim – นํา shape ส่วนบนไปตัดด้านล่าง แต่ว่าจะเก็บทั้งคู่ไว้ไม่ได้หายไปไหน ก็จะได้รูปสีเหลืองแบบจันทร์เสี้ยว ส่วนรูปสีแดงคงเดิม
48. Merge จะทําหน้าที่เหมือน Trim แต่ว่าถ้า shape ที่เลือกไว้มีสีเดียวกันจะทําการ merge ไปด้วย Crop – เป็นการเอา shape ที่อยู่ข้างบนสุดเป็นแม่แบบ และshape ที่อยู่ข้างล่างจะอยู่แต่ใรกรอบของรูป Outline – จะเหมือนกัน Devide แล้วเปลี่ยนจาก fill เป็น sttroke ให้อัตโนมัติ
49. – ตรงข้ามกับ Minus Front คือเอา shape ข้างล่างตัด shape ข้างบน การเลือกโหมดของสีนั้นสําคัญมาก ผู้ใช้งานควรเลือกโหมดสีให้ตรงกับงานที่ต้องการใช้ เช่นถ้าเป็นงาน สิ่งพิมพ์ก็ควรเลือก CMYK เพื่อให้ได้สีที่แสดงบนหน้าจอทํางานตรงกับสี่ที่ปริ้นเนื้องานออกมา ถ้าเลือกเป็น RGB ภาพที่แสดงบนหน้าจอกับภาพที่ปริ้นออกมาจะแตกต่างกันมาก การเปลี่ยนแปลงโหมดสี ตามที่เคยกล่าวไปแล้วว่าโหมดสีนั้นสําคัญมากต่อชิ้นงาน ซึ่งถ้าเราต้องการเปลี่ยนแปลงโหมดสีนั้นก็ทําได้ ง่ายๆดังนี้ ไปที่เมนูหลัก (Menu Bar) เลือก Flie > Document color mode ให้เราเลือกโหมดสีที่ต้องการ
50. 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. บันทึกงานที่ทําอยู่ในปัจจุบัน 1.2 Save as บันทึกงานที่ทําอยู่เป็น โดยบันทึกเป็นไฟล์ใหม่ 1.3 Save a copy บันทึกงานที่ทําอยู่ในปัจจุบันโดยบันทึกซํ้าไฟล์เดิม 1.4 Save for web บันทึกชิ้นงานเป็นไฟล์ที่ใช้สําหรับเว็บไซต์ ซึ่งจะเหมือนเครื่องมือของ Photoshop เมื่อเราเลือก save แบบใดแบบหนึ่งในครั้งแรกจะมีหน้าต่างดังรูปขึ้นมา
52. จะมีหน้าต่างดังรูป ให้เราเลือกเวอร์ชั่นของไฟล์ที่ต้องการบันทึกจากนั้น คลิกที่ปุ่ม OK
53.