การพฒั นาสภาพแวดลอ้ มการเรียนรู้ดจิ ิทัลด้วยเทคโนโลยคี วามจริงเสริมแบบปฏิสมั พนั ธเ์ พอ่ื สง่ เสริม ทกั ษะการใช้โปรแกรมอะโดบีอิลลสั เตรเตอรส์ าหรบั ประกาศนียบัตรช้ันปที 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 ถ้าตอ้ งการสร้างสนี ้ีให้เปน็ แบบ Gobal ก็ให้คลิกเลือกท่ีช่อง 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
