เอกสารประกอบการสอน -...
TRANSCRIPT
เอกสารประกอบการสอน วชาคอมพวเตอรกราฟกเบองตน
รหสวชา 2901-1005 หลกสตรประกาศนยบตรวชาชพ พทธศกราช 2556 ประเภทวชาเทคโนโลยสารสนเทศและการสอสาร
สาขาเทคโนโลยสารสนเทศ
จดท าโดย นางสวาร แปงณวงค
ต าแหนง คร วทยฐานะ ครช านาญการ
วทยาลยอาชวศกษาเชยงราย ส านกงานคณะกรรมการการอาชวศกษา
1
บทท 1
ความรพนฐานของคอมพวเตอรกราฟกเบองตน
หวขอเรอง
1. ความหมายของคอมพวเตอรกราฟกเบองตน
2. หลกการของภาพกราฟกแบบเวกเตอร
3. หลกการของภาพกราฟกแบบบตแมป
4. หลกการใชสและแสงในคอมพวเตอร 5. ประเภทและคณลกษณะของแฟมภาพกราฟก
6. องคประกอบของภาพกราฟก
7. การจดการแฟมภาพกราฟก
สาระส าคญ
คอมพวเตอรกราฟก คอ การใชคอมพวเตอรสรางภาพและจดการเกยวกบรปภาพ เพอใชสอความหมายของ
ขอมลตาง ๆ ใหนาสนใจยงขน เชน การใชกราฟน าเสนอขอมลยอดขายสนคาในแตละป การใชภาพกราฟกประกอบการ
โฆษณาสนคาตาง ๆ เปนตน ภาพกราฟกแบบ 2 มต ม 2 แบบ คอแบบ Raster และแบบ Vector ซงหลกการท างาน
จะมความแตกตางกน โดยกราฟกแบบ Raster จะเกดภาพจากจดสเหลยมเลก ๆ หลาย ๆ จด มารวมกน สวน
แบบ Vector เกดจากการอางองความสมพนธทางคณตศาสตร หรอการค านวณ ซงภาพกราฟกแตละนามสกลจะมแฟม
รปภาพและลกษณะทแตกตางกน
2
สมรรถนะทพงประสงค
อธบายความหมายและหลกการของคอมพวเตอรกราฟก ทราบวธแยกประเภทและคณลกษณะของแฟม
ภาพกราฟก และบอกองคประกอบ พรอมทงจดการไฟลงานได
จดประสงคการเรยนรเชงพฤตกรรม
เมอศกษาบทท 1 จบแลว นกเรยนสามารถ
1. บอกความหมายของคอมพวเตอรกราฟกเบองตนไดถกตอง
2. บอกหลกการของภาพกราฟกแบบเวกเตอรไดถกตอง
3. บอกหลกการของภาพกราฟกแบบบตแมปไดถกตอง
4. บอกหลกการใชสและแสงในคอมพวเตอรไดถกตอง
5. อธบายประเภทและคณลกษณะของแฟมภาพกราฟกไดถกตอง
6. บอกองคประกอบของภาพกราฟกไดถกตอง
7. อธบายขนตอนการจดการแฟมภาพกราฟกไดถกตอง
8. บอกความหมายของค าศพทคอมพวเตอร จ านวน 10 ค า
9. นกเรยนมความใฝร ใฝเรยน ขยน รบผดชอบ อดทน และมความคดรเรมสรางสรรค
3
แบบทดสอบกอนเรยน
บทท 1 ความรพนฐานของคอมพวเตอรกราฟกเบองตน
ค าสง จงท าเครองหมาย (X ) ลงหนาขอทถกตองทสดเพยงขอเดยว เวลา 15 นาท
1. ขอใดคอลกษณะเดนของรปภาพแบบ Vector
ก. มความละเอยดของภาพสง
ข. สามารถขยายภาพแลวภาพไมชด
ค. มภาพขนาดใหญเกนไป
ง. ตองประกอบดวยเสนตรงและเสนโคง
2. เครองมอใดใชในการสรางรปภาพกราฟกแบบ Vector
ก. Pen Tool
ข. Rectangle Tool
ค. Add Anchor Point Tool
ง. ถกทกขอทกลาวมา
3. ขอใดคอสงส าคญทสดดในการเตมสให Path
ก. เลอกสทตองการเตมท Foreground color
ข. ผใชโปรแกรมตองสรางเสน Path ขนมากอน
ค. เลอก Fill Path
ง. ก าหนดรหสส
4. ปจจบนนยมใชคอมพวเตอรกราฟฟกในงานดานใด
ก. บนเทง
ข. การศกษา
ค. การแพทย
ง. ถกทกขอ
5. ขอใดเปนลกษณะทดในการใชสในงานออกแบบ
ก. ใชสสดใส ชดเจน
ข. ใชสออนสลบเขม
4
ค. ใชสใหเหมาะสมกบภาพ
ง. ค านงถงการน าแมสมาสรางภาพ
6. ขอใดหมายถงความหมายของค าวา Design
ก. การถายทอดความรเพอการสอสาร
ข. โปรแกรมส าเรจรปเพอใชงานดานกราฟก
ค. การออกแบบงานภาพและสรางขอความ
ง. การใชภาพเพอสอสารกบผอาน
7. คอมพวเตอรกราฟกถกน ามาใชเพออะไร
ก. สรางงานออกแบบ
ข. ชวยในการประชาสมพนธดวยปายโฆษณา
ค. มความสวยงาม และสอสาร
ง. มขอความททนตอเหตการณ
8. ขอใดคอหลกการน าภาพมาใชในงานกราฟก
ก. การจดเรยงภาพ
ข. การน าภาพทมอยแลวมาใชงาน
ค. การตดตอภาพใหครบดวยองคประกอบ
ง. การแยกภาพขนาดเลก ๆ ออกจากกน
9. ขอใดคอรปแบบของภาพ
ก. ภาพแบบบตแมป
ข. ภาพแบบราสเตอร
ค. ภาพแบบเวคเตอร
ง. ถกทกขอทกลาวมา
10. องคประกอบของหลกการออกแบบงานกราฟกคอขอใด
ก. ทศทางและการเคลอนไหว
ข. เอกภาพและความกลมกลน
ค. ความสมดล สดสวน และความแตกตาง
ง. ถกทกขอทกลาวมา
5
ความหมายของกราฟก
กราฟก (Graphic) มกเขยนผดเปน กราฟกส กราฟฟกส กราฟฟก ค าวา “กราฟก” มาจากภาษากรก ซงหมายถง การวาดเขยน (Graphikos) และการเขยน (Graphein) ตอมามผใหความหมายของค าวา “กราฟก” ไวหลายประการซงสรปไดดงน กราฟก หมายถง ศลปะแขนงหนงซงใชสอความหมายดวยเสน สญลกษณ รปวาด ภาพถาย กราฟ แผนภม การตน ฯลฯ เพอใหสามารถสอความหมายขอมลไดถกตองตรงตามทผสอสารตองการ
ความหมายของคอมพวเตอรกราฟก
คอมพวเตอรกราฟก หมายถง การสราง การตกแตงแกไข หรอการจดการเกยวกบรปภาพ โดยใชเครอง
คอมพวเตอรในการจดการ ยกตวอยางเชน การท า Image Retouching ภาพคนแกใหมวยทเดกขน การสรางภาพตาม
จนตนาการและการใชภาพกราฟกในการน าเสนอขอมลตาง ๆ เพอใหสามารถสอความหมายไดตรงตามทผสอสาร
ตองการและนาสนใจยงขนดวยกราฟ แผนภม แผนภาพ เปนตน
ภาพกราฟก แบงเปน 2 ประเภท คอ ภาพกราฟกแบบ 2 มต และแบบ 3 มต
ภาพกราฟกแบบ 2 มต เปนภาพทพบเหนโดยทวไป เชน ภาพถาย รปวาด ภาพ
ลายเสน สญลกษณ กราฟ รวมถงการตนตาง ๆ ในโทรทศน ยกตวอยางเชน การตนเรองพภพยมราช ชนจง และ
โดเรมอน เปนตน ซงการตนจะเปนภาพกราฟกเคลอนไหว (Animation) โดยจะมกระบวนการสรางทซบซอนกวา
ภาพวาดปกต
ภาพกราฟกแบบ 3 มต เปนภาพกราฟกทใชโปรแกรมสรางภาพ 3 มตโดยเฉพาะ เชน โปรแกรม 3 Ds
max โปรแกรม Maya เปนตน ซงจะท าใหไดภาพมสและแสงเงาเหมอนจรง เหมาะกบงานดานสถาปตยและการ
ออกแบบตาง ๆ รวมถงการสรางเปนภาพยนตรการตนหรอโฆษณาสนคาตาง ๆ เชน การตน เรอง Nemo The
Bug และปงปอนดแอนเมชน เปนตน
หลกการท างานและการแสดงผลของภาพคอมพวเตอรกราฟก
ภาพทเกดบนจอคอมพวเตอร เกดจากการท างานของโหมดส RGB ซงประกอบดวยสแดง (Red) ส
เขยว (Green) และสน าเงน (Blue) โดยใชหลกการยงประจไฟฟาใหเกดการเปลงแสงของสทง 3 สมาผสมกนท าให
เกดเปนจดสสเหลยมเลก ๆ ทเรยกวา พกเซล (Pixel) ซงมาจากค าวา Picture กบ Element โดยพกเซลจะม
6
หลากหลายส เมอน ามาวางตอกนจะเกดเปนรปภาพ ซงภาพทใชกบเครองคอมพวเตอรม 2 ประเภท คอ
แบบ Raster และแบบ Vector
หลกการของกราฟกแบบ Raster
หลกการของภาพกราฟกแบบ Raster หรอแบบ Bitmap เปนภาพกราฟกทเกดจากการเรยงตวกนของ
จดสเหลยมเลก ๆ หลากหลายส ซงเรยกจดสเหลยมเลก ๆ นวาพกเซล (Pixel) ในการสรางภาพกราฟก
แบบ Raster จะตองก าหนดจ านวนของพกเซลใหกบภาพทตองการสราง ถาก าหนดจ านวนพกเซลนอย เมอขยายภาพ
ใหมขนาดใหญขนจะท าใหแฟมภาพมขนาดใหญ ดงนนการก าหนดพกเซลจงควรก าหนดใหเหมาะกบงานทสรางคอ ถา
ตองการใชงานทว ๆ ไปจะก าหนดจ านวนพกเซลประมาณ 100-150 ppi (Pixel/inch) “จ านวนพกเซลตอ 1
ตารางนว” ถาเปนงานทตองการความละเอยดนอยและแฟมภาพมขนาดเลก เชน ภาพส าหรบใชกบเวบไซตจะก าหนด
จ านวนพกเซลประมาณ 72 ppi และถาเปนแบบงานพมพ เชน นตยสาร โปสเตอรขนาดใหญ จะก าหนดจ านวน
พกเซลประมาณ 300-350 เปนตน ขอดของภาพกราฟกแบบ Raster คอ สามารถแกไขปรบแตงส ตกแตงภาพไดงาย
และสวยงาม ซงโปรแกรมทนยมใชสรางภาพกราฟกแบบ Raster คอ Adobe PhotoShop, Adobe PhotoShopCS,
Paint เปนตน
รปท 1.1 ภาพกราฟกแบบ Raster ทขยายใหญขน
7
หลกการของกราฟกแบบ Vector
หลกการของกราฟกแบบ Vector เปนภาพกราฟกทเกดจากการอางองความสมพนธทางคณตศาสตร หรอ
การค านวณ ซงภาพจะมความเปนอสระตอกน โดยแยกชนสวนของภาพทงหมดออกเปนเสนตรง เสนโคง รปทรง เมอ
มการขยายภาพความละเอยดของภาพไมลดลง แฟมมขนาดเลกกวาแบบ Raster ภาพกราฟกแบบ Vector นยมใช
เพองานสถาปตยตกแตงภายในและการออกแบบตาง ๆ เชน การออกแบบอาคาร การออกแบบรถยนต การสรางโล
โก การสรางการตน เปนตน ซงโปรแกรมทนยมใชสรางภาพแบบ Vector คอ โปรแกรม Illustrator, CoreDraw,
AutoCAD, 3Ds max เปนตน แตอปกรณทใชแสดงผลภาพ เชน จอคอมพวเตอรจะเปนการแสดงผลภาพเปน
แบบ Raster
รปท 1.2 ภาพกราฟกแบบ Vector ทขยายใหญขน
ความแตกตางของกราฟกแบบ 2 มต ภาพกราฟก 2 มตแบบ Raster และ แบบ Vector มความแตกตางกนดงน
ภาพกราฟกแบบ Raster 1. ภาพกราฟกเกดจากจดสเหลยมเลก ๆ หลากหลายส (Pixels) มาเรยงตอกนจนกลายเปนรปภาพ 2. การขยายภาพกราฟกใหมขนาดใหญขน จะท าใหความละเอยดของภาพลดลง ท าใหมองเหนภาพเปนจด
สเหลยมเลก ๆ 3. การตกแตงและแกไขภาพ สามารถท าไดงายและสวยงาม เชน การ Retouching ภาพคนแกใหหนมขน
การปรบสผวกายใหขาวเนยนขน เปนตน
8
4. การประมวลผลภาพสามารถท าไดรวดเรว
ภาพกราฟกแบบ Vector 1. ภาพเกดจากการอางองความสมพนธทางคณตศาสตรหรอการค านวณ โดยองคประกอบของภาพมอสระตอ
กน 2. การขยายภาพกราฟกใหมขนาดใหญขน ภาพยงคงความละเอยดคมชดเหมอนเดม 3. เหมาะกบงานออกแบบตาง ๆ เชน งานสถาปตยออกแบบโลโก เปนตน 4. การประมวลผลภาพจะใชเวลานาน เนองจากใชค าสงในการท างานมาก
หลกการใชสและแสงในคอมพวเตอร สทใชงานดานกราฟกทวไปม 4 ระบบ คอ 1. RGB 2. CMYK 3. HSB 4. LAB
1. RGB
เปนระบบสทประกอบดวยแมส 3 สคอ แดง (Red), เขยว (Green) และสน าเงน (Blue) เมอน ามา
ผสมกนท าใหเกดสตาง ๆ บนจอคอมพวเตอรมากถง 16.7 ลานส ซงใกลเคยงกบสทตาเรามองเหนปกต สทไดจากการ
ผสมสขนอยกบความเขมของส โดยถาสมความเขมมาก เมอน ามาผสมกนจะท าใหเกดเปนสขาว จงเรยกระบบสนวา
แบบ Additive หรอการผสมสแบบบวก
9
2. CMYK
เปนระบบสทใชกบเครองพมพทพมพออกทางกระดาษหรอวสดผวเรยบอน ๆ ซงประกอบดวยสหลก 4 ส
คอ สฟา (Cyan), สมวงแดง (Magenta), สเหลอง (Yellow) และสด า (Black) เมอน ามาผสมกนจะกเกดสเปนสด าแต
จะไมด าสนทเนองจากหมกพมพมความไมบรสทธ จงเปนการผสมสแบบลบ (Subtractive) หลกการเกดสของระบบน
คอ หมกสหนงจะดดกลนแสงจากสหนงแลวสะทอนกลบออกมาเปนสตาง ๆ เชน สฟาดดกลนแสงของสมวงแลวสะทอน
ออกมาเปนสน าเงน ซงจะสงเกตไดวาสทสะทอนออกมาจะเปนสหลกของระบบ RGB การเกดสในระบบนจงตรงขาม
กบการเกดสในระบบ RGB ดงภาพ
3. HSB
เปนระบบสแบบการมองเหนของสายตามมนษย ซงแบงออกเปน 3 สวน คอ
Hue คอสตาง ๆ ทสะทอนออกมาจากวตถแลวเขาสสายตาของเรา ซงมกเรยกสตามชอส เชน สเขยว ส
เหลอง สแดง เปนตน
10
Saturation คอความสดของส โดยคาความสดของสจะเรมท 0 ถง 100 ถาก าหนด Saturation ท 0 ส
จะมความสดนอย แตถาก าหนดท 100 สจะมความสดมาก
Brightness คอระดบความสวางของส โดยคาความสวางของสจะเรมท 0 ถง 100 ถาก าหนดท 0 ความ
สวางจะนอยซงจะเปนสด า แตถาก าหนดท 100 สจะมความสวางมากทสด
4. LAB
เปนระบบสทไมขนกบอปกรณใด ๆ (Device Independent) โดยแบงออกเปน 3 สวน คอ
“L” หรอ Luminance เปนการก าหนดความสวางซงมคาตงแต 0 ถง 100 ถาก าหนดท 0 จะ
กลายเปนสด า แตถาก าหนดท 100 จะเปนสขาว
“A” เปนคาของสทไลจากสเขยวไปสแดง
“B” เปนคาของสทไลจากสน าเงนไปเหลอง
แฟมภาพกราฟกแบบ Raster และคณลกษณะของแฟมภาพกราฟก
นามสกลทใชเกบแฟมภาพกราฟกแบบ Raster มหลายนามสกล เชน .BMP, .DIB, .JPG, .JPEG, .JPE, .GIF, .TIFF, .TIF, .PCX, .MSP, .PCD, .FPX, .IMG, .MAC, .MSP และ .TGA เปนตน ซงลกษณะของแฟมภาพจะแตกตางกนไป ยกตวอยางเชน
นามสกลทใชเกบ ลกษณะงาน ตวอยางซอฟตแวร ทใชสราง
JPG, .JPEG, .JPE .GIF
ใชส าหรบรปภาพทวไปงานเวบเพจ และงานทมความจ ากดดานพนท หนวยความจ า
โปรแกรม PhotoShop, PaintShopPro, Illstratior
TIFF, .TIF เหมาะส าหรบงานดานนตยสาร เพราะมความละเอยดของภาพสง ไฟลมาตรฐานของระบบปฏบตการวนโดว
โปรแกรม PaintShopPro, Paint
11
BMP, .DIB .PCX
เปนไฟลดงเดมของโปรแกรมแกไขภาพแบบบตแมป ไมมโมเดลเกรยสเกล ใชกบภาพทวไป
โปรแกรม CorelDraw, Illustrator, Paintbrush
ชนดและรปแบบไฟลกราฟก
1. กราฟกไฟลส าหรบอนเทอรเนต ไฟลกราฟกทสนบสนนระบบอนเทอรเนต ปจจบนม 3 ไฟลหลก ๆ คอ
- ไฟลสกล GIF ( Graphics Interlace File)
- ไฟลสกล JPG ( Joint Photographer's Experts Group)
- ไฟลสกล PNG ( Portable Network Graphics)
12
1.1 ไฟลสกล GIF (Graphics Interlace File)
เปน ไฟลกราฟกมาตรฐานทท างานบนอนเทอรเนต มกจะใชเมอ ตองการไฟลทมขนาดเลก จ านวนส
และ ความละเอยดของภาพไมสงมากนก ตองการพนแบบโปรงใส ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผล
แบบละเอยด ตองการน าเสนอภาพแบบภาพเคลอนไหว
จดเดน : ขนาดไฟลต า สามารถท าพนของภาพใหเปนพนแบบโปรงใสได ( Transparent) มระบบ
แสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Interlace มโปรแกรมสนบการสรางจ านวนมาก เรยกดได
กบ Graphics Browser ทกตว ความสามารถดานการน าเสนอแบบภาพเคลอนไหว ( Gif Animation)
จดดอย : แสดงสไดเพยง 256 ส
ไฟล .GIF ม 2 สกล ไดแก GIF87 พฒนาขนในป ค.ศ. 1987 เปนไฟลกราฟกรนแรกทสนบสนนการ
น าเสนอบนอนเทอรเนต เปนไฟลทมขนาดเลกและแสดงผลสไดเพยง 256 ส และก าหนดใหแสดงผลแบบโครงรางได
(Interlace) GIF89A พฒนาขนในป ค.ศ. 1989 เปนไฟลกราฟกทพฒนาตอจากGIF87 โดยเพมความสามารถการ
แสดงผลแบบพนโปรงใส ( Transparent) และการสรางภาพเคลอนไหว (GIF Animation) ซงเปนไฟลกราฟกทม
ความสามารถพเศษโดยน าเอาไฟลภาพหลายๆ ไฟลมารวมกนและน าเสนอภาพเหลานนโดยอาศยการหนวงเวลา มการ
ใสรปแบบการน าเสนอลกษณะตาง ๆ ( Effects) ในลกษณะภาพเคลอนไหว
1.2 ไฟลสกล JPG (Joint Photographer’s Experts Group)
เปน อกไฟลหนงทนยมใชบน Internet มกใชกรณ ภาพทตองการน าเสนอมความละเอยดสง และใช
สจ านวนมาก (สนบสนนถง 24 bit color) ตองการบบไฟลตามความตองการของผใช ไฟลชนดนมกจะใชกบภาพถายท
น ามาสแกน และตองการน าไปใชบนอนเทอรเนต เพราะใหความคมชดและความละเอยดของภาพสง
จดเดน : สนบสนนสได ถง 24 bit สามารถก าหนดคาการบบไฟลไดตามทตองการ มระบบแสดงผล
แบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Progressive มโปรแกรมสนบสนนการสรางจ านวนมาก เรยกดได
กบ Graphics Browser ทกตว ตงคาการบบไฟลได ( compress files)
จด ดอย : ท าใหพนของรปโปรงใสไมได ขอเสยของการบบไฟล ( Compress File)ก าหนดคาการบบ
ไฟลไวสง ( 1 - 10) แมวาจะชวยใหขนาดของไฟลมขนาดต าแตกมขอเสย คอ เมอมการสงภาพจากServer ไปแสดงผล
ท Client จะท าใหการแสดงผลชามาก เพราะตองเสยเวลาในการคลายไฟล ดงนนการเลอกคาการบบไฟล ควร
ก าหนดใหเหมาะสมกบภาพแตละภาพ
13
1.3 ไฟลสกล PNG (Portable Network Graphics)
จดเดน : สนบสนนสไดถงตามคา True color (16 bit, 32 bit หรอ 64 bit) สามารถก าหนดคาการ
บบไฟลไดตามทตองการ มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยด ( Interlace)
สามารถท าพนโปรงใสได
จดดอย : หากก าหนดคาการบบไฟลไวสง จะใชเวลาในการคลายไฟลสงตามไปดวย แตขนาดของไฟล
จะมขนาดต าไมสนบสนนกบ Graphic Browser รนเกา สนบสนนเฉพาะ IE 4 และ Netscape 4 ความละเอยดของ
ภาพและจ านวนสขนอยกบ Video Card โปรแกรมสนบสนนในการสรางมนอย
2. กราฟกส าหรบงานพมพ
2.1 TIFF (Tagged Image File Format)
TIFF เปนไฟลทใชไดกบ bitmap เทานน พฒนาขนโดยความรวมของ Aldus Corporation
และ Microsoft TIFF เกบบนทกขอมลรปภาพไดหลากหลายใน Tagged Field จงกลายเปนชอเรยกของรปแบบไฟล
ซงแตละ Tagged Field สามารถบนทกขอมลเกยวกบ bitmap หรอชไปยง Field อนได ซอฟตแวรทอานไฟลน
สามารถขามการอาน Field ทไมเขาใจหรอไมจ าเปนไปได
TIFF เปนรปแบบทมความยดหยน สามารถเปลยนแปลงแกไขได เนองจากม Tagged Field ใหใช
ตางกนหลายรอยชนด ไฟลแบบนจงมขอด คอ ใชไดกบโปรแกรมกราฟกทกประเภท สามารถใชไดในระบบคอมพวเตอร
หลายๆ ระบบ และก าหนดขอบเขตทกวางขวางของภาพ bitmap ได นอกจากน TIFFยงสามารถท าบางสง
ท bitmap อนท าไมได และเปนรปแบบทสนบสนนทงระบบ PC และ Macintosh Tagged Image File Format
นามสกลทใชเกบ TIF ระบบปฏบตการ Windows, UNIX, Mac Windows เวอรชนทไดรบการพฒนาจนถง
ปจจบน 5.0 และ 6.0 ซอฟตแวรทสรางและเปดไฟล โปรแกรมแกไข Bitmap และโปรแกรมDesktop Publishing
เชน PageMaker, QuarkXPress, CorelVentura, PhotoShop, PaintShop Pro ความสามารถทางดานส ขาว
ด า 1 บต, Grayscale (4,8, 16 บต), แผงส (ไดถง 16 บต), ส RGB (ไดถง 48 บต), ส CMYK (ไดถง 32บต)
การบบขนาดขอมล LZW, PackBits (Macintosh), JPEG (TIFF v 6.0), RLE หลายรปแบบ
14
2.2 EPS (Encapsulated PostScript)
EPS เปนเซตยอยของภาษาสงการในการจดหนาแบบ PostScript ซงเปนรปแบบทใชอยาง
แพรหลายในการแลกเปลยนรปแบบภาพกราฟก ไฟลแบบ EPS สามารถบรรจภาพทซบซอนและมรายละเอยดอยางสง
ทงในรปแบบ Vector และ Bitmap โดยใสไวในโปรแกรมการแกไข Vector และโปรแกรม Desktop
Publishing กราฟกแบบ EPS มขอจ ากดอยางหนงคอ จะตองพมพออกในเครองพมพแบบ PostScript เทานน เพราะ
เครองพมพไมสามารถแปลรหสการพมพ PostScript ได Encapsulated PostScript นามสกลทใช
เกบ EPS ระบบปฏบตการ Windows, Windows NT, UNIX, Mac Windows เวอรชนทไดรบการพฒนาจนถง
ปจจบน EPS เปนเซตยอยของ Adobe PostScript ซอฟตแวร ทสรางและเปดไฟล โปรแกรมแกไข Vector และ
โปรแกรม Desktop Publishing เชนAutoCAD, CorelDRAW, PageMaker, QuarkXPress, Adobe
Illustrator ความสามารถทางดานส ขยายไดถง 24 บต RGB และ HSB 32 บต, CMYK, Grayscale, แผงสแบบอน
เดกซ การบบขนาดขอมล การใสรหสแบบไบนาร
2.3 PDF (Portable Document Format)
PDF เปนรปแบบไฟลทใชในโปรแกรม Adobe Acrobat ใชส าหรบเอกสารบนสออเลคทรอนกส
เชน บนอนเทอรเนตหรอบรการออนไลนตาง ๆ เนองจากเปนไฟลขนาดเลกท าใหสามารถสรางเอกสาร เชน โบรชวร
หรอ แคทตาลอกสงไปทางอนเทอรเนตได ใชไดกบทงแบบ Bitmap และ Vectorและสนบสนนทง
ระบบ PC และ Macintosh
PDF เหมาะส าหรบเอกสารทางเทคนคทจะเผยแพรบนอนเทอรเนต ผอานสามารถพมพออกมาได
หรอเรยกดไดโดยไมเสยคาใชจายเพราะรปแบบ อกษรทใชประกอบอยในตวซอฟตแวรแลว และเนองจากใชตวอกษร
แบบ PostScript ซงเปน vector-based จงสามารถยอและขยายไดตามตองการ โดยคณภาพของงานไมเปลยนแปลง
ทงยงสามารถน าไปสรางเปนเอกสาร แบบ Illustration หรอ Bitmap ไดอกดวย และเมอพมพออกมากจะไมเสย
คณภาพ ไมวาจะใชคาความละเอยดของภาพเปนเทาใด เชนเดยวกบไฟลประเภท Vector อน ๆ
เชน PS หรอ PRN นอกจากน PDF เปนไฟลทประกอบดวยขอมลPostScript จงสามารถน าไปใชในโปรแกรมตกแตง
แกไขภาพ หรอ โปรแกรมประเภท Illustration ไดเชนเดยวกบ EPS Portable Document Format นามสกลทใช
เกบ PDF ระบบปฏบตการ Windows, Mac OS, UNIX และ Dos ซอฟตแวรทสรางและเปดไฟล PhotoShop ,
Acrobat ความสามารถทางดานส RGB, Indexed-Color, CMYK, GrayScale , Bitmap และ Lap Color
15
องคประกอบของภาพ การจดองคประกอบในภาพ (Compositing) จะท าใหภาพมคณคานาดงดดใจ ท าใหภาพดแตกตางจากภาพธรรมดาทว ๆ ไปเปนภาพทมความหมาย
กฎสามสวน (Rule of Thirds) การจดองคประกอบของภาพใหดดประการหนงคอการเลอกวางต าแหนงจด
สนใจของภาพ โดยการแบงดานกวางและดานยาวออกเปนดานละสามสวนจะท าใหภาพถกแบงออกมาได 9 ชอง จดท
เสนแบงตดกนจะมอย 4 จดดวยกน จดใดจดหนงของจดทงส ถอเปนต าแหนงส าหรบวางสวนส าคญทสดของภาพ ซงจะ
ท าใหภาพมคณคาขน ชางภาพมอใหมมกจะวางจดสนใจไวทกลางภาพเนองจากยงไมคนกบการมองผานชองมองภาพ
หรอมวพะวงมงสนใจกบวตถทจะถาย ดงนนหากเราฝกกวาดสายตาดรอบ ๆ ภาพทชองมองภาพแลวเลอกวาจะเลอน
จดสนใจไปยงจดใดจดหนงของสจดดงกลาว เรากจะไดภาพทดดขน อนง การวางจดสนใจไว ณ ต าแหนงตาง ๆ
ดงกลาวไมใชเปนขอบงคบเปนเพยงแนวทางส าหรบการจดภาพทว ๆ ไป ชางภาพอาจมแนวทางการวางทตางออกไป
แลวแตแนวคดในภาพแตละภาพ
17
ความสมดลของภาพ (Balancing Elements) ในการจดวางจดสนใจเอยงไปดานใดดานหนงของภาพตามกฏ
สามสวนนน ท าใหน าหนกของภาพหนกไปทางดานนน สวนอกดานหนงจะดโลง จงควรหาจดสนใจรอง ๆ ไวอกดาน
หนงเปนการถวงน าหนกใหภาพดสมดลขน ทงนกอยาใหจดสนใจรองนนมาลดความเดนของจดสนใจหลกจนเกนไป
เสนน าสายตา (leading Line) โดยธรรมชาตนน เมอเรามองไปยงภาพ ตาของคนเราจะเคลอนไปตามเสนสาย
ตาง ๆ ทปรากฏในภาพ ดงนน เราสามารถทจะจดองคประกอบของภาพใหมเสนสาย และใหผชมเคลอนสายตาไปตาม
เสนสายนน (เสนสายเหลานอาจจะเปนถนน ธารน า ทวเขา เสนแบงของสสน เสนแบงความเขมของแสง ขอบเงาของ
วตถ ฯลฯ) ผานจดสนใจจนเลยไกลออกไป เสนสายเหลานอาจจะมรปทรงเปนเสนตรง เสนเฉยง เสนโคง เสนซกแซก
ฯลฯ
18
ความสมมาตรและความเปนแบบแผน (Symmetry and Patterns) เราสามารถสรางสรรคภาพทมความ
สมมาตรและเปนแบบแผนดนาเบอหนาย ใหดนาสนใจไดหากสามารถน าเสนอในมมมองทผชมไมไดคาดคดมากอน
ในขณะทเราก าลงเดนหามมภาพ ใหลองฉกคดดวาชวงบรเวณนนมโครงสรางอะไรทเปนแบบแผน มความสมมาตร อาจ
เปนอาคาร สงปลกสราง หรอปาเขา ลองสองชองมองกลองด กอาจไดภาพทมคณคาได และหากเรามการคดตางออกไป
โดยวางจดสนใจลงไปทต าแหนงใดต าแหนงหนงของภาพประเภทน กอาจไดภาพทดดดวยกได
มมมอง (Viewpoint) กอนทจะลงมอถายภาพใหลองใชเวลาสกนดคดหามมทจะตงกลองส าหรบบนทกภาพ
แทนทจะเปนมมมองในระดบสายตาซงดจ าแจ หากลองกมลงในมมต าใกลระดบพน หรอตะแคงกลองท ามมเอยง ๆ กบ
พน หรอปนไปถายในมมสง ฯลฯ อาจไดมมมองทตางออกไป และสามารถสรางความเราใจใหผชมภาพนน ๆ ได
19
ฉากหลง (Background) บอยครงทภาพบางภาพทนาจะดดแตพบวาจดสนใจกลบดไมเดนพอ ทงนอาจเปน
เพราะฉากหลงดวนวายแยงความสนใจจากจดสนใจหลก ดงนน ในการถายภาพใหหามมกลองทฉากหลงดคอนขางเรยบ
ไมมอะไรรกสายตา ไมมแสงสทจะมาแยงตายตาไปจากจดสนใจ อกทางหนงคอ เปดขนาดของอะเพอรเจอรใหใหญขน
เพอใหระยะชดลกนอยลงท าใหฉากหลงพรามว การถายของชนเลก ๆ เชนการถายภาพดอกไม เราสามารถใชระดาษทม
สโทนมดไปไวดานหลงของดอกไมทจะถายเพอท าเปนฉากหลง กจะท าใหภาพของดอกไมดโดดเดนขน
ความลก (Depth) แมวาภาพถายจะเปนภาพสองมต เราสามารถถายทอดใหภาพดมความลกเพมอกมตหนงได
โดยการจดภาพใหมทงฉากหนา วตถ และฉากหลง ท าใหแตละชวงดตางจากกน อาจจะตางกนทโทนส น าหนกของแสง
ความคมชด ดวยการจดวางทดท าใหภาพดมความลกขน
20
กรอบภาพ (Framing) ภาพบางภาพอาจดโลง ๆ แตหากเราแตงภาพโดยใหมฉากหนา เชนใหมกงไมใบไมมา
แซม ๆ ทขอบภาพ สามารถท าใหภาพดดขนไมโลงเหมอนเดม การประกอบภาพดวยขอบประต หรอขอบหนาตางไวใน
บรเวณขอบของภาพสกสองถงสดานกชวยใหภาพนน ๆ ดไมโลงจนเกนไปไดเชนกน การจดใหมกรอบภาพแบบ
ธรรมชาตนยงเปนเทคนคทชวยใหจดสนใจดเดนขนและยงเพมมตใหกบภาพได
การตดสวนเกน (Cropping) บางครงการถายภาพมขอจ ากดท าใหไมสามารถถายภาพวตถหลกใหมขนาดใหญ
เทาทตองการอาจจะเนองจากถายในระยะไกลเกนไป หรอบางครงภาพทถายนนพบวาจดสนใจหลกถกแยงความสนใจ
จากสงทอยรอบ ๆ การตดขอบภาพในสวนทไมจ าเปนออกไปจงชวยแกปญหานได ชวยท าใหสดสวนของจดสนใจให
ใหญขนเทยบกบพนททเหลออย ในขณะทก าลงเลอกสวนเกนทจะตดออกนน ใหพจารณาดวาต าแหนงของจดสนใจจะ
ถกเลอนไปอยในต าแหนงใดของภาพ ใหใชกฎสามสวนมาปรบปรงใหภาพสมบรณขน การตดสวนเกนออกกมขอเสยคอ
ท าใหรายละเอยดของภาพดอยลง จงไมควรท าการตดสวนเกนออกมากจนเกนไป และหากเปนไปได ในชวงท าการ
บนทกภาพใหเดนเขาไปใกลวตถมากขน หรอใชเลนสซมดงภาพใหเขามาใกลขน
21
การจดเกบแฟมภาพกราฟก
ในงานกราฟกนนจะมการใชโปรแกรมคอมพวเตอรสรางหรอแกไขภาพกราฟก ซงจะพบวา ความเรวใน การประมวลผลภาพแตละภาพชาเรวตางกน ทงนเพราะวา แตละแฟมภาพใชเนอทในการเกบขอมลไมเทากนซงจะขนกบ ความละเอยดของภาพ จ านวนส และรปแบบของแฟมขอมล
ความละเอยดของภาพ ความละเอยดของภาพหมายถง จ านวนจดทใชในการประกอบกนเปนภาพ เชน ความละเอยดของ
ภาพขนาด 640 x 480 จด
จ านวนส จ านวนสหมายถง จ านวนสทจดภาพสามารถเกบหรอแสดงได เชน จดภาพ 1 จดทใชเนอท 8 บต
จะมจ านวนสได 256 ส
รปแบบของแฟมขอมลกราฟก รปแบบของแฟมขอมลกราฟก หมายถง รปแบบของขอมลทใชในการจดเกบภาพกราฟกลงในแฟม มหลายรปแบบใหเลอกใชงาน ตวอยางเชน
1) จฟ (Graphics interchange Format : GIF) หรอทมสวนขยายแฟมเปน .GIF เปนรปแบบการ เปลยนระหวางกราฟกแฟมภาพกราฟกทพฒนาขนมาใชเขารหสและรบสงแลกเปลยนแฟมภาพกราฟกบนอนเทอรเนต จงมการบบอดขอมลใหมขนาดเลกลงเพอลดขนาดของแฟม โดยก าหนดใหภาพทเกบดวยรปแบบนแตละจดภาพมขนาด 8 บต ภาพทเกบดวยรปแบบนจงมความละเอยดทจ านวนส 256 ส ซงพอเพยงกบการใชงานในการท างานปกตทวไป มกจะใชเมอตองการไฟลทมขนาดเลก , จ านวนสและความละเอยดของภาพไมสงมากนก , ตองการพนแบบโปรงใส , ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอยด , ตองการน าเสนอภาพแบบภาพเคลอนไหว
22
จดเดน
• มขนาดไฟลต า • สามารถท าพนของภาพใหเปนพนแบบโปรงใสได ( Transparent) • มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Interlace • มโปรแกรมสนบการสรางจ านวนมาก • เรยกดไดกบ Graphics Browser ทกตว • ความสามารถดานการน าเสนอแบบภาพเคลอนไหว ( Gif Animation)
จดดอย
• แสดงสไดเพยง 256 ส
ไฟล .GIF ม 2 สกล ไดแก GIF87 พฒนาขนในป ค.ศ. 1987
เปนไฟลกราฟกรนแรกทสนบสนนการน าเสนอบนอนเทอรเนต เปนไฟลทมขนาดเลกและแสดงผลสไดเพยง
256 ส และก าหนดใหแสดงผลแบบโครงรางได (Interlace) GIF89A พฒนาขนในป ค.ศ. 1989 เปนไฟลกราฟกท
พฒนาตอจาก GIF87 โดยเพมความสามารถการแสดงผลแบบพนโปรงใส (Transparent) และการสรางภาพเคลอนไหว
(GIF Animation) ซงเปนไฟลกราฟกทมความสามารถพเศษโดยน าเอาไฟลภาพหลาย ๆ ไฟลมารวมกนและน าเสนอ
ภาพเหลานนโดยอาศยการหนวงเวลา มการใสรปแบบการน าเสนอลกษณะตาง ๆ (Effects) ในลกษณะภาพเคลอนไหว
2) เจเพก (Joint Photographic Expert Group Graphics : JPEG) หรอทมสวนขยายแฟม
เปน .JPEG เปนรปแบบของแฟมภาพกราฟกแบบกลมผเชยวชาญดานภาพ ทพฒนาโดยกลมผเชยวชาญดาน
คอมพวเตอรกราฟก ทไดรบการสนบสนนโดยองคการระหวางประเทศ วาดวยมาตรฐาน ( ISO) และคณะกรรมการท
ปรกษาระหวางประเทศ เกยวกบโทรเลขและโทรศพท(CCITT) รปแบบนเหมาะส าหรบงานถายภาพ ภาพศลปะ และ
ภาพวาดทมคณภาพสสน ตามธรรมชาต ความละเอยดคมชดไมเหมาะกบงานภาพลายเสน ขอความ หรองานการตน
งาย ๆ การบบอดภาพของ รปแบบกราฟกนจะท าใหคณภาพของภาพบางสวนสญหายไป โดยใชหลกการมองเหนของ
มนษยทวา สทมการเปลยน ไปเลกนอยจะสงเกตพบไดไมชดเจนเทากบการเปลยนความเขมแสง ปกตสดสวนของการ
บบอดของรปแบบกราฟกนจะ เปน 10 : 1 หรอ 20 : 1 ซงจะไมท าใหสามารถสงเกตเหนคณภาพของภาพท
ลดลง จดภาพแตละจดมขนาด 24 บต แยกเกบเปนแมสทแตละสมขนาด 8 บต เมอผสมสทงหมดจะไดเทากบ
23
256x256x256 ส หรอประมาณ 16 ลานส อยางไรกตามรปแบบของกราฟกนสามารถเลอกลดจ านวนสลงใหเหลอ
256 สได มกใชกรณ ภาพทตองการน าเสนอมความละเอยดสง และใชสจ านวนมาก (สนบสนนถง 24 bit color) ,
ตองการบบไฟลตามความตองการของผใช , ไฟลชนดนมกจะใชกบภาพถายทน ามาสแกน และตองการน าไปใชบน
อนเทอรเนต เพราะใหความคมชดและความละเอยดของภาพสง
จดเดน
• สนบสนนสไดถง 24 bit • สามารถก าหนดคาการบบไฟลไดตามทตองการ • มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Progressive • มโปรแกรมสนบสนนการสรางจ านวนมาก • เรยกดไดกบ Graphics Browser ทกตว • ตงคาการบบไฟลได ( compress files)
จดดอย
ท าใหพนของรปโปรงใสไมได 3) บเอมพ (bitmap) หรอทมสวนขยายแฟมเปน .bmp เปนรปแบบของแฟมภาพกราฟกซงออกแบบ
โดยบรษทไมโครซอฟต เปนรปแบบพนฐานทใชงานไดดกบโปรแกรมทท างานภายใตวนโดว และใชงานมากบนระบบ
วนโดว จดประสงคของรปแบบ นเนนใหแสดงผลไดรวดเรวบนระบบวนโดว ขนาดของแฟมภาพทไดจงมกมขนาดใหญ
กวารปแบบของแฟมชนดอน ปกตภาพทไดจากโปรแกรมการวาดภาพจะมรปแบบของแฟมเปน .bmp ไฟล BMP ท
เหนบอย ๆ คอ ภาพวอลลเปเปอรทแสดงบนจอภาพของวนโดว โดยสามารถแสดงไดตงแต 2,16,256 และ 16 ลานส.
ขอควรค านงในการจดเกบแฟมภาพกราฟก
1) เลอกใชจ านวนสใหเหมาะสม การใชจ านวนสมากจะท าใหไดภาพทมคณภาพสง แตจะสนเปลองเนอท
ในการเกบขอมลมาก ดงนนการเลอกใชจ านวนสทเหมาะสมกบภาพจะท าใหเปลองเนอทนอยกวาและสงผลใหสามารถ
ประมวลผลภาพไดเรวขน ตวอยางเชน ภาพทใชจ านวนส 16 ลานส (24 บต) ตองการเนอทตอจดเปน 3 เทาของ
ภาพทใชจ านวนส 256 ส ภาพบางภาพทเปนแผนภมอาจใชจ านวนส 16 ส กเพยงพอ
2) เลอกรปแบบแฟมขอมลกราฟกทท าใหการจดเกบขอมลมขนาดลดลง รปแบบแฟมขอมลกราฟกมผล
24
ขนาดของแฟมขอมล เชน รปแบบแฟมขอมลกราฟ แบบ bmp ถกออกแบบมาเพอใหน าแสดงผลไดรวดเรว แฟม
เหลานจะกนเนอทมาก รปแบบแฟมขอมลกราฟกแบบเจเพก (.jpeg) มผลใหคณภาพของภาพดอยลง แตลดขนาด
แฟมภาพกราฟกใหมขนาดหนงในสามของรปแบบแฟมขอมลกราฟกแบบจฟ (.gif) ในขณะทรปแบบแฟมขอมลกราฟก
แบบจฟ (.gif) เกบจ านวนส 256 ส ดงนนควรเลอกรปแบบแฟมขอมลกราฟกทเหมาะสมกบการใชงานเพอจะไดไม
สนเปลองเนอทในการจดเกบภาพกราฟก
3) เลอกใชโปรแกรมบบอดขอมล ในกรณทไมสามารถเกบภาพในรปแบบแฟมทลดขนาดขอมล การเลอก
ใชโปรแกรมบบอดขอมลบางตว เชน pkzip หรอ winzip จะชวยลดขนาดขอมลในการจดเกบลงแฟมได
25
สรปสาระส าคญทายบทท 1
สรปสาระส าคญความรพนฐานของคอมพวเตอรกราฟกเบองตน
คอมพวเตอรกราฟก หมายถง การสราง การตกแตงแกไข หรอการจดการเกยวกบรปภาพ โดยใชเครอง
คอมพวเตอรในการจดการ ยกตวอยางเชน การท า Image Retouching ภาพคนแกใหมวยทเดกขน การสรางภาพตาม
จนตนาการและการใชภาพกราฟกในการน าเสนอขอมลตาง ๆ เพอใหสามารถสอความหมายไดตรงตามทผสอสาร
ตองการและนาสนใจยงขนดวยกราฟ แผนภม แผนภาพ ภาพกราฟก แบงเปน 2 ประเภท คอ ภาพกราฟกแบบ 2 มต
และแบบ 3 มต
26
ค าศพท หนวยท 1
ค าศพท ความหมาย
Color ส
Pocket Book หนงสอฉบบกระเปา
Newspapers หนงสอพมพ
Brochure โบวชวร
Leaflet ใบปลว
Folder แผนพบ
Poster ใบปดประกาศ
Bitmap ภาพแบบบตแมป
Raster ภาพแบบราสเตอร
Vector ภาพแบบเวคเตอร
27
ใบงานท 1.1
เรอง ความรพนฐานของกราฟก
จดประสงค
1. บอกความหมายของสอกราฟกแบบ Rasterไดถกตอง
2. บอกความส าคญของสอกราฟกแบบ Vectorไดถกตอง
3. อธบายประเภทของภาพกราฟกแบบตาง ๆ ไดถกตอง
กจกรรม
1. ใหนกเรยนหาตวอยางสอกราฟกแบบ Rasterมาอยางละ 1 ตวอยาง
2. ใหนกเรยนน าตวอยางสอกราฟกแบบ Vectorน าเสนอหนาชนเรยน เพยง 1 ประเภท
3. ใหนกเรยนทกคน ประเมนผลการน าตวอยางของแตละคน ลงในแบบประเมนผลทครเตรยมไวให
28
แบบฝกหดทายบท
บทท 1 ความรพนฐานของคอมพวเตอรกราฟกเบองตน
ค าชแจง ใหนกเรยนตอบค าถามตอไปน
1. อธบายความหมายสอกราฟกแบบ Vector และกราฟกแบบ Raster
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
2. อธบายความส าคญสอกราฟกแบบ Vector และกราฟกแบบ Raster
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
3. บอกลกษณะของสอกราฟกในปจจบนพรอมความหมาย
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
4. บอกขอด ขอเสยของกราฟกแบบ Rasterมาอยางละ 2 ขอ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
5. บอกขอด ขอเสยของกราฟกแบบ Vector มาอยางละ 2 ขอ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
6. บอกลกษณะของสอกราฟก 2 มต และ 3 มต
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
29
แบบทดสอบหลงเรยน
บทท 1 ความรพนฐานของคอมพวเตอรกราฟกเบองตน
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. ขอใดคอลกษณะเดนของรปภาพแบบ Vector
ก. มความละเอยดของภาพสง
ข. สามารถขยายภาพแลวภาพไมชด
ค. มภาพขนาดใหญเกนไป
ง. ตองประกอบดวยเสนตรงและเสนโคง
2. เครองมอใดใชในการสรางรปภาพกราฟกแบบ Vector
ก. Pen Tool
ข. Rectangle Tool
ค. Add Anchor Point Tool
ง. ถกทกขอทกลาวมา
3. ขอใดคอสงส าคญทสดดในการเตมสให Path
ก. เลอกสทตองการเตมท Foreground color
ข. ผใชโปรแกรมตองสรางเสน Path ขนมากอน
ค. เลอก Fill Path
ง. ก าหนดรหสส
4. ปจจบนนยมใชคอมพวเตอรกราฟฟกในงานดานใด
ก. บนเทง
ข. การศกษา
ค. การแพทย
ง. ถกทกขอ
5. ขอใดเปนลกษณะทดในการใชสในงานออกแบบ
ก. ใชสสดใส ชดเจน
30
ข. ใชสออนสลบเขม
ค. ใชสใหเหมาะสมกบภาพ
ง. ค านงถงการน าแมสมาสรางภาพ
6. ขอใดหมายถงความหมายของค าวา Design
ก. การถายทอดความรเพอการสอสาร
ข. โปรแกรมส าเรจรปเพอใชงานดานกราฟก
ค. การออกแบบงานภาพและสรางขอความ
ง. การใชภาพเพอสอสารกบผอาน
7. คอมพวเตอรกราฟกถกน ามาใชเพออะไร
ก. สรางงานออกแบบ
ข. ชวยในการประชาสมพนธดวยปายโฆษณา
ค. มความสวยงาม และสอสาร
ง. มขอความททนตอเหตการณ
8. ขอใดคอหลกการน าภาพมาใชในงานกราฟก
ก. การจดเรยงภาพ
ข. การน าภาพทมอยแลวมาใชงาน
ค. การตดตอภาพใหครบดวยองคประกอบ
ง. การแยกภาพขนาดเลก ๆ ออกจากกน
9. ขอใดคอรปแบบของภาพ
ก. ภาพแบบบตแมป
ข. ภาพแบบราสเตอร
ค. ภาพแบบเวคเตอร
ง. ถกทกขอทกลาวมา
10. องคประกอบของหลกการออกแบบงานกราฟกคอขอใด
ก. ทศทางและการเคลอนไหว
ข. เอกภาพและความกลมกลน
ค. ความสมดล สดสวน และความแตกตาง
ง. ถกทกขอทกลาวมา
31
เฉลยแบบทดสอบหลงเรยน
บทท 1 ความรพนฐานของสอสงพมพ
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. ขอใดคอลกษณะเดนของรปภาพแบบ Vector
ก. มความละเอยดของภาพสง
ข. สามารถขยายภาพแลวภาพไมชด
ค. มภาพขนาดใหญเกนไป
ง. ตองประกอบดวยเสนตรงและเสนโคง
2. เครองมอใดใชในการสรางรปภาพกราฟกแบบ Vector
ก. Pen Tool
ข. Rectangle Tool
ค. Add Anchor Point Tool
ง. ถกทกขอทกลาวมา
3. ขอใดคอสงส าคญทสดในการเตมสให Path
ก. เลอกสทตองการเตมท Foreground color
ข. ผใชโปรแกรมตองสรางเสน Path ขนมากอน
ค. เลอก Fill Path
ง. ก าหนดรหสส
4. ปจจบนนยมใชคอมพวเตอรกราฟฟกในงานดานใด
ก. บนเทง
ข. การศกษา
ค. การแพทย
ง. ถกทกขอ
5. ขอใดเปนลกษณะทดในการใชสในงานออกแบบ
ก. ใชสสดใส ชดเจน
ข. ใชสออนสลบเขม
32
ค. ใชสใหเหมาะสมกบภาพ
ง. ค านงถงการน าแมสมาสรางภาพ
6. ขอใดหมายถงความหมายของค าวา Design
ก. การถายทอดความรเพอการสอสาร
ข. โปรแกรมส าเรจรปเพอใชงานดานกราฟก
ค. การออกแบบงานภาพและสรางขอความ
ง. การใชภาพเพอสอสารกบผอาน
7. คอมพวเตอรกราฟกถกน ามาใชเพออะไร
ก. สรางงานออกแบบ
ข. ชวยในการประชาสมพนธดวยปายโฆษณา
ค. มความสวยงาม และสอสาร
ง. มขอความททนตอเหตการณ
8. ขอใดคอหลกการน าภาพมาใชในงานกราฟก
ก. การจดเรยงภาพ
ข. การน าภาพทมอยแลวมาใชงาน
ค. การตดตอภาพใหครบดวยองคประกอบ
ง. การแยกภาพขนาดเลก ๆ ออกจากกน
9. ขอใดคอรปแบบของภาพ
ก. ภาพแบบบตแมป
ข. ภาพแบบราสเตอร
ค. ภาพแบบเวคเตอร
ง. ถกทกขอทกลาวมา
10. องคประกอบของหลกการออกแบบงานกราฟกคอขอใด
ก. ทศทางและการเคลอนไหว
ข. เอกภาพและความกลมกลน
ค. ความสมดล สดสวน และความแตกตาง
ง. ถกทกขอทกลาวมา
33
แบบประเมนใบงาน
ค าชแจง ใหผประเมนท าเครองหมาย ✓ ลงในชองระดบคะแนน โดยพจารณาจากการปฏบตงานตามใบงานของผเรยน ซงมเกณฑการพจารณา ดงน
ระดบคะแนน 2 หมายถง ปฏบตงานตามรายการประเมนไดถกตองสมบรณ
ระดบคะแนน 1 หมายถง ปฏบตงานตามรายการประเมนไดแตไมถกตองสมบรณ
ระดบคะแนน 0 หมายถง ปฏบตงานตามรายการประเมนไมได
ขอท
รายการประเมน
เกณฑการประเมน หมายเหต ด
(2) พอใช (1)
ปรบปรง (0)
1 ปฏบตตามขนตอนไดถกตอง 2 ใชเครองมอในการปฏบตถกตอง 3 ชนงานโดยรวมทปฏบตถกตอง สมบรณ
ครบถวน
4 งานเสรจตามเวลาทก าหนด 5 มความคดสรางสรรค 6 ศกษาคนควาดวยตนเอง 7 มความประพฤตทด ไมท าผดกฎระเบยบ 8 มความซอสตยในการท างาน 9 มความรบผดชอบ 10 ดแลความสะอาดหองเรยน รวม รวมคะแนนทงสน
ประเมนโดย ผเรยน ผสอน
รวมคะแนนทได .............................. คะแนนเฉลย ..........................................
ลงชอ.......................................ผประเมน
34
(.................................................)
1
บทท 2
การใชงานโปรแกรม Adobe Illustrator เบองตน
หวขอเรอง
1. สวนประกอบของโปรแกรม Illustrator
2. การใชเครองมอ Tools box
3. การใชงานอารตบอรด
4. การใชงานพาเนล
5. การเปลยนสหนาจอของโปรแกรม
6. การใชงาน Work space
7. การปรบมมมองการแสดงภาพ
8. ก าหนดรปแบบการเรยงหนาตาง
9. การใชงานเครองมอวดและบอกต าแหนง
10. การสรางเอกสารใหมและการเรยกใชงานเอกสารจาก Template
11. การบนทกเอกสาร
12. การปดเอกสาร และออกจากโปรแกรม Illustrator
สาระส าคญ
การออกแบบสอสงพมพดวยโปรแกรม Illustrator เปนโปรแกรมทใชท างานกราฟกโดยเนนการสรางชนงาน
จากการวาดเปนหลก ซงเปนทนยมส าหรบนกออกแบบทงหลายเพอน าไปใชในงานดานตาง ๆ ไมวาจะเปนงานสงพมพ
งานโฆษณา ออกแบบฉลากและผลตภณฑ ออกแบบโลโก ไอคอน การตนและภาพประกอบ ฯลฯ
สมรรถนะทพงประสงค
2
อธบายสวนประกอบของโปรแกรม Illustrator และขนตอนการน าเขาไฟลอน ๆ ลงสสไลดงานน าเสนอได
ถกตองตามหลกการและสามารถน าไปผลตสอสงพมพใหสอดคลองกบโรงพมพไดถกตอง
จดประสงคการเรยนร
เมอศกษาบทท 2 จบแลว นกเรยนสามารถ
1. อธบายสวนประกอบของโปรแกรม Illustrator ไดอยางถกตอง
2. บอกวธการใชเครองมอ Tools box ไดอยางถกตอง
3. บอกขนตอนการใชงานอารตบอรด ไดอยางถกตอง
4. บอกหลกการใชงานพาเนล ไดอยางถกตอง
5. บอกขนตอนการเปลยนสหนาจอของโปรแกรมไดอยางถกตอง
6. บอกหลกการใชงาน Work space ไดอยางถกตอง
7. บอกหลกการปรบมมมองการแสดงภาพ ไดอยางถกตอง
8. บอกการใชค าสงในการก าหนดรปแบบการเรยงหนาตางไดอยางถกตอง
9. อธบายวธการใชงานเครองมอวดและบอกต าแหนงไดอยางถกตอง
10. บอกขนตอนการสรางเอกสารใหมและการเรยกใชงานเอกสารจาก Templateไดอยางถกตอง
11. บอกวธการบนทกเอกสารไดอยางถกตอง
12. บอกขนตอนการปดเอกสาร และออกจากโปรแกรม Illustratorไดอยางถกตอง
13. บอกความหมายของค าศพทคอมพวเตอร จ านวน 10 ค า
14. นกเรยนมความใฝร ใฝเรยน ขยน รบผดชอบ อดทน และมความคดรเรมสรางสรรค
3
แบบทดสอบกอนเรยน
บทท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าสง จงท าเครองหมาย (X ) ลงหนาขอทถกตองทสดเพยงขอเดยว เวลา 15 นาท
1. สวนประกอบของโปรแกรม Illustrator ทมค าสงใชงานตาง ๆ คอขอใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
2. ค าสงก าหนดคณสมบตและตวปรบแตงการท างานใหกบวตถคอขอใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
3. เครองมอชนดตาง ๆ ทใชในการท างานคอขอเมนใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
4. พนทส าหรบพมพงานคอขอใด
ก. Pasteboard
ข. Guide
ค. Palette
ง. Document
5. พนทวาง ๆ รอบเอกสารคอขอใด
ก. Pasteboard 4
ข. Guide
4
ค. Palette
ง. Document
6. อารตบอรด มสวนประกอบใดบาง
ก. พนทนอก
ข. พนทใน
ค. พนทกลาง
ง. พนทนอกและพนทใน
7. อารตบอรดชวยในการท างานหลก ๆ คอขอใด
ก. สรางวตถชนงานได
ข. สามารถมหลาย ๆ พนทการท างาน
ค. พนทส าหรบพกวตถ
ง. พนทใชส าหรบจดรปแบบ
8. ค าสงเปลยนสหนาจอโปรแกรมดวยตนเอง คอขอใด
ก. Dark/Light
ข. Preferences
ค. User Interface
ง. Brightness
9. ค าสงการเปดเอกสารใหม
ก. New
ข. Open
ค. Open Recent
ง. New from Template
10. ค าสงการออกจากโปรแกรมคอขอใด
ก. Exit
ข. Close all
ค. Exit all
ง. Close
5
เฉลยแบบทดสอบกอนเรยน
บทท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
1. สวนประกอบของโปรแกรม Illustrator ทมค าสงใชงานตาง ๆ คอขอใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
2. ค าสงก าหนดคณสมบตและตวปรบแตงการท างานใหกบวตถคอขอใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
3. เครองมอชนดตาง ๆ ทใชในการท างานคอขอเมนใด
ก. Menu Bar
ข. Option Bar
ค. Tool Bar
ง. Palette
4. พนทส าหรบพมพงานคอขอใด
ก. Pasteboard
ข. Guide
ค. Palette
ง. Document
5. พนทวาง ๆ รอบเอกสารคอขอใด
ก. Pasteboard 4
ข. Guide
ค. Palette
ง. Document
6
6. อารตบอรด มสวนประกอบใดบาง
ก. พนทนอก
ข. พนทใน
ค. พนทกลาง
ง. พนทนอกและพนทใน
7. อารตบอรดชวยในการท างานหลก ๆ คอขอใด
ก. สรางวตถชนงานได
ข. สามารถมหลาย ๆ พนทการท างาน
ค. พนทส าหรบพกวตถ
ง. พนทใชส าหรบจดรปแบบ
8. ค าสงเปลยนสหนาจอโปรแกรมดวยตนเอง คอขอใด
ก. Dark/Light
ข. Preferences
ค. User Interface
ง. Brightness
9. ค าสงการเปดเอกสารใหม
ก. New
ข. Open
ค. Open Recent
ง. New from Template
10. ค าสงการออกจากโปรแกรมคอขอใด
ก. Exit
ข. Close all
ค. Exit all
ง. Close
7
สวนประกอบของโปรแกรม Adobe Illustrator
หนาจอของโปรแกรม Illustrator cs6 เมอเปดโปรแกรมขนมา จะเหนเมนและเครองมอในการท างาน ดงน
ภาพท 2.1 หนาจอหลกโปรแกรม Illustrator
1. Menu Bar คอ ค าสงใชงานตาง ๆ เชน
2. Option Bar คอ ค าสงทก าหนดคณสมบตหรอตวปรบแตงการท างานใหกบวตถ
3. Tool Bar คอ เครองมอชนดตาง ๆ ทใชในการท างาน
4. Document คอ พนทส าหรบพมพงานและใสรปราง ตาราง ตาง ๆ เพอใชงาน
5. Pasteboard คอ พนทวาง ๆ รอบเอกสาร ไมสามารถใชงานใด ๆ ได
6. Guide คอ ไมบรรทดชวยในการวดระยะการท างานใหเอกสารมความเหมาะสมสวยงาม
7. Palette คอ หนาตางยอยส าหรบชวยเสรมการท างาน
8
แถบค าสง Menu Bar
Menu Bar คอ ทเกบชดค าสงส าหรบจดการไฟล โดยแบงค าสงออกเปนหมวดหมดงน
ภาพท 2.2 เมนบารโปรแกรม Illustrator
File ใชส าหรบจดการไฟล คอ การเปดไฟลใหมและเกา การบนทกไฟล การปดไฟล การออกจากโปรแกรม Edit จดการแกไขและปรบแตงคาตาง ๆ เบองตนของโปรแกรม เชน การตด คดลอก วาง Object จดการกบรปทรงวตถ เชน หมน เอยง เปลยนแปลงวตถ และการใสสสนตาง ๆ Type จดการและปรบแตงตวอกษร Select จดการการเลอกชนสวนวตถ Effect ใสเอฟเฟกตและแปลงรปทรงใหมรปแบบ View จดการรปแบบการแสดงผล เชน การใส/ซอนไมบรรทด เสนกรด และเสนไกด Window จดการพาเนลและปรบการเวนวรรค ตวหนงสอ ใหเหมาะสมสวยงาม Help แสดงความชวยเหลอในรปแบบตาง ๆ
กลองเครองมอ Toolbox
Toolbox เปนสวนทเกบรวบรวมเครองมอตาง ๆ ทใชในการสรางภาพ การแกไขภาพโดยแบงออกเปนกลม
เครองมอตาง ๆ ดงน
9
ภาพท 2.3 ทลบารโปรแกรม Illustrator
เปลยนรปแบบการเรยงของกลองเครองมอ
กลมค าสงเกยวกบการเลอกวตถ
กลมค าสงเกยวกบการวาดภาพ และตวอกษร
กลมค าสงเกยวกบการปรบแตงวตถ
กลมค าสงเกยวกบการระบายสและตกแตงภาพ
กลมค าสงเกยวกบการสรางวตถพเศษ
กลมค าสงเกยวกบการมองชนงาน
กลมค าสงในการเลอกสพนและสเสนขอบชนงาน
กลมค าสงเกยวกบการวาด ตาง ๆ
กลมค าสงเกยวกบการแสดงหนาจอโปรแกรม
10
ออปซนบาร Option bar
Option bar เปนแถบเครองมอส าหรบปรบแตงคาตาง ๆ ของวตถ เชน ส ขนาด ต าแหนง และคณสมบตตาง
ๆ ของวตถทเลอก โดยจะปรากฏอยทดานบนของหนาตางโปรแกรม
Option bar ออปชนบาร
ภาพท 2.4 ออปชนบารโปรแกรม Illustrator
พนทการท างาน Artboard
เปนพนทใชสรางวตถชนงานตาง ๆ สามารถมไดหลาย ๆ อารตบอรด มสวนประกอบ 2 สวน คอ พนทนอก
Artboard Scratch area ใชส าหรบพกวตถทแทรกเขามาท างานเพอรอการจดการการจดรปแบบในการแสดงชนงาน
หรอเผอเอาไวใชภายหลง สวนท 2 คอ พนทการท างาน Artboard ปกต ใชส าหรบทวางชนงานทตองการใหแสดงผล
ออกมา
ภาพท 2.5 พนทการท างานของโปรแกรม Illustrator
พนทนอก Artboard Scratch area
พนทการท างาน Artboard
11
ภาพท 2.6 การจดการอารดบอรด
การใชงานหลาย ๆ อารดบอรด
เมอตองการเรยกใชงานหลาย ๆ อารดบอรดพรอมกน สามารถท าไดโดยดบเบลคลกทชออารดบอรดในพาเนล
Artboards
ภาพท 2.7 การจดการอารดบอรด
ลบอารดบอรด
สรางอารดบอรดใหม
เลอนอารดบอรดลง
เลอนอารดบอรดขน
จ านวนอารดบอรดทงหมด
12
พาเนลควบคมการท างาน Panel
Panel เปนหนาตางยอยทรวบรวมคณสมบตส าหรบปรบแตงการใชงานของเครองมอตาง ๆ ซงพาเนลสวนหนง
ถกจดเกบไวในกรอบจดเกบพาเนลดานขวาของหนาจอ และการจดการพาเนล เราสามารถเปด/ปด พาเนลทตองการ
ไดจากค าสง Window แลวเลอกชอพาเนลทเราตองการแสดงหรอไมแสดง ถาหากพาเนลใดถกเปดอยจะมเครองหมาย
ถกหนาชอพาเนลนน
ภาพท 2.8 การจดการrพาเนล
ภาพท 2.9 การจดการพาเนล Swatches
คลกเมน Window เพอเลอกพาเนล
กรอบจดเกบพาเนล Dock Panel
กรอบจดเกบพาเนล Dock Panel
พาเนลทเปดใชงานอย
คลกเพอยบพาเนลไวในกรอบจดเกบ
13
การเปลยนสหนาจอของโปรแกรม
หากตองการเปลยนสหนาจอเปนคาส อน สามารถปรบคาสได โดยคลกเมน Edit>Preferences>User
Interface แลวเลอกปรบคาสท Brightness หรอเลอนปรบคาสเองท Dark/Light
ภาพท 2.10 การเปลยนสหนาจอโปรแกรม
จากนนสหนาจอของโปรแกรม Adobe Illustrator จะเปลยนไปตามทเลอก
การเลอก Workspace ใหเหมาะสมกบการท างาน
Workspace เปนพนทการท างานทมเครองมอตางๆ ตามลกษณะการท างานทเลอก เชน งานวาดภาพ,
งานตวอกษร ซงสามารถเลอก Workspace ไดโดยคลกแถบค าสงขางๆ กลองคนหาดานบนหนาตางโปรแกรม
เลอกปรบคาสท Brightness
เลอนปรบคาสเองท Dark/Light
14
ภาพท 2.11 การเรยกใชค าสง Essentials
ส าหรบ Workspace ในโปรแกรม Adobe Illustrator มใหเลอกใชงานหลายรปแบบ ดงน
- Automation : เปน Workspace ส าหรบท างานกบชดค าสงอตโนมตบนพาเนล Actions รวมทง
ตรวจสอบการเชอมกบไฟลภาพทน ามาใชงาน
- Essentials : เปน Workspace ส าหรบการวาดภาพ
- Tracing : เปน Workspace ส าหรบการปรบแตงภาพบตแมพ การแปลงภาพใหกลายเปนเวคเตอร
- Layout : เปน Workspace ส าหรบงานสงพมพ ท างานกบตวอกษร
- Painting : เปน Workspace ส าหรบงานระบายส เปลยนสวตถ ลวดลายเสน
- Printing and Proofing : เปน Workspace ส าหรบการตรวจสอบและแกไขสทพมพเหมาะกบ
ขนตอนสดทายในการท างาน
- Typography : เปน Workspace ส าหรบท างานกบตวอกษร
- Web : เปน Workspace ส าหรบการออกแบบกราฟกตาง ๆ ส าหรบเวบ
การปรบมมมองการแสดงภาพ
ขณะท างานสามารถซอนเครองมอหรอพาเนลตาง ๆ ของ Workspace ได เพอใหแสดงภาพชดเจนยงขน โดยม
มมมองการแสดงภาพ 3 รปแบบ ดงน
เลอกรปแบบหนาจอทตองการ
15
ภาพท 2.12 มมมองปกตทมเครองมอหรอพาเนลตาง ๆ
ภาพท 2.13 มมมองแบบซอนพาเนลตาง ๆ (กดแปน Shift+Tab)
16
ภาพท 2.14 มมมองซอนเครองมอและพาเนลตาง ๆ (กดแปน Tab)
ก าหนดรปแบบการเรยงหนาตางงาน
เมอตองการเปดหนาตางงานพรอมกนหลายๆ ไฟลในการท างาน สามารถก าหนดรปแบบการเรยวหนาตาง
งานได โดยคลกปม แลวเลอกรปแบบการจดเรยงหนาตางงาน
17
ภาพท 2.15 การเรยกใชค าสงเลอกรปแบบการเรยงหนาตาง
จากนนหนาตางงานจะถกจดเรยงใหมตามรปแบบทเลอก ดงภาพ
ภาพท 2.16 ผลลพธการเรยกใชค าสงเลอกรปแบบการเรยงหนาตาง
เลอกรปแบบการเรยงหนาตาง
18
การใชงานเครองมอวด/บอกต าแหนง
เครองมอวด เครองมอบอกต าแหนงในโปรแกรม Adobe Illustrator ไดแก ไมบรรทด (Ruler) เสนไกด
(Guide) และเสนกรด (Grid)
ไมบรรทด (Ruler)
ไมบรรทด (Ruler) เปนเครองมอทใชระบต าแหนงของวตถ ซงอยบรเวณดานบนและดานซายของหนาตาง
อารตบอรด โดยปกตจะไมแสดงใหเหน สามารถเรยกใชไมบรรทดได โดยคลกเมน View>Ruler>Show Rulers
จะปรากฏแถบไมบรรทดดานบนและดานซายออกมา
ภาพท 2.17 ผลลพธการเรยกใชค าสง Show Rulers
คลก View>Show
Rulers
19
ก าหนดหนวยวดของไมบรรทด
การก าหนดหนวยวดของไมบรรทดใหสอดคลองกบการใชงาน สามารถก าหนดไดโดยคลกขวาบรเวณ
แถบไมบรรทด แลวเลอกหนวยวดทตองการ จากนนไมบรรทดจะเปลยนเปนหนวยวดทเลอก
ภาพท 2.18 ผลลพธการเรยกใชค าสง Show Rulers
เสนไกด (Guide) เปนเสนทใชบอกระยะของชนงานในการแกไขภาพหรอวางวตถ โดยมทงแนวตงและ
แนวนอน ซงเสนไกดจะไมถกพมพออกทางเครองพมพ สามารถเปดแสดงเสนไกดไดโดยคลกเมน View>Guides>Show
Guides จากนนจะแสดงเสนไกด (สฟา) ขนมา
คลกขวาบรเวณแถบไมบรรทดแลวเลอกหนวยวด
คลกเมน View>Guides
>Show Guides
เพอแสดงเสนไกด
20
ภาพท 2.19 ผลลพธการเรยกใชค าสง Show Guides
สรางเสนไกด
ส าหรบวธการสรางเสนไกด สามารถท าได ดงน
1. คลกแถบไมบรรทดแลวดงเสนไกดออกมาจากไมบรรทดไปยงต าแหนงทตองการ
ภาพท 2.20 การเรยกใชค าสง Show Guides
1
21
2. จะปรากฏเสนไกดสฟา
ภาพท 2.21 ผลลพธการเรยกใชค าสง Show Guides
ลบเสนไกด
วธการลบเสนไกด สามารถท าไดงายๆ ดงน
1. คลกขวาทเสนไกดแลวเลอกค าสง Lock Guides เพอปลดลอกเสนไกด
ภาพท 2.22 ผลลพธการเรยกใชค าสง Lock Guides
2
1
22
2. ดงเสนไกดทตองการลบกลบไปยงแถบไมบรรทด
ภาพท 2.23 ผลลพธการเรยกใชค าสง Lock Guides
นอกจากนยงมค าสงตาง ๆ ดงน
- Hide Guides ซอนเสนไกด
- Lock Guides ยดเสนไกดไมใหเคลอน
- Make Guides สรางเสนไกดขนมาจากวตถ
- Release Guides ยอนกลบใหเสนไกดทสรางจากวตถกลบไปเปนวตถอยางเดม
- Clear Guides ลบเสนไกดทงหมด
2
23
บอกระยะพกดดวย Smart Guides
Smart Guide เปนเครองมอทชวยบอกระยะพกดในการเคลอนยาย ปรบขนาดหรอบดวตถ
โดยปกตจะถกก าหนดไวอยแลว หากตองการยกเลก Smart Guides ท าไดโดยคลกเมน View>Smart Guides เพอ
เอาเครองหมายถกออกไป
ภาพท 2.24 ผลลพธการเรยกใชค าสง Smart Guides
เสนกรด (Grid) เสนกรด เปนเสนทใชบอกต าแหนง แสดงเปนชองเลก ๆ ซงเกดจากเสนแนวตงและแนวนอนมา
ตดกน ปรบขนาดความหางเฉพาะบางเสนแบบเสนไกด (Guide) ไมได สามารถเรยกแสดงเสนกรดไดโดยคลกเมน
View>Show Grid จะปรากฏเสนกรดสเทาบาง ๆ
การสรางไฟลใหมดวยค าสง New
วธการสรางไฟลชนงานใหมดวยค าสง New มขนตอนดงน
1. คลกเมน File>New (หรอกดแปน Ctrl+N) เพอสรางไฟลใหม
2. จะปรากฏหนาตาง New ขนมา ใหก าหนดขนาดชนงาน
กรณก าหนด Smart Guides เวลา
เคลอนยายต าแหนงจะม Smart Guides
บอกระยะพกดในการยาย
24
3. ก าหนดหนวยวดท Units
4. ก าหนดรปแบบการจดวางชนงาน (แนวตง, แนวนอน) ท Orientation
5. ก าหนดระยะหางจากบน ดานบน, ลาง, ซาย, ขวา ท Bleed
6. ก าหนดโหมดสของชนงาน (CMYK ส าหรบงานพมพ, RGB ส าหรบงานเวบ/พรเซนเตชน)
7. ก าหนดความละเอยดของชนงาน (Screen ส าหรบภาพบนเวบ, Medium และ High ส าหรบงานสงพมพ)
8. เมอเสรจแลว คลกปม OK
9. จะปรากฏชนงานใหม
ภาพท 2.25 ผลลพธการเรยกใชค าสง Show Grid
การสรางไฟลใหมดวยค าสง New
ส าหรบวธการสรางไฟลชนงานใหมดวยค าสง New มขนตอนดงน
1. คลกเมน File>New (หรอกดแปนพมพ Ctrl + New) เพอสรางไฟลใหม
คลกเมน
View>Show Grid
เพอแสดงเสนกรด
25
ภาพท 2.26 การเรยกใชค าสง New
2. จะประกฎหนาตาง New ขนมา ใหก าหนดขนาดชนงาน
3. ก าหนดหนวยวดท Units
4. ก าหนดรปแบบการจดวางชนงาน (แนวตง,แนวนอน) ท Orientation
5.ก าหนดระยะหางจากบนดานบน ลาง , ซาย , ขวา ท Bleed
6. ก าหนดโหมดสของชนงาน (CMYK ส าหรบงานพมพ RGB ส าหรบงานเวบ / พรเซนเตชน
7. ก าหนดความละเอยดของชนงาน ( Screen ส าหรบภาพบนเวบ , Medium และ High ส าหรบงานสงพมพ )
8. เมอเสรจแลว คลกปม OK
1
26
ภาพท 2.27 การเรยกใชค าสง New document
27
15. จะปรากฏชนงานใหม
ภาพท 2.28 ผลลพธการเรยกใชค าสง New document
การสรางไฟลใหมดวย Template
เทมเพลต (Template) หรอตนแบบ คอไฟลชนงานทมองคประกอบตาง ๆ อยแลว แตสามารถน ามาดดแปลง
เปนชนงานใหมได ซงชวยลดเวลาในการท างาน โดยมขนตอนดงน
1. คลกเมน File>New From Template เพอสรางไฟลใหมจากเทมเพลต
ภาพท 2.29 การเรยกใชค าสง New from Template
1
28
2. จะปรากฏหนาตาง New From Template ใหดบเบลคลกเขาไปในโฟลเดอร และเลอกไฟลเทมเพลตท
ตองการ
3. คลกปม New
ภาพท 2.30 การเลอกไฟลจาก Template
29
4. จะปรากฏชนงานจากเทมเพลต
ภาพท 2.31 ผลลพธการเลอกไฟลจาก Template
การเปดไฟลดวยค าสง Open
วธการเปดไฟลชนงานสามารถท าไดโดยใชค าสง Open ดงน
1. คลกเมน File>Open (หรอกดแปน Ctrl+O) เพอเปดไฟล
2. คลกปม Open
ภาพท 2.32 การเลอกไฟลจาก Template
1
30
3. จะปรากฏหนาตาง Open จากนนคลกเลอกต าแหนงทจดเกบไฟล แลวเลอกไฟลชนงานทตองการเปด
ภาพท 2.33 การเลอกไฟลตาง ๆ
2
3
31
4. ไฟลชนงานทเลอกจะถกเปดขนมา
ภาพท 2.34 ผลลพธการเลอกไฟลออกมา
การเปดไฟลลาสดดวยค าสง Open Recent
เมอตองการเปดไฟลชนงานทเพงใชลาสด สามารถท าไดโดยคลกเมน File>Open Recent Files แลวเลอก
ไฟลทตองการเปด
ภาพท 2.35 การเรยกใชค าสง Open Recent
32
การบนทกไฟลดวยค าสง Save
เมอสรางหรอแกไขชนงานเสรจเรยบรอยแลว สามารถบนทกไฟลชนงานไดดวยค าสง Save (บนทกครงแรก/
บนทกทบขอมลเดม) หรอ Save As (บนทกแบบกอปปเปลยนชอ) โดยมขนตอนดงน
1. คลกเมน File>Save หรอ Save As
ภาพท 2.36 การเรยกใชค าสง File->Save หรอ Save As
2. จะปรากฏหนาตาง Save As จากนนเลอกต าแหนงทจดเกบไฟล
3. พมพชอใหม ท File name
4. เลอกชนดของไฟล ท Save as type
- Illustrator (*.AI) เปนไฟลในรปแบบของโปรแกรม Illustrator
- Illustrator (*.EPS) เปนไฟลทเหมาะส าหรบไปใชงานรวมกบโปรแกรมอน
1
33
5. คลกปม Save
ภาพท 2.37 การเรยกใชค าสง save เพอตงชอไฟล
2
3
4
5
34
6. จะปรากฏหนาตาง Illustrator Options ท Version ใหเลอกก าหนดน าไฟลนไปใชกบเวอรชนรนใดไดบาง
7. คลกปม OK
ภาพท 2.38 การก าหนดเวอรชนของโปรแกรม
6
7
35
การปดไฟล
เมอตองการปดไฟลชนงานหนาตางเดยว สามารถท าไดโดยคลกทปม (Close) ทหนาตางไฟล แตถาตองการ
ปดไฟลหลายหนาตางพรอมกนใหคลกขวาทหนาตางแลวเลอกค าสง Close all
ภาพท 2.39 แสดงการคลกปมกากบาทเพอปดไฟล
ภาพท 2.40 การเรยกใชค าสงปดโปรแกรมทกไฟลทเปดไว
คลกเพอปดหนาตางไฟลชนงานเดยว
คลกขวาทหนาตางแลวเลอกค าสง Close All
เพอปดหลายหนาตางพรอมกน
36
สรปสาระส าคญทายหนวยท 2
สรปสาระส าคญการออกแบบสอสงพมพ
ในการสรางไฟลงานของโปรแกรม Illustrator สามารถเลอกสรางไดทงจากหนากระดาษเปลาและ
เลอกสรางจากเทมเพลต ซงการสรางไฟลงานใหมจากหนากระดาษเปลา เหมาะกบงานเฉพาะดานทตองอาศยการ
สรางสรรคผลงานขนมาเองสวนการสรางไฟลงานใหมจากเทมเพลตเปนการแกไขรายละเอยดตาง ๆ จากแมแบบ
ส าเรจรปทโปรแกรมเตรยมไว ดงนนจงเหมาะส าหรบงานทไมตองการรปแบบเฉพาะมากนก และในสวนประกอบของ
โปรแกรมกมเครองมอแบงเปนสดสวน เพอเรยกใชงานไดอยางครบครนตามค าอธบายวธการใชงานในหนวยท 2 แลว
ซงเครองมอสวนใหญจะคลาย ๆ โปรแกรมกราฟฟคทวไป จงท าใหนกเรยนไมรสกสบสนเพราะไดมการผานการใช
โปรแกรมตาง ๆ มาบางแลว
37
ค าศพท หนวยท 2
ค าศพท ความหมาย
Panel สวนยอยแยกออกมา
Guide เสนใชบอกระยะการวด
Show แสดงผล
Essonite การวาดภาพ
Layout มมมองงานพมพ
Painting การระบายส
Tracing การปรบแตงภาพ
Lock ยดไว
Hide ซอน
Make สรางผลงาน
38
ใบงานท 2.1
หนวยท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
จดประสงค
1. นกเรยนสามารถเลอกเปดเอกสารจากเทมเพลตมาใชงานได
2. นกเรยนสามารถออกแบบผลตภณฑได
3. นกเรยนสามารถบนทกไฟลงานได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบแพกเกจกลอง จากเอกสารเทมเพลต
ขนตอนท 1 ใชเสนไกดจากเทมเพลตของโปรแกรม
เราจะเรมตนสรางชนงาน โยการใชเทมเพลต ของการสรางแพกเกจ
1. ใหเปดไฟลงานใหมขนมาจากเทมเพลตโดยเลอกค าสง File> New from Template เลอกเทมเพลตของ
แพกเกจ โดยในตวอยางเลอกเทมเพลต Blank Templates เลอกเทมเพลต Gift Certificate Pouchette
จากนนคลกปม New ปรากฏชนงานตนแบบ ดงรป
รปท 1 การเปดเทมเพลต
39
2. ในการคลกลอกเลเยอร Die line เอาไวกอน เพอใหเลเยอรนนคงทไมสามารถเปลยนแปลงไดขณะทเรา
ท าการออกแบบ
รปท 2 การลอกเลเยอร
ขนตอนท 2 เรมตนออกแบบกลองแพกเกจ
ขนตอนนเปนการวาดภาพพนหลงรปสเหลยมสสมและสน าตาล จากนนวาดรปวงรจดท าเปนพนหลง
ดงรป
1. ใช Rectangle Tool เพอวาดรปสเหลยมพนหลงของกลอง แลวใสส
2. คดลอกพนหลงเพมเตม แลวจดการเปลยนสตามตองการ
3. จดท าพนหลงแพกเกจในสวนทมลกษณะโคงโดยใช # Pen Tool คลก วาดจดท1 และ คลกวาดจดท 2
โดยดงจดท 2 ใหเสนเปนเสนโคง จากนนวาดจดตอ ๆ ไป ดงใหเปนเสนโคงและปดพาธโดยคลกทจดเรม
ตน จะไดพนหลงลกษณะโคง
4. คดลอกพนหลงเพมเตม แลวจดการเปลยนสตามตองการ
5. ใช # Rectangle Tool เพอวาดรปสเหลยมพนหลงในสวนทเหลอในสเดยวกน
รปท 3 การวาดสเหลยมพนหลกกลอง
40
ขนตอนท 3 สรางลวดลายตกแตงแพกเกจ
เปนการวาดภาพเพอใชน ามาประกอบเปนลวดลาย โดยเราจะวาดภาพวงรและสามเหลยมมาประกอบ
รวมกน ดงรป
1. วาดรปวงรตกแตง โดยใช # Ellipse Tool และก าหนดสพนเปนสขาว ไมเตมเสนขอบ
2. วาดภาพตกแตงใหมลกษณะเหมอนรอยกด โดยใช # Pen Tool คลกวาดจดท 1 และคลกวาดจด
ท 2 โดยดงจดท 2 ใหเสนเปนเสนโคง จากนนวาดจดตอ ๆไป ดงใหเปนเสนโคง และปดพาธโดย
คลกทจดเรมตน จะไดชนพาธของรอยกด
3. ตอไปวาดรปสามเหลยมตกแตงตรงบรเวณรอยกด จ านวน 2 รป โดยใชเครองมอ # Pen Tool
รปท 4 การวาดรอยกด จากเครองมอ pan tool
ขนตอนท 4 น ารปภาพมาประกอบกน
เปนการน าภาพนมเขามาประกอบในชนงาน จากนนเราจะวาดเสนพาธขนมารอบภาพขนม และท า
การคลปปงมาสกเพอบงใหแสดงเฉพาะภาพขนมไมมสวนของพนหลง สดทายกน าภาพ Maple Leaf จาก
ไลบราร Nature มาตกแตงเพมเตม ดงรป
1. น ารปภาพมาประกอบโดยเลอกค าสง File->Place .. เลอกรปทตองการ โดยในตวอยางเลอกรป cake.jpg
จากนนคลกปม place ภาพจะถกน าเขามาปรากฏอยบนอารตบอรด
41
รปท 5 การแทรกภาพเขามาในเทมเพลต
2. วาดพาธเพอใชเปนคลปปงมาสก ใหแสดงเฉพาะสวนของรปขนม และบงสวนของพนหลง โดยใชเครองมอ
# Pen Tool วาดเสนพาธตามรปขนม โดยเลอกเฉพาะสเสนขอบเปนสใดกไดไมเตมสพน
3. คลกท # ในสวนของการเลอกส เพอสลบสจากการเตมสเสนอยางเดยวมาเปนการเตมสเสนอยางเดยวมา
เปนการเตมเฉพาะสพนเพยงอยางเดยว จะไดชนพาธทจะใชเปนคลปปงมาสก
4. ท าใหพาธทสรางเปนปงมาสก โดยเลอกทพาธและรปภาพขนม จากนนเลอกค าสง Object->Clipping
Mask ->Make ( หรอกด <Ctrl>) ภาพจะถกบงและแสดงออกมาเฉพาะสวนทเปนคลปมาสก จากนนจด
ต าแหนงและขนาดของภาพใหสวยงาม
5. ตกแตงโดยน าภาพจากในโปรแกรมมาประกอบ โดยเลอกค าสง Window->Symbol Library->Nature
เพอเปดพาเนลของภาพ Nature ในตวอยางจะใชภาพ Maple Leaf ลากภาพมาวางบนอารตบอรตและ
จดต าแหนงใหสวยงาม ดงรป
รปท 6 การวาดเสนพาธและ Clipping Mask รปภาพ
ขนตอนท 5 ใสขอความประกอบกน
เปนการใสขอความเปนลงในชนงาน คอ ชอผลตภณฑทมเอฟเฟกตการใสเงา และขอความ
รายละเอยดตาง ๆ ดงรป
1. ใช # Type Tool พมพขอความ MY SUSHI ซงเปนชอราน โดยก าหนดสตวหนงสอ I M เปนสขาว และ
Cake เปนสอน ๆ
42
รปท 7 การใสขอความ
2. ก าหนดรปแบบตวอกษร และการจดวางขอความ โดยเปดพาเนล Paragraph เลอกการจดวางขอความให
อยกงกลาง
3. ใสเงาใหอกษร โดยเลอกค าสง Effect>Stylize->Drop Shadow.. ก าหนดคาตาง ๆ และเลอกส Color
เปนสด า จากนนคลกปม OK จะไดผลลพธดงรป
รปท 7 การใสเงาใหกบขอความ
4. ใช # Type Tool เพอพมพขอความประกอบตาง ๆ บนกลอง โดยก าหนดลกษณะตาง ของขอความท
พาเนล Character จากนนก าหนดการจดวางขอความ โดยเปดพาเนล Paragraph เลอกกการวางชดซาย
43
5. พมพขอความประกอบเพมเตม โดยใชเครองมอ # Type Tool จากนนก าหนดลกษณะขอความทพาเนล
Character
รปท 8 การจดการกบขอความ
รปท 9 การใสขอความอน ๆลงไปในชนงาน
44
ใบงานท 2.2
หนวยท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
จดประสงค
1. นกเรยนสามารถเลอกเปดเอกสารจากเทมเพลตมาใชงานได
2. นกเรยนสามารถออกแบบผลตภณฑได
3. นกเรยนสามารถบนทกไฟลงานได
กจกรรมและแนวทางปฏบต
ใหนกเรยนท ำกำรออกแบบซองใส CD
ในการออกแบบซองใสซดจะแบงเปน 3 สวนคอดานหนา ดานในและดานหลง ซงจะมสวนของปกส าหรบทา
กาว เปนการใชเทมเพลตของซองใสซด เพอดดแปลงใหซองใสซด ซงสามารถวาดรปทรงประกอบดวยเครองมอวาดตาง
ๆ เชน Ellipse Tool เพอวาดดวงกลม Line segment Tool เพอวาดเสน และ Rectangle Tool เพอวาดรปส
เหลยม จะน ามาใชตกแตง และสามารถน าภาพอน ๆ มาประกอบไดดวย
ชนตอนท 1 เปดไฟลจากเทมเพลต
เปนการเรยกใชเทมเพลตของสงพมพทเกยวของกบวซดทโปรแกรมมมาให ซงจะประกอบดวยเสนก าหนด
ขอบเขตชนงานของซองใสซด และสกรนซด แตงในตวอยางนเราจะเลอกเฉพาะการออกแบบของใสซดเทานน
1. เปดไฟลงานใหมขนมาจากเทมเพลต โดยเลอกค าสง File>New From Template (หรอShift+Ctrl+N)
เลอกโฟลเดอรของเทมเพลต Blank Template เลอกเทมเพลต CD Print Items.AIT จาก ปม NEW จะไดไฟลงาน
ใหมจากเทมเพลตทเลอก
45
รปท 1 เปดเอกสารใหมจากเทมเพลต
2. สรางเลเยอรใหมเปลยนชอเปน artwork เพอใชออกแบบซองซดของเรา
รปท 2 สรางเลเยอรใหมตงชอ artwork
ขนนตอนท 2 วาดพนหลงของซด
เปนการวาดรปทรงและตกแตงพนหลงของซองใสซด ดงรป
46
1. เรมตนใหลอกเลเยอรอน ๆ ทงหมดยกเวนเลเยอร artwork เพอไมใหเสนเคาโครงตาง ๆ เปลยนแปลง โดย
คลกหนาชอเลเยอรใหปรากฏรป
รปท 3 ลอกเลเยอรอน ๆ
2. ใสสพนหลงซงเรมจากสวนของปกดานหนา โดยใช Rectangle Tool วาดรปสเหลยมขนาดเทากบปกหนา
จากนนก าหนดสพนเปนการไลสแบบ Gradient ก าหนดการไลสทพาเนล Gradient เปนแบบ Linear มม
(Angle) 180 องศา ก าหนดสใหสแรกเปนสชมพ และสท 2 เปนสขาว เพอใหไลสจากสชมพไปเปนสขาว จะได
ผลลพธ ดงรป
รปท 4 ใสสพนหลงแบบ Gradient
47
3. วาดรปตกแตงดานบน โดยใช Rectangle Tool วาดรปสเหลยม จากนนใช direct selection tool เลอกทจด
ลางซายดงบนเพอเปลยนรปรางสเหลยม จากนนใช Add Anchor Point Tool เพมจดตรงกลางเสนลาง และ
ใช Convert Anchor Point Tool ดงแขนของจดตรงกลางใหเปนเสนโคง ดงรป
รปท 5 การดงจดลางซายขนบน
รปท 6 การดงจดใหเปนเสนโคง
รปท 7 ใสสพนหลงสวนบนของซองCD
48
4. จากนนใช Rectangle Tool วาดรปสเหลยมสด า เปนแถบตกแตงทดานลางของปกหนา และวาดรปสเหลยม
เปนพนหลงของปกทงหมด ดงรป
รปท 8 ใสสพนหลงทกสวนของซองใสCD
5. เพมขอความเขามาเพอตกแตงปกซด โดยจะไดผลลพธ ดงรป
รปท 9 ใสขอความทชองวางดานขางซองCD
ขนตอนท 3 ออกแบบและจดวางโลโก
เปนการใชเครองมอวาดเปนหลง ตงแตการใช Rounded Rectangle Tool วาดรปสเหลยมมมมน จากนน
ก าหนดส และน าใชเปนพนหลงของขอความเพอจดท าเปนโลโก
49
1. ออกแบบสวนทตกแตงเพมเตมใหกบโลโก โดยใช Rounded Rectangle Tool วาดรปสเหลยมมม
2. เปลยนสพนใหกลายเปนการไลสแบบ Gradient แบบเดยวกบสพนหลง แตเปลยนคามมเปน ต0 องศา และส
เสนขอบเปนสเขม
3. คดลอกขอความจากปกดานขวาโดยใชค าสง Ctrl+C น ามาวางทปกหนาโดยใชค าสง Ctrl+V
4. ปรบขนาดขอความทจะน ามาใชงาน โดยเลอก Selection Tool คลกทขอความ กด Shift คางไวขณะทปรบ
ขนาดเพอคงอตราสวนของขอความนนไว
5. น ามาจดวางใหไดผลลพธ ดงรป
.รปท 10 สรางปมใสขอความทดานบนของซองCD
ขนนตอนท 4 ใสขอความอธบาย และตกแตง
เปนการใชเครองมอ Type Tool เปนหลกตงแตการสรางขอความชอเรอง และค าโฆษณาบนหนาปกซด
รวมทงการสรางรายละเอยดของสนคาทอยบนปกดานหลง
1. ใชเครองมอ Type Tool เพอสรางขอความประกอบบนปกหนา ในตวอยางจะสรางขอความ 2 ชด คอ หวเรอง
และขอความโฆษณาดานลาง
2. ใสขอความอธบายขอมลทหลงปก เพอความงายในการจดขอบเขตของขอความ ใหสรางเสนไกดขนมาเพอ
ก าหนดขอบเขต โดยคลกเมาสจากบรเวณแถบไมบรรทดลากมาวางเพอสรางเสนไกด
3. ใชเครองมอ Type Tool วาดกรอบขอมล เพอก าหนดขอบเขตของขอความ และพมพขอความทตองการ
4. ใชเครองมอ Rectangle Tool วาดรปสเหลยมหรบตกแตง
50
5. ใชเครองมอ Type Tool วาดกรอบขอความ เพอก าหนดขอบเขตขอความ และพมพขอความ เชน พมพ
ขอความความเวบบรษท
.รปท 11 สรางปมใสขอความทกสวนของซองใส CD
51
แบบฝกหดทายบท
บทท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าชแจง ใหนกเรยนตอบค าถามตอไปน
1. บอกสวนประกอบของโปรแกรม Illustrator มาสก 2-3 อยาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
2. บอกวธการใชเครองมอของโปรแกรมโดยยกตวอยางมาสก 2 อยาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
3. บอกขนตอนการสรางเอกสารใหมมาพอสงเขป
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
4. อธบายขนตอนการเพมอารตบอรดมาพอสงเขป
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
5. อธบายการเปลยนสหนาจอของโปรแกรมมาพอเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
6. บอกการปรบมมมองการแสดงภาพมอะไรบาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
7. บอกการใชงานเครองมอวดและบอกต าแหนงมอะไรบาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
8. บอกวธการก าหนดรปแบบการเรยงหนาตาง มาพอเขาใจ
52
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
แบบทดสอบหลงเรยน
บทท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. สวนประกอบของโปรแกรม Illustrator ทมค าสงใชงานตาง ๆ คอขอใด
ก. Option Bar
ข. Tool Bar
ค. Menu Bar
ง. Palette
2. ค าสงก าหนดคณสมบตและตวปรบแตงการท างานใหกบวตถคอขอใด
ก. Menu Bar
ข. Tool Bar
ค. Option Bar
ง. Palette
3. เครองมอชนดตาง ๆ ทใชในการท างานคอขอเมนใด
ก. Tool Bar
ข. Option Bar
ค. Menu Bar
ง. Palette
4. พนทส าหรบพมพงานคอขอใด
ก. Pasteboard
ข. Document
ค. Guide
53
ง. Palette
5. พนทวาง ๆ รอบเอกสารคอขอใด
ก. Palette
ข. Pasteboard 4
ค. Guide
ง. Document
6. อารตบอรด มสวนประกอบใดบาง
ก. พนทนอกและพนทใน
ข. พนทนอก
ค. พนทใน
ง. พนทกลาง
7. อารตบอรดชวยในการท างานหลก ๆ คอขอใด
ก. สรางวตถชนงานได
ข. พนทส าหรบพกวตถ
ค. สามารถมหลาย ๆ พนทการท างาน
ง. พนทใชส าหรบจดรปแบบ
8. ค าสงเปลยนสหนาจอโปรแกรมดวยตนเอง คอขอใด
ก. Preferences
ข. Dark/Light
ค. User Interface
ง. Brightness
9. ค าสงการเปดเอกสารใหม
ก. Open
54
ข. Open Recent
ค. New
ง. New from Template
10. ค าสงการออกจากโปรแกรมคอขอใด
ก. Exit
ข. Close
ค. Close all
ง. Exit all
เฉลยแบบทดสอบหลงเรยน
บทท 2 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. สวนประกอบของโปรแกรม Illustrator ทมค าสงใชงานตาง ๆ คอขอใด
ก. Option Bar
ข. Tool Bar
ค. Menu Bar
ง. Palette
2. ค าสงก าหนดคณสมบตและตวปรบแตงการท างานใหกบวตถคอขอใด
ก. Menu Bar
ข. Tool Bar
ค. Option Bar
ง. Palette
3. เครองมอชนดตาง ๆ ทใชในการท างานคอขอเมนใด
ก. Tool Bar
ข. Option Bar
ค. Menu Bar
ง. Palette
55
4. พนทส าหรบพมพงานคอขอใด
ก. Pasteboard
ข. Document
ค. Guide
ง. Palette
5. พนทวาง ๆ รอบเอกสารคอขอใด
ก. Palette
ข. Pasteboard 4
ค. Guide
ง. Document
6. อารตบอรด มสวนประกอบใดบาง
ก. พนทนอกและพนทใน
ข. พนทนอก
ค. พนทใน
ง. พนทกลาง
7. อารตบอรดชวยในการท างานหลก ๆ คอขอใด
ก. สรางวตถชนงานได
ข. พนทส าหรบพกวตถ
ค. สามารถมหลาย ๆ พนทการท างาน
ง. พนทใชส าหรบจดรปแบบ
8. ค าสงเปลยนสหนาจอโปรแกรมดวยตนเอง คอขอใด
ก. Preferences
ข. Dark/Light
ค. User Interface
ง. Brightness
9. ค าสงการเปดเอกสารใหม
ก. Open
ข. Open Recent
56
ค. New
ง. New from Template
10. ค าสงการออกจากโปรแกรมคอขอใด
ก. Exit
ข. Close
ค. Close all
ง. Exit all
57
แบบประเมนใบงาน
ค าชแจง ใหผประเมนท าเครองหมาย ✓ ลงในชองระดบคะแนน โดยพจารณาจากการปฏบตงานตามใบงานของ
ผเรยน ซงมเกณฑการพจารณา ดงน
ระดบคะแนน 2 หมายถง ปฏบตงานตามรายการประเมนไดถกตองสมบรณ
ระดบคะแนน 1 หมายถง ปฏบตงานตามรายการประเมนไดแตไมถกตองสมบรณ
ระดบคะแนน 0 หมายถง ปฏบตงานตามรายการประเมนไมได
ขอท
รายการประเมน
เกณฑการประเมน หมายเหต ด
(2) พอใช (1)
ปรบปรง (0)
1 ปฏบตตามขนตอนไดถกตอง 2 ใชเครองมอในการปฏบตถกตอง 3 ชนงานโดยรวมทปฏบตถกตอง สมบรณ
ครบถวน
4 งานเสรจตามเวลาทก าหนด 5 มความคดสรางสรรค 6 ศกษาคนควาดวยตนเอง 7 มความประพฤตทด ไมท าผดกฎระเบยบ 8 มความซอสตยในการท างาน 9 มความรบผดชอบ 10 ดแลความสะอาดหองเรยน รวม รวมคะแนนทงสน
ประเมนโดย ผเรยน ผสอน
รวมคะแนนทได .............................. คะแนนเฉลย ..........................................
58
ลงชอ.......................................ผประเมน
(.................................................)
1
บทท 3
การจดการกบขอความตวอกษร
1. ประเภทของขอความ
2. การสรางขอความแบบตาง ๆ
3. การจดเรยงขอความในยอหนา
4. การแบงคอลมนขอความ
5. การสรางขอความตามแนวเสน Path
6. การพลกกลบแนวตวอกษร
7. การน าเขาขอความจากโปรแกรมอน ๆ
8. การใชงานเอฟเฟกต
สาระส าคญ
ส าหรบประเภทของขอความในโปรแกรม Illustrator จะแบงเปน 3 แบบ คอ Point Type, Area Type และ
Type on a Path ซงแตละแบบจะมคณสมบตพนฐานหลายอยางทแตกตางกน
สมรรถนะทพงประสงค
อธบายประเภทของขอความมกแบบ การสรางขอความแนวตงและแนวนอน วธการสรางขอความตามเสน
พารท Path การตรวจสอบค าผดและแทนทค าใหม การใสกรอบขอความพรอมตกแตงใหสวยงามเหมาะสมกบสอ
สงพมพ และการน าเขาขอความจากไฟลอน ๆ เพอลดเวลาการท างานใหนอยแตไดรบชนงานเพมขน
2
จดประสงคการเรยนร
เมอศกษาบทท 3 จบแลว นกเรยนสามารถ
1. บอกประเภทของขอความในโปรแกรม Illustrator ไดถกตอง
2. อธบายขนตอนการสรางขอความแบบตาง ๆ ในโปรแกรม Illustrator ไดถกตอง
3. บอกวธการใชค าสงการจดเรยงขอความในยอหนาในโปรแกรม Illustrator ไดถกตอง
4. อธบายวธการแบงคอลมนขอความในโปรแกรม Illustrator ไดถกตอง
5. อธบายขนตอนการสรางขอความตามแนวเสน Pathในโปรแกรม Illustrator ไดถกตอง
6. อธบายขนตอนการน าเขาขอความจากโปรแกรมอน ๆ มาใชในโปรแกรม Illustrator ไดถกตอง
7. อธบายวธการเรยกใชค าสงเอฟเฟกตตาง ๆ ไดอยางถกตอง
8. บอกความหมายของค าศพทคอมพวเตอร จ านวน 10 ค า
9. นกเรยนมความใฝร ใฝเรยน ขยน รบผดชอบ อดทน และมความคดรเรมสรางสรรค
3
แบบทดสอบกอนเรยน
บทท 3 การจดการกบขอความตวอกษร
ค าสง จงท าเครองหมาย (X ) ลงหนาขอทถกตองทสดเพยงขอเดยว เวลา 15 นาท
1. ประเภทของขอความม 3 แบบคออะไรบาง
ก. Point Type, Area Type, Vertical Type
ข. Area Type, Type on a Path, Vertical Type
ค. Point Type, Area Type, Type on a Path
ง. Area Type, Type on a Path, Font Type
2. ขอใดเปนขอความซงเหมาะส าหรบเนอหาทมความยาวมาก ๆ
ก. Font Type
ข. Point Type
ค. Type on a Path
ง. Area Type
3. ขอใดเปนขอความทเหมาะสมส าหรบใชเพอตกแตงตวอกษร
ก. Type on a Path
ข. Area Type
ค. Font Type
ง. Vertical Type
4. การสรางขอความแนวตงคอค าสงในขอใด
ก. Type
ข. Vertical Type
ค. Selection
ง. Shift Enter
5. การสรางขอความแนวตงตามเสนรปทรง หรอ เสน Path ขอความจะเรมตนดานใดกอนเสมอ
ก. ดานขวา
ข. ดานขวาบน
4
ค. ดานซาย
ง. ดานซายบน
6. การสรางขอความตามแนวเสน Path มลกษณะเดนคอ
ก. สรางขอความแนวนนอนไดอยางเดยว
ข. สรางขอความแนวตงได
ค. สรางขอความรปทรงอสระได
ง. สรางขอความแนวนอนและแนวตงได
7. ค าสงในการจดรปแบบยอหนาใหกบขอความคอขอใด
ก. Window ->Type ->Character
ข. Window -> Type ->Paragraph
ค. Window ->Type ->Character
ง. Window -> Type ->Paragraph
8. ค าสงในการแบงคอลมนใหกบขอความคอขอใด
ก. Type -> Area Type Options
ข. Type -> Font
ค. Type -> Find font
ง. Type -> Recent Fonts
9. ค าสงการพลกกลบแนวตวอกษรคอขอใด
ก. Type Vertical
ข. Type Horizontal
ค. Type Orientation
ง. Type Options
10. ขอดของการน าขอความจากโปรแกรมอน ๆ
ก. น าขอความทยาว ๆ เอามาใชงานไดทนท
ข. อ านวยความสะดวก
ค. แกไขขอความไดงาย
ง. ปรบแตงขอความได
5
เฉลยแบบทดสอบกอนเรยน
บทท 3 การจดการกบขอความตวอกษร
1. ประเภทของขอความม 3 แบบคออะไรบาง
ก. Point Type, Area Type, Vertical Type
ข. Area Type, Type on a Path, Vertical Type
ค. Point Type, Area Type, Type on a Path
ง. Area Type, Type on a Path, Font Type
2. ขอใดเปนขอความซงเหมาะส าหรบเนอหาทมความยาวมาก ๆ
ก. Font Type
ข. Point Type
ค. Type on a Path
ง. Area Type
3. ขอใดเปนขอความทเหมาะสมส าหรบใชเพอตกแตงตวอกษร
ก. Type on a Path
ข. Area Type
ค. Font Type
ง. Vertical Type
4. การสรางขอความแนวตงคอค าสงในขอใด
ก. Type
ข. Vertical Type
ค. Selection
ง. Shift Enter
5. การสรางขอความแนวตงตามเสนรปทรง หรอ เสน Path ขอความจะเรมตนดานใดกอนเสมอ
ก. ดานขวา
ข. ดานขวาบน
ค. ดานซาย
ง. ดานซายบน
6
6. การสรางขอความตามแนวเสน Path มลกษณะเดนคอ
ก. สรางขอความแนวนนอนไดอยางเดยว
ข. สรางขอความแนวตงได
ค. สรางขอความรปทรงอสระได
ง. สรางขอความแนวนอนและแนวตงได
7. ค าสงในการจดรปแบบยอหนาใหกบขอความคอขอใด
ก. Window ->Type ->Character
ข. Window -> Type ->Paragraph
ค. Window ->Type ->Character
ง. Window -> Type ->Paragraph
8. ค าสงในการแบงคอลมนใหกบขอความคอขอใด
ก. Type -> Area Type Options
ข. Type -> Font
ค. Type -> Find font
ง. Type -> Recent Fonts
9. ค าสงการพลกกลบแนวตวอกษรคอขอใด
ก. Type Vertical
ข. Type Horizontal
ค. Type Orientation
ง. Type Options
10. ขอดของการน าขอความจากโปรแกรมอน ๆ
ก. น าขอความทยาว ๆ เอามาใชงานไดทนท
ข. อ านวยความสะดวก
ค. แกไขขอความไดงาย
ง. ปรบแตงขอความได
7
ประเภทของขอความ
ประเภทของขอความในโปรแกรม Illustrator จะแบงเปน 3 แบบ คอ
1. Point Type เปนขอความแบบงาย ๆ เหมาะส าหรบเนอหาทมความยาวไมมากนก เชน ไมกตวอกษร หรอ
ไมกบรรทด และมคณสมบตพนฐานคลายออบเจคทเปนรปวาดทว ๆ ไปคอ เมอใชกรอบ Bounding Box
ยอและขยายขนาด หรอหมนกจะท าใหรปทรงของตวอกษรเปลยนแปลงตามไปดวย
2. Area Type เปนขอความซงเหมาะส าหรบเนอหาทมความยาวมาก ๆ เชน หลายบรรทดหรอหลายหนา
โดยสามารถสรางขอความบรรจไวภายในกรอบรปทรงใด ๆ กได โดยสามารถเชอมโยงเนอหาจากกรอบ
หนงไปยงอกกรอบหนง และเมอมการปรบรปทรงของกรอบกจะไมมผลใหรปทรงตวอกษรเปลยนแปลงไป
3. Type on a Path เปนขอความทเหมาะสมส าหรบใชประดบตกแตง โดยตวอกษรจะเรยงตวไปตามแนว
ของเสน path
การสรางขอความแบบตาง ๆ
สรางขอความดวยเครองมอ Point Type ม 2 แบบ คอ สรางขอความแนวนอนและแนวตงเครองมอ
Type จะใชสรางขอความแนวนอน สวน Vertical Type จะใชสรางขอความแนวตง ดงรป
ภาพท 3.1 เมนแถบเครองมอ Type
ขนตอนการสรางขอความแนวนอน
1. คลกเครองมอ Type
2. ก าหนดรปแบบขอความ เชน สพนและสขอบ, รปแบบตวอกษรและขนาด ในแถบเครอมอ
3. ใชเมาสคลกตรงต าแหนงทจะพมพบนอารตบอรด และพมพขอความ
- การขนบรรทดใหมในยอหนาเดมใหกดคย Shift Enter
- การขนยอหนาใหม ใหกดคย Enter
8
4. คลกเครองมอ Selection หรอ กดคย Esc เพอจบการพมพ ตามรปตอไปน
ภาพท 3.2 การพมพขอความดวยเครองมอ Type
ขนตอนการสรางขอความแนวตง
1. คลกเครองมอ Vertical Type
2. ใชเมาสคลกตรงต าแหนงทจะพมพบนอารตบอรด
3. ก าหนดรปแบบขอความสและขนาดตวอกษร
4. พมพขอความ หากตองการขนบรรทดใหมในยอหนาเดมใหกดคย Shift Enter
และหากตองการขนยอหนาใหมใหกดคย Enter
5. คลกเครองมอ Selection
หรอกดคย ESC เพอจบการพมพ
9
ภาพท 3.3 การพมพขอความดวยเครองมอ Vertical Type
สรางขอความแบบ Area Type เปนการสรางขอความในกรอบสเหลยมดวยเครอง Type ซงผลทไดจากวธน
จะเหมอนกบการสรางขอความไวในออบเจครปสโดยใชเครองมอ Area Type
ภาพท 3.4 แถบเครองมอ Area Type
ภาพท 3.5 การพมพขอความดวยเครองมอ Area Type
สรางขอความแนวนอนในกรอบออบเจดดวยเครองมอ Area Type ซงขอความจะอยภายขอบเขตของรปทรง
หรอเสน path ทสรางไวแลว โดยเสนจะถกยดดวยค าสงพมพขอความ จงท าใหเวลาสรางกรอบขอความตองสรางกรอบ
ไวจ านวน 2 กรอบจงจะท าใหไมมผลกระทบการท างานทเปนรปทรงตางหรอเสน path
10
ภาพท 3.6 การเรยกใชค าสงพมพขอความดวยเครองมอ Area Type Tool
ขนตอนการสรางขอความแนวนอนในกรอบออบเจค
1. เลอกออบเจคทจะใชเปนขอบเขตของขอความ
2. คลกเครองมอ Area Type
3. วางเคอรเซอรไวบนเสน path ของออบเจค
4. ก าหนดรปแบบขอความจากคอนโทรลพาเนล
5. พมพขอความตามปกต
6. เลอกเครองมอ Selection หรอ กดคย ESC เพอจบการพมพ
ภาพท 3.7 การพมพขอความดวยเครองมอ Area Type
สรางขอความแนวตงในกรอบออบเจคดวยเครองมอ Vertical Area Type เปนการสรางขอความใหอยภายใน
ขอบเขตของรปทรงหรอเสน path โดยจะไดขอความในแนวตงจากบนลงลาง ขอความจะเรมตนดานขวาบนและขน
บรรทดใหมไปทางดานซาย
11
ภาพท 3.8 การพมพขอความดวยเครองมอ Vertical Area Type
ขนตอนการสรางขอความแนวตงในกรอบออบเจค
1. เลอกออบเจคทจะใชเปนขอบเขตของขอความ
2. คลกเครองมอ Area Type
3. คลกเมาสบนออบเจคหรอเสน path ของออบเจค
4. ก าหนดรปแบบขอความจากคอนโทรลพาเนล
5. พมพขอความตามปกต
6. เลอกเครองมอ Selection หรอกดคย ESC เพอจบการพมพ
12
ภาพท 3.9 การพมพขอความแนวตงดวยเครองมอ Vertical Area Type
สรางขอความตามแนวเสน Path ดวยเครองมอ Type on a Path เปนการสรางขอความใหวางอยบน
เสน path เปนเสนบรรทด แทนทจะเปนเสนตรงตามปกต
ภาพท 3.10 การเรยกใชค าสงพมพขอความแนวเสน Type on a Path
ขนตอนการพมพขอความแนวนอนตามเสน Path
1. เลอกออบเจคทจะใชเปนเสนบรรทดขอความ
2. คลกเครองมอ Type on a Path
3. คลกเมาสทเสน path เพอเปนต าแหนงเรมตนในการพมพขอความ
4. ก าหนดรปแบบขอความจากแถบเครองมอ
5. พมพขอความตามปกต
6. คลกเครองมอ Selection หรอ กดคย ESC เพอจบการพมพ
13
ภาพท 3.11 การพมพขอความแนวเสน Path ดวยเครองมอ Type on a Path
สรางขอความแนวตงตามเสน Path ดวยเครองมอ Vertical Type on a Path เปนการสรางขอความ
ใหอยตามแนวเสน path เชนเดยวกนกบเครองมอ Type on a Path แตจะเปนการพมพในแนวตง
ภาพท 3.12 การเรยกใชค าสงพมพขอความแนวเสน Vertical Type on a Path Tool
ขนตอนการพมพขอความแนวเสน Vertical Type on a Path Tool
14
1. เลอกออบเจคทจะใชเปนเสนบรรทดขอความ
2. คลกเครองมอ Type on a Path
3. ใชเมาสคลกบนเสน path เพอเปนต าแหนงเรมตนในการพมพ
4. ก าหนดรปแบบขอความจากแถบเครองมอ
5. พมพขอความตามปกต
6. คลกเครองมอ Selection หรอ กดคย ESC เพอจบการพมพ
ภาพท 3.13 การพมพขอความแนวเสน Vertical Type on a Path Tool
การจดรปแบบยอหนาใหกบขอความ
เปนการก าหนดลกษณะการจดยอหนาของขอความ เชน ชดซาย ชดขวา กงกลาง ซงการปรบแตงนจะมผลกบ
ทกบรรทดในยอหนาเดยวกน ก าหนดลกษณะการจดยอหนาไดโดยใชออปชนตาง ๆ บนพาเนล Paragraph การเปด
พาเนลนท าไดโดยใชค าสง Window Type Paragraph
15
ภาพท 3.14 การเรยกใชเครองมอในการจดรปแบบยอหนาใหกบขอความ
ค าอธบายเครองมอ หมายเลขท 1 รปแบบการจดยอหนา ชดซาย ชดขวา กงกลาง ซายขวาเทากน
หมายเลขท 2 ค าสงเยองดานหนาทงยอหนา
หมายเลขท 3 ค าสงเยองดานหนาเฉพาะบรรทดแรก
หมายเลขท 4 ค าสงเวนระยะดานบนกอนยอหนา
หมายเลขท 5 ค าสงเยองดานหลงทงยอหนา
หมายเลขท 6 ค าสงเวนระยะดานลางหลงยอหนา
หมายเลขท 7 ค าสงใหมการตดค าในภาษาองกฤษโดยการใส Hyphen
การแบงคอลมนขอความ
ส าหรบอารตเวรคทมขอความเปนปรมาณมาก ควรมการแบงเนอหาออกเปนคอลมนเพองายใหการอาน
เนองจากการอานผอานตองอานเรมจากดานซายไปดานขวา มการกวาดสายตาไปตามขอความทยาวในแตละบรรทด
16
หากแบงเนอหาเปนคอลมนจะชวยท าใหขอความสวยงามและเปนระเบยบมากขน การแบงคอลมนนคณจะก าหนดกอน
การพมพขอความหรอหลงจากทพมพเสรจแลวกได
ภาพท 3.15 การเรยกใชค าสงแบงคอลมนขอความ
ขนตอนการแบงคอลมนขอความ
1. เลอกขอความทพมพไวแลว หรอหากตองการก าหนดกอนการพมพกใชเครองมอ Type คลกลากวาดกรอบ
เพอเปนขอบเขตในการพมพ
2. เลอกค าสง Type Area Type Options
3. ก าหนดออปชนตาง ๆ ซงมรายละเอยดดงน
- Width ความกวางโดยรวมทงหมดของกรอบขอความ
- Height ความสงโดยรวมทงหมดของกรอบขอความ
- Rows หรอ Columns ก าหนดคาในการแบงแถว Rows และแบงคอลมน Columns ดงน
1. Number จ านวนแถวหรอจ านวนคอลมน
17
2. Span ความสงของแถวหรอความกวางของคอลมน
3. Fixed ก าหนดความสงของแถวหรอความกวางของคอลมน Span มขนาดคงทตามคาทก าหนด
โดยคา Width และ Height จะถกปรบใหมใหสอดคลองโดยอตโนมต
4. Gutter ระยะหางระหวางแถวหรอคอลมน
Offset ต าแหนงการวางขอความ
- Inset Spacing เปนคาในการกนหนา-หลงและบน-ลางของขอความทงหมด
- First Baseline ต าแหนงของขอความในแนวตง
- Min ก าหนดคาเพมเตมจากต าแหนงทก าหนดใน First Baseline
Options วธการจดวางขอความไปยงแตละแถวและคอลมน
- วางจากซายไปขวากอนแลวจงเลอนไปแถวถดไป
- วางจากบนลงลางกอนแลวจงเลอนไปคอลมนถดไป
4. คลกปม OK
18
ภาพท 3.16 ตวอยางการแบงคอลมนขอความ 2 คอลมน
การพลกกลบแนวตวอกษร
การสรางขอความแบบตาง ๆ ตองมการเลอกเครองมออยางใดอยางหนงกอนแลวจงพมพ ถงจะไดตวอกษรเปน
แนวตามเครองมอทเลอก หากหลงจากการพมพเสรจตองการเปลยนแนวนอนเปนแนวตง หรอ จากแนวตงเปน
แนวนอน กสามารถใชค าสง Type Orientation ไดโดยไมตองพมพขอความใหมอกครง
ขนตอนการพลกกลบขอความ
1. เลอกขอความ
ภาพท 3.17 ตวอยางการสรางเลอกขอความ
2. เลอกค าสง TypeType Orientation Vertical (แนวตง)
19
ภาพท 3.18 การเรยกใชค าสงจากเมน Type
3. ผลลพธทไดคอขอความแนวตง
ภาพท 3.19 ตวอยางการแสดงผลลพธทท าเสรจแลว
การน าเขาขอความจากโปรแกรมอน ๆ
โปรแกรมนสามารถน าเขาไฟลขอความจากโปรแกรมอน ๆ เขามาใชงานได เพอชวยอ านวยความสะดวก ใน
การพมพพรอมทงแกไขงาย และสามารถจดการกบขอความไดตามความถนด จากโปรแกรมตาง ๆ เชน Microsoft
Word หรอ Notepad แลวน ามาวางและตกแตงขอความใหมดวยโปรแกรม Illustrator ไดอก
20
ไฟลขอความทสามารถอมพอรตเขามาใชมอย 3 แบบ คอ ไฟลเอกสารของโปรแกรม Microsoft Word (.doc)
ไฟลแบบ Plain Text (.txt) และไฟลแบบ Rich Text (.rtf) ทสรางจากโปรแกรม WordPad หรอ Microsoft Word
ส าหรบไฟล .doc และ .rtf นนมขอด คอเมออมพอรตเขามาแลวรปแบบตวอกษร และการจดวางขอความจะยงคง
เหมอนเดม ซงจะชวยใหการปรบแตงใน Illustrator สะดอกและรวดเรวมากขนการน าไฟลขอความทง 3 ประเภทเขา
มาใชงานม 3 วธ คอ อมพอรตเขามาโดยสรางเปนอารตเวรคใหม อมพอรตเขามาใชกบไฟลอารตเวรคเดม และการกอป
ปขอความจากโปรแกรมอนมาวาง
ขนตอนการอมพอรตไฟลขอความมาใชงาน
1. เลอกค าสง File -> Open
2. ทชอง Look in ใหคลกแลวเลอกโฟลเดอรทเกบไฟล
3. คลกเลอกไฟลขอความ
4. คลกปม Open
5. ก าหนดคณสมบตของการวางขอความดงน
- Table of Contents Text ใหแสดงขอความทเปนสารบญ
- Footnotes/Endnotes ใหแสดงขอความทเปนเชงอรรถ
- Index Text ใหแสดงขอความทเปนดชน
- Remove Text Formatting คลกเลอกเพอยกเลกรปแบบทจดไว
6. คลกปม OK
21
ภาพท 3.20 การเรยกใชค าสงจากเมน file
ภาพท 3.21 การเลอกออบชนค าสงการน าเขาขอความ
ภาพท 3.22 การเลอกไฟลจากโปรแกรม Microsoft Word
22
ภาพท 3.23 ผลลพธขอความทน าเขามาในโปรแกรม
ขนตอนการอมพอรตขอความเขามาใชกบไฟลอารตเวรคในโปรแกรม Illustrator
ในกรณทไดเตรยมอารตเวรคเพอใชงานไวแลว กสามารถน าขอความมาวางประกอบในอารตเวรคได โดยม
ขนตอนดงน
1. ใชเครองมอ Type คลกลากวาดกรอบเพอเปนขอบเขตของขอความ
2. เลอกค าสง File -> Place
3. ทชอง Look in ใหคลกแลวเลอกโฟลเดอรทเกบไฟล
4. คลกเลอกไฟลขอความจากรายการ
5. คลกปม Place
6. ก าหนดออปชนของการวางขอความ
7. คลกปม OK
23
ภาพท 3.24 การใชเครองมอ type วาดกรอบส าหรบวางขอความ
24
ภาพท 3.25 การเรยกใชค าสง Place จากเมน File
ภาพท 3.26 การเลอกออบชนในการน าเขาขอความจากโปรแกรมอน
25
ภาพท 3.27 การเลอกไฟลจากโปรแกรม Microsoft Word
ภาพท 3.28 การสรางอารตเวรคทมการน าขอความมาวางเรยบรอยแลว
การใชงานเอฟเฟกต
26
เอฟเฟกต (Effect) เปนชดค าสงพเศษใชส าหรบตกแตงวตถทงแบบเวตเตอรและบตแบพใหมรปทรงทสวยขน ซงเอฟเฟกต ใน illustrator แบงออกเปนสองกลม ดงน
1. เอฟเฟกตใชเพอการปรบแตงวตถทวาดขนมาใชงาน 2. เอฟเฟกตใชเพอการปรบแตงวตถตาง ๆ และภาพบตแมพ
ภาพท 3.29 การเรยกใชงานเมน Effect
แกไขและลบเอฟเฟกตออกจากวตถดวยพาเนล appearance
หลงจากใชเอฟเฟกตปรบแตงวตถไปแลว เราสามารถแกไขหรอลบออกจากวตถประสงคไดโดยใชพาเนล appearance โดยคลกเมน window -> appearance
ในกรณทตองการแกไขคาการปรบแตง สามารถท าไดดงน
27
1. เปนพาเนล appearance
2. คลกขอเอฟเฟกตทตองการ เพอเปดหนาตางปรบแก
3. แกไขคาการปรบแตงตามตองการ
4. ผลลพธทไดหลงจากการปรบแตง
ภาพท 3.30 การเรยกใชงานพาเนล Appearance
หากตองการยกเลกเอฟเฟกตทเราปรบแตงออกจากวตถ สามารถท าได ดงน
1. เปดพาเนล appearance
2. คลกชอเอฟเฟกตทตองการลบ
28
3. คลกไอคอน เพอลบเอฟเฟกตออกจากวตถ
ตกแตงเสนขอบใหนมนวลดวย Blur
Blur เปนเอฟเฟกตทใชส าหรบปรบแตงเสนขอบของวตถใหเบลอ ฟงกระจาย ดเนยนกลมกลนกบวตถอน โดยมวธใชงานดงน
1. คลกเลอกวตถทตองการปรบแตง
2. คลกเมน Effect -> Convert to shape -> Gaussian blur
3. ก าหนาคา Radius ตามตองการโดยพจารณาจากภาพตวอยางดวยเลอก Preview
4. เมอปรบแตงเสรจแลว ใหคลกปม ok
5. ภาพทไดจะมลกษณะเสนขอบฟงกระจายกลมกลนกบวตถอน
ภาพท 3.31 การเรยกใชค าสง Gaussian blur
บดดดวตถดวย Distort & Transform
29
Distort & Transform เปนเอฟเฟกตทใชส าหรบบดดดรปทรงวตถใหมมมมองทแปลกมากขน ซงทเอฟเฟกตใหเลอกใชมากมาย ดงนตวอยางตอไปน
1. วาดรปทรงตากทตองการ
2. คลกเมน Effect -> Distort & Transform -> Twist
3. ปรบองศาในการบดดดรปทรงตามตองการ
4. เมอเสรจแลวคลกปม ok
ภาพท 3.32 การเรยกใชค าสง บดดดวตถดวย Twist
การบดวตถ ดวยเอฟเฟกต zig zag โดยวธใชงาน ดงน
1. วาดรปทรงตามทตองการ
2. คลกเมน Effect -> Distort & Transform -> zig zag
3. ปรบคาตาง ๆตามทตองการ
4. เมอเสรจแลวคลกปม ok
30
ภาพท 3.33 การเรยกใชค าสง บดดดวตถดวย zig zag
ปรบแตงวตถดวย stylize
Stylize เปนเอฟเฟกตทใชส าหรบแตงวตถใหมลกษณะเฉพาะ เชน ใสเงาใหวตถซงเอฟเฟกตใหเลอกใช 6 เอฟเฟกต ดงตวอยางตอไปน
1. วาดรปทรงตามตองการ
2. คลกเมน Effect > stylize > feather
3. ปรบคาความฟงใหเหมาะกบงาน
4. เมอเสรจแลวคลกปม ok
5. ขอบของวตถจะฟงมากขน
31
ภาพท 3.34 การเรยกใชค าสง Feather
ภาพท 3.35 การเรยกใชค าสง Feather
ปรบมมแหลมใหมนขน ดวย Round corners โดยวธดงตอไปน
1. วาดรปทรงตามทตองการ
2.คลกเมน Effect > stylize > Round corners
3. ปรบคาความมนตามตองการ
4. เมอเสรจกดปม ok
5. มมแหลมของวตถจะมนขน
32
ภาพท 3.35 การเรยกใชค าสง Round Corners
ภาพท 3.36 การเรยกใชค าสง Round Corners
สรางภาพสเกตซดวย Scribble โดยมวธใชงานดงน
1. วาดรปทรงตามตองการ
2. คลกเมน Effect -> stylize -> Scribble
3. เลอกรปแบบภาพสเกตซ
4. ปรบคาตาง ๆ เพงเตมตามตองการ
5. เมอเสรจกดปม ok
33
ภาพท 3.37 การเรยกใชค าสง Scribble
ภาพท 3.38 การปรบคาตาง ๆ ของค าสง Scribble
ตวอยาง การเลอกรปแบบตาง ๆ ของค าสง Scribble
34
Default Childlike Dense
Maire Sketch Sharp
Snart Swash Tight
Zigzag
ภาพท 3.39 รปแบบตาง ๆ ของค าสง Scribble
สรางวตถ 3 มต
การสรางวตถ 3 มต สามารถสรางได 2 วธ ดงน
สรางวตถใหมมตมากขน Extrude & Bevel
Extrude & Bevel เปนเอฟเฟกตทใชส าหรบปรบแตงวตถ 3 มต ใหมความลกดสมจรงมากขน สามารถใชงานไดโดยคลกเมน Effect -> 3D -> Extrude & Bevel โดยมวธใชงาน ดงน
35
1. คลกเลอกวตถทตองการ (หากวตถทเลอกมหลายชนจะตอง Group เขาดวยกนกอนโดยเลอกวตถทงหมดแลวคลกขวาเลอกค าสง Group หรอกดแปน Ctrl + G)
2. คลกเมน Effect -> 3D -> Extrude & Bevel
3. คลกตวเลอก Preview เพอแสดงภาพการปรบแตง
4. แดรกเมาสปรบมมมองและความลกของวตถตามตองการ
5. คลกปม ok จะไดวตถ 3 มตทมความลกดสมจรงมากขน
ภาพท 3.40 การใชค าสง Extrude & Bevel
ภาพท 3.41 รปแบบตาง ๆ การใชค าสง Extrude & Bevel
36
ภาพท 3.42 ผลลพธการใชค าสง 3D
สรางวตถ 3 มต ดวย Revolve
Revolve เปนค าสงส าหรบสรางรปทรง 3 มต โดยหมนรอบแกนแนวตงขงเสนพาธทวาด สามารถเรยกใชค าสงไดโดยคลกเมน Effect > 3D > Revolve โดยมวธดงน
1. วาดเสนพาธวตถดวยเครองมอ Pen Tool และ คลกเลอกวตถ
2. คลกเมน Effect > 3D > Revolve
3. ก าหนดคาตาง ๆใหกบวตถ
4. ก าหนดดานของพาธทจะใชเปนแกนหมนท From
5. คลกปม ok
6. จะไดภาพวตถ 3 มต
ภาพท 3.42 ผลลพธการใชค าสง 3D Revolve
37
ภาพท 3.43 ก าหนดคาตามตองการ
38
ภาพท 3.43 ผลลพธค าสงจะสรางภาพขนใหอยางสมบรณ
ก าหนดทศทางแสงเงาวตถ
การสรางวตถ 3 มตจะตองการค านงถงเรองแสงทสองกระทบลงบนพนผวดวย เพอใหไดภาพทดสมจรงมากขน ดงตวอยาง
1. คลกปม More options เพอก าหนดคาเพมเตมในสวนของแสงเงา
2. แดรกเมาสก าหนดต าแหนงทศทางของแสง
3. ปรบแตคาความสวางองแสงตามตองการ
4. เมอปรบแตงเสรจแลว ใหคลกปม ok
5. จะไดวตถ 3 มต ทมแสงเงา
ภาพท 3.43 การก าหนดคาใสแสงเงาบนวตถ 3D
39
การใชงานพาเนล Graphic Styles
พาเนล Graphic Styles เปนพาเนลทเกบรวบรวมลกษณะการตกแตงวตถดวยเอฟเฟกตส าเรจรป สามารถเรยกใชงานไดโดย เมน Windows -> Graphic Styles โดยมสวนประกอบดงน
ภาพท 3.44 การเรยกใชค าสง Graphic Styles
การใชงานสไตล สามารถท าไดดงน
1. คลกเลอกวตถทตองการใสสไตล
2. เปดพาเนล Graphic Styles ขนมา
3. คลกไอคอลเพอเรยกใชสไตลอน ๆ
4. เลอกกลมไดตามสไตลตองการ
5. คลกเลอกสไตลทตองการ
6. วตถจะถกใสสไตลทเลอกทนท
40
ภาพท 3.45 การเรยกใชค าสง Type Effects
ภาพท 3.46 ผลลพธทไดจากการเรยกใชค าสง Type Effects
ยกเลกใชงานสไตล สามารถท าไดโดยใชพาเนล Appearance ดงน
1. คลกเลอกวตถทตองการลบสไตล
2. เปดพาเนล Appearance ขนมา
3. คลกเลอกสไตลทตองการลบ
4. คลกไอคอน เพอลบสไตลออกจากวตถ
5. สไตลทเลอกจะถกลบจากวตถ
41
ภาพท 3.47 การปรบแตงคาสไตลและยกเลกใชงานสไตลในพาเนล Appearance
สรางสไตลเกบไวใชงานเอง
1. สรางวตถแลวตกแตงดวยเอฟเฟกตตาง ๆ
2. เปดพาเนล Graphic Styles ขนมา
3. แดรกเมาสลากวตถไปในพาเนล Graphic Styles
4. จะไดสไตลทสรางขนมาใหม
42
ภาพท 3.48 การสรางสไตลไวใชงานเกบไวในพาเนล
ลบสไตล สามารถท าได ดงน
1. คลกเลอกสไตลทตองการลบ ทพาเนล Appearance
2. คลกไอคอล เพอลบสไตล
43
ภาพท 3.49 การลบสไตลออกจากพาเนล
สรปสาระส าคญทายหนวยท 3
สรปสาระส าคญ
เปนเนอหาเกยวกบการน าตวอกษรน ามาใชรวมกบรปภาพ เพอสอความหมาย หรอ บอกรายละเอยดตาง ๆ ใน
งานสอสงพมพใหมความสมบรณมากยงขน ไดบอกวธการน าไฟลขอความจากโปรแกรมอน ๆ มาใชงานเพอใหเกดความ
สนใจในชนงานมากยงขน เนอหามค าสงเกยวกบการปรบแตงขอความ สามารถคดลอก ตด วาง และเตมสสนให
ตวอกษรไดอยางสวยงาม และสรางกรอบขอความเพอเนนความคมชดใหกบตวอกษรไดอกดวย การใชเอฟเฟกตอยาง
มออาชพ และการสรางภาพ 3 มต ดวยค าสง 3D จงเปนบทเรยนบทหนงทมความส าคญอยางมากในการสรางสอ
สงพมพทมประสทธภาพ และมมาตรฐานวชาชพทด
44
ค าศพท หนวยท 3
ค าศพท ความหมาย
Type ประเภทของสงตาง ๆ
Point จดต าแหนง
Area พนทการท างาน
Paragraph การแบงหนากระดาษ
45
Off set ต าแหนงการวางขอความ
Import การน าเขาขอมล
Span ก าหนดคาความสง กวาง
Fixed การก าหนดคา
Gutter ระยะหางระหวางแถวหรอคอลมน
Options ก าหนดคณลกษณะของค าสง
ใบงานท 3.1
หนวยท 3 การจดการกบขอความตวอกษร
จดประสงค
1. นกเรยนสามารถสรางขอความแบบตาง ๆ ได
46
2. นกเรยนสามารถใชค าสงเอฟเฟกสรางขอความได
3. นกเรยนสามารถออกแบบโลโกหรอแบรนตราสนคาได
4. นกเรยนสามารถบนทกไฟลงานได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบโลโกรานคา มขนตอนดงน
1. คลกเครองมอ Ellipse Tool เพอวาดรปทรงกลม
2. คลกเลอกสเสน Stroke และสพน Fill ทตองการ
3. คลกเลอกขนาดเสน
4. แดรกเมาสวาดรปทรงกลมตามขนาดทตองการ
รปท 1 วาดรปวงกลมดวยเครองมอ Ellipse Tool
5. คลกเมน Effect-> Distort Transform-> Zig Zag
47
6. ก าหนดคาความหนาของรอยหยก
7. ก าหนดคาเพอปรบความลกของรอยหยก
8. คลกเลอก Smooth เพอปรบใหรอยหยกมน
9. เมอก าหนดคาเรยบรอยแลวคลกปม OK
รปท 2 ใชค าสงเอฟเฟกใหกบรปทรง
รปท 3 ใชค าสงเอฟเฟกใหกบรปทรง
48
10. รปทรงกลมจะเปลยนรปไปตามทก าหนด แตโครงสรางพาธยงคงเปนรปทรงวงกลม
11. คลกเมน Object-> Expand Appearance
12. โครงสรางพาธรปทรงวงกลมจะกลายเปนวตถ
รปท 4 ใชค าสงก าหนดรปทรงใหกลายวตถ
13. คลกเมน Object-> Path> Offset Path
14. ก าหนดคา -10 px เพอท าเสนขอบดานใน
15. คลกปม OK
รปท 5 ใชค าสงก าหนดเสนขอบใหเปนเสนประ
49
รปท 6 ใชค าสงก าหนดเสนขอบใหเปนเสนประ
16. จะไดเสนขอบดานใน
17. เลอกสจากพาเนล Swatches หรอ Color
18. สเสนจะเปลยนตามทเลอก
50
รปท 7 ใชค าสงก าหนดเสนขอบใหเปนเสนประ
19. คลกท Stroke บนพาเนล Option
20. ก าหนดคาความหนาของเสนขอบ
21. คลกตวเลอก Dashed Line เพอปรบเสนประ
22. ก าหนดขนาดของเสนประ 5pt
23. วตถจะเปลยนเปนเสนประตามทก าหนดคา
รปท 8 ใชค าสงก าหนดเสนขอบใหเปนเสนประ
สรางขอความบนรปทรงวงกลมโลโก
หลงจากสรางรปทรงวงกลมของโลโกเรยบรอยแลว ขนตอนตอมาคอการสรางขอความโดยมขนตอนดงน
1. พมพขอความดวยเครองมอ Type Tool
2. เลอกขอความทงหมด
3. คลกท Paragraph บนพาเนล Option
4. คลกไอคอนเพอจดขอความใหอยกงกลางกนในแนวตง
51
5. คลกไอคอนเพอจดขอความใหอยกงกลางกนในแนวนอน
รปท 9 ใชค าสงพมพขอความ
ปรบแตงตวอกษรเปนถวยกาแฟ
หลงจากทสรางขอความแลว ขนตอนตอมาคอการตกแตงขอความ โดยมขนตอนดงน
1. คลกเลอกขอความ I love แลวคลกขวาเลอกค าสง Create outlines เพอแปลงขอความวตถ
2. คลกเครองมอ Direct Selection Tool แลวคลกทวงกลมดานในของอกษร O จากนนกดแปน
Delete เพอลบพาธ
3. คลกทจดแองเคอรดานบนวตถตว O แลวแดรกเมาสลากลงมาใหเวาเขาเลกนอย
4. วาดรปทรงวงกลมดวยเครองมอ Ellipse Tool โดยก าหนดสเสนขอบเปนสขาวไมก าหนดสพน
5. คลกเมน Object Expand
6. ก าหนดตวเลอก Fill และ Stroke
7. คลกปม OK
52
รปท 10 ใชค าสงพมพขอความ
8. คลกเลอกวตถทงสอง
9. เปดพาเนล Pathfinder ขนมา แลวคลกไอคอน
10. วตถจะกลายเปนชนเดยวกน
11. ก าหนดสพน
12. วตถจะเปลยนเปนสพนตามทก าหนด
สรางควนไอลอยเหนอถวยกาแฟ
ขนตอนนเปนการออกแบบไอไวลอยเหนอถวยกาแฟ โดยมขนตอนดงน
1. วาดเสนตรงดวยเครองมอ Line Segment Tool
2. ก าหนดขนาดความหนาของเสน
3. คลกเลอกรปแบบเสน
4. คลกเมน Effect -> Distort & Transform ->Zig Zag
53
รปท 11 ใชค าสงพมพขอความ
5. ก าหนดคาความหนาของรอยหยก
6. ก าหนดคาเพอปรบความลกของรอยหยก
7. คลกเลอก Smooth เพอปรบใหรอยหยกมน
8. คลกปม OK
รปท 12 ใชค าสง Smooth เพอปรบใหรอยหยกมน
9. รปทรงจะเปลยนไปตามทก าหนด
10. กอปปรปทรงและปรบขนาดใหเลกกวาเดม
54
ใบงานท 3.2
หนวยท 3 การจดการกบขอความตวอกษร
จดประสงค
1. นกเรยนสามารถสรางขอความแบบตาง ๆ ได
55
2. นกเรยนสามารถใชค าสงเอฟเฟกสรางขอความได
3. นกเรยนสามารถออกแบบแบรนตราสนคาได
4. นกเรยนสามารถบนทกไฟลงานได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบแบรนตราสนคา มขนตอนดงน
1. คลกเครองมอ Ellipse Tool เพอวาดรปทรงกลม
2. คลกเลอกสเสน Stroke และสพน Fill ทตองการ
3. คลกเลอกขนาดเสน
4. แดรกเมาสวาดรปทรงกลมตามขนาดทตองการ
รปท 1 วาดรปวงกลมดวยเครองมอ Ellipse Tool
5. คลกเมน window -> brusher
6. เลอกรปแบบเสนแบบตาง ๆ
56
7. เมอก าหนดคาเรยบรอยแลวคลกปม OK
รปท 2 ใชค าสงเพอเลอกเสนแบบตาง ๆ
รปท 3 ใชค าสงเอฟเฟกใหกบรปทรง
รปท 3 เพอเลอกเสนแบบตาง ๆ
57
8. วาดวงรแลวคลกเลอกรปแบบเสน พรอมใสสเสน ตามภาพ
.
รปท 4 เพอเลอกแบบเสนชนด charcoal - feather
9. คลกเครองมอ pen tool วาดเปนสามเหลยม
รปท 5 เพอวาดเสนดวย pen tool
10. คลกเครองมอ convert anchor point tool ดงเสนใหโคง ตามภาพ
58
รปท 6 ใชค าสงดงภาพใหเปนเสนโคง
11. เลอกแบบเสนเปนแบบ
รปท 7 เลอกแบบเสน Divider
12. น ามาวางทบวงรทงสองขาง ตามภาพ
รปท 8 ใชค าสงก าหนดเสนขอบใหเปนเสนประ
สรางขอความบนรปทรงวงรตราแบรนสนคา
หลงจากสรางรปทรงวงรตราแบรนสนคาเรยบรอยแลว ขนตอนตอมาคอการสรางขอความโดยมขนตอนดงน
6. พมพขอความดวยเครองมอ Type Tool
7. เลอกขอความทงหมด
59
8. คลกท Paragraph บนพาเนล Option
รปท 9 เลอกแบบอกษรตามตองการ
60
รปท 10 พมขอความตามตองการ
แทรกรปภาพมาใสในแบรนสนคา
หลงจากทสรางขอความแลว ขนตอนตอมาคอการตกแตงขอความ โดยมขนตอนดงน
13. คลกเลอกค าสง file -> Place
14. คลกเลอกรปภาพทเตรยมไว
15. คลกปม OK
รปท 10 น าภาพมาใสในแบรนสนคา
16. สามารถน าภาพในพาเนล symbols มาตกแตงแบรนสนคาได
61
รปท 11 ตวอยางน าภาพจาก symbols มาใสในแบรนสนคา
17. คลกเลอกวตถทงหมด
18. เปดขวา เลอกค าสง group
19. วตถจะกลายเปนชนเดยวกน
62
แบบฝกหดทายบท
บทท 3 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าชแจง ใหนกเรยนตอบค าถามตอไปน
1. อธบายประเภทของขอความมกแบบ อะไรบาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
2. บอกขนตอนการสรางขอความแบบตาง ๆ มาสก 2 แบบ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
3. บอกการใชค าสงการจดเรยงขอความในยอหนา
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
63
4. อธบายขนตอนการแบงคอลมนขอความพรอมยกตวอยางมาพอสงเขป
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
5. บอกขนตอนการพลกกลบแนวตวอกษรพรอมยกตวอยางมาพอสงเขป
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
6. บอกวธการสรางขอความตามเสนรปทรงหรอเสน Path ตามความเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
7. อธบายขนตอนการเขาขอความจากโปรแกรมอน
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
แบบทดสอบหลงเรยน
บทท 3 การใชงานโปรแกรม Adobe Illustrator เบองตน
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. ประเภทของขอความม 3 แบบคออะไรบาง
ก. Point Type, Area Type, Type on a Path
ข. Point Type, Area Type, Vertical Type
ค. Area Type, Type on a Path, Vertical Type
64
ง. Area Type, Type on a Path, Font Type
2. ขอใดเปนขอความซงเหมาะส าหรบเนอหาทมความยาวมาก ๆ
ก. Font Type
ข. Area Type
ค. Point Type
ง. Type on a Path
3. ขอใดเปนขอความทเหมาะสมส าหรบใชเพอตกแตงตวอกษร
ก. Area Type
ข. Font Type
ค. Type on a Path
ง. Vertical Type
4. การสรางขอความแนวตงคอค าสงในขอใด
ก. Type
ข. Selection
ค. Vertical Type
ง. Shift Enter
5. การสรางขอความแนวตงตามเสนรปทรง หรอ เสน Path ขอความจะเรมตนดานใดกอนเสมอ
ก. ดานขวา
ข. ดานซาย
ค. ดานขวาบน
ง. ดานซายบน
6. การสรางขอความตามแนวเสน Path มลกษณะเดนคอ
ก. สรางขอความรปทรงอสระได
65
ข. สรางขอความแนวนนอนไดอยางเดยว
ค. สรางขอความแนวตงได
ง. สรางขอความแนวนอนและแนวตงได
7. ค าสงในการจดรปแบบยอหนาใหกบขอความคอขอใด
ก. Window ->Type ->Character
ข. Window ->Type ->Character
ค. Window -> Type ->Paragraph
ง. Window -> Type ->Paragraph
8. ค าสงในการแบงคอลมนใหกบขอความคอขอใด
ก. Type -> Font
ข. Type -> Find font
ค. Type -> Area Type Options
ง. Type -> Recent Fonts
9. ค าสงการพลกกลบแนวตวอกษรคอขอใด
ก. Type Orientation
ข. Type Vertical
ค. Type Horizontal
ง. Type Options
10. ขอดของการน าขอความจากโปรแกรมอน ๆ
ก. อ านวยความสะดวก
ข. แกไขขอความไดงาย
ค. น าขอความทยาว ๆ เอามาใชงานไดทนท
ง. ปรบแตงขอความได
66
เฉลยแบบทดสอบหลงเรยน
บทท 3 การใชงานโปรแกรม Adobe Illustrator เบองตน
1. ประเภทของขอความม 3 แบบคออะไรบาง
ก. Point Type, Area Type, Type on a Path
ข. Point Type, Area Type, Vertical Type
ค. Area Type, Type on a Path, Vertical Type
ง. Area Type, Type on a Path, Font Type
2. ขอใดเปนขอความซงเหมาะส าหรบเนอหาทมความยาวมาก ๆ
ก. Font Type
ข. Area Type
ค. Point Type
ง. Type on a Path
3. ขอใดเปนขอความทเหมาะสมส าหรบใชเพอตกแตงตวอกษร
ก. Area Type
ข. Font Type
ค. Type on a Path
ง. Vertical Type
4. การสรางขอความแนวตงคอค าสงในขอใด
ก. Type
ข. Selection
ค. Vertical Type
ง. Shift Enter
5. การสรางขอความแนวตงตามเสนรปทรง หรอ เสน Path ขอความจะเรมตนดานใดกอนเสมอ
ก. ดานขวา
ข. ดานซาย
67
ค. ดานขวาบน
ง. ดานซายบน
6. การสรางขอความตามแนวเสน Path มลกษณะเดนคอ
ก. สรางขอความรปทรงอสระได
ข. สรางขอความแนวนนอนไดอยางเดยว
ค. สรางขอความแนวตงได
ง. สรางขอความแนวนอนและแนวตงได
7. ค าสงในการจดรปแบบยอหนาใหกบขอความคอขอใด
ก. Window ->Type ->Character
ข. Window ->Type ->Character
ค. Window -> Type ->Paragraph
ง. Window -> Type ->Paragraph
8. ค าสงในการแบงคอลมนใหกบขอความคอขอใด
ก. Type -> Font
ข. Type -> Find font
ค. Type -> Area Type Options
ง. Type -> Recent Fonts
9. ค าสงการพลกกลบแนวตวอกษรคอขอใด
ก. Type Orientation
ข. Type Vertical
ค. Type Horizontal
ง. Type Options
10. ขอดของการน าขอความจากโปรแกรมอน ๆ
68
ก. อ านวยความสะดวก
ข. แกไขขอความไดงาย
ค. น าขอความทยาว ๆ เอามาใชงานไดทนท
ง. ปรบแตงขอความได
แบบประเมนใบงาน
ค าชแจง ใหผประเมนท าเครองหมาย ✓ ลงในชองระดบคะแนน โดยพจารณาจากการปฏบตงานตามใบงานของ
ผเรยน ซงมเกณฑการพจารณา ดงน
ระดบคะแนน 2 หมายถง ปฏบตงานตามรายการประเมนไดถกตองสมบรณ
ระดบคะแนน 1 หมายถง ปฏบตงานตามรายการประเมนไดแตไมถกตองสมบรณ
ระดบคะแนน 0 หมายถง ปฏบตงานตามรายการประเมนไมได
ขอท
รายการประเมน
เกณฑการประเมน หมายเหต ด
(2) พอใช (1)
ปรบปรง (0)
1 ปฏบตตามขนตอนไดถกตอง 2 ใชเครองมอในการปฏบตถกตอง 3 ชนงานโดยรวมทปฏบตถกตอง สมบรณ
ครบถวน
4 งานเสรจตามเวลาทก าหนด 5 มความคดสรางสรรค 6 ศกษาคนควาดวยตนเอง
69
7 มความประพฤตทด ไมท าผดกฎระเบยบ 8 มความซอสตยในการท างาน 9 มความรบผดชอบ 10 ดแลความสะอาดหองเรยน รวม รวมคะแนนทงสน
ประเมนโดย ผเรยน ผสอน
รวมคะแนนทได .............................. คะแนนเฉลย ..........................................
ลงชอ.......................................ผประเมน
(.................................................)
1
บทท 4
การจดการกบรปภาพและวตถ
หวขอเรอง
1. การน าเขาไฟลรปภาพตาง ๆ
2. การยายและคดลอกรปภาพ
3. การปรบเปลยนขนาดของรปภาพ
4. การเลอกใชงานวตถ
5. การใชงานเลเยอร
6. การสงพมพงาน
7. การเอกพอรตไฟลอารตเวรก (Export)
8. การสรางหนงสอดวยไฟล PDF
สาระส าคญ
การน ารปภาพตาง ๆ เขามาใชในงานสอสงพมพตองค านงถงรปแบบไฟลของภาพนน ๆ วาจะมสามารถ
น ามาใชงานไดอยางมประสทธภาพหรอไม นอกจากนยงสามารถหาภาพของผอนทท าไวแลวและน ามาแปลงไฟลภาพใน
เปนภาพบตแมพเปนภาพเวกเตอร ซงเปนภาพทมความคมชดมความละเอยดสง
สมรรถนะทพงประสงค
อธบายขนตอนการน าเขาไฟลรปภาพตาง ๆ เขามาใชงาน สามารถยาย คดลอก ปรบเปลยนขนาดของรปภาพ
ได สามารถใชงานวตถ จดการกบวตถ การใชงานเลเยอร การสงพมพงาน การเอกพอรตไฟลอารตเวรก (Export) เพอ
น ามาใชใหเกดประโยชนกบงานสอสงพมพ และการสรางหนงสอ เพอเปนแนวทางใหผเรยนเกดทกษะ และน าไปใชได
ในอนาคต
2
จดประสงคการเรยนร
เมอศกษาบทท 4 จบแลว นกเรยนสามารถ
1. อธบายขนตอนการน าเขาไฟลรปภาพตาง ๆ ไดถกตอง
2. บอกวธการยายและคดลอกรปภาพไดถกตอง
3. บอกวธการปรบเปลยนขนาดของรปภาพไดถกตอง
4. อธบายวธการเลอกใชงานวตถไดถกตอง
5. อธบายวธการใชงานเลเยอรไดถกตอง
6. บอกขนตอนการสงพมพงานไดถกตอง
7. อธบายวธการเอกพอรตไฟลอารตเวรก (Export)ไดถกตอง
8. อธบายขนตอนการสรางหนงสอดวยไฟล PDF ไดถกตอง
9. บอกความหมายของค าศพทคอมพวเตอร จ านวน 10 ค า
10. นกเรยนมความใฝร ใฝเรยน ขยน รบผดชอบ อดทน และมความคดรเรมสรางสรรค
3
แบบทดสอบกอนเรยน
บทท 4 การจดการกบรปภาพและวตถ
ค าสง จงท าเครองหมาย (X ) ลงหนาขอทถกตองทสดเพยงขอเดยว เวลา 15 นาท
1. ค าสงการน าภาพเขามาใชงานในโปรแกรคอขอใด
ก. File -> New
ข. File -> Open
ค. File -> Browse
ง. File -> Place
2. ขอดของการน าภาพบตแมพ มาใชงานคอขอใด
ก. มขนาดเลกภาพคมชด
ข. มขนาดใหญคมชด
ค. มขนาดปานกลางคมชด
ง. ไฟลมขนาดไมใหญเกนไป
3. ค าสงจดการกบไฟลภาพบตแมพ คอขอใด
ก. Window -> Links
ข. Window -> Control
ค. Window -> Tools
ง. Window -> Image Trace
4. ฝงไฟลใหตดกบชนงาน คอ ค าสงใด
ก. Select Image
ข. Embed Image
ค. Move Image
ง. Direct Image
5. ค าสงเคลอนยายวตถยอยคอขอใด
ก. Select tool
ข. Direct Selection tool
ค. Move tool
ง. Copy tool
4
6. ค าสง การเคลอนยายวตถ โดยระบพกดต าแหนง คอขอใด
ก. Move
ข. แกน X
ค. แกน Y
ง. Transform
7. ค าสง Align Objects คอ ค าสงใชท าอะไร
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. ค าสง Distribute Objects
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
9. ตองการจดล าดบวตถใหเลอนวตถไปไวดานหลง คอขอใด
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
10. ตองการจดล าดบวตถโดยใหเลอนวตถไปไวดานหนาสด
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
5
เฉลยแบบทดสอบกอนเรยน
บทท 4 การจดการกบรปภาพและวตถ
1. ค าสงการน าภาพเขามาใชงานในโปรแกรคอขอใด
ก. File -> New
ข. File -> Open
ค. File -> Browse
ง. File -> Place
2. ขอดของการน าภาพบตแมพ มาใชงานคอขอใด
ก. มขนาดเลกภาพคมชด
ข. มขนาดใหญคมชด
ค. มขนาดปานกลางคมชด
ง. ไฟลมขนาดไมใหญเกนไป
3. ค าสงจดการกบไฟลภาพบตแมพ คอขอใด
ก. Window -> Links
ข. Window -> Control
ค. Window -> Tools
ง. Window -> Image Trace
4. ฝงไฟลใหตดกบชนงาน คอ ค าสงใด
ก. Select Image
ข. Embed Image
ค. Move Image
ง. Direct Image
5. ค าสงเคลอนยายวตถยอยคอขอใด
ก. Select tool
6
ข. Direct Selection tool
ค. Move tool
ง. Copy tool
6. ค าสง การเคลอนยายวตถ โดยระบพกดต าแหนง คอขอใด
ก. Move
ข. แกน X
ค. แกน Y
ง. Transform
7. ค าสง Align Objects คอ ค าสงใชท าอะไร
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. ค าสง Distribute Objects
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
9. ตองการจดล าดบวตถใหเลอนวตถไปไวดานหลง คอขอใด
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
10. ตองการจดล าดบวตถโดยใหเลอนวตถไปไวดานหนาสด
7
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
1.การน าเขาไฟลรปภาพตาง ๆ
1.1 การน าภาพบตแมพเขามาใชงาน
ถงแมวาโปรแกรม IIIustrator จะเปนโปรแกรมทใชส าหรบสรางภาพเวกเตอร เรายงสามารถน าเขาไฟลภาพ
แบบบตแมพมาใชงานรวมกบภาพเวกเตอร เพอตกแตงชนงาน หรอน ามาดดแปลงตอไปได ดงน
1.เลอกเมนค าสง File ->Place
2.เลอกต าแหนงทเกบไฟล
3.คลกเลอกไฟล
4.คลกปม Place
8
ภาพท 4.1 แสดงการเลอกค าสงการน าไฟลรปภาพตาง ๆ
9
ภาพท 4.2 แสดงการเลอกไฟลรปภาพตาง ๆ
1.2 การจดการไฟลภาพบตแมพ
เมอเราน าเขาไฟลภาพบตแมพ ปกตแลวจะใชวธการลงคไฟลภาพนนไวกบไฟลชนงาน ซงมขอด คอ ท าใหไฟล
ชนงานนนไมใหญเกนไป แตมขอเสยคอหากเรายายต าแหนงไฟลชนงานเพอน าไปใชทอน เราตองคดลอกไฟลภาพบต
แมพนนตดตามไปดวย
เราสามารถจดการกบไฟลภาพบตแมพทลงกอยได โดยเลอกค าสง Window -> Links เพอเรยกใชงานพาเนล
Links
ภาพท 4.3 แสดงการเลอกไฟลรปภาพตาง ๆ
1.3 ฝงไฟลใหตดไปกบชนงาน
เพอแกปญหาในการน าไฟลชนงานไปเปดอน โดยทไมตองคดลอกไฟลภาพตามไปดวย เราสามารถฝงไฟลภาพ
ตดไปกบชนงานได โดยเลอกค าสง Embed Image
2. การยายและคดลอกรปภาพ
เราสามารถเคลอนยายต าแหนงวตถไดหลายวธ ดงน
- เคลอนยายวตถดวย Select Tool
10
- เคลอนยายวตถดวย Direct Selection Tool
- เคลอนยายดวยค าสง Move
- เคลอนยายวตถดวยพาเนล Transform
2.1 เคลอนยายวตถดวย Select Tool
การใช Select Tool จะใชกรณทตองการยายวตถ หรอกลมวตถทงชน โดยมขนตอนดงตอไปน
1.คลกเลอก Selection Tool
2.คลกเลอนต าแหนงของวตถ
ภาพท 4.4 แสดงการใชค าสงเคลอนยายวตถ Select Tool
2.2 เคลอนยายวตถดวย Direct Selection Tool
การใช Direct Selection Tool จะใชในกรณทตองการยายวตถยอยออกจากกลมวตถ โดยมขนตอนดงตอไปน
1.คลกเลอก Direct Selection Tool
2.คลกเลอนต าแหนง
11
ภาพท 4.5 แสดงการใชค าสงเคลอนยายวตถ Direct Select Tool
2.3 เคลอนยายวตถดวยค าสง Move
เปนค าสงในการยายต าแหนงภาพ โดยระบต าแหนงใหมจากต าแหนงเดม ทงระยะและทศทาง โดยเลอกวตถท
ตองการเคลอนยาย และเลอกเมนค าสง Object -> Transform -> Move ….จะปรากฏหนาตาง Move เพอก าหนด
ระยะทางในการยายต าแหนง ดงน
- Horizontal ก าหนดระยะหางในแนวนอน
- Vertical ก าหนดระยะหางในแนวตง
- Distance ก าหนดระยะหางจากต าแหนงเดมไปยงต าแหนงใหม
- Angle ก าหนดมมในการยายวตถ
จากนนคลกปม OK เพอตกลง
ภาพท 4.6 แสดงการคลกเลอกวตถ
12
ภาพท 4.7 แสดงการเรยกใชเมนค าสง Object -> Transform -> Move
ภาพท 4.8 แสดงการก าหนดคาตาง ๆ ในออบชน
2.4 เคลอนยายวตถดวยพาเนล Transform
เปนการยายต าแหนงของวตถอยางแมนย า โดยระบพกดต าแหนงของวตถในแนวแกน X(แนวนอน) และ
แนวแกน Y (แนวตง) เราสามารถเรยกใชงานพาเนล Transform ไดโดยเลอกเมนค าสง Window -> Transform
13
จากนนใหคลกเลอกวตถ คลกเลอกจดอางองของวตถ เพอใชอางองในการยายต าแหนง และก าหนดพกดต าแหนงของ
วตถในแกน X และ Y
ภาพท 4.9 แสดงการเลอกวตถ
14
ภาพท 4.10 แสดงการเลอกเมนค าสง Window -> Transform
ภาพท 4.10 แสดงการเลอกก าหนดคาแกน X แกน Y
2.5 การคดลอกรปภาพ
การคดลอกดวยการคลกลาก
15
เปนการคดลอกโดยใชเครองมอตาง ๆ (Selection Tool, Direct Selection Tool และ Group Select
Tool) โดยเรมดวยการกดคย <Alt> คาง แลวคลกลากวตถ จะเกดการคดลอกเปนวตถใหมใหอยในไฟล และเลเยอร
เดยวกบวตถตนแบบ
ภาพท 4.11 แสดงการกดคย <Alt> คางไว และคลกลากวตถ
การคดลอกดวยการใชเมนค าสง
เปนการคดลอกวตถจากเลเยอรหนงไปไวอกเลเยอรหนง หรอจากไฟลหนงไปไวอกไฟลหนงได โดยคลกเลอก
วตถทไฟล หรอเลเยอรตนทาง และเลอกเมนค าสง Edit -> Copy หรอกดคย <Ctrl + C> จากนนไปยงไฟล หรอ
เลเยอรปลายทาง และเลอกเมนค าสง Edit -> Paste หรอ กดคย <Ctrl + V> เพอส าเนาวตถ
16
ภาพท 4.12 แสดงการเรยกใชเมนค าสง copy
3.การปรบเปลยนขนาดของรปภาพ
เราสามารถยอ หรอขยายวตถ (Scaling) ในชนงานใหมขนาดตามทเราตองการไดหลายวธ ดงน
- ปรบขนาดดวย Bounding Box
- ปรบขนาดดวย Free Transform Tool
- ปรบขนาดดวย Scale Tool
- ปรบขนาดดวยพาเนล Transform
- ปรบขนาดดวยค าสง Scale
.
3.1 ปรบขนาดดวย Bounding Box
เปนวธพนฐานทใชปรบขนาดวตถ โดยใช Selection Tool คลกเลอกวตถ และเลอนเมาสมาทมมของกรอบ
Bounding Box ใหตวชเมาสเปลยนเปนรปลกศร จากนนคลกยอ หรอขยายวตถ
17
ภาพท 4.13 แสดงการเรยกใช Select Tool และเลอกเมาสไปคลกทมมของรปภาพ
3.2 ปรบขนาดดวย Free Transform Tool
เปนการปรบขนาดอกวธหน ง ซงมการใชงานเหมอนกบการใช Bounding Box โดยคลกเลอก Free
Transform Tool จากนนคลกเลอกวตถ และเลอนเมาสมาทมมของ Bounding Box ใหตวชเมาสเปลยนเปนรปลกศร
เพอคลกยอ หรอขยายรปภาพ
1. คลกเลอก Free Transform Tool
18
ภาพท 4.13 แสดงการเรยกใช Free Transform Tool
2. คลกเลอกวตถเพอยอหรอขยาย
ภาพท 4.14 แสดงการเลอกวตถเพอยอหรอขยาย
3.3 ปรบขนาดดวย Scale Tool
เปนการปรบขนาด โดยใชจดศนยกลางเปนตวก าหนดใหคลกเลอก Scale Tool และคลกดงวตถยอ หรอขยาย
1. คลกเลอก Scale Tool
19
ภาพท 4.15 แสดงการเลอกเครองมอ Scale Tool
2. เครองมอ Scale Tool คลกดงวตถยอ หรอขยาย
ภาพท 4.16 แสดงการเลอกคลกดงวตถขยาย
3.4 ปรบขนาดดวยพาเนล Transform
เปนการปรบขนาดทมความแมนย า สามารถก าหนดขนาดความกวาง และความสงไดอยางเจาะจง ผานการใช
งานพาเนล Transform (เลอกเมนค าสง Window -> Transform เพอเปดพาเนล Transform)
1. คลกเลอกภาพ
20
ภาพท 4.17 แสดงการเลอกภาพ
2. ก าหนดความกวางและความสง
ภาพท 4.18 แสดงการเลอกก าหนดความกวางและความสง
3.5 ปรบขนาดดวยค าสง Scale
เปนการปรบขนาดของวตถ โดยคดอตรายอ /ขยายเปนคาเปอรเซนต ถาก าหนดคานอยกวา 100% จะเปนการ
ยอขนาดและถาก าหนดคามากกวา 100 % จะเปนการขยายขนาด โดยคลกเลอกวตถ เลอกเมนค าสง Object ->
Transform -> Scale.. จะปรากกฎหนาตาง Scale ก าหนดคาตาง ๆดงน
- Uniform เปนการยอหรอขยายภาพโดยรกษาสดสวนเดม
- Non-Uniform เปนการยอ หรอขยายวตถ โดยไมคงสดสวนเดม
21
- Horizontal ก าหนดความกวางของวตถ
- Vertical ก าหนดความสงของวตถ
- Option ก าหนดคณสมบตอน ๆ เพมเตม
- Scale Strokes & Effects เลอกเพอปรบขนาดเสนขอบ
พรอมกบ Effects ในคราวเดยว
- Objects เลอกเพอปรบขนาดวตถ
- Patterns เลอกเพอปรบขนาดลวดลาย
เมอมการใสลวดลายเปนพนวตถ
22
ภาพท 4.19 แสดงการเลอกก าหนดคาปรบขนาดดวยค าสง Scale
4.การเลอกใชงานวตถ
กอนทเราจะท าการกบวตถใด ๆ เราจะตองเลอกวตถนนกอน โดยการเลอกวตถนนแบงออกเปนหลายรปแบบ
ตามความเหมาะสมในการใชงาน ดงน
4.1 เลอกวตถดวย Selection Tool
เปนการใชเครองมอในการเลอกวตถ และหากวตถถกรวมกลมกนอย (Group) เครองมอนกจะเลอกวตถทงกลม
โดยคลกเลอก Selection Tool ทกลองเครองมอ และคลกเลอกวตถซงจะแสดงกรอบภาพ(Bounding Box) เพอให
สามารถคลกยายต าแหนงของวตถได
ภาพท 4.20 แสดงการคลกเลอก Selection Tool
23
ภาพท 4.21 แสดงการคลกเลอกภาพ
ภาพท 4.22 แสดงการคลกเลอกต าแหนงภาพ
4.2 เลอกวตถดวย Direct Selection Tool
24
เปนเครองมอทใชเลอกจดยด(Anchor point) หรอเสนพาธ(Path) ของวตถ ท าใหเราสามารถทจะแกไขหรอ
ปรบปรงแตงภาพในสวนของเสนพาธตรงจดนนไดเลย โดยคลกเลอก Direct Selection Tool ทกลองเครองมอ และ
คลกเลอกเฉพาะเสนพาธ หรอจดยดทตองการ
ภาพท 4.23 แสดงการคคลกเลอก Direct Tool
ภาพท 4.24 แสดงการคลกเลอก Direct Tool
25
4.3 เลอกวตถดวย Group Selection Tool
เปนเครองมอทใชเลอกพาธ หรอกลมพาธ (เลอกจดยดไมได) โดยคลกเลอก Group Selection Tool ทกลอง
เครองมอ จากนนคลกเพอเลอกพาธ หรอดบเบลคลกเพอเลอกกลมพาธ
ภาพท 4.25 แสดงการคลกเลอก Group Selection
26
ภาพท 4.25 แสดงการคลกเลอกเฉพาะพาธทตองการ
4.4 เลอกวตถดวย Marquee Selection
เปนการเลอกวตถโดยการสรางพนทรอบวตถทงหมดทตองการ ในกรณทตองการเลอกวตถทมจ านวนมาก และ
อยในบรเวณพนทเดยวกน ซงวธนท าได โดยคลกเลอกเครองมอส าหรบเลอกวตถ(Selection Tool ,Direct Selection
Tool และ Group Selection Tool) และลากเมาสเปนรปสเหลยมใหครอบ หรอโดนวตถทตองการเลอก
ภาพท 4.26 แสดงการคลกเลอกเฉพาะพาธทตองการ
.
27
ภาพท 4.27 แสดงการคลกก าหนดพนทรปสเหลยมครอบคลมวตถทตองการเลอก
4.5 เลอกวตถดวย Lasso Tool
เปนเครองมอทใชเลอกวตถ หรอเสนพาธ และจดยด ซงจะมการใชงานทคลายกบ Direct Selection Tool แต
สามารถทจะเลอกวตถไดงายกวา โดยคลกเลอก Lasso Tool และลากเมาสลอมรอบสวนของพาธ และจดยดของวตถท
ตองการเลอก
ภาพท 4.28 แสดงการคลกเลอก Lasso Tool
28
ภาพท 4.29 แสดงการคลกลากเมาสผานจดทตองการ
4.6 เลอกวตถดวย Magic Wand Tool
เปนเครองมอทใชเลอกวตถทมสคลายกน โดยอางองจากสของตนฉบบ ดงตวอยางจะเลอกสวนของครบปลา
บรเวณหาง ซงมสแดง จะไดการเลอกพาธในสวนอน ๆ ทมสเขยวดวย โดยคลกเลอก Magic Wand Tool และคลก
เลอกพาธ หรอวตถทตองการ
ภาพท 4.30 แสดงการคลกคลกเลอก Magic Wand Tool
29
ภาพท 4.31 แสดงการคลกเลอกพาธ หรอวตถทตองการTool
เราสามารถก าหนดคณสมบตของ Magic Wand ไดโดยดบเบลคลกทไอคอน Magic Wand เพอเรยกใชงาน
พาเนล Magic Wand ใหเราก าหนดคาตาง ๆ ดงน
• Fill Color ก าหนดความแตกตางของคาสพน ซงเปรยบเทยบจากสของวตถทเลอก สามารถใสคาได
ตงแต 0 ถง 255 พกเซล ในชอง Tolerance ซงถาเราตงคานอยชวงสทถกเลอกกจะตางจากสตนฉบบ
คอนขางนอย แตถาตงคามากชวงสทถกเลอกกจะตางจากสตนฉบบคอนขางมาก
• Stroke Color ก าหนดความแตกตางของสเสนขอบ
• Stroke Weight ก าหนดความแตกตางของขนาดเสนขอบ
• Opacity ก าหนดความแตกตางของความโปรงแสง
• Blending Mode ก าหนดใหเลอกวตถทใช Blending Mode แบบเดยวกบวตถตนฉบบ (Blending
คอ การผสมวตถ 2 ชน เพอกลนใหเปนเนอเดยวกน)
30
ภาพท 4.32 แสดงการก าหนดคณสมบตของ Magic Wand
4.7 เลอกวตถจากเมนค าสง
นอกจากการใชเครองมอเลอกวตถตาง ๆ เรายงสามารถใชเมนค าสงเลอกวตถได โดยตวอยางจะเลอกวตถ
สเหลยมไวกอนทจะเลอกค าสงตาง ๆ ซงจะไดผลลพธแตกตางกนออกไป ดงน
31
ภาพท 4.33 แสดงการเลอกวตถจากเมนค าสง Select
5. การจดเรยงวตถ
ในการจดวางวตถนอกจากใช Selection Tool เรยงวตถเองแลว เรายงสามารถท าไดแบบอตโนมต โดยเลอก
เมนค าสง Window -> Align หรอ กดคย <Shift+F7> เพอเรยกใชงานพาเนล Align มาชวยในการจดเรยงต าแหนง
ของวตถใหรวดเรวขนได โดยคลกเลอกวตถทงหมดทตองการจดเรยง และคลกเลอกปมค าสงในการจดเรยงดงน
ลกษณะการจดเรยงวตถดวย Align จะแบงเปน 3 แบบ คอ
➢ จดเรยงวตถใหอยในแนวเสนตรงเดยวกน (Align Objects)
➢ จดเรยงระยะหางวตถใหเทากน(Distribute Objects)
➢ จดเรยงวตถใหมระยะหางตามทก าหนด (Distribute Spacing)
32
ภาพท 4.34 ลกษณะการจดเรยงวตถดวย Align จะแบงเปน 3 แบบ คอ
5.1 จดเรยงวตถใหอยในแนวเสนตรงเดยวกน (Align Objects)
Horizontal Align Left ใหขอบซายของวตถเสมอกน
Horizontal Align Center ใหกงกลางในแนวนอนของวตถเสมอกน
Horizontal Align Right ใหขอบขวาของวตถเสมอกน
Vertical Align Top ใหขอบบนของวตถเสมอกน
Vertical Align Center ใหกงกลางในแนวตงของวตถเสมอกน
Vertical Align Bottom ใหขอบลางของวตถเสมอกน
5.2 จดระยะหางวตถใหเทากน (Distribute Objects)
Vertical Distribute Top ใชวตถหางเทากนเทยบกบขอบบนของวตถ
Vertical Distribute Center ใชวตถหางเทากนเทยบกบกงกลางแนวตงของวตถ
Vertical Distribute Bottom ใชวตถหางเทากนเทยบกบขอบลางของวตถ
Horizontal Distribute Left ใชวตถหางเทากนเทยบกบขอบซายของวตถ
Horizontal Distribute Center ใชวตถหางเทากนเทยบกบกงกลางแนวนอนของวตถ
33
5.3 จดเรยงวตถใหมระยะหางตามทก าหนด (Distribute Spacing)
หากทพาเนล Align ไมปรากฏตวเลอกน สามารถเลอกใหแสดงตวเลอกได
โดยคลก เลอกค าสง Show Options ซงมขนตอนในการจดเรยงวตถแตกตางจากค าสงในกลมอน ดงน
1. คลกเลอกวตถทงหมด
ภาพท 4.35 การคลกเลอกวตถทงหมด
2. เลอกลกษณะการจดเรยง และก าหนดระยะหาง
Horizontal Distribute Right ใชวตถหางเทากนเทยบกบขอบขวาของวตถ
34
ภาพท 4.36 การเลอกลกษณะการจดเรยง
3. การจดเรยงวตถตามเลอกค าสง
ภาพท 4.37 การจดเรยงวตถตามเลอกค าสงทเลอก
35
ตวอยางการใชค าสง Vertical Distribute Space
1. เลอกวตถทงหมดทตองการจดเรยง
2. ก าหนดระยะหางวตถท 2pt ตามภาพ
3. ใช Selection Tool คลกเลอกวตถชนทจะใชเปนวตถหลก ซงวตถชนทเลอกจะมต าแหนงคงท
สวนวตถอน ๆ ทเหลอจะถกยายตามระยะหางทเราก าหนดไว
4. คลก Vertical Distribute Space หรอ Horizontal Distribute Space เพอก าหนด
ลกษณะการจดเรยงวตถ
ภาพท 4.38 การก าหนดระยะหางระหวางวตถในแนวนอน
36
.
ภาพท 4.39 การก าหนดระยะหางระหวางวตถในแนวตง
ในสวน Align To เปนการก าหนดพนทในการจดเรยง ซงจะใชรวมกบทก ๆ ค าสงการจดเรยงทกลาวผานมา
- Align To Selection ใชพนททเราเลอกจดเรยงวตถ
- Align To Artboard ใชพนทเตมอารตบอรดจดเรยงวตถ
- Align To Key Object ใชพนทเตมอารตบอรดจดเรยงวตถ
ภาพท 4.40 การก าหนดการจดเรยงดวยค าสง Align to
37
6.การจดล าดบวตถ
นอกจากการจดเรยงต าแหนงวตถแลว เรายงตองจดล าดบกอนหลงของวตถทวางซอนกน เพอใหภาพทออกมา
นนถกตองและสวยงาม โดยเลอกเมนค าสง Object -> Arrange ->ค าสงทตองการดงน
➢ Bring to Front (หรอกดคย <Shift+Ctrl+]>) เลอนวตถไปไวดานหนาสด
➢ Bring Forward (หรอกดคย <Ctrl+]>) เลอนวตถไปไวดานหนา 1 ล าดบ
➢ Send Backward (หรอกดคย <Ctrl+]>) เลอนวตถไปไวดานหลง 1 ล าดบ
➢ Send to Back (หรอกดคย <Ctrl+]>) เลอนวตถไปไวดานหลงสด
➢
ภาพท 4.41 การคลกเลอกวตถ
38
ภาพท 4.42 การเลอกเมนค าสง Object->Arrange->ค าสงทตองการ
ภาพท 4.43 หลงใชค าสงยายไปหลงสด
เราสามารถจดการวตถไดอยางรวดเรวโดยการคลกเมาสขวาทวตถ และเลอกค าสงจดการ เชน การยอนกลบ
การท างาน(Undo..),ปรบรปราง(Transform)และจดล าดบ(Arrange) เปนตน
7.การหมนวตถ
เราสามารถปรบหมน (Rotate) วตถ เพอใหไดหมนมมองศาทเราตองการไดหลายวธ ดงน
➢ หมนวตถดวย Bounding Box
➢ หมนวตถดวย Free Transform Tool
➢ หมนวตถดวย Rotate Tool
39
➢ หมนวตถดวยพาเนล Transform
➢ หมนวตถดวยค าสง Rotate
1.1.1 หมนวตถดวย Bounding Box
เปนวธพนฐานทใชหมนวตถ โดยใช Selection Tool คลกเลอกวตถ และเลอนเมาสมาทมมของกรอบ Bounding
Box ใหตวชเมาสเปลยนเปนรป จากนนคลกหมนทภาพ
ภาพท 4.44 การคลกเลอก Select Tool
ภาพท 4.45 การคลกเลอกวตถ
40
ภาพท 4.46 การเลอนเมาสมาทมมของวตถเพอหมน
1.1.2 หมนวตถดวย Free Transform Tool
เปนการหมนวตถอกวธหนง ซงมการใชงานเหมอนกบการใช Bounding Box โดยคลกเลอก Free Transform
Tool จากนนคลกเลอกวตถ และเลอนเมาสมาทมมของ Bounding Box ใหตวชเมาสเปลยนเปนรป ใหคลกหมน
วตถ
ภาพท 4.47 การคลกเลอก Free Transform Tool
ภาพท 4.48 การคลกเลอกวตถกอนการใชค าสง
41
ภาพท 4.49 การคลกเลอนเมาสมาทมมของวตถเพอหมน
1.1.3 หมนวตถดวย Rotate Tool
เปนการหมน โดยใชจดศนยกลางเปนตวก าหนด ใหคลกเลอก Rotate Tool และคลกดงวตถใหหมนไปในมมท
ตองการ
ภาพท 4.50 การคลกเลอกหมนวตถดวย Rotate Tool
42
ภาพท 4.51 การคลกเลอกหมนวตถดวย Rotate Tool
7.4 หมนวตถดวยพาเนล Transform
เปนการหมนทมความแมนย า สามารถก าหนดมมองศาไดอยางเจาะจง ผานการใชงานพาเนล Transform โดย
คลกเลอกวตถ คลกเลอก เพอก าหนดจดหมนของวตถ และก าหนดมมในการหมน ถาคามมบวกจะหมนทวนเขม
นาฬกา ถาคามมลบจะหมนตามเขมนาฬกา
ภาพท 4.52 การคลกเลอกวตถ
43
ภาพท 4.53 การก าหนดคามมในออปชน
44
ภาพท 4.54 แสดงผลลพธทได
7.5 หมนวตถดวยค าสง Rotate
เปนการหมนวตถ โดยก าหนดคามมทแนนอน และสามารถก าหนดใหหมนเฉพาะวตถ หรอลวดลายภายในวตถ
โดยคลกเลอกวตถ เลอกเมนค าสง Object->Transform->Rotate …จะปรากฏหนาตาง Rotate ก าหนดคาตาง ๆ ดงน
ภาพท 4.55 แสดงการใสจ านวนคามมทตองการหมน
Angle ก าหนดคามมในการหมน
Options ก าหนดคณสมบตอน ๆ เพมเตม
Objects เลอกวตถเพอหมน
45
Patterns เลอกเพอหมนลวดลาย เมอมการใสลวดลายเปนพนทวตถ
การใชงานเลเยอร
เลเยอร (Layer) เปรยบเสมอนแผนใสทใชส าหรบจดวางออบเจค ในการสรางชนงาน คณสามารถวางออบ
เจคทเปนองคประกอบสวนตาง ๆ ไวบนแตละเลเยอร ซงบรเวณของเลเยอรทไมมออบเจควางอยกจะโปรงใสมองเหน
ออบเจคทอยบนเลเยอรชนถด ๆ ลงไปได โดยแตละเลเยอรจะถกจดเรยงใหซอนทบกน ท าใหมองเหนภาพผลลพธ
เหมอนกบเปนชนงานเดยวกน ดงภาพ
46
ภาพท 4.56 แสดงการใชงานเลเยอร
การใชเลเยอรจะท าใหแกไขรปภาพเฉพาะสวนใดสวนหนงไดงาย สามารถเคลอนยายหรอเปลยนขนาดของออบ
เจคในเลเยอรตาง ๆ ไดอยางเปนอสระจากกน โดยเฉพาะอยางยงการวาดออบเจคทมความซบซอน เนองจากสามารถ
จดการกบออบเจคไดเชนกน ไมวาจะเปนการเลอกออบเจค, การซอน/แสดง, การลอค, การเปลยนล าดบการซอนของ
ออบเจค รวมไปถงการใชเลเยอรเพอแบงจงหวะเคลอนไหวของแอนเมชน flash ดวย (หมายถง การเอกซพอรต
อารตเวรคเปนไฟล SWF)
ขอดในการใชงานเลเยอรอกอยางหนง คอการน าไฟลไปใชรวมกบโปรแกรมอน ๆ เชน Photoshop โดยไฟล
ภาพนนจะยงคงรปแบบของเลเยอรไว และออบเจคทอยในแตละเลเยอรยงแยกกนอยเหมอนเดม ซงจะงายในการ
ปรบแตงตอไป แตหากไมไดใชเลเยอรออบเจคทงหมดจะถกรวมเปนชนเดยว
ใชงานพาเนล Layers
พาเนล Layers จะแสดงรายชอเลเยอรทงหมดทมในไฟล ในแตละเลเยอรจะประกอบไปดวยเลเยอรยอย และ
ชนของออบเจคในรปแบบตาง ๆ เชน Path คอออบเจคปกต, Group คอออบเจคทถกรวมกลม, Envelope คอออบ
เจคทถกปรบรปทรงดวยค าสง Envelope Distort เปนตน กสามารถเปดพาเนล Layers โดยใชค าสง Window >
Layers
47
ภาพท 4.57 แสดงการใชงานเลเยอร
ดานหลงชอเลเยอรและชนของออบเจคบนเลเยอรจะปรากฏสญลกษณรปวงกลม ซงมความหมาย คอ หมายถง ออบเจคสทบปกต หมายถง ออบเจคถกก าหนดความโปรงใส, มการใชสไตล หรอถกปรบแตงดวยพาเนล Appearance หมายถง ออบเจคนนก าลงถกเลอก
การสรางเลเยอรใหม
การสรางเลเยอรขนมาใหมส าหรบแยกเกบวตถตาง ๆ ของชนงาน เพอใหงายตอการแกไข ซงเลเยอรมอย 2
ลกษณะ คอ เลเยอรหลก Layer และเลเยอรยอย (Sublayer) โดยเลเยอรทสรางขนใหมจะถกก าหนดชอขนตนดวย
Layer ตามดวยล าดบเลขของเลเยอร คอ Layer1 , Layer2 …
การสรางเลเยอรหลก สามารถท าได ดงน
1. คลกไอคอน Create New Layer
2. เลเยอรทสรางขนมาใหมจะอยเหนอเลเยอรทก าลงท างานอย
48
ภาพท 4.58 แสดงการสรางเลเยอรใหม
การสรางเลเยอรยอย
เปนการสรางเลเยอรซอนเขาไปในเลเยอรหลก เพอแบงกลมของวตถในเลเยอร โดยมขนตอน ดงน
1. คลกเลอกเลเยอรหลกทตองการเพมเลเยอรยอย
2. คลกไอคอน Create New Sublayer
3. เลเยอรทยอยถกสรางขนจะอยภายใตเลเยอรหลกทเลอกไว
ภาพท 4.59 แสดงการสรางเลเยอรยอยใหม
นอกจากนยงสามารถสรางเลเยอรหลกและเลเยอรยอยไดอกวธหนง ซงวธนสามารถตงชอหรอก าหนด
คณสมบตตาง ๆ ของเลเยอรได โดยมขนตอน ดงน
49
1. คลกไอคอน ทพาเนล Layer
2. เลอก New Layer สรางเลเยอรหลก หรอเลอก New Sublayer สรางเลเยอรยอย
3. ก าหนดคณสมบตตาง ๆ ของเลเยอร
4. คลกปม Ok จากนนเลเยอรทสรางขนมาใหมจะอยเหนอเลเยอรทก าลงท างานอย
ภาพท 4.60 แสดงการเปลยนชอเลเยอร
การเปลยนชอเลเยอร
เพอใหเราท างานกบวตถชนงานตาง ๆ ไดงายขน ควรตงชอเลเยอรใหสอความหมายกบวตถชนงานนน ๆ โดยม
ขนตอนดงน
1. ดบเบลคลกเลเยอรทตองการเปลยนชอ
2. ท Name ใหตงชอใหม
3. คลกปม OK
4. ชอเลเยอรจะเปลยนไป
อกวธหนง สามารถเปลยนชอเลเยอรโดยดบเบลคลกทชอเลเยอร แลวพมพชอใหมไดทนท
50
ภาพท 4.61 แสดงการเปลยนชอเลเยอร
การซอนและแสดงเลเยอร
ชนงานหนงชนจะประกอบดวยเลเยอรจ านวนมาก ท าใหยากตอการแกไข ดงนนกอาจเลอกซอนเลเยอรทยง
ไมไดท างานไวกอน ซงการซอนเลเยอรนจะมผลตอวตถชนงานในเลเยอรนน เมอแกไขเสรจเรยบรอยจงคอยยแสดง
เลเยอรนนออกมาไดเชนกน
ขนตอนการซอนเลเยอร ดงน
1. คลกไอคอนรปตา หนาเลเยอรทตองการซอน (สงเกตสญลกษณรปดวงตาจะหายไป)
2. วตถบนเลเยอรจะถกซอนไมแสดง
51
ภาพท 4.62 แสดงการซอนเลเยอร
ขนตอนการแสดงเลเยอร ดงน
1. คลกไอคอนทรปตาหายไป หนาเลเยอรทตองการแสดง (สงเกตสญลกษณรปดวงตาจะโชวคนมา)
2. วตถบนเลเยอรจะแสดงใหเหนทนท
ภาพท 4.63 แสดงการใชค าสงแสดงเลเยอร
การลอคและปลดลอกเลเยอร
ในกรณทตองการปรบแตงวตถในเลเยอรโดยไมใหวตถบนเลเยอรอนถกแกไขโดยบงเอญ กสามารถลกอเลเยอร
ไวกอนได โดยคลกทชองดานหนาชอเลเยอร จะปรากฏไอคอนรปกญแจ และหาตองการปลดลอคเลเยอรกคลกไอคอน
รปกญแจอกครง
52
ภาพท 4.64 แสดงการลอคและปลดลอกเลเยอร
การคดลอกเลเยอรหรอ Copy Layer
เพอปองกนความผดพลาดในการท างานกบวตถ อาจจะท าการคดลอกเลเยอรส ารองไวกอนได โดยเลเยอรใหม
ทถกคดลอกจะมค าวา Copy ตอทายชอ สามารถท าไดโดยคลกลากเลเยอรทตองการคดลอกลงมาทบทไอคอน Create
New Layer จะไดเลเยอรขนมาใหม
ภาพท 4.65 แสดงการคดลอกเลเยอร
ขนตอนการเปลยนล าดบชนของเลเยอร
53
ล าดบชนของเลเยอรทสรางครงลาสดจะอยดานบนเสมอ ซงเมอบนเลเยอรมวตถกจะแสดงทบวตถบนเลเยอร
ลาง แตกสามารถเปลยนล าดบการแสดงผลของวตถในแตละเลเยอรไดดวยกน 2 วธ ดงน
วธท 1 คลกเลอกเลเยอรทตองการ แลวลากเมาสยายไปวางต าแหนงทตองการ
ภาพท 4.66 แสดงการเรยงล าดบชนของเลเยอร
วธท 2 ใชค าสงจดล าดบวตถ
1. คลกปม ดานหลงเลเยอรทตองการ
2. จะปรากฏ Selection เปนกรอบรอบวตถ
3. คลกขวาแลวเลอกค าสง Arrange ->เลอกจดล าดบทตองการ
- Bring to Front : น าวตถชนทเลอกมาไวดานบนสด
- Bring to Forward : น าวตถชนทเลอกมาไวดานบนทละชน
- Send Backward : น าวตถชนทเลอกมาไวดานลางทละชน
- Send to Back : น าวตถชนทเลอกมาไวดานลางสด
4. จะไดภาพแสดงตามล าดบทเลอก
5. หากตองการเลอกเลเยอรมากกวา 1 เลเยอร ใหกดแปน Shift หรอ Ctrl คางไวแลวคลกเลอกเล
เยอร จะไดเลเยอรจ านวนหลายเลเยอรตามตองการ
54
ภาพท 4.67 แสดงการเรยงล าดบชนของเลเยอร
การแสดงเลเยอรแบบโครงราง
การแสดงวตถแบบเสนโครงราง Outline จะท าใหเครองท างานไดเรวขนในกรณทชนงานมความซบซอน
สามารถท าไดดงน
1. กดแปน Ctrl และคลกไอคอนรปดวงตาทหนาเลเยอรทตองการ
2. สงเกตสญลกษณจะเปลยนเปน
3. ภาพบนอารตบอรดจะแสดงเปนแบบโครงราง
4. หากตองการแสดงภาพตามเดมใหกดแปน Ctrl และคลกไอคอน อกครง
55
ภาพท 4.68 แสดงการใชค าสงโครงรางของเลเยอร
ภาพท 4.69 แสดงการใชค าสงโครงรางของเลเยอร
การสงพมพงาน
1. พนทการพมพ (Page Tiling) พนทการพมพ คอ บรเวณเสนกรอบทแสดงขอบเขตการพมพออกทางเครองพมพ สามารถส ารวจเสน
56
กรอบพนทการพมพไดโดยคลกเมน View -> Show Print Tilling จะปรากฏเสนประ รอบอารตบอรด ซงเสนกรอบน
จะมขนาดกระดาษตามทตงคาไวตอนสรางไฟลงาน หากตองการซอนเสนกรอบใหคลกเมน View -> Hide Print
Tilling)
ภาพท 4.70 แสดงพนทกอนสงพมพงาน
2. การตรวจสอบความถกตองของส
กอนสงพมพชนงาน ควรตรวจสอบความถกตองของส เพอเมอปรนงานออกมาแลวสจะไดมผดเพยนไปจาก
ตนฉบบ อาจสงผลใหเกดความเสยหายได เนองจากชนงานเมอแสดงบนจอภาพจะใชโหมดส RGB สวนชนงานทแสดง
บนกระดาษจะใชโหมดส CMYK โดยมวธการดงน
1. คลกเมน View -> Proof Setup -> เลอกโหมดส
2. คลกเมน View -> Proof Colors
3. จากนนชนงานจะแสดงสในโหมดทเลอก
เสนกรอบสด ำทบคอ
พนทกำรพมพ กรอบอำรตบอรด
กรอบพนทตดตก
57
ภาพท 4.71 แสดงพนทจากการเรยกใชค าสง Proof Setup
3. การสงพมพงาน
เมอตรวจสอบความถกตองของสเรยบรอยแลว สามารถสงพมพงานออกทางเครองพมพได โดยมขนตอน
ดงน
1. คลกเมน File -> Print เพอเปดหนาตางการพมพขนมา
2. คลกเลอกเครองพมพทตองการใชงาน
3. ก าหนดจ านวนชดทตองการ
4. คลกเลอกอารตบอรดทตองการพมพ กรณมหลายอารต
58
5. ก าหนดขนาดกระดาษและแนวการพมพทตองการ
6. ก าหนดขนาดของภาพ
7. คลกปม Print เพอพมพงาน
ภาพท 4.72 แสดงการก าหนดคาการใชค าสง Print
4. การใชงาน Crop Mark
Crop Mark คอ เสนบอกแนวในการตดขอบกระดาษทอยตรงมมทงสของชนงาน และมสญลกษณส าหรบ
59
ตรวจสอบสทพมพออกมาวาผดเพยนหรอไม โดยสามารถก าหนดไดในสวนของ Marks and Bleed ในหนาตาง Print
โดยมขนตอนดงน
1. คลกเมน File -> Print เพอเปดหนาตางการพมพขนมา
2. คลกเลอกหวขอ Marks and Bleed
3. คลกเลอกสญลกษณทาการพมพทตองการ
4. เลอกแบบตวอกษรส าหรบแสดงขอมลภาพอารตเวรค
5. ก าหนดความหนาของเสน Mark
6. ก าหนดระยะหางของภาพจากสญลกษณทางการพมพ
7. ก าหนดระยะหางการพมพอารตเวรคจากขอบทง 4 ดาน
8. คลกปม Print เพอพมพงาน
ภาพท 4.73 แสดงการก าหนดคาการใชค าสง Print
60
ภาพท 4.74 แสดงการก าหนดคาใหโชวเสน Scale
5. การแบงชนงานพมพหลายหนา Tilling
หากตองการพมพภาพขนาดใหญทเครองพมพไมสามารถพมพได สามารถแบงสวนชนงานนนใหม
ขนาดพอดกบกระดาษทเลอกแลวน ามาเรยงตอกนได โดยก าหนดรปแบบการพมพแบบ Tile Full Pages ซงมวธการ
ดงน
1. คลกเมน File -> Print เพอเปดหนาตางการพมพขนมา
2. คลกตวเลอก Ignore Artboards เพอพมพตามขนาดจรงโดยไมสนใจขอบเขตของอารตบอรด
3. ก าหนดขนาดกระดาษ
4. เลอก Title Full Pages เพอพมพหลายหนา
5. หากภาพทใชมขนาดเลกสามารถปรบขนาดไดท Scale โดยระบคาลงไป
6. ลกษณะของภาพทจะถกแบงพมพ
7. คลกปม Print เพอพมพงาน
61
ภาพท 4.75 แสดงการแบงชนงานพมพหลายหนา
การเอกพอรตไฟลอารตเวรก (Export)
โปรแกรมสามารถเอกพอรต ไฟลอารตเวรคไปใชงานในโปรแกรมอน ๆ ได ไมวาจะเปน งานเวบ Animation
1. Export อารตเวรคไปใชใน โปรแกรม Photoshop
เมอตองการน าอารตเวรคไปปรบแตงการลงสใหดสมจรงมากขนดวยโปรแกรม Photoshop เราสามารถ
Export อารตเวรคไปใชงานตอไปทนท โดยมวธการดงน
1. คลกเมน File -> Export เพอเปดหนาตาง Export ขนมา
2. เลอกโฟลเดอรส าหรบเกบไฟลงาน
3. ตงชอไฟล
62
4. เลอกประเภทไฟลเปนแบบ PSD
5. คลกเลอก Use Artboards เพอ Export แบบแยกไฟล
6. คลกปม Export
ภาพท 4.76 แสดงการเรยกใชค าสง Export
63
ภาพท 4.77 แสดงการเรยกใชค าสง Export
ภาพท 4.78 แสดงการเรยกใชค าสง Export
7. เลอกโหมดสของภาพ
8. ก าหนดความละเอยดของภาพ
9. คลกเลอกเพอรกษาโครงรางของเลเยอร
10. คลกตวเลอกเพออนญาตใหแกไขได
11. คลกตวเลอกเพอใชโพรไฟลสทไดตงคาไว
12. เมอเสรจแลวคลกปม Ok
64
เมอเรยกใชไฟลท Export ดวยโปรแกรม Photoshop จะไดไฟลแบบ PSD ทประกอบไปดวยเลเยอร
ตาง ๆ จากนนสามารถปรบแตงภาพไดตามตองการ
ภาพท 4.79 แสดงการเรยกใชค าสง Export ไปโปรแกรม Photoshop
2. Export อารตเวรคเปนไฟล JPEG
ไฟลแบบ JPEG เปนไฟลภาพทไมสามารถรกษาโครงสรางของเลเยอรไวได และไมสามารถน ากลบมาแกไข
ได สามารถน าไปใชงานไดหลากหลาย เหมาะส าหรบการน าเสนอทงสอมลตมเดย และเวบไซต โดยมวธการดงน
1. คลกเมน File ->Export เพอเปดหนาตาง Export ขนมา
2. เลอกโฟลเดอรส าหรบเกบไฟลงาน
3. ตงชอไฟล
4. เลอกประเภทไฟลเปนแบบ JPEG
5. คลกเลอก Use Artboards เพอ Export แบบแยกไฟล สามารถ Export ทงหมดหรอเลอกเฉพาะ
อารตบอรดทตองการได
6. คลกปม Export
65
ภาพท 4.80 แสดงการเรยกใชค าสง Export เปน ไฟล jpg
66
ภาพท 4.81 แสดงการก าหนดคาค าสง Export เปน ไฟล jpg
7. ก าหนดคณสมบตไฟล
8. เมอเสรจแลวคลกปม OK
3. Export อารตเวรคเปนไฟล PNG
ไฟลแบบ PNG เปนไฟลภาพทมขนาดเลก มความคมชดสง สามารถก าหนดใหพนหลงเปนพนโปรงใส
ได (Transparent) โดยมวธการดงน
1. คลกเมน File ->Export เพอเปดหนาตาง Export ขนมา
2. เลอกโฟลเดอรส าหรบเกบไฟลงาน
ภาพท 4.82 แสดงการเรยกใชค าสง Export เปน ไฟล jpg
3. ตงชอไฟล
67
4. เลอกประเภทไฟลเปนแบบ PNG
5. คลกเลอก Use Artboards เพอ Export แบบแยกไฟล (สามารถ Export ทงหมดหรอเลอก
เฉพาะอารตบอรดทตองการได)
6. คลกปม Export
7. ก าหนดคณภาพของไฟล
8. เลอกความคมชดของเสน Path
9. เลอกสพนหลง Transparent แบบโปรงใส
White แบบสขาว
Black แบบสด า
10. เมอเสรจแลวคลกปม OK
ภาพท 4.83 แสดงการก าหนดคาค าสง Export เปน ไฟล jpg
4. Export อารตเวรคเปนไฟล TIFF
ไฟล TIFF เปนไฟลทเหมาะส าหรบเกบบนทกภาพตนฉบบ และภาพทสรางสอสงพมพ โดยมความละเอยด
68
มากถง 300 dpi ทส าคญไมตองกงวลวาภาพทใชในงานจะตกหลนหรอลงกหายหรอไม โดยมวธการ Export เปนไฟล
TIFF ดงน
1. คลกเมน File -> Export เพอเปดหนาตาง Export ขนมา
2. เลอกโฟลเดอรส าหรบเกบไฟลงาน
ภาพท 4.84 แสดงการก าหนดคาค าสง Export เปน ไฟล TIFF
3. ตงชอไฟล
4. เลอกประเภทไฟลเปนแบบ TIFF
5. คลกเลอก Use Artboards เพอ Export แบบแยกไฟล สามารถ Export ทงหมดหรอเลอกเฉพาะ
อารตบอรดทตองการได
6. คลกปม Export
7. เลอกโหมดสของภาพ หากน าไปสงพมพใหเลอกเปน CMYK
8. ก าหนดคาความละเอยดของภาพ
9. เลอกใชคาโพรไฟลสตามทตงคาไว
10. เมอเสรจแลวคลกปม OK
69
ภาพท 4.85 แสดงการก าหนดคาค าสง Export เปน ไฟล TIFf
5. บนทกอารตเวรคเปนไฟล PDF
เมอตองการตรวจสอบความถกตองของไฟลกอนสงพมพ สามารถบนทกอารตเวรคใหเปนไฟล PDF ได
โดยมวธการดงน
1. คลกเมน File -> Save As เพอเปดหนาตาง Save As ขนมา
2. เลอกโฟลเดอรส าหรบเกบไฟลงาน
70
ภาพท 4.86 แสดงการเรยกใชค าสง Export เปน ไฟล PDF
3. ตงชอไฟล
4. เลอกประเภทไฟลเปนแบบ PDF
5. คลกปม Save
6. จากนนจะแสดงไฟล PDF โดยโปรแกรมอาน PDF
ภาพท 4.87 แสดงการก าหนดคาค าสง Export เปน ไฟล PDF
การสรางหนงสอ
การสรางหนงสอและแผนพบในโปรแกรม Illustrator มลกษณะคลาย ๆ กนคอ อนดบแรกตองก าหนด
ขนาดกระดาษตามตองการ ท Document Setup สามารถวดขนาดตามความจรง แลวใสขนาดกระดาษ พรอมทงควร
71
มการท าคาเผอขอบกระดาษในตอนปรนคอการก าหนดคา Bleed ทกดานของกระดาษ ประมาณ 0.25 นว และควร
เผอกระดาษดานใน ทใสเนอหา โดยการก าหนดดวยการสรางสเหลยมเพอเปนไกดไลนในการท างานไมใหออกนอก
ขอบเขตทไดเผอไว ประมาณ 0.25-0.5 นว เมอท าเชนนแลว เวลาปรนงานจะไมมปญหาเรองเนอหาออกมาไมครบตาม
ก าหนด ยกตวอยางภาพ
การสรางหนงสออยางงาย ดวย ไฟล PDF
ภาพท 4.88 แสดงการก าหนดขนาดกระดาษในการสรางหนงสอเปนขนาดกระดาษ A4 แนวตง
72
ขนตอนการสรางหนงสอ
1. คลกเมน file -> New
ภาพท 4.91 แสดงการก าหนดคาขนาดกระดาษขนาด A4
2. เลอกกระดาษขนาด A4 แนวตง ตงชอไฟล bookA4
3. ก าหนดเพม Artboards มาอก 8 หนา
73
ภาพท 4.92 แสดงการเพม artboard 8 หนา
4. ก าหนดคา Bleed ตามแบบ 0.0394 in เพอเปนขอบเขตขอความจะมเสนสแดงใหเหนเดนชด
ภาพท 4.93 แสดงเสน Bleed ทก าหนด จะสแดงเหนชดเจน
5. คลกเครองมอ เพอวาดรปสเหลยม โดย คลกทพนทวาง ๆ แลวใสคาก าหนดพนทสเหลยม ก าหนด
ขอบเขตลดขนาดจากขนาดจรง ลงมาดานละ ประมาณ 0.25 นว คอ ขนาดกระดาษ A4 8.25 x
11.60 เปนขนาดสเหลยม 8 x 11.33 ตามภาพ
74
ภาพท 4.94 แสดงเสน Bleed ทก าหนด จะสแดงเหนชดเจน
6. เมอไดสเหลยมมาแลวใหคลกทพาเนล Align เพอจดใหอยกงกลางหนากระดาษ ตามภาพ
75
ภาพท 4.95 แสดงก าหนดค าสง Align จดเสนขอบใหอยกงกลางกระดาษ
7. คลกขวาตรงกลางเสนไกดสเหลยม เลอกค าสง Make Guides
ภาพท 4.96 แสดงก าหนดค าสง Make Guides เพอสรางเสนไกดขอบเขตขอความ
76
8. จะไดเสนไกดสฟาออน ๆ ขนทกรอบกระดาษดานใน เพอใหท างานภายในกรอบเทานน
ภาพท 4.97 แสดงเสนไกดขอบเขตขอความ
9. น ารปภาพทเตรยมไวแลวมาใสใน Artboards ใหอยในขอบเขตเสนไกดทก าหนดไวแลว ใหครบทก
Artboards
10. พรอมใสเลขหนาทมมบน ซาย ขวา ตามแบบ
77
ภาพท 4.98 แสดงการน าภาพมาวางภายในเสนไกดขอบเขตขอความ
11. เมอท าเสรจครบทกหนาแลวโดยมปกหนาท Artboards ท 1 และปกหลงจดท าท Artboards หนา
สดทาย ใหบนทกไฟลเปน ไฟล PDF
12. เมอไดไฟล PDF แลว สามารถปรนงานหนงสอออกตามหนาทเรยงไวทละหนาไดตามตองการ
13. สามารถก าหนดการปรนทหนา ค หรอ หนาค กอน ใหคลกทปมค าสง more options->odd pages
เพอปรนหนาคกอน โดยจะเรมปรนหนาแรกคอปกหนา ตามดวย หนาค อน ๆ จบครบทกหนาค ตาม
ภาพ
78
ภาพท 4.99 แสดงการก าหนดใหปรนหนาค
14. เมอครบหนาคแลว ใหคลกทค าสง Even pages only ปรนหนาค โดยใหใสกระดาษทปรนหนาคมา
เมอกมาใส กจะสามารถปรนครบทงสองดานอยางงายดาย
ภาพท 4.100 แสดงการก าหนดใหปรนหนาค
15. ขอดของไฟล PDF คอ สามารถสงปรนไดงายเนองจากโปรแกรม PDF ไดจดเรยงหนาตามทไดจด
Artboard ไวแลว จงสะดวกในการสรางหนงสออยางงายไดทนท
79
.
ภาพท 4.101 แสดงการสรางไฟลเปน PDF เพอท าหนงสออยางงาย
80
สรปสาระส าคญทายบทท 4
บทนกลาวถง การน าเขาไฟลรปภาพ การยายและคดลอกรปภาพ การปรบเปลยนขนาดรปภาพ การใชงานวตถ
หรอออบเจกต การใชงานเลเยอร การใชเลเยอร การสงพมพ การสรางหนงสอ ซงท าใหทราบวธการสรางสอสงพมพได
อยางเขาใจมากยงขน สามารถผลตสอสงพมพไดตามความตองการ เปนความรทางดานการสรางผลงานเพอเผยแพรตอ
ผอนได ชวยใหสอสารไปยงผรบไดรบรความหมาย เกดความเขาใจจากสอสงพมพตาง ๆ ทตองการสอสารอยางเขาใจ
ตรงกน ซงในปจจบนการสอสารเชงเอกสารนน ไดน ามาใชในทกหนวยงานไมวาจะเปนการสอสารทางตรงหรอทางออม
อยางเชน การสอสารโฆษณาประชาสมพนธของการภาครฐ คอระเบยบการเขามาตดตอประสานงานหรอตลอดจนการ
เขามาใชบรการในหนวยงาน ในสวนภาคเอกชน ไดน าสอสงพมพมาชวยออกแบบสอใหมความสวยงาม ดงดดในการ
เลอกซอสนคาตาง ๆ เพอเพมชองทางการจดจ าหนายและโฆษณาผลตภพณตาง ๆ ไปยงผรบสาร เชน การแจกใบปลว
ใบปด ใบแจก บตรคอนเสรตฯลฯ จงเปนบทเรยนทมความส าคญมาก
81
ค าศพท หนวยท 4
ค าศพท ความหมาย
Scale ปรบขนาดวดระยะ
Stroke เสนขอบ
Opacity ก าหนดความโปรงแสง
Align การจดเรยงวตถ
Distribute ระยะหางวตถ
Bring สงวตถไปยงทตาง ๆ
Front สวนหนา
Rotate หมนวตถ
Back ยอนกลบ
Backward ยอนหลงสด
82
ใบงานท 4.1
เรอง การจดการกบรปภาพและวตถ
จดประสงค
1. นกเรยนสามารถจดการกบรปภาพได
2. นกเรยนสามารถจดการกบวตถได
3. นกเรยนสามารถออกแบบปกนตยสารได
4. นกเรยนสามารถบนทกไฟลงานได
5. นกเรยนสามารถพมพงานออกทางเครองพมพได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบปกนตยสาร มขนตอนการท าดงน
เปนการวาดภาพแบบการตนแบบงายๆ โดยใชเครองมอ Pen และการไลเฉดสแบบเกรเดยนท เพอท าใหภาพด
มแสงเงา
1. ก าหนดคาเรมตนงาน โดยเลอกค าสง
File>New แลวก าหนดขนาดของหนาปก ขนาดเทากบ A4 แตตองมการก าหนดคาทส าคญดงน
- Bleed ( ตดตก ) = 0.3 cm
- Color Mode ( ประเภทของส) = CMYK
- Raster Effects ( ความละเอยดของไฟล ) =Hight ( 300 ppi)
83
รปท 1 การเปดเอกสารใหม
2. แบงสดสวนระหวางชอหนงสอภาพกราฟก
โดยกดคย ctrl+R เพอเปดไมบรรทด จากนนคลกเมาสเพอวางเสนไกด
รปท 2 ใชค าสงเรยกไมบรรทด
84
รปท 3 ใชค าสงเรยกเสนไกด
3. ใสสใหกบสวนชอหนงสอและสวนภาพกราฟก
โดยใชเครองมอ Rectangle วาดรปสเหลยมตามขนาดของพนททแบงไว
85
.
รปท 4 ใชค าสงเรยกสรางสเหลยมเพอท าพนหลง
4. ลงมอออกแบบภาพกราฟก ในขนตอนแรกตองสรางเลเยอรใหมโดยคลก ทพาเนล layers จากนนโดยใชเครองมอ
Pen วาดรปทรงดงรป
รปท 5 ใชเครองมอ pan วาดเสนพาธ
5. ตกแตงลวดลาย โดยใชเครองมอ Pen วาดรปทรงดงรป
86
รปท 6 ใชเครองมอ convert เพอดงเสนพาธใหโคงมน
6. วาดรปดวงดาว 5 แฉก โดยใชเครองมอ Star tool แลวกอปปและยอขนาดดวงดาวใหเลกลงเปนชน ๆ ดงรป
รปท 7 ใชเครองมอ Star tool สรางรปดาว
7. สรางพนหลงแลวใสสพนหลง โดยเรยกลวดลายตาง ๆ ทสวยงามในพาเนล Swatches
87
รปท 8 ใชพนหลงทพาเนล Swatches
8. สรางพนหลงสด า และ สลวดลายตามภาพ
รปท 9 ใสสด า และ ใสสพนหลงทพาเนล Swatches
9. ซอนรปพนหลงตาง ๆ โดยการคลกท layer รปดวงตาทก Layer จนเหลอแตกระดาษเปลา ๆ
88
รปท 10 ซอนlayer อน ๆ คลกทรปดวงตา
10. ท าการสรางสายรง เพอน ามาตกแตงปกนตยสาร ใหใชเครองมอ pen วาดเสนขนมา 4 เสนตามภาพ
รปท 11 วาดดวยเครองมอ pen
11. เลอกเสนทงหมด คลกเครองมอ Blend tool แลวดบเบลคลกทไอคอน จะมพาเนล Blend Options ขนมา
รปท 12 เรยกใชค าสงจากเครองมอ Blend Tool
89
12. ก าหนดคา Smooth Color ใน Blend Options คลก ปม OK เมาสจะเกดจดเลก ๆ สขาว ใหน าเมาสไปคลกท
เสนทวาดทละเสน เพอเปน คดลอกเสนเพมขนทละเสน ตามภาพ
รปท 13 การคดลอกเสนใหมจ านวนมากขน
13. ใชค าสงจดกลมใหกบเสนทงหมด ทเมน Object -> group
รปท 14 ใชค าสง Group ใหกบเสนทวาด
90
14. ตองการสรางเงาใหกบเสนทวาด คลกทเสน ใชค าสงจากเครองมอ Blend tool -> Specified Steps
รปท 15 ใชค าสง Blend Options เพอสรางเงาใหกบเสนทวาด
15. ท าเสนใหสมธเขากน โดยการคลกทเสน ใชค าสง Object ->Expand -> ก าหนดคาตามเดม คลก ปม OK
91
รปท 15 ใชค าสง Expand ใหกบเสนทวาด
16. คลกทเสน แลวใชค าสง Ungroup และใชค าสง Expand อกครง เพอสรางความเขมใหกบเสนทวาด
รปท 16 ใชค าสง Expand ใหกบเสนทวาด
17. ผลลพธทไดเสนจะมความคมชดมากขน
92
รปท 17 ผลลพธเสนทไดจะมความคมชดมากขน
18. ก าหนดเสนใหมความสวางลดลง ทเครองมอ Opacity 70%
รปท 18 ก าหนด Opacity 70%
19. ผลลพธทไดเสนมความสวางลดจางลง
93
รปท 19 ผลลพธทไดมสจางลง
20. ใสสทพาเนล Gradient จะไดเสนเปนสสายรง ตามภาพ
รปท 20 ผลลพธทไดมสจางลง
94
21. ผลลพธสายรงทไดมสสวยงาม
รปท 21 ผลลพธทไดสายรงมสวยงาม
22. ใสภาพเสนสายรงทสรางเสรจแลวลงในชนงาน
95
รปท 22 ใสสายรงเพอตกแตงปกนตยสาร
23. ใสชอหนงสอ โดยใชเครองมอ Type พมพชอหนงสอตามตองการ
.
รปท 23 ใสขอความตาง ๆ
24. ก าหนดแสดงผลทเลเยอร ทกเลเยอร โดยคลกทรปดวงตา
96
รปท 24 คลกแสดงทกเลเยอร
25. ตกแตงเพมเตมขนตอนสดทาย ถาหากคณเหนวาหนาปกแมกกาซนยงคงดโลงๆ กสามารถใสขอความหรอ
ภาพกราฟกเพมเตมได ซงในทสดกจะไดผลงานสวย ๆ แบบน
26. ใหนกเรยนสงงานเปนไฟล สกล AI ทเมลครผสอน [email protected] และปรนงานสงในคาบถดไป
รปท 24 ปกนตยสาร
ใบงานท 4.2
เรอง การจดการกบรปภาพและวตถ
จดประสงค
1. นกเรยนสามารถจดการกบรปภาพได
97
2. นกเรยนสามารถจดการกบวตถได
3. นกเรยนสามารถออกแบบฉลากสนคาได
4. นกเรยนสามารถบนทกไฟลงานได
5. นกเรยนสามารถพมพงานออกทางเครองพมพได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบฉลากสนคา มขนตอนการท าดงน
รปท 1 การออกแบบฉลากสนคา
1. ในโปรแกรม Illustrator กดปม <Ctrl+N> บนคยบอรด เพอสรางกระดานวาดภาพใหม โดยก าหนด
รายละเอยดตาง ๆดงน
• Size: A4
• Unit: Inches
• คลกปม Landscape ปรบหนากระดานเปนแนวนอน
2. เลอกปมท างานในพาเนล COLOR คลกปม Option และเลอกโหมดสแบบ CMYK
98
รปท 2 ก าหนดคาเอกสารใหม
3. ก าหนดรายละเอยดของสทวาดโดยคลก Stoke เปน None และ Fill เปนสฟา
4. คลกเครองมอ Rounded Rectangle Tool
5. คลกบนทวางในกระดานวาดภาพหนงครง แลวก าหนดขนาดของสเหลยมทตองการสราง ดงน
• Width: 2 in
• Height: 1.7 in
• Corner Radius: 0.1 in
6. คลกปม OK เราจะไดรปเหลยมขอบบนกระดานวาดภาพ
รปท 3 การก าหนดคาการสรางรปทรงสเหลยม
7. คลกเครองมอ Ellipse Tool เพอสรางรปวงกลม
99
8. คลกเมาสบนทวางในกระดานวาดภาพหนงครงแลวก าหนดขนาดของวงกลมทตองสรางดงน
• Width: 2 in
• Height: 2 in
รปท 4 การก าหนดคาเพอสรางรปทรงกลม
9. คลกเมน View > Smart Guides เปดเครองมอชวยจดต าแหนงใหท างาน เครองมอนท าใหการจดต าแหนงท า
ไดงายขน
รปท 5 การเรยกใชค าสง Smart Guides
100
10. เปลยนมาใช Selection tool คลกเมาสน ารปวงกลมมาวางทบรปสเหลยม โดยใหจดศนยกลางของรปวงกลม
อยตรงต าแหนงเดยวกบจดกงกลางขอบบนของสเหลยม
11. คลกเมาสเลอกรปสเหลยมและวงกลมใหท างาน แลวกดปม <Ctrl + G> บนคยบอรดเพอใชค าสง Group
รวมกลมรปทรงทงสองเปนกลมเดยว
รปท 6 การใชค าสงเพอรวมรปทรงทงสองชนเขาดวยกน
12. วาดวงกลมสขาวดวยการใช Ellipse Tool วาดเหมอนเดม โดยก าหนดรายละเอยดดงน
• ก าหนดสในชอง Stroke เปนสฟา และ Fill เปนสขาว
• Width: 1.6 in
• Height: 1.6 in
13. ใช Selection tool คลกเมาสจดต าแหนงของวงกลมสขาวทสรางใหมใหอยกลางวงกลมสฟาดงภาพ
101
รปท 7 การก าหนดคาเพอสรางรปทรงกลม
14. วาดวงกลมตรงมมขวาบนของฉลากดวยการใช Ellipse Tool โดยก าหนดรายละเอยดดงน
• ก าหนดสในชอง Stroke เปน None และ Fill เปนสฟา
• Width: 0.7 in
• Height: 0.7 in
15. ใช Selection tool คลกเมาสจดต าแหนงของวงกลมทสรางใหมใหอยในต าแหนงดงภาพ
รปท 8 การวางวตถรปทรงในวตถอกชนหนง
16. ใช Selection tool คลกรปวงกลมสขาวใหท างานจากนนคลกเมน Object > Arrange > Bring to Front
เพอยายรปวงกลมดงกลาวมาอยในล าดบบนสด
102
รปท 9 การน าวตถทรงกลมชนเลกมาวางทวตถรปทรงอกชนหนง
17. เราจะได Layout ส าหรบท าฉลากสนคาพรอมทจะน าไปตกแตงตามทตองการแลว
รปท 10 ผลลพธการสรางพนหลงของฉลากสนคา
วาดลายเสนหรอภาพประกอบ
หลงจากได Layout ของฉลากสนคาจากขนตอนทผานมาเรยบรอยแลว ในขนตอนนเราจะมาวาดลายกราฟก
และลายการตนทใชประกอบในฉลากสนคากนตอ
เรมดวยการวาดลายกราฟกฟองสบส าหรบสวนขอบวงกลม ดวยการสรางลายฟองสบขนมากอนแลวน าไปสราง
เปน Pattern ส าหรบเลอกน าไปใสทตองการ ดงวธการตอไปน
1. คลกเครองมอ Rectangle Tool
2. ก าหนดสในชอง Stroke เปน None และ Fill เปนสฟา
3. <Shift + คลกเมาส > วาดรปทรงสเหลยมจตรสขนมาดงภาพ
103
รปท 11 การสรางรปทรงสเหลยมเพม
4. เปลยนมาใชเครองมอ Ellipse Tool
5. <Shift + คลกเมาส > วาดรปทรงกลมขนาดเทากบขนมา 3 ชนโดยแตละชนใหก าหนดสดงน
• ชนแรก ก าหนดสในชอง Stroke เปนสฟา และ Fill เปน None
• ชนทสอง ก าหนดสในชอง Stroke เปน None และ Fill เปนสฟา
• ชนทสาม ก าหนดสในชอง Stroke เปน None และ Fill เปนสแดง
104
รปท 12 การสรางวตถรปทรงกลม
6. คลกเลอกรปวงกลมสฟาแลวคลกเมาสน ามาซอนวงกลมสแดง ใหเหลอสวนขอบของวงกลมสแดงเปนรป
พระจนทรเสยวเราจะใชสวนนมาสรางเปน Highlight ของฟองสบ
รปท 13 การน าวตถรปทรงกลมมาวางทบกน
7. คลกเมาสเลอกรปวงกลมทงสองชนใหท างาน
8. กดปม <Shift + Ctrl + F9> บนคยบอรดเพอปดพาเนล Pathfinder
9. คลกปม Minus Front รปวงกลมสฟาจะตดสวนทชอนกบสแดงทงไป เหลอสวนทเราจะน าไปใชเปน Highlight
เอาไว
รปท 14 การใชค าสงเพอตดสวนทวตถรปทรงททบซอนกนออก
10. < Shift + คลกเมาส> ยอขนาดใหเลกลง แลวเลอนไปใสในวงกลมวงแรกดงภาพ ในกรณทไมมกรอบ
Bounding Box ส าหรบยอขนาดแสดงขนมา ใหกดปม <E> บนคยบอรด เพอเรยกกรอบดงกลาว
105
รปท 15 การน าวตถทรงกลมมาไวดานในวตถทรงกลมอกอน
11. ใชเครองมอ Rectangle Tool สรางรปสเหลยมขนมาแลวใช Minus Front ตดตรงกลางของรป Highlight
ออกดวยวธเดยวกน
รปท 16 การใชค าสงเพอตดวตถรปทรงตรงกลางออก
12. คลกเลอกเสนขอบรอบวงกลมใหท างานแลวคลกเมน Objects -> Path -> Outline Stroke เพอเปลยนเสน
ขอบเปนภาพเวคเตอร
รปท 17 การออกแบบฉลากสนคา
13. คลกเมาสเลอกวตถทงสองใหท างานแลวคลกปม Unite ในหนา Pathfinder เพอรวมรปทงหมดทเลอกเขา
ดวยกน แบบนจะท าใหเลอกเขาดวยกน แบบนจะท าใหเลอกใหชนงานงายกวา
14. คลกเมาสยายฟองสบไปไวในรปสเหลยมทสรางไวในตอนแรก
106
15. เปลยนสฟองสบทสรางใหเปนสฟาออน ดวยการคลกเลอกแลวไปก าหนดสใหมในพาเนล COLOR
16. <Alt + คลกเมาส> คดลอกรปฟองสบ แลวใช Bounding Box ปรบปรบขนาดใหใหญบางเลกบางจนเตมพน
สเหลยม (ถา Bounding Box ไมปรากฏใหกดปม <E> บนคยบอรด )
รปท 18 ผลลพธการสรางฟองสบในรปทรงสเหลยม
17. คลกเปดพาเนล SWATCHES
18. คลกเมาสเลอกรปฟองสบและพนทสเหลยมใหท างาน จากนนคลกเมาสน าไปปลอยในพาเนล SWATCHES
19. ลบรปฟองสบตนแบบทงหมดทงไปดวยการเลอกและกดปม <Delete>
รปท 19 การน ารปทรงสเหลยมเขาไปวางในพาเนล Swatches
20. <Shift + คลก > เลอกรปวงกลมสฟาทงวงใหญและวงเลก
21. คลกเลอกลาย Pattern ฟองสบทสรางไวจากพาเนล SWATCHES
22. เราจะไดลายฟองสบมาเปนลายของวงกลมทเลอกทงสองวงเรยบรอยแลว
107
รปท 20 การเลอกสลายฟองสบจากพาเนลมาตกแตงฉลากสนคา
วาดรปภาพประกอบเปนรปการตนนารกๆ เพอใชประกอบในฉลากกน
1. คลกเครองมอ Pen Tool ใหท างานและก าหนดรายละเอยดของเครองมอดงน
• ก าหนดสในชอง Stroke เปนสฟา และ Fill เปน None
• ขนาดความหนาของเสนขอบ 1 pt
2. ใช Pen Tool และคลกเมาสไปบนกระดานวาดภาพ สรางรปทรงของเหด
3. ใชเครองมอ Convert Anchor Point Tool ดงใหโคงมน ตามภาพ
รปท 21 การใชเครองมอวาดภาพรปเหด
4. วาด วงกลมเลก ๆ มาตกแตงหลาย ๆ อน เลกบาง ใหญบาง ตามภาพ
108
รปท 22 การใชเครองมอวาดภาพรปเหด
5. วาดหนาตาใหกบรปเหดเพอใหดมชวตมากขน โดยใชเครอง pen tool วาด
รปท 23 การใชเครองมอวาดภาพรปเหด
6. ใชเครองมอ Convert Anchor Point Tool ดงใหโคงมน ตามภาพ
รปท 24 การใชเครองมอดงเสนใหโคงมน
7. วาดปาก พรอมใสส ใหสวยงาม ไดตวการตนไปใสในฉลากสนคาตอไป
109
รปท 25 ผลลพธรปเหนมใบหนา
หลงจากขนตอนนเราจะไดภาพการตนประกอบส าหรบใชงานบนฉลากสนคาเรยบรอยแลว ถาหากวาภาพทไดยงม
รายละเอยดไมถกใจ กสามารถปรบแตงเพมเตมไดดวยวธทผานมาทงหมด
เมอไดรายละเอยดทถกใจแลวใหคลกเมาสเลอกสวนประกอบทงหมดใหท างาน แลวคลกเมน Objects > Path >
Outline Stroke เพอเปลยนเสน Stroke ใหเปนวตถ เพอปองกนผลลพธทอาจจะผดเพยนไปไดเมอน าภาพไปยอหรอ
ขยาย
หลกจากนนใหเรายายต าแหนงเหดทวาดไวไปใสในฉลากทสรางขน พรอมวาดบอลลนค าพดเพมเตมขนมาอก
เลกนอย เทานกจะไดภาพประกอบฉลากสวยๆเอาไวใชงานตามทตองการ
• วาดบอลลนค าพดดวย Ellipse Tool
• วาดหางของกรอบค าพดเปนรปสามเหลยมดวย Pen Tool
110
รปท 26 การน ารปเหดทวาดมาใสในฉลากสนคา
ใสรายละเอยดตาง ๆ
เมอไดภาพประกอบทงหมดเรยบรอยแลว ในขนตอนตอไปเราจะตองมาใสรายละเอยดของฉลากลงไปจนครบ
ทกสวนประกอบดงทกลาวไวในหนาแรกของบทน
ในสวนของชอสนคาตาง ๆ เราสามารถใช Type Tool พมพอกษรลงไปบนภาพทท างานอยไดเลย สวน
ภาพประกอบประเภทโลโก หรอบารโคด
1. สรางขอความวงกลม อธบายเกยวกบ ผผลตผลตภณฑคอใคร ทอย จงหวดทผลต
2. สรางขอความสวนผสมของผลตภฑณ
3. สรางปายราคา เพอก าหนดราคาขายแกผซอสนคา
4. สรางบารโคดราคาสนคา
รปท 27 ผลลพธการออกแบบฉลากสนคา
111
ใบงานท 4.3
เรอง การจดการกบรปภาพและวตถ
จดประสงค
1. นกเรยนสามารถจดการกบรปภาพได
2. นกเรยนสามารถจดการกบวตถได
3. นกเรยนสามารถสรางหนงสอดวยไฟล PDF ได
4. นกเรยนสามารถบนทกไฟลงานได
5. นกเรยนสามารถพมพงานออกทางเครองพมพได
กจกรรมและแนวทางปฏบต
ใหนกเรยนสรางหนงสอเกยวกบสงตาง ๆ ทเสรมความร มา 1 เลม ไมต ากวา 12 หนา สามารถบนทกเปน ไฟล
PDF เพอปรนหนงสอสงไดในคาบถดไป
ขนตอนการสรางหนงสอ
1. คลกเมน file -> New
112
รปท 1 แสดงการก าหนดคาขนาดกระดาษขนาด A4
2. เลอกกระดาษขนาด A4 แนวตง ตงชอไฟล bookA4
3. ก าหนดเพม Artboards มาอก 12 หนา
รปท 2 แสดงการเพม artboard 8 หนา
4. ก าหนดคา Bleed ตามแบบ 0.0394 in เพอเปนขอบเขตขอความจะมเสนสแดงใหเหนเดนชด
113
รปท 3 แสดงเสน Bleed ทก าหนด จะสแดงเหนชดเจน
5. คลกเครองมอ เพอวาดรปสเหลยม โดย คลกทพนทวาง ๆ แลวใสคาก าหนดพนทสเหลยม ก าหนด
ขอบเขตลดขนาดจากขนาดจรง ลงมาดานละ ประมาณ 0.25 นว คอ ขนาดกระดาษ A4 8.25 x
11.60 เปนขนาดสเหลยม 8 x 11.33 ตามภาพ
รปท 4 แสดงเสน Bleed ทก าหนด จะสแดงเหนชดเจน
6. เมอไดสเหลยมมาแลวใหคลกทพาเนล Align เพอจดใหอยกงกลางหนากระดาษ ตามภาพ
114
รปท 5 แสดงก าหนดค าสง Align จดเสนขอบใหอยกงกลางกระดาษ
7. คลกขวาตรงกลางเสนไกดสเหลยม เลอกค าสง Make Guides
115
รปท 6 แสดงก าหนดค าสง Make Guides เพอสรางเสนไกดขอบเขตขอความ
8. จะไดเสนไกดสฟาออน ๆ ขนทกรอบกระดาษดานใน เพอใหท างานภายในกรอบเทานน
รปท 7 แสดงเสนไกดขอบเขตขอความ
9. น ารปภาพทเตรยมไวแลวมาใสใน Artboards ใหอยในขอบเขตเสนไกดทก าหนดไวแลว ใหครบทก
Artboards
10. พรอมใสเลขหนาทมมบน ซาย ขวา ตามแบบ
116
รปท 8 แสดงการน าภาพมาวางภายในเสนไกดขอบเขตขอความ
11. เมอท าเสรจครบทกหนาแลวโดยมปกหนาท Artboards ท 1 และปกหลงจดท าท Artboards หนา
สดทาย ใหบนทกไฟลเปน ไฟล PDF
12. เมอไดไฟล PDF แลว สามารถปรนงานหนงสอออกตามหนาทเรยงไวทละหนาไดตามตองการ
13. สามารถก าหนดการปรนทหนา ค หรอ หนาค กอน ใหคลกทปมค าสง more options->odd pages
เพอปรนหนาคกอน โดยจะเรมปรนหนาแรกคอปกหนา ตามดวย หนาค อน ๆ จบครบทกหนาค ตาม
ภาพ
117
รปท 9 แสดงการก าหนดใหปรนหนาค
14. เมอครบหนาคแลว ใหคลกทค าสง Even pages only ปรนหนาค โดยใหน ากระดาษทปรนหนาคมา
เมอสกครมาปรนตอหนาทยงวาง กจะสามารถปรนครบทงสองดานอยางงายดาย
รปท 10 แสดงการก าหนดใหปรนหนาค
15. เมอไดหนงสอแลวใหนกเรยน save file ตงชอ วา MyBook สงทางอเมล [email protected]
พรอมปรนและเยบเลมสงในคาบถดไป โดยใหออกแบบปกหนาและปกหลงมาอยางชดเจน
118
รปท 11 แสดงการก าหนดใหปรนหนาค
แบบฝกหดทายบท
บทท 4 การจดการกบรปภาพและวตถ
ค าชแจง ใหนกเรยนตอบค าถามตอไปน
1. อธบายขนตอนการน าเขาไฟลรปภาพตาง ๆ พอสงเขป
119
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
2. บอกขนตอนการยายและคดลอกรปภาพ พอสงเขป
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
3. บอกวธการปรบเปลยนขนาดของรปภาพ มกวธ อะไรบาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
4. อธบายขนตอนการปรบเปลยนขนาดรปภาพดวยพาเนล Transform มาพอเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
5. บอกวธการเลอกวตถดวย Selection Tool มาพอเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
6. บอกวธการจดเรยงวตถ มกแบบ อะไรบาง
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
7. บอกวธการสรางเลเยอรมาพอเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
8. บอกวธการสงพมพงานมาพอเขาใจ
……………………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
9. บอกขนตอนการสรางหนงสอมาพอสงเขป
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..
120
แบบทดสอบหลงเรยน
บทท 4 การจดการกบรปภาพและวตถ
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. ค าสงการน าภาพเขามาใชงานในโปรแกรคอขอใด
ก. File -> New
ข. File -> Open
ค. File -> Browse
ง. File -> Place
2. ขอดของการน าภาพบตแมพ มาใชงานคอขอใด
ก. มขนาดเลกภาพคมชด
ข. มขนาดใหญคมชด
ค. มขนาดปานกลางคมชด
ง. ไฟลมขนาดไมใหญเกนไป
3. ค าสงจดการกบไฟลภาพบตแมพ คอขอใด
ก. Window -> Links
ข. Window -> Control
ค. Window -> Tools
ง. Window -> Image Trace
4. ฝงไฟลใหตดกบชนงาน คอ ค าสงใด
ก. Select Image
ข. Embed Image
ค. Move Image
ง. Direct Image
5. ค าสงเคลอนยายวตถยอยคอขอใด
ก. Select tool
ข. Direct Selection tool
ค. Move tool
ง. Copy tool
121
6. ค าสง การเคลอนยายวตถ โดยระบพกดต าแหนง คอขอใด
ก. Move
ข. แกน X
ค. แกน Y
ง. Transform
7. ค าสง Align Objects คอ ค าสงใชท าอะไร
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. ค าสง Distribute Objects
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
9. ตองการจดล าดบวตถใหเลอนวตถไปไวดานหลง คอขอใด
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
10. ตองการจดล าดบวตถโดยใหเลอนวตถไปไวดานหนาสด
ก. Bring to front
ข. Bring forward
ค. Send Backward
ง. Send to Back
122
เฉลยแบบทดสอบหลงเรยน
บทท 4 การจดการกบรปภาพและวตถ
1. ค าสงการน าภาพเขามาใชงานในโปรแกรคอขอใด
ก. File -> Place
ข. File -> New
ค. File -> Open
ง. File -> Browse
2. ขอดของการน าภาพบตแมพ มาใชงานคอขอใด
ก. มขนาดเลกภาพคมชด
ข. ไฟลมขนาดไมใหญเกนไป
ค. มขนาดใหญคมชด
ง. มขนาดปานกลางคมชด
3. ค าสงจดการกบไฟลภาพบตแมพ คอขอใด
ก. Window -> Control
ข. Window -> Tools
ค. Window -> Links
ง. Window -> Image Trace
4. ฝงไฟลใหตดกบชนงาน คอ ค าสงใด
ก. Select Image
ข. Move Image
ค. Embed Image
ง. Direct Image
5. ค าสงเคลอนยายวตถยอยคอขอใด
ก. Move tool
123
ข. Select tool
ค. Direct Selection tool
ง. Copy tool
6. ค าสง การเคลอนยายวตถ โดยระบพกดต าแหนง คอขอใด
ก. Transform
ข. Move
ค. แกน X
ง. แกน Y
7. ค าสง Align Objects คอ ค าสงใชท าอะไร
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถในแนวเสนตรงเดยวกน
ค. จดเรยงวตถแนวตง
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. ค าสง Distribute Objects
ก. จดเรยงวตถจดระยะหางวตถใหเทากน
ข. จดเรยงวตถแนวนอน
ค. จดเรยงวตถแนวตง
ง. จดเรยงวตถในแนวเสนตรงเดยวกน
9. ตองการจดล าดบวตถใหเลอนวตถไปไวดานหลง คอขอใด
ก. Send Backward
ข. Bring to front
ค. Bring forward
ง. Send to Back
10. ตองการจดล าดบวตถโดยใหเลอนวตถไปไวดานหนาสด
124
ก. Bring forward
ข. Send Backward
ค. Bring to front
ง. Send to Back
แบบประเมนใบงาน
ค าชแจง ใหผประเมนท าเครองหมาย ✓ ลงในชองระดบคะแนน โดยพจารณาจากการปฏบตงานตามใบงาน
ของผเรยน ซงมเกณฑการพจารณา ดงน
ระดบคะแนน 2 หมายถง ปฏบตงานตามรายการประเมนไดถกตองสมบรณ
ระดบคะแนน 1 หมายถง ปฏบตงานตามรายการประเมนไดแตไมถกตองสมบรณ
ระดบคะแนน 0 หมายถง ปฏบตงานตามรายการประเมนไมได
ขอท
รายการประเมน
เกณฑการประเมน
หมายเหต ด
(2)
พอใช
(1)
ปรบปรง
(0)
1 ปฏบตตามขนตอนไดถกตอง
2 ใชเครองมอในการปฏบตถกตอง
3 ชนงานโดยรวมทปฏบตถกตอง สมบรณ
ครบถวน
4 งานเสรจตามเวลาทก าหนด
125
5 มความคดสรางสรรค
6 ศกษาคนควาดวยตนเอง
7 มความประพฤตทด ไมท าผดกฎระเบยบ
8 มความซอสตยในการท างาน
9 มความรบผดชอบ
10 ดแลความสะอาดหองเรยน
รวม
รวมคะแนนทงสน
ประเมนโดย ผเรยน ผสอน
รวมคะแนนทได .............................. คะแนนเฉลย ..........................................
ลงชอ.......................................ผประเมน
(.................................................)
1
บทท 5
ความรพนฐานของสออนโฟกราฟก Infographic
หวขอเรอง
1. ความหมายของสออนโฟกราฟก
2. หลกการออกแบบสออนโฟกราฟก
3. กระบวนการการออกแบบสออนโฟกราฟก
4. การสรางสออนโฟกราฟกอยางมประสทธภาพ
5. ขอควรระวงในการออกแบบสออนโฟกราฟก
6. เทคนคการออกแบบสออนโฟกราฟก
7. การออกแบบสออนโฟกราฟกดวยเลเยอร
8. แนวโนมในปจจบนเกยวกบการใชงานสออนโฟกราฟก
สาระส าคญ
การน าขอมลหรอความรมาสรปเปนสารสนเทศในลกษณะของขอมลและกราฟกทอาจเปนลายเสน
สญลกษณ กราฟแผนภม ไดอะแกรม แผนท ฯลฯ ทเปนภาพนงหรอภาพเคลอนไหว ดแลวเขาใจงายในเวลา
รวดเรวและชดเจนเปนการน าขอมลทเขาใจยากหรอขอมลทเปนตวหนงสอจ านวนมากมาน าเสนอในรปแบบตาง
ๆ อยางสรางสรรค ใหสามารถเลาเรองไดดวยตวเอง มองคประกอบทส าคญ คอ หวขอทนาสนใจ ภาพและเสยง
ซงจะตองรวบรวมขอมลตาง ๆ ใหเพยงพอ แลวน ามาสรป วเคราะห เรยบเรยง แสดงออกมาเปนภาพจงดงดด
ความสนใจไดด ชวยลดเวลาในการอธบายเพมเตม
สมรรถนะทพงประสงค
กราฟกทใชอาจเปนภาพ สายเสน สญลกษณ กราฟ แผนภม ไดอะแกรม ตาราง แผนท ฯลฯ จดท าใหม
ความสวยงาม นาสนใจ เขาใจงาย สามารถจดจ าไดนาน ท าใหการสอสารมประสทธภาพมากขน สอใหผชมเขาใจ
ความหมายขอมลทงหมดไดโดยไมจ าเปนตองมผน าเสนอมาชวยขยายความเขาใจอก
2
จดประสงคการเรยนร
เมอศกษาบทท 5 จบแลว นกเรยนสามารถ
1. บอกความหมายของสออนโฟกราฟกไดถกตอง
2. บอกหลกการออกแบบสออนโฟกราฟกไดถกตอง
3. อธบายกระบวนการการออกแบบสออนโฟกราฟกไดถกตอง
4. บอกการสรางสออนโฟกราฟกอยางมประสทธภาพไดถกตอง
5. บอกขอควรระวงในการออกแบบสออนโฟกราฟกไดถกตอง
6. อธบายเทคนคการออกแบบสออนโฟกราฟกไดถกตอง
7. อธบายการออกแบบสออนโฟกราฟกดวยเลเยอรไดถกตอง
8. บอกแนวโนมในปจจบนเกยวกบการใชงานสออนโฟกราฟกไดถกตอง
9. บอกความหมายของค าศพทคอมพวเตอร จ านวน 10 ค า
10. นกเรยนมความใฝร ใฝเรยน ขยน รบผดชอบ อดทน และมความคดรเรมสรางสรรค
3
บทท 5 ความรพนฐานของสออนโฟกราฟก Infographic
ค าสง จงท าเครองหมาย (X ) ลงหนาขอทถกตองทสดเพยงขอเดยว เวลา 15 นาท
1. ขอใดคอความหมายของสออนโฟกราฟก
ก. การสรางสอแบบมแตขอความ
ข. การสรางสอแบบมแตรปภาพ
ค. การสรางสอแบบผสมผสาน
ง. การสรางสอเนนรปภาพแทนขอความ ชดเจน เขาใจงายขน
2. หลกการออกแบบสออนโฟกราฟก มกแบบ
ก. 1
ข. 2
ค. 3
ง. 4
3. ขอใดคอหลกการในการออกแบบ
ก. มแบบแผนโครงสราง
ข. มรปแบบเขาใจงาย
ค. มรปแบบสวยงาม ใชงานงาย
ง. ถกทกขอทกลาวมา
4. กระบวนการออกแบบมกขนตอน
ก. 7
ข. 9
ค. 10
ง. 12
5. กระบวนการออกแบบสอ ขนตอนแรกคอขอใด
ก. การรวบรวมขอมล
ข. การอานขอมล
ค. การคนหาวธการ
ง. การระบปญหา
4
6. ขนตอนใด ทมการตรวจสอบความถกตองของขอมล
ก. การรวบรวมขอมล
ข. การอานขอมล
ค. การคนหาวธการ
ง. การระบปญหา
7. ขนตอนใดตองท าการเลอกรปแบบการน าเสนอแบบขอความหรอรปทรง
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. หลกการสรางสออนโฟกราฟกอยางมประสทธภาพคอขอใด
ก. ออกแบบใหเขาใจงาย
ข. ขอมลมความถกตอง
ค. ใชสดงดดความสนใจ
ง. ถกทกขอ
9. ขอใดคอขอควรระวงในการออกแบบสออนโฟกราฟก
ก. อยาใสขอมลมากเกนไป
ข. อยาใสสมากเกนไป
ค. ขอมลไมยงยากซบซอน
ง. ถกทกขอ
10. ประโยชนการออกแบบสออนโฟกราฟดแบบเปรยบเทยบคอขอใด
ก. เหนความแตกตางชดเจน เขาใจงาย
ข. เหนภาพรวมของขอด-ขอเสย
ค. ขอมลไมซบซอน
ง. ขอมลอานจากบนลงลาง
5
เฉลยแบบทดสอบกอนเรยน
บทท 5 ความรพนฐานของสออนโฟกราฟก Infographic
1. ขอใดคอความหมายของสออนโฟกราฟก
ก. การสรางสอแบบมแตขอความ
ข. การสรางสอแบบมแตรปภาพ
ค. การสรางสอแบบผสมผสาน
ง. การสรางสอเนนรปภาพแทนขอความ ชดเจน เขาใจงายขน
2. หลกการออกแบบสออนโฟกราฟก มกแบบ
ก. 1
ข. 2
ค. 3
ง. 4
3. ขอใดคอหลกการในการออกแบบ
ก. มแบบแผนโครงสราง
ข. มรปแบบเขาใจงาย
ค. มรปแบบสวยงาม ใชงานงาย
ง. ถกทกขอทกลาวมา
4. กระบวนการออกแบบมกขนตอน
ก. 7
ข. 9
ค. 10
ง. 12
5. กระบวนการออกแบบสอ ขนตอนแรกคอขอใด
ก. การรวบรวมขอมล
6
ข. การอานขอมล
ค. การคนหาวธการ
ง. การระบปญหา
6. ขนตอนใด ทมการตรวจสอบความถกตองของขอมล
ก. การรวบรวมขอมล
ข. การอานขอมล
ค. การคนหาวธการ
ง. การระบปญหา
7. ขนตอนใดตองท าการเลอกรปแบบการน าเสนอแบบขอความหรอรปทรง
ก. จดเรยงวตถแนวนอน
ข. จดเรยงวตถแนวตง
ค. จดเรยงวตถในแนวเสนตรงเดยวกน
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
8. หลกการสรางสออนโฟกราฟกอยางมประสทธภาพคอขอใด
ก. ออกแบบใหเขาใจงาย
ข. ขอมลมความถกตอง
ค. ใชสดงดดความสนใจ
ง. ถกทกขอ
9. ขอใดคอขอควรระวงในการออกแบบสออนโฟกราฟก
ก. อยาใสขอมลมากเกนไป
ข. อยาใสสมากเกนไป
ค. ขอมลไมยงยากซบซอน
ง. ถกทกขอ
10. ประโยชนการออกแบบสออนโฟกราฟดแบบเปรยบเทยบคอขอใด
ก. เหนความแตกตางชดเจน เขาใจงาย
7
ข. เหนภาพรวมของขอด-ขอเสย
ค. ขอมลไมซบซอน
ง. ขอมลอานจากบนลงลาง
.
ความหมายของสออนโฟกราฟก
Infographic มาจากค าวา Information + graphics
การน าขอมลหรอความรมาสรปเปนสารสนเทศในลกษณะของขอมลและกราฟกทอาจเปนลายเสน
สญลกษณ กราฟแผนภม ไดอะแกรม แผนท ฯลฯ ทออกแบบเปนภาพนงหรอภาพเคลอนไหว ดแลวเขาใจงายใน
เวลารวดเรวและชดเจน สามารถสอใหผชมเขาใจความหมายของขอมลทงหมดไดโดยไมจ าเปนตองมผน าเสนอมา
ชวยขยายความเขาใจ
ในความคดของขาพเจา สออนโฟกราฟก เปนการอธบายเรองราวตาง ๆ ดวยรปภาพ รปทรง วตถ ทม
รปรางลกษณะแบบตาง ๆ สามารถสอถงความหมายแทนตวหนงสอ หรอ ขอความตาง ๆ ใหดงายขน เนองจาก
สายตาของมนษยมกชอบดมากกวาการอาน และรปภาพตาง ๆ กสามารถอธบายความหมายไดมากกวา
ตวหนงสอ อยางเชน มค ากลาวไววา 1 ภาพ อธบายความรสกไดมากขนเปนลานเทา จงเปนเหตผลหนงใน
ปจจบนไดมการน ารปภาพ สญลกษณตาง ๆ มาชวยในการผลตสอสงพมพเพอเพมอรรถรสในการสอสารจากผสง
สารถงผรบสารมากขน และมประสทธภาพมากยงขนเชนกน
หลกการออกแบบสออนโฟกราฟก
8
หลกการออกแบบอนโฟกราฟก (Infographics) แบงเปน 2 สวน คอ
1. ดานขอมล ขอมลทจะน าเสนอ ตองมความหมาย มความนาสนใจ เรองราวเปดเผยเปนจรง ม
ความถกตอง
2. ดานการออกแบบ การออกแบบตองมรปแบบ แบบแผนโครงสราง หนาทการท างาน และความ
สวยงาม โดยออกแบบใหเขาใจงาย ใชงานงาย และใชไดจรง
ภาพท 5.1 แสดงการสรางสออนโฟกราฟกหลกการออกแบบ
ทมาhttps://www.learningstudio.info/infographics-desing/
กระบวนการการออกแบบสออนโฟกราฟก
การออกแบบอนโฟกราฟกส (Infographics) 10 ขนตอน
1. การรวบรวมขอมล (Gathering data) คดเลอกขอมลดบทรวบรวมมาแตทยงไมเปนระเบยบ โดยอาจ
ใชโปรแกรม Microsoft Excel เขยนแหลงอางองทมาของขอมลทเปนตนฉบบ บนทกภาพตาง ๆ ทเกยวของจาก
แหลงขอมลทหลากหลาย ไมควรแยกภาพหรอแผนภาพกบขอมลออกจากกน
2. การอานขอมลทงหมด (Reading everything) การอานขอมลเฉพาะจดเนนหรออานอยางผวเผนให
ผานไปอยางรวดเรวเพราะคดวาเสยเวลาจะท าใหไดขอมลไมสมบรณ ขอมลตาง ๆ ทเกยวของจะชวยใหเรา
มองเหนภาพรวมของประเดนส าคญ ผออกแบบอนโฟกราฟกตองมทกษะในการจดการขอมลและแนใจวาขอมลท
ส าคญไมถกละเลยทจะมา สนบสนนเรองราวทตองการน าเสนอ
3. การคนหาวธการเลาเรอง (Finding thee narrative) การน าเสนอขอมลทนาเบอจะท าใหอนโฟ-
9
กราฟกเรมทจดมงหมายเดยว ขยายความขอมลทซบซอน อธบายกระบวนการ เนนแนวโนนหรอสนบสนนขอ
โตแยง การหาวธการเลาเรองทนาสนใจอาจจะยงยากในระยะแรก ถาเราคนเคยกบขอมลทมอยจะท าใหสามารถ
เลาเรองราวได การใสใจกบเนอหาทส าคญทจะชวยใหการน าเสนอ ขอมลมคณคา
4. การระบปญหาและความตองการ (Identifying problems) เมอไดขอมลแลวน ามาตรวจสอบความ
ถกตอง อาจมขอมลทไมสนบสนนหวขอหรอประเดนท เราตองการน าเสนอ ควรมอภปรายหาขอมลทแทจรงเพอ
ระบปญหาและความตองการของผชม ขอมลทมการจดและมการออกแบบทด ฉะนนสอจะกลายเปนหลกฐานท
ไมถกตอง ขอมลตองถกตอง และเหนคณคาในรายละเอยดของขอมลทชดเจน
5. การจดล าดบโครงสราง (Creating hierarchy) การจดล าดบชนของขอมลเปนทนยมในการสรปขอมล
เปนการน าผชมใหมองเหนภาพรวมตงแต ตนจนจบ เปนวธการจดการกบขอมลในการสรางอนโฟกราฟกและตรง
ผชมตามโครงสรางล าดบจะสงเสรมใหผชมเขาถงขอมลเปนชวงระยะของการเลาเรอง ซงกลายเปนวธการท
แพรหลายในการออกแบบอนโฟกราฟก
6. การออกแบบโครงสรางขอมล (Building a wireframe) เมอพจารณาตรวจสอบคดเลอกขอมลอยาง
ละเอยดแลวจดแบงขอมลเปนล าดบชน และออกแบบโครงสรางของขอมล ผออกแบบควรท าความเขาใจกบภาพ
หรอกราฟกทเปนตวแทนของขอมลส าคญ ทจดไวเปนล าดบชนแลวน าไปใหผชมพจารณ การออกแบบทผานการ
โตเถยงบคคลในหลาย มมมองทใหขอเสนอแนะแตกตางกนไป จะเปนขอสรปของการจดท าโครงสรางอนโฟ
กราฟก
7. การเลอกรปแบบอนโฟกราฟก (Choosing a format) เมอสนสดการก าหนดภาพหรอกราฟกทเปน
ตวแทนของขอมลแลว วธจดท าขอมลทดทสด คอ การน าเสนอดวยแผนผง กราฟตาง ๆ เชน กราฟแทง กราฟเสน
กราฟกลม หรออาจจะใชไดอะแกรม หรอผงงานเพออธบายกระบวนการท างาน อาจน าแผนทมาประกอบในการ
เลาเรอง หรอบางทการใชตวเลขน าเสนอขอมลงายๆ อาจเปนวธทดทสด
8. การก าหนดภาพใหตรงกบหวขอ (Determining a visual approach) การเลอกใชภาพในการท าให
อนโฟกราฟกใหดดมสองแนวคด คอ ใชขอมลดบมาจดท าเปนกราฟ หรอแผนผงใหนาสนใจ ใชส การพมพ และ
การจดโครงสรางในการออกแบบงานใหมศลปะ และใชลายเสน วาดภาพหรอค าอปมาเปรยบเทยบ ไมแสดง
ขอมลตวเลขออกมาอยางชดเจน จะเหนเปนภาพแสดงแทน ขอมลคลายกบกราฟหรอแผนผงเทานน
9. การตรวจสอบขอมลและทดลองใช (Refinement and testing) เมอออกแบบอนโฟกราฟกเสรจ
แลวเรมตรวจสอบขอมลอยางละเอยด ผชมจะดทงขอมลและ ภาพทเลาเรองราวเพอใหแนใจวาผลงานทเสรจแลว
มคณภาพตรงกบหวขอและเปาหมาย ประเมนทงการออกแบบและจดเนนจนกระทงผลงานชดเจนและเขาใจงาย
ทดลองใหกลมตวอยางชมผลงานและใหขอคดเหนวาสามารถเขาใจไดงายหรอไมกลบมาระหวางผชมและกลม
ตวอยางจนกระทงลงตวไดขอยต จงน าเสนอเผยแพรสสาธารณะ
10
10. การออกแบบโครงสรางขอมล (Building a wireframe) เมอพจารณาตรวจสอบคดเลอกขอมลอยาง
ละเอยดแลวจดแบงขอมลเปนล าดบชน และออกแบบโครงสรางของขอมล ผออกแบบควรท าความเขาใจกบภาพ
หรอกราฟกทเปนตวแทนของขอมลส าคญ ทจดไวเปนล าดบชนแลวน าไปใหผชมวพากษวจารณ การออกแบบท
ผานการโตเถยงจากบคคลในหลาย มมมองทใหขอเสนอแนะแตกตางกนออกไป จะเปนขอสรปของการจดท า
โครงสรางอนโฟกราฟก
ภาพท 5.2 แสดงการสรางสออนโฟกราฟกภาพรวม ส านกงานการอาชวศกษา
หลกการสรางสออนโฟกราฟกอยางมประสทธภาพ
การสรางอนโฟกราฟกใหมประสทธภาพ (Designing effective infographics)
1. เนนทหวขอหลกหวขอเดยว (Focus on a single topic)
11
สงแรกทตองพจารณาคอหวขอหลกในการสรางอนโฟกราฟก คณจะมผลงานทมประสทธภาพ ถา
พยายามตอบค าถามเดยวจะชดเจนถารทศทางของสงทจะท า สงนจะขจดความยงยากส าหรบผอานและ ผชม
หลงจากก าหนดหวขอแลวก าหนดค าถามเฉพาะทตองการค าตอบในอนโฟกราฟก
2. ออกแบบใหเขาใจงาย (Keep it simple)
ตงแตเรมออกแบบขอมลตองแนใจวาขอมลไมอดแนนซบซอนจะท าจะใหการตความผดพลาดไมม
ประสทธภาพ
ภาพท 5.3 แสดงการสรางสออนโฟกราฟกทออกแบบใหเขาใจงาย
ทมาhttps://www.learningstudio.info/infographics-desing/
3. เปนขอมลสงส าคญ (Data is important)
การสรางอนโฟกราฟกตองค านงถงขอมลทเกยวกบหวขอเปนส าคญ การออกแบบตองไมท าเกน
ขอบเขตของหวขอ ซงจะเปนการท าลายขอมลทจ าเปน ตองแนใจวาการออกแบบเนนทขอมลและรปแบบ ของ
อนโฟกราฟก
4. แนใจวาขอเทจจรงถกตอง (Be sure facts are correct)
การท าขอมลไมถกตองจะลดความนาเชอถอของอนโฟกราฟก ดงนน กอนทจะสรางอนโฟกราฟกตอง
แนใจวาขอมลถกตอง อยาลมอานผลงานและตรวจสอบขอเทจจรงทถกตอง
5. ใหอนโฟกราฟกเปนตวเลาเรอง (Let it tell a story)
อนโฟกราฟกทมประสทธภาพสามารถเลาเรองราวดวยภาพวาดหรอกราฟก ซงสามารถบอกบางสง
12
บางอยางและสามารถถายทอดขอมลไดถงแมวาผชมจะไมไดอานขอมลมากอน
6. การออกแบบทดท าใหมประสทธภาพ (Good design is effective)
การบรรยายดวยภาพถามการออกแบบทดจะดงดดใจผชม สงส าคญ คอออกแบบอนโฟกราฟก ให
เขาใจงายใชความคดสรางสรรคออกแบบใหนาสนใจ ภาพ กราฟก ส ชนด แบบและชวง เปนสงส าคญในการ
ออกแบบ
ภาพท 5.4 แสดงการสรางสออนโฟกราฟกทออกแบบทดท าใหมประสทธภาพ
ทมาhttps://www.learningstudio.info/infographics-desing/
7. ใชสทดงดดความสนใจ (Choose attractive colors)
การใชสเปนสงจ าเปนควรเลอกใชสทกระตนดงความสนใจผชม ควรศกษาทฤษฎการใชสดวย ใชสให
ถกตองเหมาะสม กบขอความ สามารถออกแบบอนโฟกราฟกบางชนมสเพยงเลกนอยกมประสทธภาพได
13
ภาพท 5.5 แสดงการสรางสออนโฟกราฟกทใชสทดงดดความสนใจ
ทมาhttps://www.learningstudio.info/infographics-desing/
8. ใชค าพดทกระชบ (Use short texts)
การออกแบบภาพทใชในการน าเสนอจ าเปน ตองสรปขอความใหสนกระชบตรงกบจดหมายท
ตองการน าเสนออาจใชแผนปาย หรอขอมลสนๆ มาสนบสนนภาพ การท าเรองราวใหดงดดความสนใจอาจใช
ตวเลขมาสรป เปรยบเทยบขอมล และควรใชตวหนงสอทอานเขาใจงาย
9. ตรวจสอบตวเลขขอมล (Check your numbers)
ถาน าเสนอขอมลดวยตวเลขผานกราฟและแผนผงตรวจสอบความถกตองของตวเลขและภาพวาด
และตองรวาตวเลขไหนควรใชและไมควรมอย ดวยวธนจะท าใหอนโฟกราฟกมประสทธภาพมากขน
10. ท าไฟลอนโฟกราฟกใหเลก (Make the file size small)
ท าไฟลอนโฟกราฟกใหเลกเพอใหผชม เขาถงและดาวนโหลดขอมลไดงายและน าไปใชตอไดดตาม
จดประสงคทตองการ ดาวนโหลดเรวและใชเวลานอยในการถายโอนขอมลใสแฟลชไดร สามารถแนบไฟล สง
อเมลไปใหผอนแตไมควรลดคณภาพของรปควรใชไฟลทมคณภาพสงเพอทจะดงดดผชม
ขอควรระวงในการออกแบบสออนโฟกราฟก
1. อยาใชขอมลมากเกนไป (Don’t use too much text)
อนโฟกราฟกเปนการออกแบบโดยใชภาพ ควรมตวหนงสอนอยกวาภาพหรอแบงสวนเทา ๆ กน ซง
เหมาะส าหรบผทอานนอยและขนอยภาพขอมล ถาคณยงคงใสตวหนงสอมากและมภาพนอยกยงไมถง
วตถประสงคของอนโฟกราฟก ตอไปนเปนสงทชวยใหชวยใหนกออกแบบค าถงวาไมควรท า 10 อยาง
2. อยาท าขอมลทน าเสนอใหยงยากซบซอน (Dot’t make confusing data presentation)
การน าเสนอขอมลทยงยากซบซอนผดวตถประสงคของการออกแบบอนโฟกราฟก อยาเสยเวลา เนน
ขอความทไมจ าเปนและตองแนใจวาคณจดการกบขอมลใหชดเจนและเขาใจงาย ซงมกจะท าโดยการใช กราฟ
14
ภาพวาด และกราฟกอน ๆ มองดทอนโฟกราฟกเหมอนเปนผชมเองวาสามารถตอบค าถามทคณ ตองการบอก
ผชมหรอไม
3. อยาใชสมากเกนไป (Don’t overuse color)
การออกแบบอนโฟกราฟกโดยโดยใชสมากไปจะท าใหประสทธภาพในการน าเสนอขอมลนอยลง ผอาน
จะไมสามารถอานและเขาใจเนอหาไดด ควรศกษาจตวทยาการใชสทตดกนดวย เพอค านงสขภาพของผชม
ภาพท 5.6 แสดงการสรางสออนโฟกราฟกทใชสมากเกนไป
ทมา https://www.learningstudio.info/infographics-desing/
4. อยาใสตวเลขมากเกนไป (Don’t plea too number)
การใชตวเลขในการสรางอนโฟกราฟกมประสทธภาพแตอยาใชใหมากเกนไปจะท าให ผลผลตของคณ
ออกมาเหมอนเปนใบงานวชาคณตศาสตรจ าไววาคณตองใชกราฟกน าเสนอจ านวนตาง ๆ อยาใชตวเลขทงหมด
ในการท าใหขอมลยงยากซบซอน ออกแบบตวเลขทงายเทาทจะท าไดและแนใจวาขอมลถกตองเหมาะสมเขาใจ
งาย
15
5. อยาละเลยขอมลทไมสามารถระบแยกแยะได (Don’t leave figures unidentified)
อนโฟกราฟกบางเรองขาดตวเลขไมได ขอเทจจรงบางอยางตองมตวเลขขอมลทางสถตแตผชม อาจไม
เขาใจทงหมดถงแมจะมความช านาญในการออกแบบถาใสขอมลโดยไมระบค าอธบายลงไปดวยกจะเปนตวเลขท
ไมมประโยชนดงนน ตองแนใจวาใสปายระบค าอธบายขอมลแตละชด
ภาพท 5.7 แสดงการสรางสออนโฟกราฟกทมากเกนไป
ทมา https://www.learningstudio.info/infographics-desing/
16
6. อยาสรางอนโฟกราฟก (Don’t make it boring)
อนโฟกราฟกสวนมากจะใหความร ประโยชน และความบนเทง มจดมงหมายทการจดการขอมลใหผชม
เขาใจงายสรางอนโฟกราฟกใหนาเบอจะไมดงดดความสนใจของผชม ตองวางแผนสราง แนวทางของเรองและ
การน าเสนอทด จงจะบอกสามารถบอกเรองราวแกผชมตามจดประสงคทตงไวไดอยางมประสทธภาพ
7. อยาใชวธการพมพผด (Don’t misuse typography)
หลกการพมพมบทบาททส าคญในการออกแบบทชวยใหอนโฟกราฟกดดขน ท าใหงายในการ ถายทอด
ขอมล แตถาใชผดวธจะเปนสงทเปนผลเสยในการออกแบบ เราตองรเทคนคเพอทจะใชการพมพทดทสดในการ
น าเสนอและจะไมท าใหการตพมพผดไป การใชวธการพมพถกตองจะท าใหการตความ ไมไขวเขว สงเกตการใชส
ทดและขนาดของ ตวอกษร ดวย
8. อยาน าเสนอขอมลทผด (Don’t present wrong information)
ไมมใครอยากเหนการน าเสนออนโฟกราฟกผด เพอใหแนใจความตรวจสอบขอมลสองครงโดยเฉพาะการ
ใชขอมลทางสถตถาขอมลผดพลาดจะท าใหผอานเขาใจผดเปนสงไมด ขอมลในอนโฟกราฟก จะตองแมนย า
นาเชอถอ และถกตอง
9. อยาเนนทการออกแบบ (Don’t focus on design)
อนโฟกราฟกไมจ าเปนตองเนนทการออกแบบใหสวยงามควรเนนทการน าเสนอขอมลทถกตอง การ
ออกแบบอยางสวยงามจะไมมประโยชนถามขอมลผดพลาดหรอประโยชนนอย ดงนนกอนสราง อนโฟกราฟกด
วามขอมลสามารถน าเสนอไดชดเจนแตไมไดสอหมายความทด จงแนนอนวาการออกแบบมความส าคญมาก สอ
อนโฟกราฟกเปนการผสมผสานระหวางขอมลและการออกแบบกราฟกอยางมประสทธภาพ เชน ตวอยางตอไป
เปนปญหาหนง พบบอยคอ อนโฟกราฟกจ านวนมากดดแตท าใหคนสบสนวาตองการจะสออะไร เนองจากไมได
จดวางขอมล โดยเฉพาะตวเลขในทางทรกษาความหมายของมนเอาไว ตวอยางหนงทสะทอนปญหานคอ อนโฟ
กราฟกเรอง “ส ารวจราคากาแฟคาปชโนเยน” จากแฟนเพจของนตยสารฉลาดซอ มลนธเพอผบรโภค ส ารวจ
ราคา กาแฟคาปชโนเยน ปญหาของอนโฟกราฟกชนนคอ เสนทลากรปถวยกาแฟแตละยหอไปยงราคา รวมถง
การจดวางต าแหนงถวยกาแฟตาง ๆ ไมมความเกยวของใด ๆ กบตวเลข “ราคา” ทแสดงเลย อยางเชน ถวย
กาแฟขวาสดมราคาถกทสด คอ 30 บาท แตรปถวยกลบอยสงกวากาแฟถวยทสองจากซายทมราคาแพงทสดใน
รป คอ 125 บาท สวนเสนทลากจากราคา 125 บาทไปทรปถวยทสนกวาเสนทลากจากถวยกาแฟทถกกวาบาง
ถวย เชน เสนทเชอมกาแฟกบปายราคา 67 บาท การทความยาวของเสนและการเรยงล าดบถวยกาแฟไมมความ
17
เกยวโยงใด ๆ กบตวเลขราคา ท าให ‘สาร’ หลกทตองการจะสอ นนคอ การเปรยบเทยบราคาของกาแฟ คาปช
โนยหอตาง ๆ ไมชดเจนเทาทควร สงผลใหอนโฟกราฟกชนนแมจะ ‘สวย’ แตไมคอย ‘สอ’ ผดตองใชเวลาสกพก
กวาจะเขาใจวากาแฟยหออะไรแพงกวาอะไร ความสบสนขอนแกไดงาย ๆ ดวยการเรยงล าดบราคาจากแพงสด
ไปถกสด หรอถกสดไปแพงสด และเปลยนความยาวของเสนใหไดสดสวนตามราคา คนมองเพยงครงเดยวจะได
เหนชดวายหอไหนแพงกวากน
ภาพท 5.8 แสดงการสรางสออนโฟกราฟกทมากเกนไปแตไมสอความหมาย
ทมา http://thaipublica.org/2012/09/good-infographics-1/
10. อยาใชแบบเปนกลม (Don’t use a cirrfcus layout)
อนโฟกราฟกทดจะสามารถชน าผชมดแลเขาใจไดทงหมด อยาใสองคประกอบทกททเราคดและ อยา
ออกแบบเปนวงกลม ควรพจารณาวาผชมจะสนใจจดไหนตองแนใจวาผชมสามารถเขาใจในวธการ น าเสนอ ตอง
ไมใหผชมอานยงยากเพราะเนองจากไมไดใสขอมลทดไว
เทคนคการออกแบบสออนโฟกราฟก
18
การน าเสนอขอมลในรปแบบ Infographic กลายเปนทางเลอกใหมในการน าเสนอขอมลทไดรบความ
นยมและเรมพบเหนกนไดบอยมากขนในเมองไทย ส าหรบใครทสนใจและอยากทดลองท าอนโฟกราฟกดวย
ตนเองคงจะดมาก เนองจากเปนสอทไดการยอมรบวามประสทธภาพในการสอสารไดรวดเรว กะทดรด และ
ทนสมย มจดดงดดใจ จากผสงสารถงผรบสารมากทสดจากสอสงพมพทมอยในปจจบน
1. ก าหนดเปาหมายอยางชดเจน
ในการน าเสนออนโฟกราฟกวาตองการน าเสนอเพอจดประสงคอะไร เชน ตองการเขาถงและหา
ลกคากลมใหม, เพอสรางภาพลกษณของแบรนด, เพอการศกษา หรอเพอตองการความบนเทงกบผอาน อยาลม
วาการก าหนดเปาหมายอยางชดเจนในการท าอนโฟกราฟกจะชวยท าใหสามารถเลอกรปแบบการน าเสนอได
อยางงายดายและเหมาะสมมากขน
2. ก าหนดกลมเปาหมายในการน าเสนอวาเปนผชมกลมไหน
เพอเปนประโยชนในการเลอกหวขอและการเลอกใชระดบของภาษาใหเหมาะสมกบ
กลมเปาหมาย
3. มการก าหนดใจความส าคญในการน าเสนออนโฟกราฟกเพยงเรองเดยวเทานน เพอเปนการ
ปองกนการสบสนของผชมในการเขาถงขอมล
4. เนอหาทน าเสนอบนอนโฟกราฟกตองมความทนสมยใหม รวมถงตองสามารถสอสารไดอยาง
ตรงประเดน, สนและกระชบ เนองจากผลการส ารวจพบวาผชมสวนใหญใชเวลาในการอานขอมลมากทสดเพยง 3
นาทเทานน
5. มการส ารวจขอมลทใชในการน าเสนอมาเปนอยางด ซงหมายถง มการรวบรวมขอมลจากรอบดาน
ไมวาจะเปนขอมลจากโซเชยลมเดย, สถตและขอมลสาธารณะเพอใหเหนถงมมมองทหลากหลายและมความ
ถกตองยงขน
6. น าเสนอหวเรอง (Header) ทดงดดความสนใจและนาตดตาม โดยผลส ารวจพบวาผชมกวา 90%
จะตามเขาไปดเนอหาบนอนโฟกราฟกเพมเตมหากพบวาหวเรองน าเสนอนนมความนาสนใจ
19
7. ออกแบบอนโฟกราฟกใหมความโดดเดนสะดดตา ซงการออกแบบนอกจากชวยเรองความ
สวยงามและยงชวยใหผชมสามารถเขาถงและท าความเขาใจกบขอมลทน าเสนอไดงายยงขน
8. มการบอกตอและแชรอนโฟกราฟกไปอยางกวางขวางผานชองทางตาง ๆ ไมวาจะเปน โซเชยล-
มเดยอยาง Facebook, Twitter และ Pinterest รวมถงการน าเสนออนโฟกราฟกบนเวบไซตทเปนแหลงรวบรวม
อนโฟกราฟก เพอเพมการมองเหนจากผชมเพมมากขน
9. ระบและอางองถงแหลงทมาของขอมลอยางชดเจน
10. มการสรปขอมลทงหมดทน าเสนอ เพอชวยใหผชมสามารถเขาใจถงใจความส าคญของเนอหาท
น าเสนอไดอยางถกตองและตรงประเดน
ทมา: thumbsup.in.th/2013/08/10-rules-about-infographic
การออกแบบสออนโฟกราฟกดวยเลเยอร
1. Visualized Article
20
ภาพท 5.9 แสดงการสรางสออนโฟกราฟกเปลยนบทความเปนภาพ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-09.png
เหมาะส าหรบการน าบทความ งานเขยน มาเลนผาน Infographic เพราะฉะนน Infographic
แบบนจงตองใชการน าเสนอทเหมาะสมกบขอมลแตละชนด เชน ถามตวเลขกควรน าเสนอผานกราฟแบบตาง ๆ
หรอตวภาพประกอบ หรอ icon
ภาพท 5.10 แสดงการสรางสออนโฟกราฟกแบบขอมลแตละชนด
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-12.png
2. Listed
21
ภาพท 5.11 แสดงการสรางสออนโฟกราฟกมหลายหวขอยอย
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-12.png)
เปน Infographic ทคนไทยเรานาจะคนเคยกนด มกใชตวเลขน าในเฮดไลนหรอหวขอใหญ เชน “5 วธ”
ดแลหนสวย, “4 เทคนค” พชตใจนายจาง การน าเสนอแบบเปนขอ ๆ แบบนเหมาะกบเรองไมยาวนก และไม
ควรเปนเรองทเครยดมากเกนไป
ภาพท 5.12 แสดงการสรางสออนโฟกราฟกแบบเปนหวขอ
(http://infographic.in.th/wp-content/uploads/2015/08/type-13.png).
3. Comparison
22
ภาพท 5.13 แสดงการสรางสออนโฟกราฟกแบบเปรยบเทยบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-08.png)
เหมาะส าหรบใชเพอเปรยบเทยบระหวางของสงหนงกบอกสงหนง โดยการน าเสนอคกนแบบนท าใหเหน
ภาพไดชดเจนวาแตกตางอยางไรบาง มเทคนค คอ ใชการจดวางทเหมอนกนทงสองฝง ท าใหเหนความตางท
ชดเจน ใชสคตรงขามเปนตวแบงฝง ท าใหดงายขน
ภาพท 5.14 แสดงการสรางสออนโฟกราฟกแบบเปรยบเทยบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-14.png
23
4. Structure
ภาพท 5.15 แสดงการสรางสออนโฟกราฟกแบบเนนทสวนประกอบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-11.png
เหมาะกบการใชอธบายสวนประกอบของบางสง มเทคนค คอ พยายามสรางภาพใหเหนแตละ
สวนประกอบ เชน ภาพเหมอนสแกนเขาไปภายใน หรอ การแยกแตละสวนออกหางกน ไมซอนกน
24
ภาพท 5.16 แสดงการสรางสออนโฟกราฟกแบบเนนทสวนประกอบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-15.png
5. TimeLine
ภาพท 5.17 แสดงการสรางสออนโฟกราฟกแบบเนนทสวนประกอบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-03.png
เหมาะส าหรบใชเรองเลาประวตความเปนมาเปนไปของสงหนง โดยใชเสนแทนระยะเวลา สามารถใชได
กบทกอยาง เชน ประวตคน ประวตองคกร ประวตสถานท
25
ภาพท 5.18 แสดงการสรางสออนโฟกราฟกแบบเลาประวตความเปนมา
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-16.png
6. Flowchart
ภาพท 5.19 แสดงการสรางสออนโฟกราฟกแบบเลาประวตความเปนมา
(http://infographic.in.th/wp-content/uploads/2015/08/type-04.png)
เปนการน าเสนอแบบเปนล าดบขน เหมาะกบการเสนอเปนควซใหผอานไดทราบค าตอบทตองการ
โดยการอานไลลงไปตามเสนจนถงดานลางสด
26
ภาพท 5.20 แสดงการสรางสออนโฟกราฟกแบบมค าถามและค าตอบ
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-17.png
7. RoadMap
ภาพท 5.21 แสดงการสรางสออนโฟกราฟกแบบเปนขนตอน
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-02.png
เปนการอธบายทละขนตอน เหมาะกบการอธบายขนตอนการท างาน หรอการเดนทาง เชน ขนตอนการ
ท างานขององคกร ขนตอนการนบพนกงานเขาท างาน การเดนทางของเดกนกเรยนสการเปนนสต
27
.
ภาพท 5.22 แสดงการสรางสออนโฟกราฟกแบบเปนขนตอน
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-18.png
8. Useful Bait
ภาพท 5.23 แสดงการสรางสออนโฟกราฟกแบบเปนขนตอน
(http://infographic.in.th/wp-content/uploads/2015/08/type-18.png)
28
เปน Infographic ทท าใหเราเหนวธท าบางอยาง โดยทเราเหนแลวสามารถน าไปใชไดทนท โดยม
เทคนคในการท าคอ ตองใหความส าคญกบการอานงาย และความเขาใจงาย มากกวาความสวยงาม
ภาพท 5.24 แสดงการสรางสออนโฟกราฟกแบบเปนขนตอน
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-19.png
9. Number Porn
29
ภาพท 5.25 แสดงการสรางสออนโฟกราฟกแบบมตวเลข
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-07.png
คอ Infographic ทเตมไปดวยตวเลข และกราฟ หากคณมตวเลขทนาสนใจมากเพยงพอกสามารถ
น าเสนอในรปแบบนได
ภาพท 5.26 แสดงการสรางสออนโฟกราฟกแบบเปนขนตอน
ทมา http://infographic.in.th/wp-content/uploads/2015/08/type-20.png
แนวโนมในปจจบนเกยวกบการใชงานสออนโฟกราฟกดวยเลเยอร
อนโฟกราฟกจะมขนมาเนนนานหลากหลายรปแบบ แตสงทผลกดนใหสอ “อน” สด ๆ ได ณ ขณะนก
เพราะสอไดมาท างานรวมกบ “เครอขายสงคม” ทสามารถกระจายขอมลไดอยางรวดเรวและงายดายเหมอนไฟ
ลามทง
30
การใชงานอนโฟกราฟก เพอสอสารขอมลทซบซอนเรมไดรบความนยมอยางแพรหลายในป 2005
กระแสของสอชนดนแรงขนมาพรอม ๆ กบเวบอยาง dig และ reddit ทรวบรวมและเผยแพรขาวสารบทความ
ดานเทคโนโลย โดยท างานรวมกบเครอขายสงคม เปดชองทางใหใครกไดโพสตขอมลทนาสนใจขนมา และหาก
โพสตนนเขาทา สมาชกกจะเขามาชวยกน “ขด” (dig) ยงโพสตไหนมยอดขดเยอะกจะยงขนมาอยดานบนเหนอ
โพสตอน ๆ เหตนท าใหบรรดาบลอกเกอรนกโพสตตางแขงขนกนจดเตมใหกบโพสตของตนเอง ใสลกเลนกนเตมท
ทงภาพ ดนตร ไฟลวดโอ ฯลฯ จนในทสด กมคนหวใสงดเอาอนโฟกราฟกขนมาใชเปนไมตาย ท าใหสอไดรบความ
นยมและแพรกระจายอยางรวดเรวไปสวงการตาง ๆ
ภาพท 5.27 แสดงการสรางสออนโฟกราฟกแบบเครอขายสงคมในยคปจจบน
ทมา http://www.tcd.or.th/src/16562/www-tcdcconnect-com/Infographic
ในตางประเทศ สออนโฟกราฟกถอเปนอาวธส าคญของส านกขาวตาง ๆ ใครทออกแบบได สวย สอสารด
กจะถอไพเหนอกวา เมอครงทมการเลอกตงประธานาธบดสหรฐในป 2008 ส านกขาวทกแหงตางพากนออกแบบ
สออนโฟกราฟกเพอรายงานความคบหนา คะแนนนยม รวมไปถงแคมเปญหาเสยงตาง ๆ ของผสมคร หลายคนยง
ใชสออนโฟกราฟกเพอชวยอธบายถงนโยบาย การใชงบประมาณ และอน ๆ อกดวย
31
ภาพท 5.28 แสดงการสรางสออนโฟกราฟกเกยวกบงานดานการเมอง
ทมา http://www.tcd.or.th/src/16562/www-tcdcconnect-com/Infographic
สรปสาระส าคญทายบทท 5
บทนกลาวถง การน าสออนโฟกราฟก Infographic ซงเปนสอทถอวาเปนการเปดโอกาสใหกราฟกดไซ
เนอรไดโชวทกษะดานการสอสารกนแบบเตมท เนองจากมการแปลงขอมลใหออกมาเปนภาพกเปนสงทคนท ากน
มาอยแลวในอดต ไมวาจะเปนภาพถาย ภาพวาด กราฟก กราฟรปทรงตาง ๆ ตาราง แผนท แผนผง หรอ
ไดอะแกรม แตทกษะทางดานอนโฟกราฟกนนจ าเปนตองจดระเบยบขอมลททงมากและหลายหลายให “จบได
ในภาพเดยว” ซงบทนไดกลาวถงความหมาย ความเปนมา เทคนคการสรางสออนโฟกราฟกอยางมประสทธภาพ
และแนวโนมของสออนโฟกราฟกในปจจบน หากนกเรยนมความเขาใจหลกการท างานและสามารถสรางสอ
อนโฟกราฟกได นกเรยนกจะน าความรทไดไปพฒนาตนเองเปนผผลตสอทดตอไปไดในอนาคต
32
ค าศพท หนวยท 5
ค าศพท ความหมาย
Gathering ชมนม รวบรวม
Reading การอาน
Finding คนหา
Identifying ระบ
Creating สราง
Focus เนน
33
Effective ประสทธภาพ
Typography การพมพ
Layer ระดบชวงชน
Unidentified หาขอมลไมได
ใบงานท 5.1
เรอง ความรพนฐานของสออนโฟกราฟก Infographic
จดประสงค
1. นกเรยนสามารถออกแบบสออนโฟกราฟกได
2. นกเรยนสามารถออกแบบสออนโฟกราฟกภาพรวมเกยวกบสถานททองเทยวได
3. นกเรยนสามารถออกแบบสออนโฟกราฟกดวยเลเยอรได
34
4. นกเรยนสามารถบนทกไฟลงานแบบตาง ๆ ได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบสออนโฟกราฟกภาพรวมเกยวกบสถานททองเทยว มขนตอนการท าดงน
รปท 1 รปสออนโฟกราฟกสถานททองเทยวจงหวดเชยงราย
1. เปดเอกสาร ก าหนดขนาดกระดาษ A4 แนวนอน
2. น ารปภาพมาเปนพนหลง คลกเมน file -> Place
รปท 2 เรยกใชค าสงเพอน าเขารปภาพ
35
รปท 3 น าเขารปภาพเพอเปนพนหลง
3. ก าหนด สรปภาพใหจางลง คลกทปมค าสง Opacity ก าหนดคา 10%
รปท 4 เรยกใชค าสงเพอใหรปภาพสจางลง
4. พมพขอความเกยวกบหวขอเรองทจะท า คลกทเครองมอ Type tool
รปท 5 เรยกใชค าสงพมพขอความ
5. พมพค าวา “แอวเชยงรายสไตลไน ตรงใจคณทสด”
36
รปท 6 เรยกใชค าสงพมพขอความ
6. ใสสขอความตามชอบ เพอเนนขอความใหเหนชดมากขน และน า Symbols มาตกแตงขอความ
รปท 7 เรยกใชเครองมอ symbols น ารปภาพมาตกแตงสอ
7. สรางวงกลมเปนพนหลง เพอโยงเรองราวรปภาพ คลกทเครองมอ Ellipse tool วาดวงกลม ตาม
แบบ 2 อน สเขยวและสขาว ปรบ Opacity ก าหนดคา 70%
37
รปท 8 เรยกใชเครองมอ Ellipse tool วาดรปทรง
8. น าเขารปภาพสถานททองเทยวคลกเมน file ->place
9. วาดรปทรงกลม มาทบรปภาพ เลอก 2 วตถ คลกขวา เลอกค าสง Make Clipping Mask
รปท 9 เรยกใชค าสง Make Clipping Mask
10. วาดรปทรงกลมขนาดเลกมาวางขาง ๆ รปภาพทแมสเสรจแลว เพอใสค าอธบายรปภาพ
11. พมพชอสถานททองเทยว ทกภาพ
38
รปท 10 สรางรปทรงใสขอความอธบายภาพ
12. สรางค าอธบายสของชอสถานททองเทยว คลกท เครอง Ellipse วาดรปทรงกลมเลก ๆ ใสสตามท
ไดใสไวในรปภาพ
13. ใสขอความอธบายส สน าเงน สถาททองเทยวคอ วด สมวง เปนแหลงชอบปง สเขยว เปนทเทยว
ธรรมชาต ตามภาพ
14. น ารปภาพจากพาเนล Symbols มาตกแตง
รปท 11 สรางรปทรงใสขอความอธบายภาพตามส
15. ใหแยก layer ออกเปนชน ๆ layer1 ใชวางพนหลง, layer2 ใชงานขอความ, layer3 ใชงาน
รปภาพ, layer4-7 ใชวางรปภาพสถานททองเทยวทละรป
39
รปท 12 เลเยอรแตละล าดบชนของสออนโฟกราฟกสถานททองเทยว
16. ใสรปสถานททองเทยวใหครบตามภาพ
รปท 13 ผลลพธสออนโฟกราฟกสถานททองเทยวจงหวดเชยงราย
17. จดเกบไฟลทเมน file ->save as หรอ หากตองการน าไปขนเวบไซต ใหใชค าสง save for web
ไฟลจะมขนาดเลก น าไปใชงานไดสะดวก
40
ใบงานท 5.2
เรอง ความรพนฐานของสออนโฟกราฟก Infographic
จดประสงค
1. นกเรยนสามารถออกแบบสออนโฟกราฟกได
2. นกเรยนสามารถออกแบบสออนโฟกราฟกภาพรวมเกยวกบผลตภณฑทางธรกจได
3. นกเรยนสามารถออกแบบสออนโฟกราฟกดวยเลเยอรได
4. นกเรยนสามารถบนทกไฟลงานแบบตาง ๆ ได
กจกรรมและแนวทางปฏบต
ใหนกเรยนออกแบบสออนโฟกราฟกภาพรวมเกยวกบผลตภณฑทางธรกจ มขนตอนการท าดงน
41
รปท 1 ผลลพธสออนโฟกราฟกผลตภณฑทางธรกจ
1. เปดเอกสาร ก าหนดขนาดกระดาษ A4 แนวนอน
2. สรางพนหลง คลกเครองมอ Rectangle tool
รปท 2 เครองมอวาดสเหลยม
3. น ารปภาพมาเปนพนหลง คลกเมน file -> Place คลกเลอกรปภาพพนหลงทเตรยมไว
42
รปท 3 การน าเขารปภาพจากค าสง Place
4. น ามาวางทเอกสารสวนดานลาง ตามภาพ
รปท 4 พนหลงทท าการสรางเสรจแลวพรอมรปภาพพนหลง
5. วาดรปเมฆ ใชเครองมอ Pen tool วาดตามแบบในภาพ
รปท 5 ใชเครองมอวาดภาพเพอท ารปเมฆ
43
6. ดงเสนใหมความโคงมากขน คลกเครองมอ Convert Anchor Point tool ดงเสนทละจดใหโคงมน
ตามภาพ
รปท 6 การเรยกใชค าสง Convert Anchor Point tool
รปท 7 ผลลพธท าการใหค าสงดงใหโคงมนแลว
7. ก าหนดคาใหภาพเบลอ ทเมน Effect -> Blur -> Gaussian Blur ก าหนดคา 38 pixels
รปท 8 เรยกใชค าสงกราฟกท าใหภาพเบลอ
Commented [sf1]: ช
Commented [sf2R1]:
44
รปท 9 ก าหนดคาความเบลอของรปภาพ
8. ลดความสวางท ค าสง Opacity ก าหนดคาท 60%
รปท 10 ก าหนดคา ค าสง Opacity ลงความสวางของภาพ
9. คดลอกรปเมฆ และยอใหมขนาดเลกลง น ามาไวดานลาง ตามภาพ
รปท 11 ผลลพธสออนโฟกราฟกทสรางลดความสวางของเมฆลงแลว
10. ใสโลโกชอรานคา บรษท ทเตรยมไว เมน file -> place คลกทรปภาพแลวน ามาวางตามภาพ
45
รปท 12 น าเขาภาพโลโกของผลตภณฑ
11. น าเขารปภาพผลตภณฑทเตรยมไว คลกทเมน file -> place เลอกรปภาพ
รปท 13 น าเขาภาพผลตภณฑมาใสในสอ
12. น าเขารปภาพผลไมทเตรยมไว น ามาวางขาง ๆ รปผลตภณฑ ตามภาพ
รปท 14 น าเขารปภาพผลไมมาใสในสอ
46
13. คลกเครองมอ Type tool เพอพมพขอความ
รปท 15 การเรยกใชค าสงเพอพมพขอความ
14. พมพขอความ “ น าฝรง 98% ก าหนดรปแบบอกษร และขนาด ทพาเนล Character
98% GUAVE JUICE”
รปท 16 ผลลพธขอความทพมพตามแบบ
15. ใสเสนตรงใตขอความ เลอกเสน แลวคลกทพาเนล Brusher เพอเลอกรปแบบทสวยงามตาม
ตองการ
รปท 17 การเรยกใชค าสงเลอกลวดลายเสนแบบตาง ๆ
47
รปท 18 ผลลพธขอความพรอมเสนลวดลาย
16. สรางวงกลม คลกทเครองมอ Ellipse tool
รปท 19 การเรยกใชค าสงเพอวาดรปทรงกลม
17. วาดวงกลม คลกเครอง pen tool วาดสามเหลยมขางในวงกลม แลวใชเครองมอ convert anchor
point tool ดงเสนทวาดใหโคงมน ตามภาพ
รปท 20 การสรางรปทรงกลมโดยใชเครองมอ pen tool
18. ใสลวดลายเสนทพาเนล Brusher ใหคลกเปดเมนค าสงเพมทมมลางซายมอ
48
รปท 21 การเรยกใชค าสงเสนลวดลายตาง ๆ
19. คลกทเสนวงกลม แลวคลกเลอกลวดลายเสนแบบตาง ๆ ตามภาพ
รปท 22 การเลอกลวดลายรปแบบเสนแบบตาง ๆ และผลลพธทได
20. พมพขอความตามแบบ
49
รปท 23 ผลลพธการเลอกเสนลวดลายแลว
21. จดเกบไฟลทเมน file -> save as ตงชอไฟล my infoproduct สงไฟลทเมล
22. ใหนกเรยนปรนสออนโฟกราฟกทเสรจแลวออกทางเครองพมพสงครผสอนในคาบถดไป
แบบฝกหดทายบท
บทท 5 ความรพนฐานเกยวกบสออนโฟกราฟก Infographic
ค าชแจง ใหนกเรยนตอบค าถามตอไปน
1. อธบายความหมายของสออนโฟกราฟก พอเขาใจ
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
2. บอกหลกการออกแบบสออนโฟกราฟก มกแบบ อะไรบาง
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
3. บอกกระบวนการออกแบบสออนโฟกราฟก มกแบบ อะไรบาง
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
4. อธบายขนตอนการสรางสออนโฟกราฟกอยางมประสทธภาพ มาพอสงเขป
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
5. บอกขอควรระวงในการออกแบบสออนโฟกราฟกมาสก 5 ขอ
50
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
6. บอกเทคนคการออกแบบสออนโฟกราฟก มาสก 3 ขอ
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
7. ยกตวอยางขนตอนการออกแบบสออนโฟกราฟกดวยเลเยอรมา 1 ตวอยาง
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
8. บอกแนวโนมเกยวกบการใชงานสออนโฟกราฟกในยคปจจบน วาเปนอยางไร
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
แบบทดสอบหลงเรยน
บทท 5 ความรพนฐานเกยวกบสออนโฟกราฟก Infographic
ค าสง จงเลอกค าตอบทถกทสดเพยงขอเดยว
1. ขอใดคอความหมายของสออนโฟกราฟก
ก. การสรางสอเนนรปภาพแทนขอความ ชดเจน เขาใจงายขน
ข. การสรางสอแบบมแตขอความ
ค. การสรางสอแบบมแตรปภาพ
ง. การสรางสอแบบผสมผสาน
2. ขอใด ไมใช หลกการในการออกแบบ
ก. เนอหาเยอะ ๆ เขาไว
ข. มแบบแผนโครงสราง
ค. มรปแบบเขาใจงาย
51
ง. มรปแบบสวยงาม ใชงานงาย
3. กระบวนการออกแบบสอ ขนตอนแรกคอขอใด
ก. การอานขอมล
ข. การคนหาวธการ
ค. การรวบรวมขอมล
ง. การระบปญหา
4. ขนตอนใด ทมการตรวจสอบความถกตองของขอมล
ก. การรวบรวมขอมล
ข. การระบปญหา
ค. การอานขอมล
ง. การคนหาวธการ
5. ขนตอนใดตองท าการเลอกรปแบบการน าเสนอแบบขอความหรอรปทรง
ก. จดเรยงวตถในแนวเสนตรงเดยวกน
ข. จดเรยงวตถแนวนอน
ค. จดเรยงวตถแนวตง
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
6. ขอใด ไมใช หลกการสรางสออนโฟกราฟกอยางมประสทธภาพ
ก. ออกแบบใหเขาใจงาย
ข. ตองมค าอธบายดวยขอความมาก ๆ
ค. ขอมลมความถกตอง
ง. ใชสดงดดความสนใจ
7. ขอใด ไมใช ขอควรระวงในการออกแบบสออนโฟกราฟก
ก. อยาใสขอมลมากเกนไป
ข. อยาใสสมากเกนไป
ค. ขอมลเปนขอความยาว ๆ ใหเขาใจมากทสด
52
ง. ขอมลไมยงยากซบซอน
8. ประโยชนการออกแบบสออนโฟกราฟกแบบเปรยบเทยบคอขอใด
ก. เหนภาพรวมของขอด-ขอเสย
ข. ขอมลไมซบซอน
ค. เหนความแตกตางชดเจน เขาใจงาย
ง. ขอมลอานจากบนลงลาง
9. การออกแบบสออนโฟกราฟกแบบ โฟวชารต มหลกการอานตามขอใด
ก. อานสวนใดกอนกได
ข. อานจากบนลงลาง
ค. อานจากลางขนบน
ง. อานจากซายไปขวา
10. ขอใดคอแนวโนมของสออนโฟกราฟกในยคปจจบนทไดรบการยอมรบมากทสด
ก. น ามาใชทกอาชพมากขน
ข. น ามาใชในดานการโฆษณาทางธรกจมากขน
ค. น ามาใชรวมกบสอเครอขายสงคมมากขน
ง. น ามาใชเกยวกบการเมองการปกครองมากขน
53
เฉลยแบบทดสอบหลงเรยน
บทท 5 ความรพนฐานเกยวกบสออนโฟกราฟก Infographic
1. ขอใดคอความหมายของสออนโฟกราฟก
ก. การสรางสอเนนรปภาพแทนขอความ ชดเจน เขาใจงายขน
ข. การสรางสอแบบมแตขอความ
ค. การสรางสอแบบมแตรปภาพ
ง. การสรางสอแบบผสมผสาน
2. ขอใด ไมใช หลกการในการออกแบบ
ก. เนอหาเยอะ ๆ เขาไว
ข. มแบบแผนโครงสราง
ค. มรปแบบเขาใจงาย
ง. มรปแบบสวยงาม ใชงานงาย
3. กระบวนการออกแบบสอ ขนตอนแรกคอขอใด
ก. การอานขอมล
ข. การคนหาวธการ
ค. การรวบรวมขอมล
ง. การระบปญหา
4. ขนตอนใด ทมการตรวจสอบความถกตองของขอมล
ก. การรวบรวมขอมล
ข. การระบปญหา
ค. การอานขอมล
ง. การคนหาวธการ
5. ขนตอนใดตองท าการเลอกรปแบบการน าเสนอแบบขอความหรอรปทรง
ก. จดเรยงวตถในแนวเสนตรงเดยวกน
ข. จดเรยงวตถแนวนอน
ค. จดเรยงวตถแนวตง
ง. จดเรยงวตถจดระยะหางวตถใหเทากน
54
6. ขอใด ไมใช หลกการสรางสออนโฟกราฟกอยางมประสทธภาพ
ก. ออกแบบใหเขาใจงาย
ข. ตองมค าอธบายดวยขอความมาก ๆ
ค. ขอมลมความถกตอง
ง. ใชสดงดดความสนใจ
7. ขอใด ไมใช ขอควรระวงในการออกแบบสออนโฟกราฟก
ก. อยาใสขอมลมากเกนไป
ข. อยาใสสมากเกนไป
ค. ขอมลเปนขอความยาว ๆ ใหเขาใจมากทสด
ง. ขอมลไมยงยากซบซอน
8. ประโยชนการออกแบบสออนโฟกราฟดแบบเปรยบเทยบคอขอใด
ก. เหนภาพรวมของขอด-ขอเสย
ข. ขอมลไมซบซอน
ค. เหนความแตกตางชดเจน เขาใจงาย
ง. ขอมลอานจากบนลงลาง
55
แบบประเมนใบงาน
ค าชแจง ใหผประเมนท าเครองหมาย ✓ ลงในชองระดบคะแนน โดยพจารณาจากการปฏบตงานตาม
ใบงานของผเรยน ซงมเกณฑการพจารณา ดงน
ระดบคะแนน 2 หมายถง ปฏบตงานตามรายการประเมนไดถกตองสมบรณ
ระดบคะแนน 1 หมายถง ปฏบตงานตามรายการประเมนไดแตไมถกตองสมบรณ
ระดบคะแนน 0 หมายถง ปฏบตงานตามรายการประเมนไมได
ขอท
รายการประเมน
เกณฑการประเมน
หมายเหต ด
(2)
พอใช
(1)
ปรบปรง
(0)
1 ปฏบตตามขนตอนไดถกตอง
2 ใชเครองมอในการปฏบตถกตอง
3 ชนงานโดยรวมทปฏบตถกตอง สมบรณ
ครบถวน
4 งานเสรจตามเวลาทก าหนด
5 มความคดสรางสรรค
6 ศกษาคนควาดวยตนเอง
7 มความประพฤตทด ไมท าผดกฎระเบยบ
8 มความซอสตยในการท างาน
9 มความรบผดชอบ
10 ดแลความสะอาดหองเรยน
รวม
รวมคะแนนทงสน
56
ประเมนโดย ผเรยน ผสอน
รวมคะแนนทได .............................. คะแนนเฉลย ..........................................
ลงชอ.......................................ผประเมน
(.................................................)