E-Book โปรแกรมกราฟิก 2204-2105

3. ปรากฎหนา้ จอเพ่ือใสร่ หัสหมายเลข ให้ใสร่ หัสเลข 6 ชุด แล้วกด Next

รูปภาพแสดงการใส Serial Number

4.คลิกที่ Accept แล้วคลกิ Install

รปู ภาพแสดงการยอมรับเง่อื นไขตา่ งๆ ในการใช้โปรแกรม

5. รอสักครู่จะปรากฏรปู ภาพดังน้ี

รปู ภาพแสดงรอการติดตง้ั โปรแกรม

6. จะปรากฏหนา้ ตา่ งเพ่ือลงทะเบยี นโปรแกรม ให้ลงทะเบียนโปรแกรม โดยใสข่ อ้ มูลลงใน ชอ่ งวา่ ง
จากนน้ั เลือก Register Now

รูปภาพแสดงหน้าตา่ งเพ่อื ลงทะเบยี นโปรม

7. ปรากฎหนา้ จอท่มี ีข้อความ “Thanks!” ให้คลิกที่ปุ่ม Close จากน้ันคลกิ Exit

รูปภาพแสดงข้อความ “Thanks!”

8. ทดสอบใช้งานโปรแกรมท่ีตดิ ตงั้ เรยี บรอ้ ยแลว้ โดยการคลกิ ทป่ี ่มุ Start> Program > Adobe
Photoshop CS4

รูปภาพแสดงหน้าจอโปรแกรม Adobe Photoshop

9. ปรากฎหน้าจอโปรแกรม Adobe Photoshop CS4 ท่ีพรอ้ มใชง้ าน

รปู ภาพแสดงหน้าจอโปรแกรม Adobe Photoshop CS-4

การปรับรุ่นโปรแกรมผา่ นอนิ เทอรเ์ น็ต

โปรแกรม Adobe Photoshop CS4 สามารถปรบั รุน่ (Update) ผา่ นอนิ เทอร์เน็ตได้ โดย
การเขา้ ไปท่เี มนู Help แล้วเลือกเมนยู ่อยชือ่ Update โปรแกรมจะตรวจสอบรนุ่ ล่าสดุ จาก เว็บไซต์
Adobe และแสดงข้อมลู ท่สี ามารถ Update ได้ หากเครื่องคอมพวิ เตอร์มีการเช่ือมต่อกับ
อินเทอรเ์ นต็ อยู่ สามารถปรบั ร่นุ โปรแกรม Adobe Photoshop CS4 ผา่ นอนิ เทอร์เน็ตไดท้ ันที

รูปภาพแสดงการปรบั รุ่นโปรแกรม Adobe Photoshop CS-4 ผา่ นอินเทอรเ์ น็ต

แบบประเมนิ ผลหลงั เรยี นหนว่ ยท่ี 2

คำสั่ง จงเลอื กคำตอบทถ่ี ูกต้องเพียงข้อเดียว
1. ภาพกราฟิกสามารถแบ่งออกเปน็ ประเภทใหญ่ๆ กป่ี ระเภท

ก. 2 ประเภท
ข. 3 ประเภท
ค. 4 ประเภท
ง. 5 ประเภท
2. ข้อใดคือลักษณะของภาพจากโปรแกรม AutoCAD
ก. เม่อื ขยายภาพแลว้ มลี กั ษณะเปน็ ตารางเล็กๆ
ข. คุณภาพภาพไม่เปลีย่ นแปลงเมอ่ื มีการยอ่ หรือขยาย
ค. ไม่สามารถย่อหรือขยายภาพได้
ง. เม่อื ลดขนาดภาพแล้วมีลกั ษณะเปน็ ตารางเล็กๆ
3. โปรแกรม Adobe Photoshop เป็นการแสดงภาพแบบใด
ก.Raster Graphics
ข.Vector Graphics
ค. Bitmap
ง. ขอ้ ก. และ ค. ถกู
4. ไฟลภ์ าพแบบ Bitmap คือไฟลท์ ่ีมนี ามสกุลใด
ก. .BMP, .PCX, .TIF, .DRW
ข. .BMP, PCX., .CDR, .GIF
ค. JPG, .MSP, .PCD, .PLT
ง. .TIF, .GIF, JPG, .MSP
5. ขอ้ ใดเปน็ ลกั ษณะของ Raster
ก. ใชส้ มการทางคณิตศาสตรเ์ ป็นตวั สรา้ งภาพ
ข. เหมาะสำหรับงานแบบวาง Layout งานพิมพ์ตวั อักษร
ค. เหมาะสำหรบั งานกราฟิก ในแบบต้องการให้แสงเงาในรายละเอียด
ง. สามารถยอ่ และขยายขนาด โดยสดั สว่ นและลกั ษณะของภาพยงั เหมือนเดมิ
6. ข้อใดคือสีหลกั ของโมเดลอาร์จีบี (Model RGB)
ก.แดง (Red) เขียว (Green) น้ำเงิน (Blue)

ข. ฟา้ (Cyan) ม่วงแดง (Magenta) เหลือง (Yellow)
ค. ฟ้า (Cyan) ม่วงแดง (Magenta) เขียว (Green)
ง. แดง (Red) ขาว (White) น้ำเงิน (Blue)
7. ข้อใดคือลักษณะของโมเดลซเี อม็ วายเค (Model CMYK)
ก. เกดิ ขนึ้ จากระบบการพิมพ์แบบแยกสี
ข. เกดิ ขนึ้ จากระบบผสมแสงสหี ลกั
ค. เกิดขน้ึ จากคา่ สีกำหนดข้นึ โดย CIE
ง. ไม่มีข้อใดถกู
8. ขอ้ ใดหมายถึง additive color System
ก. ระบบการพมิ พ์แบบแยกสี
ข.ระบบการวัดสี RGB และ CAMYK
ค. ระบบการผสมสีแบบบวก
ง. ระบบการสะทอ้ นสี
9. ข้อใดคือคุณลกั ษณะของรงั สีของแสงสว่าง (Visible Light)
ก. มลี ักษณะเปน็ รังสที ่ีมีความร้อน
ข. มลี ักษณะเป็นสรี ุ้ง
ค. มลี กั ษณะเปน็ รังสีเหนือมว่ ง
ง. มลี ักษณะเปน็ รงั สอี ินฟราเรด
10. ไฟลร์ ปู ภาพกราฟิกท่นี ิยมมีก่ปี ระเภท
ก. 2 ประเภท
ข. 3 ประเภท
ค. 4 ประเภท
ง. 5 ประเภท

ใบงานที่ 2.1

คำส่งั ให้นักเรยี นหารูปภาพกราฟกิ แบบเวกเตอรก์ ราฟกิ ส์ (Vector Graphics) และราสเตอรก์ ราฟกิ ส์
(Raster Graphics) อย่างละ 5 ภาพ โดยวางตำแหนง่ ของภาพให้มี 2 ภาพใน 1 หนา้ กระดาษ A4
และบอกวา่ รูปใดเปน็ รูปแบบเวกเตอร์กราฟิกส์ รปู ใดเป็นราสเตอรก์ ราฟิกส์

ตวั อยา่ งใบงานที่ 2.1

เวกเตอรก์ ราฟิกส์ (Vector Graphics) ราสเตอรก์ ราฟิกส์ (Raster Graphics)

ใบงานท่ี 2.2

คำสง่ั ใหน้ กั เรยี นหารูปภาพน่ิงท่ีนา่ สนใจบนอนิ เทอรเ์ น็ต 10 ภาพ และบอกนามสกลุ ของไฟล์ ทีห่ ามา
พรอ้ มบอกรายละเอยี ดของภาพ ในการดูรายละเอยี ดของภาพสามารถทำไดโ้ ดยการ คลกิ ขวาที่ไฟล์
รูปภาพ แลว้ เลอื ก Properties เลือก Tab ช่ือ (General. Details แลว้ เลือ่ นลงมา ที่หวั ขอ้ Image

ตวั อยา่ งใบงานท่ี 2.2

Name: 001 Accessed: 30 ตลุ าคม 2554, 21:00:53
Type of file: JPG File (.jpg) Dimensions: 604 X 453
Size: 83.2 KB Width: 604 pixels
Size on disk: 84.0 KB Height: 453 pixels
Created: 30 ตุลาคม 2554, 21:00:51 Horizontal resolution: 96 dpi
Modified: 30 ตลุ าคม 2554, 21:00:09 Vertical resolution: 96 dpi

หนว่ ยการเรียนรู้ที่ 3 สว่ นประกอบโปรแกรมและการใช้โปรแกรมสร้างภาพกราฟกิ แบบ
Raster

แนวคดิ
รูปภาพที่สร้างจากโปรแกรมกราฟิกสามารถสร้างภาพได้จากการรับค่าสังจากอุปกรณ์

คอมพิวเตอร์ เช่น เมาส์ หรือคีย์บอร์ดเพื่อนำคำสั่งที่ได้รับจากอุปกรณ์นั้นไปประมวลผลการทำงาน
แสดงเป็นรูปภาพทีผ่ ู้ใช้งานต้องการ ซึ่งรูปภาพที่สร้างจากโปรแกรมกราฟิกจะขึ้นอยู่กับทกั ษะของผ้ทู ่ี
ใชโ้ ปรแกรมดว้ ย บางครั้งการวาดภาพบนกระดาษ อาจจะสามารถส่ือถึงส่ิงทต่ี ้องการได้ดีกว่าการวาด
ภาพจากเครื่องมือชา่ งวาดภาพ ดังนน้ั ภาพที่สร้างตอ้ งดูความเหมาะสมกับงานด้วย

สาระการเรียนรู้ 6. การเปดิ รปู ภาพเพอ่ื นำมาใช้
1. ความรเู้ กีย่ วกับโปรแกรม Adobe Photoshop 7. การปดิ รูปภาพเพอ่ื นำไปใช้งาน
2. การสร้างรูปภาพใหม่ 8. การออกจากโปรแกรม
3. ส่วนประกอบของโปรแกรม 9. ประยุกต์การสร้างรูปภาพจากบทเรียน
4. การสร้างรูปภาพโดยใช้เครื่องมือ Brush
5. การบันทกึ รปู ภาพเพ่ือนำไปใช้งาน

ผลการเรยี นรทู้ ่ีคาดหวงั 6. เปิดรูปภาพได้
1. อธบิ ายความรู้เก่ยี วกบั โปรแกรม Adobe 7. ปิดรูปภาพได้
PhotoShop CS4 ได้ 8. ออกจากโปรแกรมได้
2. อธิบายการสรา้ งรปู ภาพใหมไ่ ด้ 9. ประยุกตก์ ารสร้างรปู ภาพจาก
3. บอกสว่ นประกอบของโปรแกรมได้
4. สรา้ งรปู ภาพโดยใช้เครอ่ื งมือ Brush บทเรยี นได้
5. บันทกึ รปู ภาพเพอ่ื นำไปใช้งานได้

เเบบประเมินผลก่อนเรียนหนว่ ยที่ 3

คำส่ัง จงเลือกคำตอบทีถ่ กู ต้องเพียงข้อเดยี ว

1.ข้อใดคือลักษณะการทำงานของกระบวนการสรา้ งภาพกราฟิก

ก. Input, Process, Output

ข. Output, Process, input Pl.

ค. Process, Output, Input

ง. ถูกทกุ ขอ้

2. รูปภาพทไ่ี ดจ้ ากโปรแกรมกราฟิกจะสมบูรณ์มากเพยี งใดน้นั ขึ้นอยกู่ ับข้อใด

ก. ทกั ษะของ User ข. องค์ประกอบของภาพ

ค. โปรแกรมท่ใี ช้ ง. ถูกทกุ ขอ้

3. ข้อใดคือความหมายของคำว่า Layer ในโปรแกรม Photoshop

ก. ชน้ั ภาพ ข. กง่ิ ตอน

ค. โครงงาน ง. ไมม่ ีข้อใดถกู

4. ขอ้ ใดคือความหมายของคำวา่ Brush ในโปรแกรม Photoshop

ก. แปรงหรอื พู่กนั ข. การสมั ผสั เบาๆ

ค. การปัด ง.การกวาด

5. พัฒนาการของ Photoshop มาจากขอ้ ใด

ก. จากงานเขยี นสูภ่ าพวาด

ข. จากภาพวาดสู่งานเขยี น

ค. จากการสร้างภาพพิมพ์สูภ่ าพกราฟกิ

ง. จากการสรา้ งภาพกราฟิกสู่ภาพสงิ่ พมิ พ์

6. ข้อใดหมายถึง Image Ready

ก. โปรแกรมเริม่ ตน้ วาดภาพ

ข. โปรแกรมวางโครงสร้างภาพ

ค. โปรแกรมที่ใชส้ ร้างภาพเคล่ือนไหว

ง. ภาพต้นฉบบั

7. เหตุใดจึงนยิ มใช้ Photoshop เพ่ือแตง่ ภาพและใชแ้ สดงบนเวบ็ เพจ

ก. คณุ สมบัตทิ ่หี ลากหลาย

ข. เป็นโปรแกรมที่ใช้งานง่าย

ค. รองรับไฟลภ์ าพหลายรปู แบบ

ง. ถูกทกุ ขอ้

8. การพฒั นาโปรแกรม Photoshop เพ่ืออะไร

ก. สนองความต้องการของ User

ข. เพมิ่ ประสิทธิภาพของโปรแกรม

ค. พฒั นารปู แบบเพือ่ ให้ใชง้ านสะดวกขนึ้

ง. ถกู ทุกข้อ

9. ขอ้ ใดคือผู้ผลติ โปรแกรม Illustrator, PageMaker และ Acrobat

ก. Microsoft ข. Adobe

ค. Photoshop ง. Apple

10. เหตใุ ดจึงมีโปรแกรมเพื่อตกแต่งภาพให้เลือกใชห้ ลากหลาย

ก. เพอื่ รองรับความสามารถของ User

ข. เพอ่ื รองรับไฟลร์ ูปภาพในแบบต่างๆ

ค. เพอ่ื ความเหมาะสมของงานประเภทตา่ งๆ

ง. ถูกทกุ ข้อ

ความร้เู กย่ี วกบั โปรแกรม Adobe PhotoShop CS4

โปรแกรมที่ใช้ในการสร้างรูปภาพมีหลากหลายโปรแกรมขึ้นอยู่กับความเหมาะสมของงาน
ตัวอย่างโปรแกรมที่นิยมใช้ในการสร้างรูปภาพหรือตกแต่งรูปภาพ เช่น Paint, Inkscape,
PhotoScape, Comic Life, Adobe PhotoShop เปน็ ต้น

รูปภาพทว่ี าดจากมือบนกระดาษ รูปภาพท่ีสรา้ งจากโปรแกรมกราฟิก

PhotoShop เป็นโปรแกรมของบริษัท Adobe ซึ่งเป็นผู้พัฒนาโปรแกรมกราฟิกหลากหลาย
โปรแกรม ไม่ว่าจะเป็นโปรแกรม Illustrator, PageMaker และ Acrobat โปรแกรม PhotoShop มี
ความสามารถในการสร้างรูปภาพ ตัดต่อ ตกแต่งรูปภาพให้รูปภาพดูสวยงามและยังสามารถบันทึก
รูปภาพในนามสกุลที่แตกต่างกันไดห้ ลายรปู แบบ ซึ่งการบนั ทึกรปู ภาพเปน็ นามสกลุ ใดน้ันจะข้ึนอยู่กับ
ลักษณะของงานที่ใช้ และสามารถเรียกใช้เครื่องมือที่เหมาะสมเพื่อเลือกพื้นที่ได้ตามที่ต้องการ
สามารถซ่อมแซมภาพให้มีความสมบูรณ์ อีกทั้งมีการจำลองพู่กัน (Brush) สามารถปรับขนาดของหัว
พู่กัน หรือเลือกรูปแบบของหัวพู่กันในลกั ษณะที่แตกต่างกันได้เพื่ออำนวยความสะดวกให้กับผู้ใช้งาน
มกี ารใช้ช้ันภาพ (Layer) เพื่อทำใหร้ ูปภาพท่สี รา้ งจากโปรแกรมมคี วามสมบรู ณ์มากขึน้

รูปภาพแสดงการเปรียบเทยี บรปู ภาพทต่ี กแต่งดว้ ยโปรแกรม PhotoShop

โปรแกรม PhotoShop เวอร์ชันแรกนั้นเริ่มต้นสร้างขึ้นใน ค.ศ. 1990 และได้รับการพัฒนา
มาเรือ่ ยๆ จากเวอรช์ นั 2, 2.5, 3, 4, 5, 5.5, 6, 7, CS, CS2, CS3, CS4, CS5 โดยไดเ้ พ่ิมประสทิ ธิภาพ
การจัดการกับภาพกราฟิกขึ้นเรื่อยๆ จากเดิมที่เน้นใช้งานเพื่อการสร้างภาพสิ่งพิมพ์ ก็หันมาเน้น
เกยี่ วกบั การจัดการภาพกราฟิกที่ใชบ้ นเวบ็ ไซต์มากยง่ิ ขึ้น

นอกจากนี้ยังได้สร้างโปรแกรม Image Ready ซึ่งเป็นโปรแกรมที่ใช้สร้างภาพเคลื่อนไหว
ควบคู่มากับโปรแกรม Photoshop อีกด้วย เพื่อเพิ่มความสามารถเกี่ยวกับการทำภาพกราฟิกที่ใช้
สำหรับการทำเว็บโดยเฉพาะซึ่งในปัจจุบัน (ตั้งแต่เวอร์ชัน CS3 ขึ้นไป) โปรแกรม Image Ready ได้
ถูกรวมเป็นหนง่ึ เดยี วกบั โปรแกรม Photoshop

ปัจจุบันโปรแกรม Photoshop เป็นโปรแกรมที่ได้รับความนยิ มอยา่ งมากจากผู้สร้างเวบ็ ไซต์
ไม่ว่าจะเป็นการนำมาสร้างหรือตกแตง่ ภาพ เนื่องจากคุณสมบัติท่ีโดดเด่นใช้งานง่ายมีเอฟเฟกต์ต่างๆ
ให้เลือกใช้งานมาก

การสร้างรปู ภาพใหม่

หลังจากเปดิ โปรแกรม (เนอื้ หาการเปิดโปรแกรมจากหน่วยที่ 2) สามารถสรา้ งรูปภาพใหม่ได้
ดงั นี้

คลกิ ทเี่ มนู File เลือกเมนยู อ่ ย New

ปรากฏหนา้ ตา่ ง ดังภาพ

1. Name คอื การกำหนดชื่อรูปภาพ
2. Preset คอื การกำหนดรปู แบบของพน้ื ทรี่ ูปภาพหรือรูปแบบของพนื้ ทใ่ี นการทำงาน

รูปภาพแสดงชอ่ื ของ Preset ในรปู แบบต่างๆ

3. Size คือการกำหนดขนาดรูปภาพ หรอื การกำหนดขนาดพ้นื ทใี่ นการทำงานตามรปู แบบของ
Preset

รูปภาพแสดงชอ่ื ของ Size ในรูปแบบ Preset แบบ International Paper

4. Width คอื การกำหนดความกว้างของรปู ภาพ
5. Height คือการกำหนดความสงู ของรปู ภาพ

รูปภาพแสดงการปรับแตง่ ค่าความกว้าง และความสงู ของรปู ภาพ
โดยสามารถกำหนดหน่วยวดั ในรปู แบบต่างๆ ของรปู ภาพได้

6. Resolution คือความละเอยี ดรปู ภาพ สามารถใส่ค่าได้ตามทต่ี ้องการ โดยส่วนมากภาพท่นี ำไปใช้
บนเคร่อื งคอมพิวเตอร์ (ใชแ้ สงสใี นการแสดงผล) จะใช้ความละเอียด 72 pixels per Inch (IPPI) ขึ้น
ไปและภาพทนี่ ำไปใชใ้ นงานพิมพ์ (ใชห้ มึกสใี นการแสดงผล) จะใชค้ วามละเอยี ด 300 pixels per
Inch (PPI) ข้นึ ไป

รูปภาพแสดงการกำหนดหนว่ ยวัดของ Resolution

7. Color Mode คือระบบสีท่ีจะนำมาใช้ในรูปภาพ

รูปภาพแสดงรูปแบบของสี และจำนวน bit ท่ใี ชใ้ นรูปภาพ

8. Background Contents คอื การกำหนดรปู แบบพ้นื หลัง

รูปภาพแสดงรายละเอียดของพน้ื หลงั

White หมายถงึ กำหนดให้พื้นหลังรปู ภาพมสี ขี าว
Background Color หมายถึง กำหนดใหพ้ ้ืนหลังมีสีพนื้ หลงั ตามท่ีเลือก
Transparent หมายถึง กำหนดใหพ้ น้ื หลังโปร่งใส

9. Color Profile คือการระบุประเภทของสีทใ่ี ช้ในสภาพแวดล้อมท่ตี า่ งกนั

รูปภาพแสดงการระบปุ ระเภทของสี

10. Pixel Aspect Ration คือการกำหนดอัตราสว่ นของรูปภาพ

รปู ภาพแสดงการกำหนดอัตราส่วนรูปภาพ

11. OK คอื ปุ่มยอมรับการสรา้ งรูปภาพจากคา่ ท่ีได้เลอื กไว้
12. Cancel คอื ป่มุ ยกเลิกการสร้างรปู ภาพจากค่าทีไ่ ด้เลือกไว้
13. Save Preset เปน็ การบันทึกคา่ ทีเ่ ลือกไวเ้ พื่อนำมาใชใ้ นงานอ่ืน
14. Delete Preset เป็นการลบค่าทบ่ี ันทึกท่เี ลือกไว้
15. Device Central เปน็ การกำหนดใหร้ ูปภาพมขี นาดเท่ากบั
อุปกรณ์ตา่ งๆ เชน่ โทรศพั ท์

รปู ภาพแสดงหนา้ ต่างเม่อื คลิกที่ปมุ่ Device Central ซึ่งสามารถเลอื กภาพให้เหมาะสมกบั อปุ กรณต์ ่าง ๆ ได้

16. Image Size คอื ขนาดไฟลท์ ี่ต้องใช้ในการจดั เก็บรูปภาพ

รปู ภาพแสดงขนาดไฟล์ท่ีต้องใช้ในการจัดเกบ็ รูปภาพ

สว่ นประกอบของโปรแกรม

1. PS Button ปุม่ ควบคุมโปรแกรม Adobe Photoshop
2. Menu bar รวบรวมคำสัง่ ทีใ่ ชภ้ ายในโปรแกรม
3. Tool bar รวบรวมคำสง่ั ทใ่ี ช้บ่อย
4. Control Button ปมุ่ ควบคมุ หนา้ ตา่ งโปรแกรม Adobe PhotoShop
5. Option Bar แถบตัวเลือก ใชเ้ ลือกคำส่ังท่เี หมาะสมใชก้ ับเครือ่ งมอื ทีเ่ ลือก
6. Tool box รวมเคร่ืองมือที่ใช้สรา้ ง ตัดตอ่ ตกแตง่ ภาพ
7. Title bar แสดงชอื่ ภาพและรายละเอียดของภาพแบบย่อ
8. Working Area พ้ืนที่ในการทำงาน
9. Palate/Window แถบหน้าต่างทีม่ ีความสัมพนั ธก์ ับงานในขณะนน้ั
10. Status bar แถบแสดงสถานะ แสดงสถานภาพของรูปภาพ
11. Scroll bar ใชเ้ ล่ือนรปู ภาพ (ใชก้ รณีที่รูปภาพมีขนาดใหญ่)

การสรา้ งรปู ภาพโดยใช้เครอ่ื งมือ Brush

เครื่องมือ Brush เป็นเครื่องมือสำหรับวาดภาพมีลักษณะการทำงานแทนพู่กัน โดยสามารถ
ปรับขนาดหัวแปรง หรือเปลี่ยนลักษณะของหัวแปรงในรปู แบบต่างๆ ให้เหมาะสมกับงานได้ เมื่อคลกิ
ขวาทีเ่ คร่ืองมอื Brush จะปรากฏเคร่อื งมอื ดังนี้

Brush Tool ใชแ้ ทนแปลงพู่กนั สำหรบั ระบายสบี นรูปภาพ
Pencil Tool ใชแ้ ทนดนิ สอสำหรบั ระบายสีบนรปู ภาพ
Color Replacement Tool ใช้ระบายทับสำจากสีเดมิ

1. Brush Tool การใช้เครื่องมือ Brush Tool สามารถทำได้โดยคลิกที่ จากนั้นท่ี
แถบตัวเลือกจะสามารถปรับแต่งหัวแปรงและขนาดของหัวแปรงได้โดยการกดปุ่ม F5 ที่แป้นพิมพ์
เลือกสีทีห่ นา้ ตา่ ง Color แล้ววาดภาพลงในพ้ืนท่ที ำงานได้ทนั ที

รูปภาพแสดงหนา้ ตา่ ง Brush เมื่อกดป่มุ F5 ท่ีแปน้ พิมพ์ รปู ภาพแสดงการเลอื กสีทห่ี น้าตา่ ง Color

2. Pencil Tool การใช้เครื่องมือ Pencil Link สามารถทำได้โดยคลิกท่ี จากนั้นที่

แถบตัวเลือกจะสามารถปรับแต่งหัวแปรง และขนาดของหัวแปรงได้โดยการกดปุ่ม F5 ที่แป้นพิมพ์

เลอื กสีทีห่ น้าต่าง Color แลว้ วาดภาพลงในพน้ื ทีท่ ำงานไดท้ นั ที

3. Color Replacement Tool การใชเ้ คร่อื งมอื Color Replacement Tool สามารถทำได้

โดยคลิกที่ ใช้ระบายสีเพื่อแทนสีเดิมที่มีอยู่ในการใช้งานมักใช้ร่วมกับรูปภาพ เช่น เปลี่ยนสี

ผม เปลยี่ นสวี ัตถุให้เปน็ สีที่ต้องการ

4. Mixer Brush Tool เป็นเครื่องมือที่ใช้ในการผสมสี โดยจะต้องมีสเี ดิมอยูก่ ่อน
แล้วเลือกสีใหมท่ ีต่ ้องการผสมมาระบายทับสีเดมิ โปรแกรมจะผสมสเี ดมิ กับสใี หม่

การบนั ทึกรปู ภาพเพอื่ นำไปใช้งาน

การบนั ทึกภาพดว้ ย Photoshop ตอ้ งดูงานทตี่ ้องการนำรปู ภาพไปใชว้ ่าเปน็ การใช้งานด้าน
ใด เชน่ นำไปใชบ้ นเว็บไซต์ บันทึกรปู ภาพเพ่ือตอ้ งการแก้ไข บันทกึ รูปภาพเพ่ือนำไปพิมพ์ ซง่ึ ขั้นตอน
ในการบันทึกรูปภาพในแต่ละรูปแบบนัน้ จะมีขน้ั ตอนที่แตกตา่ งกัน รปู แบบการบันทึกรปู ภาพ มี
ดงั ตอ่ ไปน้ี

1. บันทกึ ภาพเพอื่ การนำไปใชบ้ นเวบ็ ไซต์
2. วิธีการบนั ทึกภาพเพอ่ื การนำไปใช้บนเวบ็ ไซต์
3. บนั ทกึ ภาพเพอ่ื สามารถกลับมาแก้ไขไดเ้ ตม็ รปู แบบ

บนั ทึกภาพเพือ่ การนำไปใชบ้ นเวบ็ ไซต์

ภาพท่ีจะนำไปใชบ้ นเว็บจะต้องบันทึกใหไ้ ด้ภาพคุณภาพท่ีดีท่ีสุด แตต่ อ้ งใชพ้ นื้ ท่ีในการ
จดั เกบ็ นอ้ ย และสามารถรองรับการใช้งานบนอนิ เทอร์เน็ตไดด้ ว้ ย สำหรับประเภทไฟล์ภาพทร่ี องรบั
บนอินเทอรเ์ นต็ คือ JPG, PNG, GIF

วิธกี ารบนั ทึกภาพเพอ่ื การนำไปใชบ้ นเวบ็ ไซต์สามารถทำได้ดงั น้ี
1. คลิกเมนู File
2. เลอื กคำส่งั Save for Web & Devices
3. เลือกประเภทไฟล์รปู ภาพท่ตี อ้ งการจากในหวั ข้อนี้ สามารถเลอื กคุณภาพของภาพได้อกี
เช่น หากเลอื ก JPG สามารถเลอื ก Low, Medium, High, Very High และ Maximum ได้ เป็นต้น
ถ้าเลอื ก PNG จะสามารถเลือกแบบ PNG-8 หรือ PNG-24 ได้ ซ่งึ PNG-8 จะมีความละเอยี ดนอ้ ยกวา่
PNG-24 เป็นต้น ยิ่งเลือกความละเอยี ดมากไฟล์กย็ งิ่ มีขนาดใหญ่

รูปภาพแสดงการมนั ทภ่ี าพเพื่อการนำไปใช้บนเว็บไซต์

บนั ทกึ ภาพเพือ่ สามารถกลบั มาแก้ไขได้เตม็ รปู แบบ

การบนั ทึกภาพบนโปรแกรม Photoshop ถา้ บันทึกภาพเป็นไฟล์รูปภาพท่วั ไป เชน่ JPG,
BMP, GIF เปน็ ตน้ ไฟล์ภาพเหลา่ นจ้ี ะไมส่ ามารถแก้ไขในแตล่ ะส่วนของ Layers ทมี่ กี ารสร้างข้นึ ได้
ถา้ ตอ้ งการใหส้ ามารถแกไ้ ขได้ในอนาคต จะต้องบนั ทึกเป็นไฟลร์ ูปภาพของ Photoshop เท่านั้น ซง่ึ มี
ไฟล์นามสกุล PSD

วธิ ีการบนั ทกึ ภาพเพ่อื สามารถกลบั มาแก้ไขได้เตม็ รปู แบบ
1. คลิกเมนู File
2. เลอื กคำสัง่ Save หรอื Save as
3. เลอื กนามสกุลเป็น PSD (โปรแกรมจะเลอื กไฟลน์ ามสกลุ PSD ให้อตั โนมัติ)

รูปภาพแสดงการบนั ทึกภาพเพ่ือสามารถนำกลบั มาแกไ้ ขไดเ้ ต็มรูปแบบ

บันทกึ ภาพเพือ่ ส่งร้านอดั รปู หรือโรงพิมพ์

คณุ ภาพและรายละเอียดของภาพเปน็ สงิ่ สำคัญท่ีสุด (ปกตใิ ชค้ วามละเอยี ด 300 Pixel per
Inch) โดยเฉพาะถา้ ต้องการอัดขยายภาพให้มีขนาดใหญ่ ดังนั้นส่งิ สำคญั ท่ีสุดคือ ต้องไม่ลดขนาดของ
ภาพ สามารถบนั ทึกไฟล์ภาพไดท้ ันทีทีแ่ ก้ไขภาพเสร็จ โดยเลอื กไฟล์ภาพเป็นนามสกลุ .TIFF หรือ
JPG โดยเฉพาะการบันทึกภาพดว้ ยไฟลส์ กุล JPG จะแสดงหนา้ ตา่ งชือ่ JPEGOPTIONS ให้เลอื ก
คณุ ภาพ ของภาพ แนะนำใหเ้ ลือกเต็มทีค่ ือ 12 หรือ Maximum

วธิ กี ารบันทึกภาพเพื่อสง่ ร้านอดั รูป หรือโรงพิมพ์
1. คลกิ เมนู File
2. เลือกคำสัง่ Save หรอื Save as
3. เลือกไฟลภ์ าพท่ีต้องการ TIFF หรือ JPG
4. ปรับ Options ให้ได้คุณภาพสูง

รูปภาพแสดงการบนั ทึกภาพเพอ่ื สง่ รา้ นอดั รูป หรอื โรงพิมพ์

การเปดิ รปู ภาพเพ่ือนำมาใช้

การเปดิ รปู ภาพเพื่อนำรปู ภาพมาใชง้ านในโปรแกรมสามารถทำได้โดยการคลกิ ทเี่ มนู File
เลอื ก Open โปรแกรมจะเปดิ รปู ภาพ ผู้ใช้สามารถจดั การกับรูปภาพได้ทันที

รูปภาพแสดงการเปิดรปู ภาพ
ด้วยโปรแกรม Adobe Photoshop

การปดิ รปู ภาพเพือ่ นำไปใชง้ าน

การปิดรูปภาพเพ่ือนำรูปภาพไปใชง้ านสามารถทำไดโ้ ดยคลิกท่เี มนู File สามารถเลือก
รปู แบบการปดิ ต่อไปน้ี

1. Close ในกรณที ต่ี ้องการปิดรูปภาพเพียงภาพเดียว
2. Close All ในกรณที ี่ตอ้ งการปดิ รูปภาพทง้ั หมด

3. Close and Go To Bridge...ในกรณีที่ต้องการปิดรูปภาพและเรียกโปรแกรม Adobe
Bridge

รูปภาพแสดงการเลอื กเมนูเพือ่ ปดิ รปู ภาพ

รปู ภาพแสดงโปรแกรม Adobe Bridge

การออกจากโปรแกรม

ก่อนออกจากโปรแกรมควรบันทึกรูปภาพและปดิ รูปภาพใหเ้ รยี บรอ้ ยเพื่อแสดงถึงตัวผ้ใู ชว้ า่
ทำงานเรยี บร้อยดแี ลว้ และต้องการออกจากโปรแกรม ซงึ่ สามารถทำได้ 4 วิธดี ังน้ี

1. คลิกทีเ่ มนู Start เลือก Exit หรอื
2. แทรกปมุ่ Ps Button แลว้ เลอื กคำสงั่ Close
3. กดแป้นพิมพ์ลัด Ctrl + Q
4. กดแปน้ พิมพ์ลัด Alt + F4

รปู ภาพแสดงการออกจากโปรแกรมทัง้ 4 วธิ ี

ประยกุ ตก์ ารสร้างรูปภาพจากบทเรียน

1. ตัวอย่างการสร้างรูปภาพดว้ ย Brush Tool
1.1 สร้างรูปภาพใหม่โดยเขา้ ไปทเี่ มนู File เลือก New กำหนดค่าดงั นี้
Width = 500 pixels
Height = 500 pixels
Resolution = 72 pixels/inch
Color Mode = RGB Color 8 bit
Background Contents = White

วิธีอ่าน กำหนดพื้นที่งานให้มีค่าความกว้าง
และ ความสูงเปน็ 500 พิกเซล ความละเอียด
ของ ภาพคือ 72 พิกเซลต่อนิ้ว โหมดสีเป็น
แบบ RGB 8 bit มีพืน้ หลังเป็นสีขาว

รูปภาพประกอบการใชค้ ำส่งสรา้ งรูปภาพ

1.2 คลิกท่ีเคร่ืองมือ ท่ีกลอ่ งเครือ่ งมือ

รปู ภาพแสดงการเลือก Brush
ทีก่ ลอ่ งเครอ่ื งมือ

1.3 ปรับขนาดหัว และรปู แบบของ Brush ใหเ้ หมาะสมกับงานทีต่ อ้ งการที่แถบตวั เลือก

รูปภาพแสดงการเลือกตัวเลอื กทแ่ี ถบตวั เลอื กให้เหมาะสมกบั งาน

จากตวั อยา่ งน้เี ลือกขนาดของ Brush คอื 134 px และเลือกรูปแบบหัวแปรงเป็น Grass
1.4 เลอื กสที ี่ต้องการท่ี set foreground color ซ่ึงจะเปน็ สีทซ่ี ้อนกันที่อยู่ในกล่องเคร่ืองมือ

(สีดา้ นบนเรยี กวา่ foreground color ส่วนสีด้านล่างเรียกวา่ background color ซ่งึ สองสนี ้ีสามารถ

สลบั กันไดโ้ ดยคลกิ ทีล่ กู ศร ) เมอื่ ปรากฏกล่อง Color Picker (Foreground Color) ให้เลอื ก
สโี ดยการ เลือ่ นทต่ี วั เลอื กแถบไลส่ ีและคลิกสที ่ตี ้องการ จากนนั้ คลิก OK

รูปภาพแสดงการเลือกสี Foreground Color

1.5 วาดภาพลงในพืน้ ท่ที ำงานตามทีต่ ้องการ

รูปภาพแสดงการวาดภาพโดยใช้เครอ่ื งมือ Brush

รปู ภาพแสดงการใชร้ ูปแบบของหวั แปรงทีแ่ ตกตา่ งกนั

2. ตัวอย่างการสรา้ งรูปภาพดว้ ย Pencil Tool
2.1 คลิกขวาท่ี Brush Tool เพ่อื เลือก Pencil Tool

รปู ภาพแสดงการใชเ้ คร่ืองมอื

2.2 ทีก่ ล่องเคร่ืองมือจะปรากฏไอคอน จากนั้นเลือกรูปแบบของดินสอ และสีท่ี
ต้องการ

2.3 วาดภาพบนพืน้ ท่ีทำงานได้ตามท่ตี ้องการ

รปู ภาพแสดงการใช้รปู แบบของหวั แปรงท่ีแตกต่างกนั

3. ตัวอยา่ งการสรา้ งรูปภาพด้วย Color Replacement Tool (เครือ่ งมือใช้ในการ
แทนส)ี

3.1 เปดิ รปู ภาพโดยเลือกเมนู File เลอื ก Open จากนั้นเลอื กรปู ภาพทตี่ ้องการแทนสแี ล้ว
กด OK

รปู ภาพแสดงการเปดิ ไฟล์

รูปภาพแสดงไฟลท์ ตี่ ้อการแทนสี

3.2 คลิกขวาที่เคร่อื งมือ Brush เลือกเคร่ืองมือ Color Replacement

รปู ภาพแสดงการเลือก
เครื่องมือ Color Replacement

3.3 เลอื กสที ี่ต้องการแทนท่ีท่ี Foreground Color ในรปู ภาพตอ้ งการเลือกสเี ขียวจากนั้น
คลิก OK

รปู ภาพแสดงการเลอื กสี Foreground Color

3.4 ระบายสีทต่ี ้องการโปรแกรมจะแทนสใี หม่ใหท้ นั ที

รปู ภาพแสดงการแทนสีในรปู ภาพโดยใช้เครื่องมือ Color Replacement

4. ตวั อยา่ งการใชเ้ ครอ่ื งมือใชใ้ นการผสมสี Mixer Brush (ต้ังแต่ Adobe Photoshop
CS5 ขน้ึ ไป)

4.1 สรา้ งภาพขนาด 500 x 500 Pixel
4.2 เลอื กเครื่องมือ Brush ระบายสีแดงหัวแปรงวงกลมขนาด 100 Pixel

รูปภาพแสดงการระบายสบี นพืน้ ทที่ ำงานโดยใช้ Brush Tool

4.3 คลิกขวาท่ีเคร่อื งมอื Brush Tool เลือก Mixer Brush

รูปภาพแสดงการเลอื ก Mixer Brush Tool

4.4 เลือกสีท่ีต้องการผสมบนแถบตัวเลอื ก (จากภาพเลือกสีน้ำเงนิ )

รูปภาพแสดงตัวเลือกสที ่ตี อ้ งการผสมบนแถบตวั เลือก

4.5 ระบายสีทบั สเี ดมิ (สีแดง) แล้วสังเกตผลลพั ธท์ ไี่ ด้

ผลทไี่ ด้จากการใช้ Mixer Brush Tool

แบบประเมินผลหลงั เรยี นหนว่ ยท่ี 3

คำส่งั จงเลือกคำตอบทถ่ี ูกต้องเพียงข้อเดยี ว

1. สรา้ งภาพกราฟิกแบบ Raster หมายถึงภาพในลกั ษณะใด

ก. เม่อื ขยายภาพแลว้ มีลักษณะเปน็ ตารางเล็กๆ

ข. คุณภาพภาพไม่เปล่ยี นแปลงเมื่อมีการยอ่ หรือขยาย

ค. ไมส่ ามารถย่อหรือขยายภาพได้

ง. เมื่อลดขนาดภาพแล้วมลี กั ษณะเป็นตารางเลก็ ๆ

2. เหตุใดในบางครงั้ จึงสรา้ งภาพกราฟกิ จากภาพวาด

ก. ภาพวาดในบางครง้ั ดูสมจริงกว่า

ข. เป็นกระบวนการวาดภาพกราฟิก

ค. การวาดภาพจากคอมพวิ เตอร์โดยตรงบางคร้ังลำบากกว่า

ง. ขอ้ ก. และ ค. ถูก

3. โปรแกรมท่ีใช้สรา้ งภาพเคลื่อนไหวควบคู่มากบั โปรแกรม Photoshop ในปัจจบุ ันคือ

ก. PageMaker ข. Image Ready

ค. Acrobat Paint ง. Animation

4. ขอ้ ใดคือขนาดความละเอียดรูปภาพ Resolution ทเ่ี หมาะสมสำหรับงานพิมพ์

ก. 72 pixels per Inch (PPI) ข. 100 pixels per Inch (PPI)

ค. 200 pixels per Inch (PPI) ง. 300 pixels per Inch (PPI)

5. ข้อใดหมายถงึ Transparent

ก. การทำพ้นื หลงั สีขาว ข. การทำพ้ืนหลังโปรง่ ใส

ค. การทำสีพน้ื หลงั ตามท่ีเลือก ง. การกำหนดทิศทางเคลอื่ นไหวภาพ

6. ขอ้ ใดคือคุณสมบัติของปุ่ม Save Preset

ก. สามารถเก็บภาพไดน้ านไม่มกี ำหนด

ข. สามารถเปลีย่ นแปลงภาพใหเ้ ปน็ ภาพวาดได้อตั โนมัติ

ค. จัดเกบ็ รปู ภาพท่ีกลับมมุ ได้

ง. ไม่มขี ้อใดถูก

7. ขอ้ ใดหมายถึงแถบท่ใี ช้รวบรวมคำสงั่ ทใ่ี ช้ในโปรแกรม

ก. Menu bar ข. Tool bar

ค. PS Button ง. Option bar

8. ขอ้ ใดหมายถึง Palate/Window

ก. หนา้ ต่างสำหรบั ควบคมุ โปรแกรม Adobe PhotoShop

ข. แถบหน้าตา่ งที่มคี วามสัมพันธ์กับงานในขณะน้นั

ค. พื้นที่ในการทำงาน

ง. ป่มุ ควบคุมหน้าต่างโปรแกรม

9. ขอ้ ใดเปน็ คุณสมบัติของ Color Replacement Tool

ก. ใช้แทนแปรงพู่กันสำหรับระบายสบี นรูปภาพ

ข. ใช้แทนดนิ สอสำหรับระบายสบี นรูปภาพ

ค. ใช้ระบายทับสีจากสเี ดิม

ง. ถูกทกุ ข้อ

10. ข้อใดเปน็ การบันทึกเพอ่ื สามารถแก้ไขในแตล่ ะสว่ นของ Layers

ก. บันทึกเปน็ ไฟล.์ JPG ข. บันทกึ เป็น ไฟล.์ BMP

ค. บนั ทึกเป็น ไฟล์ PSID ง. บันทึกเป็น ไฟล.์ GIF

ใบงานที่ 3.1

คำสั่ง จงบอกส่วนประกอบและอธิบายส่วนตา่ งๆ ของโปรแกรมมาพอสงั เขป

1. ............................................................................................................................. .................
2. ..............................................................................................................................................
3. ............................................................................................................................. .................
4. ..............................................................................................................................................
5. ............................................................................................................................ ..................
6. ..............................................................................................................................................
7. ..............................................................................................................................................
8. ..............................................................................................................................................
9. ..............................................................................................................................................
10. ..............................................................................................................................................
11. ..............................................................................................................................................

ใบงานที่ 3.2

คำสั่ง สร้างภาพ ความกว้าง 6 นิ้ว สูง 4 นิ้ว ความละเอียด 72 Pixel per inch โดยใช้เครื่องมือ
Brush กำหนดหวั แปรงเป็นรูปแบบวงกลมขนาด 20 สดี ำ วาดรูปในหัวข้อ “ส่งิ ทีฉ่ นั สนใจ" แลว้ บันทึก
ไฟล์ชื่อ "ใบงานที่ 6.jpg” จากนั้นนำภาพที่ได้จากการบันทึกไปใส่ลงในโปรแกรม Microsoft Word
แล้วบรรยายรูปที่วาดด้วยข้อความประมาณ 5-7 บรรทัด กำหนดแบบอักษร เป็น “Cordia New”
ขนาด 16 Point

ลำดบั ท่ี ตารางการให้คะแนน คะแนน (เตม็ 10 คะแนน)
1
2 หัวข้อ
3 กำหนดขนาดภาพตามใบงาน
4 การใชเ้ คร่อื งมือ
5 ความสวยงาม
6 การกำหนดสใี ห้รูปภาพ
การบนั ทกึ ช่ือไฟล์ถูกตอ้ ง
การบรรยายรูปภาพ

คะแนนเฉลยี่

ใบงานที่ 3.3

คำสัง่ สร้างภาพ ความกว้าง 6 น้ิว สงู 4 นิ้ว ความละเอยี ด 72 Pixel per inch โดยใช้เครื่องมอื Brass
กำหนดหวั แปรงเป็นรูปแบบใดก็ได้ สีตามใจชอบวาดรปู ในหัวข้อ "ธรรมชาต”ิ แลว้ บันทกึ ไฟล์ ชื่อ “ใบ
งานที่ 7.jpg" จากนั้นนำภาพที่ได้จากการบันทึกไปใส่ลงในโปรแกรม Microsoft Word แล้วบรรยาย
รูปที่วาดด้วยข้อความประมาณ 5-7 บรรทัด กำหนดแบบอักษรเป็น “Angsana New” ขนาด 16
Point

ลำดับท่ี ตารางการให้คะแนน คะแนน (เต็ม 10 คะแนน)
1
2 หวั ข้อ
3 กำหนดขนาดภาพตามใบงาน
4 การใชเ้ ครื่องมือ
5 ความสวยงาม
6 การกำหนดสใี ห้รปู ภาพ
การบันทึกชื่อไฟลถ์ ูกตอ้ ง
การบรรยายรปู ภาพ

คะแนนเฉล่ีย

หน่วยการเรียนรูท้ ่ี 4 การใชโ้ ปรแกรมสร้างภาพกราฟิกแบบ Vector

แนวคดิ
หลักการของกราฟิกแบบ Vector เป็นภาพกราฟิกทเ่ี กดิ จากการนำความสัมพนั ธท์ าง

คณิตศาสตรห์ รือ การคำนวณ โดยรูปภาพทไี่ ดจ้ ะแยกชิ้นสว่ นของภาพท้งั หมดออกเปน็ เส้นตรง เส้น
โค้ง และรปู ทรง ทำใหเ้ มื่อมีการ ขยายภาพความละเอียดของภาพจะไมล่ ดลง แฟ้มจะมีขนาดเลก็ กว่า
แบบ Raster โดยทวั่ ไปภาพกราฟกิ แบบ Vector นยิ มใช้เพ่ืองานสถาปตั ย์ ตกแต่งภายใน และการ
ออกแบบตา่ งๆ เชน่ การออกแบบอาคาร การออกแบบรถยนต์ การสรา้ งโลโก้ การสร้างการต์ ูน เป็น
ตน้

สาระการเรียนรู้
1. รูปภาพแบบ Vector
2. ความแตกต่างระหวา่ งกราฟิกแบบ Raster กบั Vector
3. การใช้เคร่ืองมือสรา้ งรูปภาพกราฟิกแบบ Vector (Pen Tool)
4. การใชเ้ ครอื่ งมือสรา้ งรูปภาพกราฟิกแบบ Vector (Shape Tool)
5. การยา้ ยรูปทรงโดยใช้เครื่องมือ Move
6. การปรับขนาดรปู ทรงโดยใช้คำสัง่ Free Transform

ผลการเรยี นรู้ทคี่ าดหวัง
1. อธิบายรูปภาพแบบ Vector ได้
2. บอกความแตกต่างระหวา่ งกราฟิกแบบ Raster กับ Vector ได้
3. ใชเ้ ครอ่ื งมือสรา้ งรูปภาพกราฟิกแบบ Vector (Pen Tool) ได้
4. ใชเ้ ครื่องมือสรา้ งรปู ภาพกราฟกิ แบบ Vector (Shape Tool) ได้
5. ยา้ ยรปู ทรงโดยใชเ้ ครื่องมอื Move ได้
6. ปรับขนาดรูปทรงโดยใชค้ ำส่ัง Free Transform ได้

แบบประเมินผลกอ่ นเรียนหนว่ ยท่ี 4

คำสงั่ จงเลอื กคำตอบทถี่ ูกต้องเพยี งข้อเดยี ว

1. เหตใุ ดจงึ นิยมใช้ Vector graphics เพื่อพิมพ์งานด้านโลโก้

ก. เน่อื งจากคุณภาพของภาพไม่ข้นึ กับอัตราขยาย

ข. เนื่องจากขอบภาพมคี วามคมชัดมาก

ค. มลี กั ษณะเป็นภาพลายเส้น

ง. ถกู ทุกข้อ

2. ขอ้ ใดคือลักษณะเดน่ ของรูปภาพแบบ Vector

ก. เมอื่ มีการขยายภาพความละเอยี ดไมล่ ดลง

ข. เปน็ ภาพกราฟิกท่เี กดิ จากการนำความสมั พนั ธ์ทางคณติ ศาสตร์

ค. ประกอบด้วยเสน้ ตรงและเสน้ โคง้

ง.ถูกทุกขอ้

3. ขอ้ ใดคือข้อเสียของภาพแบบ Vector

ก. เมอื่ มีการขยายภาพความละเอียดไม่ลดลง

ข. แฟ้มจะมีขนาดใหญ่กว่าแบบ Raster

ค. ภาพแลดูเปน็ ภาพวาดเม่ือเทยี บกบั ไฟล์ภาพแบบ Bitmap

ง. ขนั้ ตอนที่ยุ่งยากและซับซ้อน

4. ขอ้ ความใดต่อไปนก้ี ล่าวถูกต้อง

ก. Vector เปน็ กราฟิกทม่ี ลี ักษณะภาพท่ีประกอบขึ้นดว้ ยจุดสี (พกิ เซล) ต่างๆ มากมาย

ข. Vector เป็นรปู ภาพที่เหมาะสำหรบั งานด้านกราฟิก ในแบบตอ้ งการใหแ้ สงเงาในรายละเอยี ด

ค. Vector เหมาะสำหรับงานแบบวาง Layout งานพมิ พ์ตัวอกั ษร Line Art หรือ Illustration

ง. ข้อ ก. และ ค. ถูก

5. ข้อใดหมายถงึ การนำรูปทรงพ้นื ฐานตา่ งชนดิ ผสมกัน มที ิศทางการลากเสน้ ในแนวต่างๆ โดยใช้

คำสั่งงา่ ยๆ

ก.Vector Graphic ข. Raster Graphic

ค. Bitmap Graphic ง. Object Graphic

6. ข้อใดเปน็ คณุ สมบัติเฉพาะของ Pen Tool

ก. สรา้ งเสน้ ตรง โดยสามารถดดั เสน้ ใหโ้ คง้ ได้

ข. สร้างเสน้ เปน็ รปู ทรงอสิ ระ

ค. เพิม่ จุดภาพในเส้น

ง. ถกู ทกุ ข้อ

7. เหตุใดจงึ ตอ้ งมกี ารเพิ่มจดุ ใหก้ ับเสน้ Path ท่ีสรา้ งขึน้

ก. เพ่ิมความสมบรู ณใ์ ห้กับเส้น Path

ข. เพ่อื ให้การเคลื่อนยา้ ย (Move) ทำได้สะดวกมากย่ิงขึ้น

ค. เพอื่ ให้สามารถตัดเส้น Paปา ได้

ง. เพือ่ สามารถยอ่ หรือขยายเส้น Path ได้

8. ขอ้ ใดคือเครือ่ งมอื ในการดัดเสน้ ใหโ้ คง้ งอใหย้ ้อนกลบั ไปยังตำแหน่งองศาเดิมของเส้น

ก. Add Anchor Point ข. Delete Anchor Point

ค. Convert Point ง. Delete Path

9. ขอ้ ใดต่อไปน้ีกล่าวถูกต้องในการแสดงผลของภาพ

ก. กราฟกิ แบบ Raster แสดงภาพบนจอทันที

ข. กราฟกิ แบบ Vector ใช้เวลาในการประมวลผลเพื่อแสดงภาพมากกวา่

ค. กราฟกิ แบบ Vector ต้องทำตามคำส่งั ทีม่ ีจำนวนมากกว่ากราฟกิ แบบ Raster

ง. ถกู ทุกขอ้

10. ข้อใดต่อไปนีก้ ล่าวถูกตอ้ ง

ก. การปรบั ขนาดของภาพหรือวัตถตุ ่างๆ ในภาพสามารถทำไดโ้ ดยใช้คำสั่ง Move

ข. การปรับขนาดของภาพหรือวตั ถตุ ่างๆ ในภาพสามารถทำไดโ้ ดยใช้คำสัง่ Free transform

ค. การปรบั ขนาดของภาพหรือวตั ถตุ า่ งๆ ในภาพสามารถทำได้โดยใชค้ ำสง่ั Custom Shape

ง. การปรบั ขนาดของภาพหรอื วัตถุต่างๆ ในภาพสามารถทำได้โดยใชค้ ำสัง่ Rectangle

รูปภาพแบบ Vector

Vector graphics คือการนำเอาเสน้ ตรง และเสน้ โค้ง (Line and Curves) มาสร้างเปน็ โครง
รา่ ง (Outline) ของภาพ เรยี กวา่ Vector แล้วเตมิ สลี งบนโครงร่าง (Stroke color) และพืน้ ทที่ ่ีถกู
ล้อมรอบโดยโครงรา่ งนั้นๆ (Fill color)

รูปภาพตัวอยา่ งการนำภาพสแกนมาสรา้ งเปน็ ภาพแบบเวกเตอร์

การสรา้ งโครงร่างของ Vector graphics จะใชก้ ารคำนวณทางคณิตศาสตรใ์ นการกำหนด
โครงรา่ ง และจัดเก็บไฟลภ์ าพในลกั ษณะของตวั แปรทางคณิตศาสตร์ เป็นผลให้ไฟล์มขี นาดเลก็ อกี ทั้ง
โครงร่าง ประกอบขึน้ จากเสน้ ตรง และเส้นโคง้ เรยี กวา่ ภาพลายเสน้ (Draw type graphics) ลักษณะ
เดน่ ของ ไฟลภ์ าพประเภทนี้คือ มีขอบภาพที่คมชัดมาก เมื่อภาพถูกพิมพ์ออกท่ีเครอื่ งพิมพ์ ดงั น้ันจงึ
นิยมใช้ ในการออกแบบงานโลโก้ ศิลปะตวั อกั ษรงานภาพเขยี น เปน็ ต้น ข้อดีอีกข้อหน่งึ คือคุณภาพ
ของภาพ ไม่ข้ึนอยู่กับอัตราการขยาย (Resolution - independent) หมายถึงภาพถูกขยายให้ใหญ่
ข้นึ โดย ไม่ลดทอนคุณภาพของภาพ ส่วนข้อเสยี ของไฟล์ภาพนคี้ ือ ภาพแลดเู ป็นภาพวาดเมือ่ เทยี บกับ
ไฟลภ์ าพแบบ Bitmap ที่ดูลกั ษณะเปน็ ภาพถ่าย

สำหรับโปรแกรมที่ใชส้ รา้ งหรือแก้ไข File แบบ Vector กค็ ือโปรแกรม “Inkscape”,
“CorelDraw" โดยเฉพาะโปรแกรม “Ilustrator” ซ่ึงเป็นของคา่ ย Adobe System ผ้ผู ลิตโปรแกรม
Photoshop

รปู ภาพแสดงโปรแกรม Inkscape รปู ภาพแสดงโปรแกรม Adobe Illustrator

ความแตกต่างระหว่างกราฟิก แบบ Raster กบั Vector

ร ู ป ภ า พ แ บ บ Raster แ ล ะ Vector ม ี ค ว า ม
แตกต่างกัน ซึ่งการนำไปใช้งานต้องพิจารณาจากงานท่ี
ต้องการนำไปใช้ว่าต้องการให้กราฟิก ที่นำมาแสดงผลมี
ลกั ษณะเปน็ อยา่ งไรซง่ึ สามารถอธบิ ายได้ดังนี้

กราฟิกแบบ Raster หรอื Bitmap มีลกั ษณะดังนี้
1. เป็นกราฟกิ ทมี่ ลี ักษณะภาพท่ปี ระกอบขนึ้ ดว้ ยจดุ สี (พิกเซล) ต่างๆ เป็นจำนวนมาก
2. ภาพมีจำนวนพกิ เซลคงท่จี ึงต้องการคา่ ความละเอียดมากข้ึนเมื่อขยายภาพ โดยจะคำนวณ
ค่าสที ีละ Pixels ทำใหภ้ าพแตกเป็นจดุ สีเมื่อขยายภาพให้ใหญ่
3. เปน็ รูปภาพทีเ่ หมาะสำหรบั งานดา้ นกราฟิก ในแบบต้องการให้แสงเงาในรายละเอียด หรอื
รูปภาพเสมอื นจริงท่ีถา่ ยจากกลอ้ ง หรือการใช้เครือ่ งสแกนภาพ
4. แสดงภาพบนจอทนั ที เม่ือรบั คา่ ส่ังย้ายข้อมลู จากหนว่ ยความจำท่เี ก็บภาพไปยงั หน่วย
ความจำของจอภาพ ทำให้แสดงรปู ภาพไดร้ วดเรว็
กราฟกิ แบบ Vector มีลักษณะดงั นี้
1. ใช้สมการทางคณิตศาสตร์เป็นตัวสร้างภาพโดยรวม
เอาวัตถหุ รอื Object (เชน่ วงกลม เส้นตรง) ต่างชนิดมาผสมกัน
2. สามารถย่อและขยายขนาดได้มากกว่า โดยสัดส่วน
และ ลักษณะของภาพยังเหมือนเดิม ความละเอียดของภาพไม่
เปลยี่ นแปลง
3. เหมาะสำหรบั งานในรูปแบบการ Layout งานพมิ พ์ ตัวอักษร Line Art หรือ Illustration
4. คอมพวิ เตอรจ์ ะใชเ้ วลาในการแสดงภาพมากกว่า เนื่องจากตอ้ งทำตามคำส่ังที่มจี ำนวน
มากกว่า

Vector เป็นภาพประเภท Resolution-Independent มีลกั ษณะของการสร้างใหแ้ ต่ละส่วน
เป็นอสิ ระต่อกนั โดยแยกชิน้ สว่ นของภาพทั้งหมดออกเป็นเสน้ ตรง รูปทรงหรือสว่ นโค้ง โดยอ้างอิง
ตามความสัมพนั ธ์ทางคณติ ศาสตรห์ รือการคำนวณเปน็ ตวั สรา้ งภาพ เป็นการรวมเอา Object (เชน่
วงกลม เส้นตรง ทรงกลม ลกู บาศก์และอื่น ๆ เรียกว่ารปู ทรงพน้ื ฐาน) ตา่ งชนดิ มาผสมกัน มีทิศ
ทางการลากเสน้ ไปในแนวตา่ งๆ เพ่อื สรา้ งภาพทแ่ี ตกตา่ งกนั โดยใชค้ ำสง่ั ง่าย ๆ จงึ เรียกภาพ ประเภทนี้
วา่ Vector Graphic หรอื Object Oriented

การใช้เครื่องมอื สร้างรปู ภาพกราฟิกแบบ Vector (Pen Tool)

โปรแกรม PhotoShop สามารถสรา้ งภาพในลกั ษณะเป็นเส้นโดยใชเ้ คร่ืองมือดังน้ี

1. การใช้เครอ่ื งมอื Pen

การใช้เคร่ืองมือ Pen เพ่ือนสร้างเส้น (Path) สามารถทำได้ดงั น้ี

(1) คลิกที่ ทีก่ ล่องเครอ่ื งมือ

(2) คลิกจดุ ตำแหน่งทต่ี อ้ งการ

รปู ภาพแสดงตัวอย่างการสร้างสามเหลย่ี มจากเครื่องมือ Pen

1.1 การเตมิ สีให้เสน้ Path
การใสส่ ีให้กับเส้น Path นั้น ผ้ใู ช้โปรแกรมต้องสรา้ งเส้น Path ข้นึ มาก่อน (จากตวั อย่าง

เดิม) โดยการใส่สีนนั้ ผ้ใู ชต้ ้องเลือกสีท่ตี ้องการก่อนแล้วจงึ ใชค้ ำส่งั Fill Path การเตมิ สใี ห้เสน้ Path
ทำได้ดังนี้

(1) เม่ือไดเ้ ส้น Path ท่ีต้องการแล้ว ใหเ้ ลือกสีท่ตี ้องการเติมลงในเสน้ Path ท่ี Forground
color

(2) ที่หนา้ ต่าง Paths จะปรากฏ Work Path ให้คลิกขวาที่ Work Path แลว้ เลือก Fill Path

รปู ภาพแสดงการเตมิ สใี หเ้ สน้ Path

1.2 การใส่สีเส้นขอบของ Path
การใส่สเี ส้นขอบใหก้ บั เส้น Path น้ัน ผูใ้ ช้โปรแกรมตอ้ งสรา้ งเส้น Path ขน้ึ มาก่อน (จาก

ตัวอย่างเดิม) โดยการใส่สีนั้นผใู้ ช้ตอ้ งเลือกสที ต่ี ้องการกอ่ นแลว้ จงึ ใช้คำสั่ง Stroke Path การเติมสใี ห้
เสน้ Path ทำไดด้ งั นี้

(1) เมื่อไดเ้ ส้น Path ที่ต้องการแลว้ ให้เลือกสีท่ตี ้องการใส่เสน้ ขอบของเส้น Path ที่
Forground color

(2) ที่หน้าตา่ ง Path จะปรากฏ Work Path ใหค้ ลกิ ขวาที่ Work Path แลว้ เลอื ก
Stroke Path

(3) เลือกหัวแปรงตามท่ีต้องการ จากในภาพเลือก (Brush) แล้วคลิก OK

รปู ภาพแสดงการใสเ่ สน้ ขอบให้กับรปู ทรงทส่ี ร้างด้วยเครอ่ื งมอื Pen

หมายเหตุ จากในตวั อย่างนี้ หากตอ้ งการทำให้เสน้ ขอบหนาข้นึ หรือบางลง ต้องเลอื กเครือ่ งมือ
Brush เพอ่ื ปรบั เปลยี่ นขนาดของหวั แปรงกอ่ นทจ่ี ะทำข้อท่ี 2

1.3 การสรา้ งขอบเขตการเลอื กจากเส้น Path
การสรา้ งขอบเขตการเลอื กให้กบั เส้น Path ผ้ใู ช้โปรแกรมต้องสรา้ งเส้น Path ข้นึ มากอ่ น

(จากตวั อย่างเดมิ ) แลว้ ใช้คำส่งั Make Selection.

รปู ภาพแสดงการสร้างขอบเขตการเลอื กจากเส้น

หมายเหตุ หากต้องการยกเลิกการเลอื ก (นำเส้นปะออก) ให้เลือกเมนู Select แล้วเลือก Deselect
1.4 การลบเส้น Path
การลบเส้น Path นน้ั ผู้ใชโ้ ปรแกรมต้องสรา้ งเสน้ Path ข้นึ มาก่อน จากนน้ั ให้คลกิ ขวา

ทแี่ ถบหนา้ ตา่ ง Path ที่เส้น Path ท่ตี ้องการลบกอ่ นแลว้ จึงใช้คำสั่ง Delete Path

2. การใช้เครอื่ งมอื Freeform Pen

(1) คลิกขวาท่ี เลอื ก ท่กี ล่องเครอ่ื งมือ

(2) คลกิ และวาดรปู ทรงลงในพ้ืนทท่ี ำงานที่ต้องการได้ทนั ที

ตวั อยา่ งรูปภาพท่สี รา้ งจากเครอ่ื งมือ Freeform Pen

หมายเหตุ การเติมสี, การใสส่ ีเสน้ ขอบ, การเลือกขอบเขต และการลบเสน้ Path ท่ีถูกสร้างโดย
เครื่องมือ Freeform Pen สามารถทำได้เชน่ เดยี วกนั กบั เคร่ืองมือ Pen

3. การใช้เครือ่ งมือ Add Anchor Point เครื่องมือ Add Anchor Point เปน็ เครื่องมือที่ใช้ ใน
การเพ่ิมจดุ ตรงึ ให้กบั เสน้ Path เพื่อใชด้ งึ เส้นให้มีความโค้ง โดยการใชง้ านสามารถทำได้ดังนี้