เอกสารประกอบการสอน วชาคอมพวเตอรกราฟกเบองตน

รหสวชา 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 จดดวยกน จดใดจดหนงของจดทงส ถอเปนต าแหนงส าหรบวางสวนส าคญทสดของภาพ ซงจะ

ท าใหภาพมคณคาขน ชางภาพมอใหมมกจะวางจดสนใจไวทกลางภาพเนองจากยงไมคนกบการมองผานชองมองภาพ

หรอมวพะวงมงสนใจกบวตถทจะถาย ดงนนหากเราฝกกวาดสายตาดรอบ ๆ ภาพทชองมองภาพแลวเลอกวาจะเลอน

จดสนใจไปยงจดใดจดหนงของสจดดงกลาว เรากจะไดภาพทดดขน อนง การวางจดสนใจไว ณ ต าแหนงตาง ๆ

ดงกลาวไมใชเปนขอบงคบเปนเพยงแนวทางส าหรบการจดภาพทว ๆ ไป ชางภาพอาจมแนวทางการวางทตางออกไป

แลวแตแนวคดในภาพแตละภาพ

16

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 ทเมลครผสอน suwaree.p@cvc.ac.th และปรนงานสงในคาบถดไป

รปท 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 สงทางอเมล suwaree.p@cvc.ac.th

พรอมปรนและเยบเลมสงในคาบถดไป โดยใหออกแบบปกหนาและปกหลงมาอยางชดเจน

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 สงไฟลทเมล

suwaree.p@cvc.ac.th

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

ประเมนโดย ผเรยน ผสอน

รวมคะแนนทได .............................. คะแนนเฉลย ..........................................

ลงชอ.......................................ผประเมน

(.................................................)