การพฒั นาสภาพแวดลอ้ มการเรียนรู้ดจิ ิทัลดว้ ยเทคโนโลยีความจรงิ เสริมแบบปฏสิ ัมพันธ์เพ่อื สง่ เสรมิ ทักษะ การใช้โปรแกรมอะโดบีอิลลสั เตรเตอร์สาหรบั ประกาศนียบตั รชนั้ ปที ่ี2 The development of digital learning envrironments with augmented reality interaction technology to promate the using skills of Adobe illustrator for diploma 2 year
ค่มู ือการใช้งานหนังสอื B
C คานา โครงการการโปรแกรม Adobe illustrator CS6 นไ้ี ด้จัดทาขึ้นเพื่อให้มีทักษะในการคิดการตกแต่งโปรแกรมAdobeillustrator CS6 เพ่ือใช้ในงานการเรียนการสอนในรายวิชาท่ีเก่ียวข้องกับสาขาวิชาคอมพิวเตอร์ธุรกิจ และอยากให้นักศึกษารุ่นต่อไปนาแนวคิดการ สร้างโปรแกรม Adobe illustrator CS6 ใหมๆ่ เพื่อพฒั นาและมีประโยชน์เพ่มิ ขึ้น เพราะทกุ วนั นก้ี ารสรา้ งโปรแกรม Adobe illustrator CS6 ได้ เขา้ มามีบทบาทใชีวติ ประจาวนั ของเรามากขึ้น และโครงการน้ียังสามารถนาไปพัฒนาและประยุกต์ใช้ในชีวิตประจาวันไดเ้ ปน็ อย่างดีในโอกาสต่างๆ ขอขอบคุณอาจารย์ทุก ทา่ นท่ชี ่วยให้คาแนะนาให้คาปรึกษามาโดยตลอดจนโครงการน้ปี ระสบความสาเรจ็ ลุล่วงด้วยดีถ้ามคี วามบกพรอ่ งประการใดคณะผู้จดั ทาขอ อภัยไว้ ณ ท่นี ้ดี ว้ ย คณะผูจ้ ดั ทา
D สารบัญ หนา้ โปรแกรม Adobe Illustrator…………………………………………………………………………………….....…. 2 เคร่ืองมือหลกั ๆ ของ Illustrator…………………………………………………………………..………………….. 4 หลักการทางานของ Layer………………………………………………………………………………………….…...... 10 การปรบั เปลีย่ นรปู รา่ ง Transform Object……………………………………………………………………..... 16 การกาหนด Artboards Layout……………………………………………………………………………………….. 24 การสรา้ ง Swatch Color and Global Swatch Color…………………………………………….……… 28 การสรา้ งตวั หนังสอื ............................................................................................................................. 34 การสรา้ งตวั อักษร 3 มิติ.................................................................................................................... 38 การ Save ชนิ้ งาน............................................................................................................................... 46 ตัวอย่างตา่ งๆ....................................................................................................................................... 57
How to use Adobe Illustrator
2 โปรแกรม Adobe Illustrator Adobe Illustrator เปน็ ซอฟตแ์ วร์สาหรับสรา้ งภาพกราฟิกในรปู แบบ Vector โดยมคี ุณลักษณะที่สาคัญทส่ี ดุ น่ันก็คอื คณุ ภาพของผลงานทสี่ ร้างขนึ้ นนั้ จะไมม่ ี ปัญหาเรอ่ื งความละเอยี ดในการแสดงภาพตามสือ่ ต่างๆ ไม่ว่าจะนาไปขยาย หรอื ลดแคไ่ หนกต็ าม ภาพจะไม่ตอ้ งเสียความละเอียด หรอื ความคมชัดแม้แตน่ ้อย เมื่อ เปรยี บเทียบกับภาพทีแ่ กไ้ ขโดยใชเ้ ครอ่ื งมอื อน่ื ๆ เช่น Adobe Photoshop ทจ่ี ะมีปัญหาเร่อื งความละเอียด และคณุ ภาพของภาพจะลดลงเม่อื ขยายภาพ
4 เครื่องมอื หลกั ๆ ของ Illustrator Selection tool เครอื่ งมกี ล่มุ นวี้ า่ ด้วยเรื่องการเลือกวัตถุ ประกอบไปดว้ ย Selection tool ( ลูกศรสดี า ) ใชเ้ ลอื กวัตถุท้งั ชน้ิ Direct-selection tool ( ลกู ศรขาว ) ใช้เลอื ก points หรือ path ของวัตถุ( กดคีย์ Alt ) Magic wand tool ( ไม้เท้าวเิ ศษ ) เป็นเครอื่ งมือใหม่ ใหเ้ ลือกวตั ถุทม่ี สี ีเดยี วกัน การใช้งานเหมือนใน Photoshop ( กดคีย์ Alt และ Shift ) Lasso tool ใช้แลือกโดยการคลิกเมาส์ Drag การใช้งานเหมือนใน Photoshop ( กดคยี ์ Alt และ Shift )
6 Create tool เคร่ืองมอื กลมุ่ นี้ว่าดว้ ยการสรา้ ง objects ไมว่ ่าจะเปน็ เส้นตา่ งๆ และตัวหนงั สอื Pen Tool สร้างเส้น parth อยา่ งแมน่ ยา โดยการใช้แขน มีผลทาให้ object มจี ุดน้อย-นอ้ ยมาก ส่วนมาก สว่ นเครอ่ื งมือ ย่อยจะเอาไว้ใชป้ รบั แต่ง curved ไม่ว่าจะเปน็ การเพม่ิ จดุ ลบจดุ หกั แขนของแกนเส้นสัมผสั ( กดคยี ์ Alt ) Type tool ใช้พิมพ์ตวั หนงั สอื ขอ้ ความตา่ งๆ สว่ นเครอ่ื งมือยอ่ ย กง็ ่ายๆ ตามรูป ใช้พมิ พต์ วั หนังสอื ใหอ้ ยู่ในกรอบบา้ ง ทาตวั อักษรวง่ิ ตาม paths บา้ ง ซึ่งผมจะไมอ่ ธิบายมากเพราะ ไอคอนก็ง่ายต่อการจดจาอยแู่ ลว้ Line segment tool อนั น้ไี ว้ลากเสน้ ตรง ในรายละเอยี ดของเครอ่ื งมือ ยอ่ ยกไ็ ม่มีอะไรมาก เชน่ ไวท้ าขดกน้ หอยทา grid ของตารางหมากรุก grid แบบใยแมงมุม
8 Basic shape tool เอาไว้วาดรูปทรงพน้ื ฐาน 3-4 หลายเหลีย่ ม และ วงกลม shapc รปู ดาวแตท่ ่เี ดน่ ที่สดุ คอื flarc tool ใช้สรา้ งเอฟเฟค lcns flare ( กดคยี ์ Alt หรอื Shift และ Alt+Shift ) Panitbrush tool แปรงทเ่ี อาไวส้ รา้ งเส้น parth โดยการ drag เมาสล์ าก อย่างอสิ สระ สามารถใช้ prush แบบพเิ ศษ ( กดคยี ์ Alt ) Pencil tool จะคลา้ ยๆ paintbrush tool แตม่ ีเครอ่ื งมอื ยอ่ ยให้เรยี กใช้ ในการแก้ไขเสน้ ซึ่งจะช่วยในการปรบั แต่งแกไ้ ขและทาใหง้ านดดู ี+เร็วขึ้น ( กดคยี ์ Alt )
10 หลกั การทางานของ Layer ลเยอร์ (Layer) หมายถงึ ชั้น โดยในการจดั ภาพท่เี รียงทับซ้อนกัน การทางานของ เลเยอรม์ ีลักษระคล้ายกบั การนาแผน่ ภาพมาทับซ้อนกนั เป็นช้นั ๆโดยแผ่นภาพแต่ละแผน่ เปรียบเสมือนเลเยอรแ์ ต่ละเลเยอร์ ซึ่งเราสามารถทาการซอ่ น แสดงผลได้ Layer panel มีหลายสว่ นคล้ายกับ Layer ของ โปรแกรม Photoshop เช่นคลิก Create New Layer เพื่อสรา้ ง Layer ใหม่ หรือ คลิกท่ีช่ือ Layer เพอ่ื แก้ไขชื่อ แต่มีจุดท่ีไม่เหมือนคือ ในส่วนของ Click to Target คือปุ่มท่ีอยู่ด้านท้ายของแต่ละ Layer เมื่อคลิกแล้วจะรู้ว่า Object ใดอยู่ตรงใหนเพราะจะมี Bounding Box แสดงข้ึนมาที่ Object นั้น
12 การปรับขนาด Layer Thumbnail ทาโดยคลกิ ท่ีลกู ศรบนแถบ Layer Panel เลอื ก Panel Option ปรบั แตง่ ในส่วนของ Row Size และอื่นๆ ตามตอ้ งการ การย้ายตาแหนง่ Layer ใหค้ ลิกบนพ้ืนที่วา่ งของ Layer คา้ งแลว้ ลากไปไว้ที่ตาแหน่งตอ้ งการ การเปลยี่ น Layer เมอ่ื มกี ารสรา้ ง Layer เปลา่ ข้ึนมา แลว้ ตอ้ งการยา้ ย Layer ท่ีมอี ยู่เดิมมาไว้เพอ่ื แยกเปน็ รายการเฉพาะ ทาไดโ้ ดยการคลกิ ค้างตาแแหนง่ วา่ งถดั จาปุ่ม Click to Target จะมีกรอบสี สเ่ี หล่ืยมเลก็ แสดงให้เหน็ จากนั้นคลกิ ที่กรอบสีนี้ แล้วลากมาไวท้ ่ี Layer ทสี่ รา้ งข้ึน ถ้าเลเยอร์นัน้ มีการใสส่ ไี ว้ เมือ่ ย้าย Layer มาแล้วจะ เปล่ยี นสใี ห้ตาม Layer ทส่ี รา้ งไว้ Layer ที่ถกู นามาใส่ จะเป็น Sub Layer ของ Layerทีส่ ร้าง
14 การใสส่ ี และกาหนดคา่ ตา่ งๆ ให้กับ Layer ทาไดโ้ ดยดับเบ้ลิ คลิกบนทวี่ า่ งของ Layer จะมหี นา้ ตา่ ง Layer Option แสดงขนึ้ มา สามารถเปลีย่ น ชอ่ื สี และอน่ื ๆ ได้จากท่นี ่ี การลอ็ ค และ การลบ Layer ให้คลิกช่องท่ีอยถู่ ดั จากไอคอนรปู ดวงตาบน Layer จะเปน็ การลอ็ ค และปลดลอ็ คก็เพียงคลกิ ทเี่ ดมิ ซา้ อีกครั้ง สามารถลอ็ ค Sub Layer ไดโ้ ดยไมต่ อ้ ง ล็อค Layer ใหญ่ หรือถา้ จะล็อคท้งั หมดก็ลอ็ คท่ี Layer ใหญ่ สว่ นการลบ Layer ก็เพียงคลิกที่ Layer น้นั แลว้ มาคลกิ ทไี่ อคอนถงั
16 การปรบั เปล่ยี นรูปร่าง Transform Object ใช้ Selection Tool คลิกที่ Object นั้น จะทาให้สามารถปรับเปล่ยี นไดโ้ ดยการลากปรบั ขนาดของ Bounding Box ทค่ี ลมุ Object โดยให้สังเกตเุ ม้าสจ์ ะ เปลยี่ นเป็นหัวลกู ศรสองฝ่งั ถึงจะทาการลากเปลี่ยนขนาดได้ หรอื ทา Rotating ได้ หรือจะคลกิ ไอคอนเคร่อื งหมายลูกศรโคง้ นั่นคือเคร่งื อมือ Rotate Tool ( R ) มาทาการ Rotate โดยตรงก็ไดเ้ ชน่ กนั สว่ นถ้าใช้เคร่ืองมือท่ีตดิ กับ Rotate Tool นน่ั คือ Scale Tool ( S ) เมอ่ื คลกิ ที่ Object จะไมเ่ ห็น Bounding Box แต่ สามารถคลิกและปรบั ขนาดได้เลย
18 การบิดเบือนรูปรา่ ง Distort Object ( Width and Wrap Tool ( W ) ) มวี ธิ กี ารบิดเบอื นรปู รา่ งอยู่หลายแบบดว้ ยกนั ที่รวมอยู่ในเคร่ืองมือกลมุ่ น้ี เชน่ Width Tool, Wrap Tool, Twirl Tool, และอน่ื ๆ ซึง่ อยุ่ในเครือ่ งมอื การ ทา Distort Object กอ่ นการใช้เครอ่ื งมอื เหลา่ น้ี จะตอ้ งคลกิ ท่ี Object น้ันโดยใช้ Selection Tool ก่อน จากนั้นส่วนมากจะทาโดยการคลกิ ค้าง หรือ ลากผา่ น Object เพอื่ ใหเ้ กิดการ Distort ก่อนทาควรเปดิ Properties ของเครื่องมือเพือ่ กาหนดค่าตามต้องการ เชน่ การปรับขนาดแปรง อัตราการกระทา และอนื่ ๆ
20 การทา Repeating Transforming ถ้าต้องการใชค้ าสั่งเพือ่ ให้เกิดผลเหมือนกบั การกระทาคาส่ังก่อนหนา้ หลังจากทีไ่ ด้ทาคาสั่งนน้ั แลว้ เช่น การ Copy สามารถใช้ คาสง่ั Ctrl + D เพอื่ ให้ เกดิ การ Copy ซา้ ได้ การทา Reflection and Skewing Object ใช้ Selection Tool คลกิ ท่ี Object นั้นแล้วใช้เคร่อื งมอื Reflect ซงึ่ อยรู่ วมกบั Rotate Tool จากนัน้ ให้กดป่มุ Alt ก่อนทจ่ี ะคลกิ เมอื่ คลกิ แลว้ จะมี หน้าต่าง Reflect แสดงข้นึ มาเพ่อื ทาการตัง้ ค่า โดยสามารถเลือกการ Reflect แบบ Vertical หรอื Horizental ได้ รวมทั้งสามารถกาหนดองศาไดด้ ว้ ย ถา้ ตอ้ งการเห็นการเกดิ สว่ นท่ี Reflect ใหค้ ลิกเลือกท่ี Preview ถา้ ตอ้ งการทา Reflect Object แบบสรา้ งเพิม่ ใหก้ ดทีแ่ ถบ Copy จากน้นั กด OK
22 ส่วนการ Skew ทาไดจ้ าก Tranform Panel ในส่วนของ Shear หรือจะทาจากเครอื งมือ Shear Tool ซึง่ อยู่รวมกับ Scale Tool ทาการคลิกแลว้ ลากให้เกิดการ Shear การทา Align and Distribution bjects ให้ใช้เมนู Window - Align เพ่ือเป็นการเปิด Align Panle ส่วนการทาน้ันต้องเลือก Object ทีจ่ ะทาการ Align กอ่ น แล้วเลอื กรปู แบบการ Align ซึ่งจะเกดิ การ Align กบั Artboard หรอื จะใช้เครือ่ งมอื บนแถบเมนูของ Selection tool ก็ได้เชน่ กัน
24 การกาหนด Artboards Layout ใชส้ าหรบั กาหนด Layout ใหก้ ับการสรา้ ง Artboards หลายช้นิ ในหน่งึ ชนิ้ งาน การสรา้ งนี้จะทาขณะท่สี รา้ งงานใหม่ แลว้ เลอื กไอคอนตา่ งๆ ซ่งึ มี 5 แบบ ดว้ ยกัน เมอ่ื เลือกรูปแบบ Layout ได้แลว้ ใหก้ าหนดความกวา้ งระหวา่ Artboards ได้จาก Spacing คาศัพท์ควรรู้ Artboard = ชนิ้ งานเปล่าตอนที่เปดิ ขนี้ มา Artwork = ส่วนตา่ งๆ ทีร่ วมกนั อยบู่ น Artboard เช่น Object, Path Attribute = ได้แก่ สว่ นของ Fill, Stroke, Effect ต่างๆ
26 การ Edit Artboard ทาไดโ้ ดยการใชเ้ มนู File - Document Setup - Edit Artboard การใชค้ าสง่ั นจ้ี ะให้ Artboard ทีม่ อี ยู่ มผี ลกับ Artborad Tool รวมท้งั ถา้ มีการเพม่ิ Artborad ใหมก่ ็จะมีผลกบั เครื่องมีอ Artborad Tool เช่นกัน สามารถปรับ เลอ่ื นตาแหนง่ Artborad ไดใ้ น Artborad Panel การปรบั ขนาด Artboards ถ้าต้องการเปล่ยี นขนาด Artboards ใหค้ ลิกเลอื กเครอื่ งมอื Artboard Tool (Shift + O) แล้วทาการคลิก Artboard ทต่ี อง้ การปรบั เปล่ยี นขนาด จากนน้ั ลากปรบั ขนาดได้ตามตอ้ งการ ถ้าต้องการขนาดทแี่ น่นอน ให้พมิ พ์ตวั เลขทแ่ี ถบดา้ นบน ในส่วนของ W and H และยงั สามารถคลกิ เลือก Artboard เพอื่ เลอ่ื น ตาแหนง่ ไดอ้ ีกดว้ ย Selection Tools ( V ) เปน็ เคร่อื งมอื ที่ใชส้ าหรับการเลอื กทงั้ หมด เชน่ Object, Path ต่างๆ เป็นตน้
28 การสรา้ ง Swatch Color and Global Swatch Color การสร้าง Swatch Color and Global Swatch Color มวี ธิ กี ารทาได้สองแบบ โดยการคลิกท่ี Object แลว้ มาคลกิ ไอคอน New Swatch บน Swatch Panel จะไดห้ นา้ ต่าง New Swatch ข้นึ มา จากนั้นทา การตง้ั ชื่อ หรือ คลกิ สีบนแถบเครอื่ งมือแลว้ ลากไปที่ Swatch Panel กจ็ ะได้สนี น้ั เกบ็ ไว้ที่ Swatch Panel ถ้าดบั เบ้ลิ คลกิ ทส่ี ีน้นั กจ็ ะมีหนา้ ตา่ ง Swatch Option จากนนั้ ใหต้ ง้ั ช่อื Color ถา้ ตอ้ งการสรา้ งสีนี้ใหเ้ ปน็ แบบ Global ก็ใหค้ ลกิ เลือกทีช่ อ่ ง Global การเลือกเป็นแบบ Global จะทาให้กรอบสนี ้นั มสี ัญญลกั ษณส์ ามเหลีย่ ม ทม่ี ุมลา่ งขวาให้เหน็ ดว้ ย เพราะเมื่อเปลี่ยนสีท่ีใชร้ ่วมกันใน Object ที่เปน็ Global Color ก็จะมีการอัพเดทเปลี่ยนสใี ห้หมดทุก Object ทไี่ ด้ใช้ Global Swath Color
30 การลบสีจาก Swatch Panel กเ็ พียงแตค่ ลกิ ท่สี ีนัน้ แล้วมาคลิกทร่ี ูปถงั จะมหี นา้ ตา่ งยืนยนั การลบสีนนั้ ใหก้ ดเลือก Yes การสรา้ ง Color Group ให้ทาการเลอื กสบี น Swatch Panel แล้วคลิกทไี่ อคอน New Color Group จากนัน้ ทาการต้ังชอ่ื การกาหนด Swatch Option ทาได้โดยคลิกสีบน Swatch Panel แล้วมาคลิกท่ไี อคอน Swatch Options จากนนั้ ทาการปรบั ต้ังคา่ สีต่าง การสร้าง Spot Color เหมอื นการสรา้ ง Swath Color แต่เลอื กเป็น Spot Color ในแถบของ Color Type (ประกอบดว้ ย Process Color and Spot Color) จะมสี ญั ญลักษณท์ ต่ี าแหน่งเดยี วกบั การสรา้ ง Global Color
32 การใช้ Swatch Libraries Menu ไอคอนของ Libraries จะอย่ทู ม่ี มุ ซา้ ยลา่ งของ Swath Panel ถา้ ตอ้ การ Importing Swatch ให้คลกิ เลือกที่ Other Library แลว้ เลอื กไฟล์สีที่บนั ทกึ เก็บ ไว้ทค่ี อมพิวเตอร์ จะไดห้ นา้ ตา่ งสขี ึ้นมาที่โปรแกรมอีกหน่ึงอนั ให้ดบั เบิล้ ทโี่ ฟลเดอรส์ ที ตี่ อ้ งการก็จะไปสรา้ งไว้ที่ Ai Swath Color แตถ่ ้ามกี ารเปดิ ช้ินงานใหม่จะต้องทา การ Import ใหม่ โดยใชเ้ มนู Window - Swatch Libraries - Other Libraries เชน่ เดิม ถา้ ต้องการสง่ โฟลเดอรส์ ีมาเกบ็ ไว้ใชท้ ่โี ปรแกรม ให้ทาการคลกิ ลูกศร บนแถบ Swath - Save Swatch Library as ASE or as AI
34 การสร้างตวั หนงั สือ การสร้างตัวหนงั สอื ตวั หนงั สอื ของโปรแกรม Illustrator จะเปน็ ตัวหนงั สือทสี่ ร้างบนเส้น Path ประกอบด้วย Point and Area text และวิธีการใช้งานเหมือนกบั โปรแกรม Test in Photoshop การปรบั ขนาด และ Rotate เมอ่ื พมิ พ์ตัวหนังสือแล้วสามารถปรบั ขนาดโดยการการใช้ Selection Tool คลกิ ท่ี Bounding box ลากปรบั ขนาดไดเ้ ลย การสร้าง Link Area Text เริ่มแรกใหส้ รา้ ง Area text ขนึ้ มาหน่ึงอันกอ่ น จากน้นั เม่อื พพิ ม์ข้อความใน Area แรกเตม็ แล้วจะเห็นเครอื งหมาย + ที่กรอบดา้ นลา่ งขวา ให้เปล่ียนเป็น Selection Tool ก่อน แลว้ คลกิ ที่ Area Text แรก แลว้ มาคลิกที่เครื่องหมาย + จะเหน็ เคร่ืองหมาย Area Text ทีเมา้ ส์ กใ็ ห้ทาการลากแถบ Area Text เพ่มิ ใหม่ได้เลย
36 การยกเลิกการ Link Area Text ให้คลกิ ท่เี ครื่องหมายมุมบนซา้ ยของ Area Text ทต่ี อ้ งการยกเลกิ การ Link จะเห็นเครอื่ งหมาย Unlink จากน้นั ใหม้ าคลิกที่เครื่องหมายการ Link ทีด่ ้านลา่ งขวาของ Area Text ทเี่ ปน็ ตัวท่ี Link ไว้ การสรา้ ง Type on Path ใหเ้ ปลีย่ นเป็นเครือ่ งมือนี้ หรอื ขณะอย่ทู ี่เคร่ืองมือ Type ธรรมดา ใหก้ ดปุ่ม Alt กไ็ ด้ หลังจากพมิ พเ์ สร็จแล้วใหเ้ ปลย่ี นเปน็ Selection Tool กจ็ ะเหน็ สัญญลักษณ์ Control Handle ท่ใี ชใ้ นการปรบั แต่ง การปรบั แตง่ หรือลากตัวหนังสือ ใหค้ ลิกที่กา้ นของ Handle
38 การสร้างตวั อักษร 3 มติ ิ การสรา้ งตัวอกั ษร 3D ขน้ั ตอนการทา 1. เปิดเอกสารข้ึนมาใหม่ แล้วพิมพต์ วั อกั ษรตามต้องการพรอ้ มใส่สตี ามใจชอบ
40 2. ไปทเ่ี มนู Effect > 3D > Extrude & Bevel
42 3. จะปรากฏหนา้ ตา่ งออกมา ใหป้ รบั ตงั้ ค่าดังภาพขา้ งลา่ งนี้ แลว้ กด OK
Search
