แผนการจัดการเรียนรู้

๒๗
3. กาหนดขนาดใหม่ของภาพ หรือขนาดท่ีต้องการเพิ่มหรือลดถ้าไม่เลือก Relative ให้
กาหนดขนาดภาพใหมถ่ ้าเลอื ก Relative ให้กาหนดขนาดทต่ี ้องการเพ่ิมหรือลดจากเดมิ

4. กาหนดทิศทางการขยายพืน้ ทจ่ี ากจดุ ใด ๆ โดยใชช้ ่องสขี าวเป็นหลัก

5. คลิก OK
2.12 การปรับยอ่ ขยายมมุ มองของรูปภาพ

ขณะที่ทางานเพ่ีอความสะดวกในการแต่งรายละเอียด จากน้ันจางย่อมุมมองเพื่อดภู าพรวมเรา
สามารถย่อหรอื ขยายมมองภาพโดยยอ่ ใหเ้ ล็กลงหรอื ขยายให้ใหญ่ขึน้ ไดต้ ามความจาเป็น

1. คลิกเลือกเครื่องมอื Zoomในแถบเครื่องมีอ
2.คลกิ เมาสไ์ ปวางบริเวณท่ตี อ้ งการชุมภาพ
3. ภาพบรเิ วณที่จะขยายหรอื ซมู จะถูกขยายให้ใหญ่ขนึ้
4. ถา้ ตอ้ งการยอ่ ใหก้ ด Alt ท่ีคียบ์ อรด์ ค้างไว้
5. ภาพบรเิ วณที่ตอ้ งการย่อถูกซูมเข้าทาใหภ้ าพเล็กลง

๒๘

แผนการจัดการเรยี นรู้มุ่งเน้นสมรรถนะ หนว่ ยท่ี 2

สัปดาหท์ ่ี 2 - 3

ช่ือหน่วย หลกั การสรา้ งงานกราฟกิ และใชเ้ ครื่องมือพื้นฐาน จานวน 6 ชว่ั โมง

จานวน 6 ชั่วโมง

5.กิจกรรมการเรยี นการสอน
5.1 การนาเขา้ สู่บทเรียน
5.1.1ครู เช็คช่ือและตรวจการแต่งกาย
นักเรียน ขานชอ่ื และลุกขึ้นให้ครตู รวจการแต่งกายทลี ะคน
5.1.2ครู ทบทวนก่อนเรียนโดยการซักถามเกี่ยวกับหลักการสร้างงาน
ก ร า ฟิ ก
และใช้เครือ่ งมือพน้ื ฐาน
นกั เรียน ตอบคาถาม ซักถามข้อสงสยั
5.2 การเรียนรู้
5.2.1ครู อธิบายถึงหลักการสร้างงานกราฟิกและการใช้งานเคร่ืองมือ
พื้ น ฐ า น
โดยสอ่ื PowerPoint ตอบคาถาม/ซกั ภามขอ้ สงสัย
นักเรยี น จดบันทกึ ตอบคาถาม ปรกึ ษา/อภปิ รายกับเพอ่ื น
5.2.2ครู ทดสอบผู้เรียนโดยการถามตอบกันภายในห้องเรียน และอธิบาย
บางในข้อทผ่ี ้เู รียนมีขอ้ สงสัยจดบันทึกย่อ
นกั เรยี น ร่วมกนั อภิปรายหาข้อสรุป
5.2.3ครู ให้นกั เรยี นทาแบบทดสอบเรื่องหลกั การสร้างงานกราฟิกและใช้
เครื่องมอื พื้นฐาน เพื่อเกบ็ คะแนน
นกั เรยี น ทาแบบทดสอบ
5.2.4ครู ให้ทาการทดลองใบงาน/ให้คาแนะนา
นกั เรียน ปฏบิ ัติการทดลองตามใบงาน
5.3 การสรปุ
5.3.1ครู ส่มุ เรียกนักเรียนออกมาสรปุ เน้ือหาท่ีไดเ้ รียนมาทลี ะคนจน
ครอบคลุมเน้อื หาท้ังหมด โดยครูชว่ ยใหค้ าแนะนา และอธบิ าย
เพม่ิ เติม
นกั เรียน ออกมาหนา้ ชนั้ เรียนสรปุ เนอื้ หาซกั ถามปญั หาและจดบันทึก
เพ่มิ เติม
5.3.2ครู ให้นกั เรียนทาใบปฏิบตั ิการทดลองใหเ้ สร็จสมบูรณ์และให้
นักเรยี นซักถามปัญหาในการเรียน
นักเรียน ซักถามปัญหาและข้อสงสัยในใบปฏิบตั ิการทดลอง สรุปผลการ
ทดลองและส่งใบปฏิบัติการทดลอง
5.4 การวัดและประเมินผล

๒๙

5.4.1ครู สุม่ ถามนกั เรียนเกีย่ วกับเนื้อหาที่เรยี น
นกั เรยี น ตอบคาถามท่คี รูถาม
ใหน้ ักเรียนทาแบบทดสอลประจาหน่วย ตรวจใบปฏบิ ตั ิการ
5.4.2ครู ทดลองของนักเรยี น เฉลยแบบทดสอบประจาหน่วยและบันทกึ
นกั เรียน คะแนน
ทาแบบทดสอบประจาหนว่ ย และแลกเปลย่ี นกนั ตรวจ
แบบทดสอบ

6. ส่ือการเรยี นรู้/แหล่งเรียนรู้
6.1 สื่อสิ่งพิมพ์
หนงั สอื เรียนวชิ า โปรแกรมกราฟกิ (Photoshop CS6) ปิยะ นากสงค์. (2562). กรุงเทพ :
ซัคเซส มเี ดี
6.2 สอ่ื โสตทศั น์
สื่อ Power point วิชา การสรา้ งเวบ็ ไซต์ หน่วยที่ 2 เรือ่ ง หลกั การสร้างงานกราฟิกและใช้
เครอื่ งมือพ้นื ฐาน

7. เอกสารประกอบการจดั การเรยี นรู้ (ใบความรู้ ใบงาน ใบมอบหมายงาน ฯลฯ)
7.1 ใบความรูป้ ระกอบการเรียนวชิ า โปรแกรมกราฟิก หนว่ ยท่ี 2 เร่ือง หลักการสร้างงาน
กราฟิกและใชเ้ ครื่องมอื พนื้ ฐาน
7.2 ใบปฏิบัตกิ ารทดลองที่ 2

8. การบูรณาการ/ความสัมพันธ์กบั วิชาอืน่
8.1 สามารถนาความร้มู าใช้ในการตกแตง่ ภาพกราฟิก
8.2 สามารถนาความรูม้ าใช้ร่วมกับวิชาโครงงาน

9. การวดั และประเมนิ ผล
9.1ก่อนเรยี น
9.1.1.ผเู้ รียนศกึ ษา คน้ ควา้ จากเอกสาร ตารา เก่ียวกับความรู้เก่ยี วกบั โปรแกรมกราฟิก
9.1.2.ผเู้ รยี นทาแบบทดสอบก่อนเรียน
9.2ขณะเรียน
9.2.1.การสังเกตพฤติกรรมภายในชั้นเรียน
9.2.2.ทาแบบฝึกหัดประจาหนว่ ย
9.3 หลังเรียน
9.3.1.ใหผ้ เู้ รียนชว่ ยกันสรปุ เนอื้ หา
9.3.2.ทาแบบทดสอบหลังเรียน
9.3.3.ทาแบบทดสอบประจาหนว่ ย เพ่ือวัดผลสมั ฤทธทิ์ างการเรียน

10.บนั ทกึ หลงั การสอน
10.1 ผลการใช้แผนการจดั การเรยี นรู้

๓๐

............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................
............................................................................................................................................... ...............
............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

10.2 ผลการเรยี นร้ขู องนกั เรียน นกั ศึกษา
....................................................................................... .........................................................................
............................................................................................................................. ...................................
.................................................................................................................................. ..............................
....................................................................................................................... .........................................
............................................................................................................................. ...................................
................................................................................................................................................................

10.3 แนวทางการพัฒนาคณุ ภาพการเรียนรู้
................................................................................................................ ................................................
............................................................................................................................. ...................................
................................................ ........................................................................................................ ........
............................................................................................................................. ...................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

แผนการจดั การเรียนรูม้ ่งุ เนน้ สมรรถนะ ๓๑
ช่ือหน่วย การตกแต่งและตดั ภาพบางส่วน
หน่วยท่ี 3
สปั ดาห์ท่ี 4 - 5
จานวน 6 ชว่ั โมง

จานวน 6 ช่ัวโมง

1. สาระสาคญั
ถา้ จะตกแต่งภาพหรือตัดภาพบางส่วนไปใช้งาน โดยไมไ่ ดม้ ีการตีกรอบกั้นบริเวณไว้อาจทาให้

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

2. สมรรถนะประจาหน่วย
2.1. เลอื กพ้นื ทร่ี ปู ทรงเรขาคณติ (Marquee Tool)
2.2 เลอื กพน้ื ท่ีภาพแบบอิสระ
2.3 เลอื กพืน้ ที่แบบเรว็ ทนั ใจ
2.4 เลือกพื้นทอ่ี ตั โนมัติ (Magic Wand Tool)
2.5 เลือกพน้ื ทเ่ี พอื่ ตัดภาพเฉพาะสว่ นท่ตี ้องการ (Crop Tool)
2.6 ปรบั รูปแบบการเลือกพื้นที่
2.7 เทคนคิ การเลือกพนื้ ท่ีภาพอยา่ งประณตี
2.8 เทคนิคการเลือกพ้ืนทภี่ าพโดยใชเ้ สน้ พาธ
2.9 การเติมสีลงในพื้นทที่ ี่เลอื กไว้

3. จดุ ประสงคก์ ารเรียนรู้
3.1 ดา้ นความรู้
3.1.1 การเลือกพ้ืนทภี่ าพในรปู ทรงเรขาคณิต
3.1.2 การเลือกพื้นท่ีแบบอิสระ
3.1.3 การเลือกเครือ่ งมอื พ้ืนทภี่ าพได้เหมาะสมกับลกั ษณะของภาพ
3.1.4 การปรบั ขอบเขตการเลอื กพื้นท่ีให้เปน็ รูปแบบใหมต่ ามทต่ี ้องการ
3.1.5 การใช้พนื้ ทที่ ีเ่ ลือกไว้
3.2 ดา้ นทกั ษะ
3.2.1 สามารถเลอื กพน้ื ที่ภาพในรปู ทรงเรขาคณิตได้
3.2.2 สามารถเลือกพ้ืนท่ีแบบอิสระได้
3.2.3 สามารถเลอื กเครื่องมือพ้นื ทีภ่ าพได้
3.2.4 สามารถปรับขอบเขตการเลือกพื้นท่ีใหเ้ ปน็ รปู แบบใหม่ตามทตี่ ้องการ
3.2.5 สามารถใชพ้ น้ื ท่ีท่ีเลือกไว้ได้
3.3 คณุ ลักษณะที่พึงประสงค์
3.3.1 ใฝเ่ รียนรู้

๓๒

3.3.2 ทางานเป็นระเบยี บเรียบร้อย
3.3.3 ผู้เรียนมคี วามรับผดิ ชอบตอ่ หนา้ ท่ี
3.3.4 ปฏบิ ตั ิงานด้านความซ่ือสัตย์สุจริต
3.3.5 มีความมุ่งม่ันในการทางาน
3.3.6 ใชเ้ วลาอย่างคุ้มค่า
3.3.7 มีจติ สาธารณะ

แผนการจดั การเรียนรมู้ งุ่ เนน้ สมรรถนะ ๓๓
ช่อื หน่วย การตกแตง่ และตดั ภาพบางส่วน
หนว่ ยท่ี 3
สปั ดาหท์ ี่ 4 - 5
จานวน 6 ช่ัวโมง

จานวน 6 ชวั่ โมง

4. เน้อื หาสาระการเรียนรู้
3.1. เลอื กพนื้ ที่รูปทรงเรขาคณิต (Marquee Tool)

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

รปู ท่ี 3.1 เครอื่ งมือเลือกพน้ื ทภี่ าพในรูปทรงเรขาคณิต

Rectangular Marquee Tool พนื้ ท่ีเป็นรูปสี่เหลย่ี มผนื ผา้ และสเี่ หลย่ี มจตั ุรสั

Elliptical Marquee Tool ใชเ้ ลือกพนื้ ที่เป็นวงกลมและวงรี

Single Row Marquee Tool ใช้เลอื กพน้ื ทเ่ี ป็นแนวเส้นตรงแนวนอน ความกว้าง 1 พิกเซล

Single Column Marquee Tool ใช้เลือกพ้ืนทเี่ ป็นแนวเสน้ ตรงในแนวต้ัง ความกวา้ ง 1 พกิ
เซล

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

การเลือกพนื้ ที่ในลกั ษณะนีเ้ หมาะกบั ภาพท่ีไม่เปน็ รูปทรงเรขาคณติ ดงั น้นั การเลือกพ้นื ท่ภี าพ
จะเปน็ การลากเส้นตามขอบภาพร่างไปจนวนั สดุ สุดเริม่ ตน้ อีกคร้ังซ่งึ มี 3 ลกั ษณะดังนี้

รูปที่ 3.2 เครอ่ื งมือเลือกพน้ื ท่ีภาพแบบอสิ ระ

๓๔

Lasso Tool ใช้ลากเสน้ แบบอิสระ

Polygonal Lasso Tool ใชล้ ากเส้นแบบเสน้ ตรง

Magnetic Lasso Tool ใชล้ ากเสน้ แบบใชต้ ัวช่วย
3.3 เลอื กพื้นท่แี บบเร็วทันใจ

รปู ที่ 3.3 เคร่ืองมือเลอื กพนื้ ที่ภาพได้เหมาะสมกบั ลักษณะของภาพ
1. เลอื กเมาส์ทไี่ อคอน Quick Selection Tool
2. คลิกเมาส์และระบายภาพในส่วนที่ต้องการเลือกพ้ืนที่ พ้ืนที่บริเวณข้างเคียง ที่มีค่าสีใกล้เคียงกับ
สว่ นท่ีลากเมาสผ์ ่าน จะถูกเลอื กพืน้ ที่ด้วยเส้นประทนั ที

3.4 เลือกพนื้ ทอ่ี ัตโนมัติ (Magic Wand Tool)
เป็นการเลอื กพ้ืนทภ่ี าพทมี่ สี ีใกลเ้ คียงกบั ค่าสี ณ จุดท่คี ลกิ เมาส์เลอื ก

รปู ท่ี 3.4 เคร่ืองมือเลอื กพนื้ ที่ภาพได้เหมาะสมกบั ลกั ษณะของภาพ

1. คลกิ เมาส์ทไ่ี อคอน Magic wand Tool
2. คลกิ เมาสบ์ นภาพเพยี งครั้งเดยี ว ทุกส่วนท่ีมสี ใี กล้เคยี งกับจุดทีค่ ลิก จะถกู เลือกดว้ ยเส้นประแสดง
ลอ้ มรอบทนั ที
3.5 เลอื กพ้นื ทีเ่ พือ่ ตัดภาพเฉพาะส่วนท่ตี ้องการ (Crop Tool)

ภาพทีใ่ ชง้ านอาจจะมสี ว่ นทีไ่ ม่ต้องการติดมา ดงั นั้นสามารถตกี รอบเลือกเฉพาะส่วนที่
ต้องการ ส่วนที่เหลอื กต็ ดั ท้งิ ไป

1. คลกิ เมาส์ Crop Tool

2. ลากเมาสเ์ ลอื กพืน้ ท่ีส่วนท่ีต้องการ

๓๕
3. ปรบั ขนาดหรอื หมนุ กรอบภาพ
4. กด <Enter> จะแสดงภาพที่ตดั มาเฉพาะสว่ นทีเ่ ลือกเท่าน้ัน
3.6 ปรบั รูปแบบการเลอื กพื้นท่ี

๓๖

การเลือกพ้ืนท่ีด้วยเครื่องมือแต่ละชนิดจะเหมาะกับลักษณะของภาพท่ีแตกต่างกัน แต่ก็มี
ภาพบางลักษณะที่จะต้องใช้เคร่ืองมือหลายตัวทางานร่วมกัน เพ่ือให้การเลือกพ้ืนที่ครอบคลุมภาพใน

ส่วนที่ต้องการมากที่สุด ที่ออปช่ันบาร์ของเครื่องมือการเลือกพ้ืนท่ีทุกตัวเลือกในการปรับรูปแบบการ
เลอื กพื้นท่ีทนี่ ามาใชร้ ่วมกันได้

เลอื กพ้ืนท่ีใหม่ ลดพ้นื ที่

เพม่ิ พ้นื ที่ เลอื กเฉพาะพ้นื ทที่ ่ีซ้อนทบั กนั

เลอื กพืน้ ทใี่ หม่

+เมื่อคลิก ที่ออปชั่นบาร์ ตัวช้ีเมาส์จะเปลี่ยนเป็นรูป ให้ลากเมาส์ไปบริเวณพื้นท่ีท่ี

ตอ้ งการเพอ่ื เลอื กพ้ืนทใ่ี หม่ (อาจเปลี่ยนไปใชเ้ ครือ่ งมอื เลอื กพนื้ ท่ีอนื่ ได)้
เพมิ่ พ้นื ท่ี

ในกรณีท่ีต้องการเลือกพื้นที่ภาพเพ่ิมขึ้น ให้เลือก หรือกดแป้น <Shift> ค้างไว้ หลังจาก
นนั้ ให้เลอื กพ้ืนทส่ี ่วนอน่ื ตามตอ้ งการ

1. เลือกเพม่ิ พนื้ ที่

2. ลากเมาส์เพือ่ เลือกพืน้ ที่เพม่ิ เตมิ

ลดพนื้ ท่ี
ในกรณีที่ต้องการลดพ้ืนท่ีที่เลือก ให้เลือก หรือกดแป้น <Alt> ค้างไว้ หลังจากน้ันให้เลือก
พน้ื ทส่ี ว่ นอื่นตามตอ้ งการ
1. เลือกลดพื้นที่

2. ลากเมาส์เพื่อลดพืน้ ที่

๓๗

เลอื กเฉพาะพ้นื ท่ีท่ซี ้อนทบั กนั
ในกรณีที่ต้องการเลือกพื้นท่ีเฉพาะส่วนที่ตัดกัน ให้เลือก หรือกดแป้น <Shift>+<Alt> ค้าง
ไว้ นนั้ ใหเ้ ลอื กพน้ื ทส่ี ว่ นอนื่ ตามตอ้ งการ
1. เลือกพ้นื ทีท่ ีซ่ อ้ นทบั กัน
2. ลากเมาส์เพ่ือเลอื กพน้ื ทีส่ ่วนทีต่ ้องการ

สลบั ไปเลอื กพนื้ ที่สว่ นทีไ่ มไ่ ด้เลือก
เป็นการเปล่ียนจากพ้ืนท่ีไม่ถูกเลอื กในภาพเป็นพื้นที่ที่ถูกเลือก และพื้นที่ท่ีถูกเลือกกลายเป็น
พ้นื ทที่ ไ่ี มถ่ กู เลือก (ใช้กับเคร่ืองมอื เลือกพืน้ ทที่ กุ ประเภท
1. คลิกเลอื ก Magic Wand Tool

๓๘

2. กาหนดค่าความแตกต่างของค่าสี
3. คลิกเลอื กพืน้ ที่สีของของภาพ

4. เลือกคาส่ัง Select .-> Inverse

5. สลบั การเลือกมาท่ีรปู แทน

๓๙

ตวั อยา่ งการดึงภาพรถท่ีเลอื กมาวางไว้บนสนามแข่งรถ

3.7 เทคนิคการเลอื กพื้นท่ภี าพอย่างประณตี
ในกรณีพ้นื ที่อิสระ ไมม่ รี ูปทรงท่ีแน่นอน รวมทั้งมีความแตกต่างของสภี าพกับสพี ้นื น้อย ทาให้

ใช้เครอื่ งมอื เลือกพน้ื ท่อี ตั โนมัติไม่ได้ กรณีเช่นนี้จะใชโ้ หมด Quick Mask มาชว่ ย
1. เลอื กเครอื่ งมือ Lasso Tool
2. คลิกเมาสเ์ พ่อื เขา้ สู่ Quick Mask Mode
3. แสดงส่วนของ Mask เปน็ พ้นื ทส่ี ีแดง
4. ใช้ Brush Tool เลือกหัวแปรงเล็ก ๆ และระบายส่วนของ Mask ท่ีเป็นพ้ืนท่ีสีแดงให้กิน

พืน้ ทีส่ ่วนที่ไม่ตอ้ งการทัง้ หมด
5. คลกิ เมาสเ์ พ่ือกลับสูโ่ หมดธรรมดา
6. ผลลัพธ์การเลอื กพืน้ ทที่ ี่พอดีกบั ภาพ

3.8 เทคนิคการเลอื กพ้ืนทภ่ี าพโดยใช้เสน้ พาธ
เป็นอีกเทคนิคหน่ึงที่นิยมใช้ โดย การสร้างเส้นพาธรอบพ้ืนท่ีภาพที่ต้องการ จากน้ันกดปุ่ม

<Ctrl>+<Enter> เพื่อเปล่ียนเส้นพาธเป็นการเลอื กพ้ืนที่ (ดูการเปล่ียนเสน้ พาธเป็นการเลือกพ้ืนท่ีได้
ในตวั อยา่ งการวาดของภาพแบบตา่ ง ๆ ที่อยู่ในบทการวาดภาพและรูปทรง)

๔๐

3.9 การเตมิ สีลงในพ้ืนที่ทเี่ ลือกไว้

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

Paint Bucket Tool สาหรบั เทสีลงไปในพน้ื ทีท่ ่ีเลอื ก

Gradient Tool สาหรบั ไลส่ ลี งไปในพืน้ ทีท่ เ่ี ลอื ก

คาสัง่ Edit->Fill เทสีลงไปในพื้นท่ีที่เลือกคล้ายกับการใช้ Paint Bucket

Tool

คาส่ัง Edit->Stroke เทสีใหก้ ับเส้นขอบของพ้ืนที่ท่ีเลือก

แผนการจัดการเรยี นรู้ม่งุ เนน้ สมรรถนะ ๔๑
ชอื่ หน่วย การตกแต่งและตัดภาพบางสว่ น
หน่วยที่ 3
สปั ดาห์ที่ 4 - 5
จานวน 6 ชัว่ โมง

จานวน 6 ชว่ั โมง

5.กิจกรรมการเรียนการสอน
5.1 การนาเขา้ สบู่ ทเรียน
5.1.1ครู เช็คชอ่ื และตรวจการแต่งกาย
นกั เรยี น ขานชอื่ และลุกขนึ้ ให้ครูตรวจการแต่งกายทลี ะคน
5.1.2ครู ทบทวนก่อนเรียนโดยการซักถามเกย่ี วกบั การตกแต่งและตัดภาพ
บางส่วน
นักเรียน ตอบคาถาม ซักถามข้อสงสยั
5.2 การเรียนรู้
5.2.1ครู อธบิ ายถึงการตกแตง่ และตัดภาพบางส่วน และการใช้งาน
โปรแกรมโดยส่ือ PowerPoint ตอบคาถาม/ซักภามข้อสงสัย
นกั เรียน จดบนั ทึก ตอบคาถาม ปรึกษา/อภิปรายกับเพ่ือน
5.2.2ครู ทดสอบผเู้ รยี นโดยการถามตอบกนั ภายในห้องเรียน และอธิบาย
บางในข้อท่ีผเู้ รียนมีขอ้ สงสยั จดบันทึกย่อ
นกั เรียน ร่วมกนั อภิปรายหาข้อสรปุ
5.2.3ครู ให้นกั เรยี นทาแบบทดสอบเรื่องการตกแต่งและตัดภาพบางสว่ น
นกั เรยี น ทาแบบทดสอบ
5.2.4ครู ให้ทาการทดลองใบงาน/ให้คาแนะนา
นกั เรียน ปฏิบตั กิ ารทดลองตามใบงาน
5.3 การสรปุ
5.3.1ครู สมุ่ เรยี กนกั เรียนออกมาสรุปเน้อื หาท่ีไดเ้ รียนมาทีละคนจน
ครอบคลุมเนือ้ หาทงั้ หมด โดยครูชว่ ยให้คาแนะนา และอธบิ าย
เพ่มิ เติม
นักเรยี น ออกมาหนา้ ช้ันเรยี นสรุปเน้อื หาซกั ถามปัญหาและจดบนั ทึก
เพม่ิ เติม
5.3.2ครู ให้นักเรยี นทาใบปฏบิ ัติการทดลองใหเ้ สร็จสมบรู ณ์และให้
นกั เรยี นซักถามปัญหาในการเรียน
นักเรียน ซกั ถามปญั หาและข้อสงสัยในใบปฏิบัติการทดลอง สรุปผลการ
ทดลองและส่งใบปฏบิ ัติการทดลอง
5.4 การวัดและประเมินผล
5.4.1ครู สมุ่ ถามนักเรียนเก่ียวกับเนื้อหาที่เรยี น
นักเรียน ตอบคาถามที่ครถู าม

๔๒

5.4.2ครู ให้นกั เรยี นทาแบบทดสอลประจาหนว่ ย ตรวจใบปฏบิ ตั ิการ
นักเรยี น ทดลองของนักเรยี น เฉลยแบบทดสอบประจาหนว่ ยและบันทึก
คะแนน
ทาแบบทดสอบประจาหนว่ ย และแลกเปล่ียนกันตรวจ
แบบทดสอบ

6. สื่อการเรียนร้/ู แหล่งเรียนรู้
6.1 ส่ือส่ิงพิมพ์
หนงั สอื เรยี นวชิ า โปรแกรมกราฟกิ (Photoshop CS6) ปยิ ะ นากสงค์. (2562). กรุงเทพ :
ซคั เซส มีเดี
6.2 ส่อื โสตทัศน์
สอ่ื Power point วชิ า การสร้างเว็บไซต์ หน่วยที่ 3 เร่อื ง การตกแต่งและตดั ภาพบางสว่ น

7. เอกสารประกอบการจัดการเรยี นรู้ (ใบความรู้ ใบงาน ใบมอบหมายงาน ฯลฯ)
7.1 ใบความรปู้ ระกอบการเรียนวิชา โปรแกรมกราฟิก หนว่ ยท่ี 1 เรอื่ ง เริม่ ต้นการใชง้ าน
โปรแกรม Photoshop CS6
7.2 ใบปฏิบัตกิ ารทดลองที่ 3

8. การบูรณาการ/ความสมั พนั ธ์กบั วชิ าอ่นื
8.1 สามารถนาความรูม้ าใช้ในการตกแต่งภาพกราฟิก
8.2 สามารถนาความรมู้ าใชร้ ่วมกับวชิ าโครงงาน

9. การวดั และประเมนิ ผล
9.1ก่อนเรยี น
9.1.1.ผเู้ รียนศกึ ษา คน้ คว้าจากเอกสาร ตารา เกี่ยวกับความรู้เก่ียวกบั โปรแกรมกราฟกิ
9.1.2.ผเู้ รยี นทาแบบทดสอบก่อนเรียน
9.2ขณะเรยี น
9.2.1.การสงั เกตพฤติกรรมภายในชั้นเรยี น
9.2.2.ทาแบบฝกึ หดั ประจาหนว่ ย
9.3 หลงั เรียน
9.3.1.ใหผ้ เู้ รียนช่วยกันสรุปเนื้อหา
9.3.2.ทาแบบทดสอบหลงั เรยี น
9.3.3.ทาแบบทดสอบประจาหนว่ ย เพอื่ วัดผลสมั ฤทธท์ิ างการเรียน

10.บันทึกหลงั การสอน
10.1 ผลการใช้แผนการจดั การเรียนรู้

............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................

๔๓

............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

10.2 ผลการเรยี นรขู้ องนักเรยี น นักศกึ ษา
....................................................................................... .........................................................................
............................................................................................................................. ...................................
.................................................................................................................................. ..............................
....................................................................................................................... .........................................
............................................................................................................................. ...................................
................................................................................................................................................................

10.3 แนวทางการพัฒนาคณุ ภาพการเรียนรู้
................................................................................................................ ................................................
............................................................................................................................. ...................................
................................................ ........................................................................................................ ........
............................................................................................................................. ...................................
............................................................................................................................. ...................................
................................................................................................................................................................

แผนการจดั การเรียนรู้มงุ่ เน้นสมรรถนะ ๔๔
ชือ่ หน่วย การปรับรูปทรงภาพดว้ ยวธิ ี Transform
หนว่ ยท่ี 4
สัปดาห์ที่ 6
จานวน 3 ชั่วโมง

จานวน 3 ชั่วโมง

1. สาระสาคัญ
ในบทน้ีจะทาการปรับขนาดภาพ หมุนภาพ และบิดภาพ เพื่อให้ได้รูปทรงภาพในแบบที่

ตอ้ งการเรียกวธิ นี ี้ว่า “Transform”

2. สมรรถนะประจาหน่วย
2.1 ปรบั ขนาดภาพ (Scale)
2.2 หมุนภาพ (Rotate)
2.3 เอยี งภาพ (Skew)
2.4 บดิ ภาพใหผ้ ิดสดั ส่วน (Distort)
2.5 บดิ ภาพใหด้ ูมีมิติใกลไ้ กล (Perspective)
2.6 ดดั ภาพใหโ้ คง้ (Warp)
2.7 ปรบั รปู ทรงอิสระ (Free Transform)

3. จุดประสงค์การเรยี นรู้
3.1 ด้านความรู้
3.1.1 การปรบั ขนาดภาพดว้ ยวิธกี าร Scale
3.1.2 การหมุนภาพด้วยคาสั่ง Scale
3.1.3 การเอียงภาพด้วยคาสั่ง Skew
3.1.4 การบดิ ภาพดว้ ยคาสัง่ Distort
3.1.5 การบดิ ภาพใหม้ ีมิติดว้ ย Perspective
3.1.6 การดดั ภาพให้โค้งด้วยคาสั่ง Warp
3.2 ด้านทกั ษะ
3.2.1 สามารถปรับขนาดภาพด้วยวธิ ีการ Scale
3.2.2 สามารถการหมุนภาพดว้ ยคาส่งั Scale
3.2.3 สามารถเอียงภาพดว้ ยคาสั่ง Skew
3.2.4 สามารถบดิ ภาพด้วยคาสง่ั Distort
3.2.5 สามารถบิดภาพให้มมี ิติด้วย Perspective
3.2.6 การดัดภาพใหโ้ คง้ ด้วยคาสั่ง Warp
3.3 คณุ ลักษณะที่พึงประสงค์
3.3.1 ใฝเ่ รยี นรู้
3.3.2 ทางานเปน็ ระเบียบเรยี บร้อย
3.3.3 ผู้เรยี นมคี วามรบั ผิดชอบต่อหน้าที่

๔๕

3.3.4 ปฏบิ ตั งิ านด้านความซ่ือสตั ยส์ ุจรติ
3.3.5 มคี วามมงุ่ มั่นในการทางาน
3.3.6 ใชเ้ วลาอย่างคุม้ ค่า
3.3.7 มจี ิตสาธารณะ

แผนการจัดการเรยี นรู้ม่งุ เนน้ สมรรถนะ ๔๖
ชื่อหน่วย การปรบั รูปทรงภาพดว้ ยวธิ ี Transform
หน่วยท่ี 4
สัปดาห์ท่ี 6
จานวน 3 ช่ัวโมง

จานวน 3 ชั่วโมง

4. เนอื้ หาสาระการเรยี นรู้
4.1 ปรบั ขนาดภาพ (Scale)

ในการซอ้ นภาพ บางครง้ั ภาพทนี่ ามาไมส่ ามารถซ้อนกันได้พอดี ตอ้ งมีการปรับขนาดก่อน ดัง
ตวั อย่างต่อไปน้ี

1. ใช้ Rectangular Marquee Tool เลือกภาพ
2. ใช้ Move Tool ลากภาพมาวางบนภาพแผน่ ฟิล์ม สงั เกตไดว้ ่าภาพมขี นาดท่ใี หญก่ ว่าพ้ืนท่ี
ของแผน่ ฟลิ ม์ ไม่สามารถวางซ้อนภาพได้อยา่ งพอดี
3. เลอื กคาสั่ง Edit -> Transform -> Scale เพื่อเขา้ สู่การย่อ/ขยายขนาดของภาพ

4. จะปรากฏกรอบสี่เหลี่ยมล้อมรอบภาพ จากนั้นคลิกเมาส์ที่มุมของกรอบ ตัวชี้เมาส์จะ
เปลี่ยนรปู แลว้ ลากเมาสเ์ พ่ือลดขนาดภาพตามต้องการ

5. เม่ือได้ขนาดภาพที่ต้องการแล้ว ให้กดแป้น <Enter> เพื่อยืนยันการปรับรูปทรงภาพ
หรือกดแป้น <Esc> เพือ่ ยกเลกิ การปรบั รูปทรงภาพ
4.2 หมนุ ภาพ (Rotate)

หากภาพท่ีนามาอยู่ในทิศทาง หรอื มมุ ท่ีไม่ลงตัว เราสามารถหมุนภาพได้ ดังขน้ั ตอนตอ่ ไปนี้
1. เลือกคาส่ัง Edit -> Transform -> Rotate เพอ่ื เข้าส่กู ารหมนุ ภาพ

2. จะปรากฏกรอบส่เี หลี่ยมล้อมรอบภาพท่ีหมนุ จากนัน้ เลอื่ นเมาส์ไปบรเิ วณไอคอนส่เี หล่ียม
เล็ก ๆ จนตวั เมาสเ์ ปลย่ี นเป็นรูป แล้วลากเมาสห์ มุนภาพ

๔๗

3. เม่อื ไดภ้ าพเอยี งในมุมท่ีตอ้ งการแล้ว ให้กดแปน้ <Enter> เพอื่ ยนื ยันการปรับรูปทรงภาพ
หรือกดแปน้ <Esc> เพ่ือยกเลิกการปรบั รูปทรงภาพ
4.3 เอียงภาพ (Skew)

เป็นการเอยี งกรอบด้านใดด้านหน่งึ ของภาพ ทาใหล้ กั ษณะของภาพดลู าดเอียง ลองดูตวั อย่าง
ตอ่ ไป

1. เลือกคาสั่ง Edit -> Transform -> Skew เพ่อื เอยี งภาพ

2. จะปรากฏกรอบสี่เหล่ียมล้อมรอบภาพ คลิกเมาส์ท่ีด้านของภาพ ตัวช้ีเมาส์เปลี่ยนเป็นรูป
แล้วลากเมาสเ์ อยี งภาพตามมุมต่าง ๆ ตามต้องการ

3. เม่ือได้ภาพตามที่ต้องการแล้ว ให้กดแป้น <Enter> เพื่อยืนยันการปรับรูปทรงภาพหรือ
กดแป้น <Esc> เพือ่ ยกเลิกการปรับรูปทรงภาพ

4.4 บิดภาพให้ผิดสัดส่วน (Distort)

๔๘
เป็นการบิดภาพให้ผิดสัดส่วน ซ่ึงมีทาได้หลายลักษณะและมีรูปทรงแตกต่างกันไป ลองดู
ตวั อย่างต่อไป
1. เลอื กคาสง่ั Edit -> Transform -> Distort

2. จะปรากฏกรอบสี่เหล่ียมล้อมรอบภาพ คลิกเมาส์ที่มุมของภาพ ตัวช้ีเมาส์เปล่ียนเป็นรูป
แล้วลากเมาส์บิดภาพตามมุมตา่ ง ๆ ตามตอ้ งการ

3. เมื่อได้ขนาดภาพท่ีต้องการแล้ว ให้กดแป้น <Enter> เพื่อยืนยันการปรับรูปทรงภาพหรอื
กดแปน้ <Esc> เพอื่ ยกเลิกการปรบั รูปทรงภาพ

4.5 บดิ ภาพใหด้ มู มี ติ ใิ กลไ้ กล (Perspective)
เป็นการบิดภาพเพอ่ื สร้างมิติ มคี วามลกึ ความสงู ทาใหเ้ กิดความรลู้ กึ ใกลไ้ กลในภาพได้ ลองดู

ตัวอย่างตอ่ ไป
1. เลือกคาสง่ั Edit -> Transform -> Perspective เพอ่ื บิดภาพให้ดมู ีมติ ิ

2. ลากเมาส์เพ่ือปรับยอ่ หรอื ขยายมุมของภาพพรอ้ ม ๆ กัน ทั้ง 2 มุม
3. เมื่อไดข้ นาดภาพที่ต้องการแลว้ ใหก้ ดแป้น <Enter> เพ่ือยนื ยนั การปรับรูปทรงภาพ

๔๙

4.6 ดัดภาพใหโ้ ค้ง (Warp)
เปน็ การดดั ภาพแนวโคง้ ใช้บอ่ ยในการสรา้ งลวดลายบนวัตถผุ ิวโคง้ ลองดตู วั อย่างต่อไป
1. เลอื กคาสง่ั Edit -> Transform -> Warp เพ่ือดดั ภาพให้โค้ง

2. จะปรากฏเส้นตารางในลกั ษณะของตาข่าย โดยเราสามารถเล่ือนตาข่ายใหพ้ อดีกับภาพท่ี
ตะปรับได้

3. ดดั แขนในแตล่ ะมุมของตาขา่ ย เพอ่ื ให้ภาพโค้งตามรปู ทรงทีต่ อ้ งการ

4. เม่ือได้ขนาดภาพทตี่ อ้ งการแลว้ ให้กดแปน้ <Enter> เพอื่ ยนื ยนั กรปรับรปู ทรงภาพ

๕๐

4.7 ปรับรปู ทรงอสิ ระ (Free Transform)
ท่ีผ่านมาเราได้กล่าวถึงการใช้คาสั่ง Transform ทีละแบบ สาหรับกรณีท่ีเราต้องการปรับ

ภาพเองอย่างอิสระอาจจะต้องเรยี กใชห้ ลายคาสง่ั ว่าจะได้ผลลพั ธ์ที่ต้องการ หรืออาจจะใช้คาสง่ั Free
Transform ทีช่ ่วยปรบั ภาพได้หลายแบบแทน ลองดูตัวอย่างต่อไป

1. เลือกคาสงั่ Edit -> Free Transform หรือกดแปน้ <Ctrl>+T
2. จะปรากฏกรอบสีเ่ หล่ียมล้อมรอบภาพ เพ่ือใชป้ รบั รูปทรง
3. เลื่อนเมาส์ไปยังตาแหน่งมุม ตัวชี้เมาส์จะเปลี่ยนไปเป็น ทดลองลากเมาส์เพ่ือลดขนาด
พนื้ ทีภ่ าพในแนวทแยง
4. เล่ือนเมาสไ์ ปยังตาแหน่งขอบ ตวั ช้ีเมาส์จะเปล่ียนไปเปน็ ทดลองลากเมาส์เพือ่ หมนุ ภาพ
5. คลิกเมาส์กลางภาพเพ่ือย้ายตาแหน่งภาพ เมื่อได้ตาแหน่ง ขนาดของภาพตามที่ต้องการ
แล้ว ใหก้ ดแปน้ <Enter> เพอ่ื ยนื ยนั การปรับรปู ทรงภาพ

แผนการจัดการเรยี นรู้มุง่ เนน้ สมรรถนะ ๕๑
ชือ่ หน่วย การปรับรูปทรงภาพด้วยวิธี Transform
หน่วยท่ี 4
สปั ดาหท์ ่ี 6
จานวน 3 ชั่วโมง

จานวน 3 ช่ัวโมง

5.กิจกรรมการเรยี นการสอน
5.1 การนาเขา้ สู่บทเรียน
5.1.1ครู เชค็ ชอื่ และตรวจการแตง่ กาย
นักเรยี น ขานชอ่ื และลุกขึ้นให้ครตู รวจการแต่งกายทลี ะคน
5.1.2ครู ทบทวนกอ่ นเรียนโดยการซกั ถามเรอ่ื งปรับรูปทรงภาพดว้ ยวิธี
Transform
นักเรยี น ตอบคาถาม ซักถามข้อสงสยั
5.2 การเรยี นรู้
5.2.1ครู อธบิ ายถึงการปรับรปู ทรงภาพดว้ ยวิธี Transform และการใช้
งานโปรแกรมโดยสือ่ PowerPoint ตอบคาถาม/ซักภามข้อสงสัย
นกั เรยี น จดบนั ทกึ ตอบคาถาม ปรกึ ษา/อภิปรายกับเพื่อน
5.2.2ครู ทดสอบผเู้ รียนโดยการถามตอบกันภายในห้องเรียน และอธิบาย
บางในข้อทผ่ี ู้เรียนมีข้อสงสยั จดบันทึกย่อ
นกั เรยี น รว่ มกนั อภิปรายหาข้อสรปุ
5.2.3ครู ใหน้ กั เรียนทาแบบทดสอบเรื่องการปรบั รูปทรงภาพด้วยวธิ ี
Transform เพอื่ เก็บคะแนน
นกั เรยี น ทาแบบทดสอบ
5.2.4ครู ให้ทาการทดลองใบงาน/ให้คาแนะนา
นักเรยี น ปฏิบตั กิ ารทดลองตามใบงาน
5.3 การสรุป
5.3.1ครู ส่มุ เรยี กนกั เรยี นออกมาสรุปเนอื้ หาท่ีได้เรียนมาทีละคนจน
ครอบคลุมเน้อื หาทง้ั หมด โดยครูช่วยให้คาแนะนา และอธบิ าย
เพ่ิมเติม
นกั เรียน ออกมาหน้าช้ันเรียนสรุปเนื้อหาซักถามปัญหาและจดบันทึก
เพ่ิมเติม
5.3.2ครู ให้นักเรยี นทาใบปฏบิ ัติการทดลองใหเ้ สร็จสมบรู ณ์และให้
นักเรียนซักถามปญั หาในการเรยี น
นกั เรยี น ซักถามปัญหาและข้อสงสยั ในใบปฏิบัติการทดลอง สรุปผลการ
ทดลองและสง่ ใบปฏิบตั ิการทดลอง
5.4 การวัดและประเมินผล
5.4.1ครู สมุ่ ถามนกั เรยี นเกย่ี วกับเน้ือหาทีเ่ รยี น
นักเรียน ตอบคาถามท่ีครูถาม

๕๒

5.4.2ครู ใหน้ ักเรียนทาแบบทดสอลประจาหน่วย ตรวจใบปฏบิ ตั กิ าร
ทดลองของนักเรยี น เฉลยแบบทดสอบประจาหน่วยและบันทกึ
คะแนน

นักเรียน ทาแบบทดสอบประจาหนว่ ย และแลกเปล่ยี นกันตรวจ
แบบทดสอบ

6. ส่อื การเรียนร/ู้ แหล่งเรยี นรู้
6.1 สอื่ สิง่ พมิ พ์
หนงั สอื เรียนวชิ า โปรแกรมกราฟิก (Photoshop CS6) ปยิ ะ นากสงค์. (2562). กรุงเทพ :
ซคั เซส มเี ดี
6.2 สอื่ โสตทศั น์
ส่อื Power point วิชา การสรา้ งเว็บไซต์ หน่วยที่ 4 เรื่อง การปรับรปู ทรงภาพด้วยวธิ ี
Transform

7. เอกสารประกอบการจดั การเรียนรู้ (ใบความรู้ ใบงาน ใบมอบหมายงาน ฯลฯ)
7.1 ใบความรูป้ ระกอบการเรียนวชิ า โปรแกรมกราฟิก หน่วยท่ี 4 เร่ือง การปรบั รปู ทรงภาพดว้ ย
วธิ ี Transform
7.2 ใบปฏิบัตกิ ารทดลองท่ี 4

8. การบูรณาการ/ความสัมพันธ์กบั วิชาอ่นื
8.1 สามารถนาความรมู้ าใช้ในการตกแตง่ ภาพกราฟิก
8.2 สามารถนาความรู้มาใชร้ ่วมกับวิชาโครงงาน

9. การวัดและประเมนิ ผล
9.1ก่อนเรียน
9.1.1.ผเู้ รียนศกึ ษา คน้ คว้าจากเอกสาร ตารา เกีย่ วกับความรเู้ ก่ียวกับโปรแกรมกราฟกิ
9.1.2.ผ้เู รยี นทาแบบทดสอบก่อนเรียน
9.2ขณะเรียน
9.2.1.การสังเกตพฤติกรรมภายในชั้นเรยี น
9.2.2.ทาแบบฝกึ หัดประจาหนว่ ย
9.3 หลงั เรียน
9.3.1.ให้ผู้เรียนช่วยกนั สรปุ เน้ือหา
9.3.2.ทาแบบทดสอบหลงั เรยี น
9.3.3.ทาแบบทดสอบประจาหน่วย เพ่ือวดั ผลสมั ฤทธท์ิ างการเรยี น

10.บันทกึ หลงั การสอน
10.1 ผลการใช้แผนการจัดการเรียนรู้

๕๓

............................................................................................................................. ...................................
................................................................................................................................................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

10.2 ผลการเรียนร้ขู องนกั เรยี น นกั ศกึ ษา
....................................................................................... .........................................................................
............................................................................................................................. ...................................
.................................................................................................................................. ..............................
....................................................................................................................... .........................................
............................................................................................................................. ...................................
................................................................................................................................................................

10.3 แนวทางการพัฒนาคุณภาพการเรยี นรู้
................................................................................................................ ................................................
............................................................................................................................. ...................................
................................................ ............................................................................................................ ....
............................................................................................................................. ...................................
............................................................................................................................. ...................................
................................................................................................ ................................................................

แผนการจดั การเรยี นรู้ม่งุ เน้นสมรรถนะ ๕๔
ชื่อหน่วย การสรา้ งข้อความตกแต่งภาพ
หน่วยท่ี 5
สปั ดาหท์ ี่ 7
จานวน 3 ชวั่ โมง

จานวน 3 ชวั่ โมง

1. สาระสาคญั
การสรา้ งงานกราฟิกนอกจากจะเป็นการนาภาพหลาย ๆ ภาพมาตกแตง่ เป็นเรื่องรวมแลว้ ยัง

สามารถใส่ข้อความประกอบการนาเสนอนั้นได้ด้วย ซึ่งเน้ือหาในบทนี้จะกล่าวถึงเรื่องการใส่ตัวอักษร
ลงไปในภาพ โดยใช้คาส่ังในตระกูล Type Tool และปรบั แตง่ ตัวอักษรและขอ้ ความตา่ ง ๆ

2. สมรรถนะประจาหน่วย
2.1 รู้จกั กับประเภทของตวั อักษร
2.2 เคร่อื งมือการสรา้ งตัวอักษร
2.3 การสรา้ งตวั อักษรแบบเวกเตอร์
2.4 การแกไ้ ขข้อความที่พิมพ์ผดิ พลาด
2.6 การกาหนดรูปแบบตวั อักษร
2.7 การสร้างตัวอกั ษรแบบบิตแมพ
2.8 แปลงตัวอักษรเวกเตอร์ให้เปน็ แบบบิตแมพ
2.9 ตกแตง่ ขอ้ ความดว้ ย Layer Style

3. จุดประสงคก์ ารเรยี นรู้
3.1 ดา้ นความรู้
3.1.1 ความแตกตา่ งระหว่างตวั อกั ษรแบบเวกเตอรแ์ ละบิตแมพ
3.1.2 ตวั อกั ษรแบบ Point Type และ Paragraph Type
3.1.3 การปรับรูปแบบอักษรเพื่อประกอบชิ้นงาน
3.1.4 การใช้ตวั อกั ษรภาษาไทยใน Photoshop
3.1.5 การสรา้ งตวั อกั ษรแบบบิตแมพ
3.1.6 การตกแต่งตัวอักษรด้วยพาเนล Style และ Layer Style
3.2 ด้านทกั ษะ
3.2.1 อธิบายความแตกตา่ งระหว่างตัวอักษรแบบเวกเตอร์และบิตแมพ ได้
3.2.2 สรา้ งตวั อักษรแบบ Point Type และ Paragraph Type ได้
3.2.3 สามารถปรบั รปู แบบตัวอักษรเพ่ือประกอบช้นิ งานได้
3.2.4 สามารถใช้ตวั อักษรภาษาไทยใน Photoshop ได้
3.2.5 สามารถสร้างตัวอักษรแบบบิตแมพได้
3.2.6 สามารถตกแต่งตวั อักษรดว้ ยพาเนบ Style และ Layer Style
3.3 คุณลักษณะที่พึงประสงค์

๕๕

3.3.1 ใฝ่เรยี นรู้
3.3.2 ทางานเป็นระเบยี บเรยี บร้อย
3.3.3 ผู้เรยี นมีความรบั ผิดชอบตอ่ หน้าท่ี
3.3.4 ปฏบิ ัติงานดา้ นความซ่ือสตั ย์สจุ รติ
3.3.5 มีความมุง่ มน่ั ในการทางาน
3.3.6 ใชเ้ วลาอยา่ งคุ้มคา่
3.3.7 มีจิตสาธารณะ

แผนการจดั การเรยี นรู้ม่งุ เนน้ สมรรถนะ ๕๖
ชื่อหน่วย การสร้างข้อความตกแต่งภาพ
หนว่ ยท่ี 5
สัปดาห์ที่ 7
จานวน 3 ช่วั โมง

จานวน 3 ชว่ั โมง

4. เนื้อหาสาระการเรียนรู้

5.1 รูจ้ ักกับประเภทของตวั อกั ษร

ตวั อักษรทใ่ี ช้ในโปรแกรมกราฟกิ โดยท่วั ไปจะแบง่ ออกเปน็ 2 ประเภท คือ

แบบเวกเตอร์ (Vector)

ตัวอักษรแบบเวกเตอร์ จะเกิดข้ึนจากการลากเส้นตรง เส้นโค้งที่คานวณด้วยสมการทาง

คณิตศาสตร์ จากจุดหนง่ึ ไปสู่อีกจุดหน่ึง ตอ่ เนอื งจนเกิดเปน็ ภาพหรอื ตัวอกั ษร

ตัวอักษรแบบเวกเตอร์จะไม่มีปัญหาเร่ืองรอยแตกบนขอบตัวอักษร เมื่อเกิดการย่อ/ขยาย

ตัวอักษรมาก ๆ จึงเหมาะสาหรับนามาใช้ในงานพิมพ์ และงานศิลป์ อย่างไรก็ตาม ตัวอักษรแบบนี้จะ

นาไปตกแต่งเอฟเฟ็กต์ โดยใชฟ้ ลิ เตอร์ไม่ได้

แบบบิตแมพ (Bitmap)

ตัวอักษรแบบบติ แมพ จะเกดิ จากการเรียงชอ่ งสเี ป็นตารางเพอ่ื สรา้ งภาพ หรอื ตวั อักษร ทาให้

สะดวกในการประมวลผลเร่ืองสี โดยเฉพาะอย่างย่ิงการลงสีและการตกแต่งภาพ ฉะนั้นข้อดขี องอักษร

แบบบิตแมพคือ สามารถใช้ได้กับการใส่เอฟเฟ็กต์และฟิลเตอร์ ในขณะที่ข้อเสีย คือ เม่ือมีการขนาย

ขนาดจะทาให้ ชอ่ งสีขยายใหญเ่ กนิ ไปจนเห็นตวั อักษรแตกเปน็ ช่องเหล่ยี ม ๆ

สรุปข้อดีข้อเสียของตวั อกั ษรแบบเวกเตอรแ์ ละแบบบติ แมพ คือ

ตวั อกั ษรเวกเตอร์ ตัวอักษรแบบบิตแมพ

1. ปรับเปล่ียนขนาดไดต้ ามใจชอบภาพไมแ่ ตก 1. ปรบั เปล่ยี นขนาพ ภาพจะแตก

2. แกไ้ ขขอ้ ความได้ง่าย 2. แกไ้ ขข้อความยาก หรอื แกไ้ ขไม่ได้

3. การปรับแต่งสี และลกู เลน่ ทาไดน้ อ้ ยมาก 3. การปรบั แต่งสี และลูกเล่นทาไดม้ าก

ฉะนัน้ หลักการและเทคนิคในการปรบั แตง่ ตัวอักษรทีดีทส่ี ุด คอื พิมพ์ตวั อักษร (การพิมพ์จะได้

ตัวอักษรแบบเวกเตอร์) กาหนดขนาดและดูความถูกต้องของตัวอักษร หลังจากนั้นจึงเปลี่ยนจาก

ตวั อกั ษรแบบเวกเตอร์มาเป็นตัวอักษรแบบบิตแมพ เพ่ือปรับเปลีย่ นสี และใสเ่ อฟเฟ็กต์ให้กบั ตัวอักษร

เพราะถ้าแปลงข้อความจากเวกเตอร์เป็นบิตแมพ และต่อจากนั้นมาปรับขนาดที่หลังจะส่งผลให้

ตวั อักษรแตกได้

5.2 เครือ่ งมือการสร้างตวั อักษร

สามารถสร้างข้อความได้โดยใช้คาสั่ง Type Tool ซึ่งมีลักษณะในการใช้งานที่แตกต่างกันไป

4 รูปแบบ ดงั น้ี

๕๗

เคร่อื งมอื คุณสมบัติ ประเภท

Horizontal type Tool พิมพ์ตัวอกั ษรในแนวนอน เวกเตอร์

Vertical Type Tool พมิ พต์ ัวอกั ษรในแนวตัง้ เวกเตอร์

Horizontal type Mask Tool เ ลื อ ก พ้ื น ที่ เ ป็ น ตั ว อั ก ษ ร ใ น บติ แมพ

แนวนอน

Vertical Type Mask Tool เลือกพ้นื ที่เป็นตัวอกั ษรในแนวตง้ั บติ แมพ

5.3 การสร้างตัวอักษรแบบเวกเตอร์
ตัวอักษรแบบเวกเตอร์ เหมาะสาหรับการนาเสนอข้อความที่มีความคมชัด และมีสีสันเรียบ

งา่ ย เพราะตวั อกั ษรแบบเวกเตอร์ไม่สามารถใสเ่ อฟเฟ็กต์ได้มากนัก
ตัวอักษรแบบเวกเตอร์ มีอยู่ 2 แบบ คือ Point Type และ Paragraph Type ซ่ึงต่างกัน

ตรงท่ี Point Type จะเปน็ ข้อความช่ือเรอื่ ง สว่ น Paragraph Type จะเปน็ ขอ้ ความเน้อื เรือ่ งทม่ี หี ลาย
บรรทดั หรอื มลี ักษณะเป็นย่อหนา้
สรา้ งตัวอักษรแบบ Point type

จากตัวอย่างจะสร้างแผน่ ปา้ ยโฆษณารับงานถา่ ยภาพ โดยจะสร้างตวั อักษรแบบ Point type
เป็นช่ืองานถา่ ยภาพดังนี้
1. คลกิ เลอื ก Type Tool ตามทต่ี ้องการ

2. เลือกรูปแบบของตวั อักษร 4. เลอื กขนาดตวั อักษร 7. คลิกเมาส์ยืนยันใช้ข้อความทีส่ รา้ งไว้

3. เลอื กลกั ษณะ หนา เอยี ง หรอื ปกติ 5. เลอื กสขี องตวั อักษร
สรา้ งตัวอกั ษรแบบ Paragraph type 6. คลกิ เมาสแ์ ละพิมพข์ ้อความที่ตอ้ งการ

๕๘
ตัวอักษรแบบ Paragraph จะมีลักษณะเป็นข้อความที่มีหลายบรรทัด หรือเป็นย่อหน้า ดัง
ตวั อยา่ งจะสร้างขอ้ ความโฆษณารบั จ้างถ่ายภาพต่อจากข้นั ตอนทีผ่ า่ นมา
1. คลิกเมาส์เลือก Type Tool ทตี่ ้องการ

2. เลอื กเมาสเ์ ปน็ พื้นที่กรอบ
สเี่ หล่ียมสาหรบั พิมพ์ข้อความ

2. เลอื กรปู แบบของตวั อักษร 4. เลอื กขนาดตัวอกั ษร 7. คลกิ เมาสย์ นื ยนั ใชข้ ้อความทส่ี ร้าง
3. เลอื กลกั ษณะ หนา เอยี ง หรอื ปกติ 5. เลือกสขี องตวั อักษร

4 พมิ พ์ข้อความทตี่ ้องการลงไป
และจะแสดงผลแบบ Paragraph

๕๙

5.4 การแกไ้ ขขอ้ ความท่พี ิมพ์ผดิ พลาด

ถา้ พมิ พ์ข้อความผดิ หรอื อยากปรับรปู แบบใหม่ มีข้ันตอนดังนี้

ลากเมาสบ์ นตัวอักษรให้เกิดแถบสีดาครอบ หากคาสะกดผิด สามารถแก้ไขได้โดยการคลิก

ตัวอกั ษรเพอื่ พมิ พ์คาใหม่ทับลงไป เมาสบ์ ริเวณที่ผิด แล้วแก้ไขใหม่

ขณะเลือก Type Tool สามารถปรับแตง่ นอกจากนน้ั ยงั สามารถใชค้ าส่ัง Tranform มา

รายละเอียดตวั อักษรเพ่ิมเติมได้ท่ีออปชั่นบาร์ ปรบั ขนาดของตัวอักษรไดต้ ามตอ้ งการ

5.5 การจดั เรยี งข้อความในยอ่ หน้า

สามารถแก้ไขและจัดเรียงข้อความแบบ Paragraph type โดยคลิกเมาสป์ ุ่ม ท่ีอยู่บนออปชั่น

บาร์เพอ่ื เปดิ พาเนล Paragraph

วางขอ้ ความก้นั หน้า วางข้อความก้นั หลงั
ให้บรรทดั แรกย่อหนา้ เย้ือง ระยะหา่ งระหวา่ งย่อหนา้ ถดั ไป

ตดั ข้อความขึ้นบรรทดั ใหม่ โดยใส่เคร่อื งหมาย - เพอ่ื ให้รูว้ ่ายะงไม่จบ

5.6 การกาหนดรูปแบบตัวอักษร
สามารถปรับแต่งตัวอักษรได้เพ่ิมเติม โดยอาศัยการคลิกเมาส์ที่ปุ่ม ออปชั่นบาร์ หรือเลือก

คาส่ัง Window->Character เพือ่ เปดิ พาเนล Character

Font Type Style
Size
Kerning Leading
Vertically sale Tracking
Baseline Horizontally Scale
Color
ลกั ษณะตวั อักษร

 Leading ภาษา Anti-Alias
กาหนดระยะหา่ งระหวา่ งบรรทดั

๖๐

 Kerning กาหนดช่องไฟระหว่างตวั อกั ษร

 Tracking กาหนดช่องไฟเหมือนกับ Kerning แต่ต่างกันตรงที่ว่า

Kerning เป็นกาหนดช่องไฟระหว่างตัวอักษร 2 ตัวอักษร ที่ต้องการ แต่ถ้าต้องการกาหนด

ช่องไฟทั้งข้อความที่พิมพ์ ต้องใช้ Tracking โดยใช้เมาส์เลือกข้อความช่วงที่ต้องการกาหนด

ช่องไฟกอ่ น แล้วจึงกาหนดค่าชอ่ งไฟในช่อง Tracking

 Vertically Scale กาหนดความสงู ของตวั อกั ษร

 Horizontal Scale กาหนดความกวา้ งของตัวอักษร

 Baseline กาหนดระยะห่างของตัวอักษรเทียบกับเส้นฐานของตัวอักษร

คาสั่งน้ีจะทาให้พิมพ์ข้อความท่ีเป็นตัวห้อย และตัวยกได้ โดยค่า 0 หมายถึง ตัวอักษรปกติ

ค่าติดลบ หมายถึงตัวห้อย และค่าท่ีมากกว่า 0 หมายถึงตัวยก และ 10 หมายถึง ขึ้นไปจาก

ฐานเดิม 10 หน่วย

Anti-Alias เปน็ การตกแต่งขอบของตวั อกั ษรให้เรียบ ดงั นี้
None ไมท่ าการปรบั แตง่ ตวั อกั ษร
Sharp เป็นการแสดงตวั อกั ษรให้ดูคม
Crisp เป็นการแสดงตวั อักษรใหด้ ชู ัดเจน
Strong เป็นการแสดงตวั อกั ษรให้ดูเข้ม
Smooth เป็นการแสดงตัวอกั ษรให้ดูเรียบเนียน

Language กาหนดภาษาทใ่ี ช้

5.7 การสรา้ งตัวอกั ษรแบบบติ แมพ

สามารถเลือกพื้นท่ีเป็นรูปตัวอักษรได้ โดยใช้ Horizontal Type Mask Tool เพื่อสร้างชอบ

เขตตวั อักษรในแนวนอน และ vertical Type Mask Tool

เพ่อื สรา้ งขอบเขตตวั อักษรในแนวต้ัง จากน้ันสามารถเทสี ไล่สี หรอื ตดั พ้นื ทีภ่ าพให้อยู่ภายใน

ขอบเขตของข้อความ เพื่อนาไปใชต้ กตางภาพได้ตามต้องการ ดังตวั อยา่ งจะทาการสร้างตัวอักษรแบบ

บติ แมพดงั น้ี

1. คลิกเลอื ก Horizontal Type Mask Tool

2. เลอื กรปู แบบของตัวอกั ษร 4. เลือกขนาดตัวอกั ษร 8. คลิกเมาส์ยืนยันใช้ข้อความทส่ี รา้ ง
3. เลอื กลักษณะ หนา เอียง หรือปกติ 5. เลอื กสขี องตวั อักษร

๖๑

6. พิมพ์ขอ้ ความทต่ี ้องการ

7. ใช้ Gradient Tool ไล่เฉดสี
5.8 แปลงตวั อักษรเวกเตอร์ให้เป็นแบบบติ แมพ

เนอ่ื งจากข้อความแบบเวกเตอรใ์ หค้ วามคมชัด ในขณะทขี่ ้อความแบบบิตแมพนาไปใช้ตกแต่ง
เอฟเฟ็กต์โดยใช้เคร่ืองมือต่าง ๆ ของ Photoshop ได้ ดังน้ันถ้าต้องการจุดดีของท้ังสองแบบ ให้เริ่ม
โดยการสร้างข้อความแบบเวกเตอร์ก่อน เม่ือวางท่ีตาแหน่งและขนาดเหมาะสมจะแปลงข้อความเปน็
แบบบิตแมพ ดงั น้ี
1. คลกิ เมาส์เลอื ก Type Tool

2. พิมพ์ขอ้ ความทต่ี ้องการ

3. คลิกเมาสข์ วาเลอื ก Rasterize Type

จากนนั้ สามารถเลอื ก Filter ได้ตามตอ้ งการ
5.9 ตกแต่งขอ้ ความด้วย Layer Style

๖๒
Layer Style เป้นการใส่เอฟเฟ็กต์พิเศษให้กับข้อความได้ทั้งแบบเวกเตอร์และบิตแมพ ได้แก่
การใส่เงา การทาให้ดนู ูนขึ้น และการเจาะให้ดูลึกลงไป เป็นต้น ซึ่งจะตกแต่งให้กับภาพ หรือข้อความ
ที่เลอื ก ในบทนจ้ี ะแนะนาวิธกี ารใช้งานขัน้ เบ้ืองตน้ โดยจะลองตกแต่งข้อความดงั ตัวอยา่ งน้ี
1. พมิ พข์ ้อความลงบนภาพ
2. เลือกคาส่ัง Layer->Layer Style ->Drop Shadow..

3. กาหนดรูปแบบของเงา แล้วคลิกปมุ่ OK

แผนการจดั การเรยี นร้มู งุ่ เนน้ สมรรถนะ ๖๓
ชอ่ื หน่วย การสร้างข้อความตกแตง่ ภาพ
หน่วยท่ี 5
สปั ดาห์ท่ี 7
จานวน 3 ช่วั โมง

จานวน 3 ชัว่ โมง

5.กจิ กรรมการเรยี นการสอน
5.1 การนาเข้าสู่บทเรยี น
5.1.1ครู เช็คชื่อและตรวจการแต่งกาย
นักเรยี น ขานชื่อและลุกข้ึนให้ครูตรวจการแตง่ กายทีละคน
5.1.2ครู ทบทวนก่อนเรยี นโดยการซกั ถามเก่ยี วกบั การสรา้ งขอ้ ความตกแต่ง
ภาพ
นักเรียน ตอบคาถาม ซักถามข้อสงสัย
5.2 การเรียนรู้
5.2.1ครู อธบิ ายถึงการสร้างข้อความตกแต่งภาพ และการใชง้ านโปรแกรม
โดยสื่อ PowerPoint ตอบคาถาม/ซักภามข้อสงสยั
นักเรยี น จดบันทกึ ตอบคาถาม ปรึกษา/อภิปรายกบั เพอื่ น
5.2.2ครู ทดสอบผเู้ รียนโดยการถามตอบกันภายในหอ้ งเรยี น และอธิบาย
บางในข้อทผี่ ู้เรยี นมีขอ้ สงสัยจดบันทึกย่อ
นกั เรียน รว่ มกนั อภิปรายหาข้อสรปุ
5.2.3ครู ให้นกั เรียนทาแบบทดสอบเรื่องการสร้างข้อความตกแต่งภาพ
เพือ่ เก็บคะแนน
นักเรียน ทาแบบทดสอบ
5.2.4ครู ให้ทาการทดลองใบงาน/ให้คาแนะนา
นักเรยี น ปฏิบัตกิ ารทดลองตามใบงาน
5.3 การสรปุ
5.3.1ครู สมุ่ เรียกนักเรยี นออกมาสรปุ เนื้อหาท่ีไดเ้ รยี นมาทลี ะคนจน
ครอบคลุมเนอื้ หาทง้ั หมด โดยครชู ว่ ยใหค้ าแนะนา และอธบิ าย
เพมิ่ เติม
นกั เรยี น ออกมาหนา้ ช้ันเรียนสรุปเน้ือหาซกั ถามปญั หาและจดบันทึก
เพม่ิ เติม
5.3.2ครู ใหน้ ักเรยี นทาใบปฏิบตั ิการทดลองใหเ้ สรจ็ สมบูรณ์และให้
นกั เรียนซกั ถามปัญหาในการเรยี น
นักเรียน ซักถามปัญหาและข้อสงสยั ในใบปฏบิ ัติการทดลอง สรปุ ผลการ
ทดลองและส่งใบปฏบิ ตั ิการทดลอง
5.4 การวัดและประเมนิ ผล
5.4.1ครู สมุ่ ถามนักเรียนเก่ียวกับเนื้อหาทีเ่ รียน
นกั เรียน ตอบคาถามทีค่ รถู าม

๖๔

5.4.2ครู ใหน้ กั เรียนทาแบบทดสอลประจาหน่วย ตรวจใบปฏบิ ตั ิการ
ทดลองของนักเรียน เฉลยแบบทดสอบประจาหนว่ ยและบันทึก
คะแนน

นักเรียน ทาแบบทดสอบประจาหน่วย และแลกเปลี่ยนกนั ตรวจ
แบบทดสอบ

6. ส่อื การเรียนรู้/แหล่งเรียนรู้
6.1 สอ่ื สง่ิ พมิ พ์
หนงั สือเรยี นวิชา โปรแกรมกราฟิก (Photoshop CS6) ปยิ ะ นากสงค์. (2562). กรงุ เทพ :
ซคั เซส มีเดี
6.2 สื่อโสตทัศน์
สือ่ Power point วิชา การสร้างเว็บไซต์ หนว่ ยท่ี 5 เร่อื ง การสรา้ งข้อความตกแตง่ ภาพ

7. เอกสารประกอบการจัดการเรยี นรู้ (ใบความรู้ ใบงาน ใบมอบหมายงาน ฯลฯ)
7.1 ใบความรปู้ ระกอบการเรียนวิชา โปรแกรมกราฟิก หนว่ ยท่ี 5 เรื่อง การสรา้ งข้อความตกแต่ง
ภาพ
7.2 ใบปฏิบตั กิ ารทดลองที่ 5

8. การบรู ณาการ/ความสมั พนั ธ์กับวิชาอืน่
8.1 สามารถนาความรู้มาใช้ในการตกแตง่ ภาพกราฟิก
8.2 สามารถนาความรมู้ าใชร้ ่วมกับวิชาโครงงาน

9. การวดั และประเมนิ ผล
9.1ก่อนเรยี น
9.1.1.ผเู้ รยี นศึกษา ค้นคว้าจากเอกสาร ตารา เกยี่ วกับความรเู้ กีย่ วกบั โปรแกรมกราฟิก
9.1.2.ผูเ้ รยี นทาแบบทดสอบก่อนเรียน
9.2ขณะเรียน
9.2.1.การสังเกตพฤติกรรมภายในช้ันเรยี น
9.2.2.ทาแบบฝึกหัดประจาหน่วย
9.3 หลงั เรียน
9.3.1.ให้ผู้เรยี นชว่ ยกันสรปุ เนอื้ หา
9.3.2.ทาแบบทดสอบหลงั เรียน
9.3.3.ทาแบบทดสอบประจาหนว่ ย เพอ่ื วดั ผลสมั ฤทธท์ิ างการเรยี น

10.บนั ทกึ หลงั การสอน
10.1 ผลการใช้แผนการจัดการเรยี นรู้

............................................................................................................................. ...................................
................................................................................................................................................................
............................................................................................................................. ...................................

๖๕

.............................................................................................................................. ..................................
................................................................................................. ...............................................................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

10.2 ผลการเรยี นร้ขู องนกั เรียน นักศกึ ษา
............................................................................................................................. ...................................
................................................................................................ ................................................................
............................................................................................................................. ...................................
............................................................................................................................................ ....................
............................................................................................................................. ...................................
............................................................................................................................. ...................................

10.3 แนวทางการพัฒนาคณุ ภาพการเรียนรู้
...................................................................................................................................................... ..........
......................................................................................................................... .......................................
............................................................................................................................. ...................................
................................................................................................................................................................
............................................................................................................................. ...................................
................................................................................................ ................................................................

แผนการจดั การเรยี นรมู้ ุ่งเน้นสมรรถนะ ๖๖
ชื่อหน่วย ทำงำนกับเลเยอร์
หน่วยท่ี 6
สปั ดาห์ที่ 8
จานวน 3 ชวั่ โมง

จานวน 3 ช่วั โมง

1. สาระสาคัญ
บทน้ีจะมำเรียนรู้กำรจัดวำงภำพซ้อนกัน เรียกกำรทำงำนนี้ว่ำ เลเยอร์ (Layer) ซ่ึงช่วย

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

2. สมรรถนะประจาหน่วย
2.1 ควำมหมำยของเลเยอร์
2.2 กำรซอ้ นภำพด้วยเลเยอร์
2.3 กำรใช้งำนเลเยอร์
2.4 จัดหมวดหมขู่ องเลเยอร์
2.5 เช่ือมเลเยอร์เขำ้ ดว้ ยกัน
2.6 รวมเลเยอร์

3. จดุ ประสงคก์ ารเรยี นรู้
3.1 ด้ำนควำมรู้
3.1.1 กำรซอ้ นภำพด้วยเลเยอร์
3.1.2 กำรจัดกำรกับเลเยอรใ์ นลักษณะต่ำง ๆ
3.1.3 กำรจดั หมวดหมู่
3.1.4 กำรลิงค์ให้เลเยอรท์ ำงำนรว่ มกนั
3.1.5 กำรรวมเลเยอร์
3.2 ดำ้ นทักษะ
3.2.1 สำมำรถซอ้ นภำพดว้ ยเลเยอรไ์ ด้
3.2.2 สำมำรถจดั กำรกับเลเยอร์ในลกั ษณะต่ำง ๆ ได้
3.2.3 สำมำรถจดั หมวดหม่ไู ด้
3.2.4 สำมำรถลงิ ค์ใหเ้ ลเยอร์ทำงำนรว่ มกันได้
3.2.5 สำมำรถรวมเลเยอร์
3.3 คุณลักษณะที่พึงประสงค์
3.3.1 ใฝเ่ รยี นรู้
3.3.2 ทำงำนเป็นระเบยี บเรยี บรอ้ ย

๖๗

3.3.3 ผ้เู รยี นมีควำมรับผิดชอบตอ่ หนำ้ ท่ี
3.3.4 ปฏิบัตงิ ำนด้ำนควำมซ่ือสตั ย์สจุ ริต
3.3.5 มคี วำมมุ่งม่นั ในกำรทำงำน
3.3.6 ใชเ้ วลำอยำ่ งคุม้ ค่ำ
3.3.7 มีจติ สำธำรณะ

แผนการจัดการเรยี นรมู้ งุ่ เนน้ สมรรถนะ ๖๘
ช่อื หน่วย ทำงำนกับเลเยอร์
หน่วยท่ี 6
สัปดาห์ที่ 8
จานวน 3 ช่วั โมง

จานวน 3 ช่ัวโมง

4. เนอ้ื หาสาระการเรยี นรู้
6.1 ความหมายของเลเยอร์

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

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

ให้เปิดภำพท่ีสร้ำงเป็นฉำกหลัง จำกนั้นเลือกคำสั่ง Window->Layers เป็นเปิดพำเนลเล
เยอร์ซ่ึงแสดงเลเยอร์ต่ำง ๆ ในชิ้นงำน สังเกตได้ว่ำเร่ิมแรกมีเพียงเลเยอร์เดียว คือ เลเยอร์ชื่อ
Background

1. เปดิ ภำพทส่ี ร้ำงเปน็ ฉำกหลงั
2. เลือก Window->Layers ปรำกฏพำเนล Layers
3. แสดงเลเยอร์เดียวคอื เลเยอร์ Background
ขั้นตอนที่ 2 ใสภ่ ำพในเลเยอร์ภำพช้ันที่ 2
ต่อไปเปิดภำพอีกภำพ เลือกภำพเฉพำะส่วนท่ีต้องกำร และใช้ Move tool ตัดภำพไปวำง
ซ้อนอยู่บนภำพพ้นื หลัง สงั เกตว่ำในพำเนล Layers มีเลเยอรใ์ หมเ่ กิดขน้ึ เปน็ เลเยอร์ภำพชื่อ Layer 1
1. เลือกพ้ืนทท่ี ตี่ ัดไปซอ้ นภำพ

2. ใช้ Move Tool ลำกภำพไปซ้อนบนภำพพ้ืนหลงั

๖๙

3. เกดิ Layer 1 เป็นเลเยอร์ภำพทซ่ี อ้ นอยบู่ น เลเยอร์ Background

ข้ันตอนที่ 3 ใสข่ ้อควำมในเลเยอร์ขอ้ ควำมชั้นท่ี 3
ให้พิมพ์ข้อควำมลงไปในภำพ Photoshop จะสร้ำงเลเยอร์ข้อควำมซ้อนขึ้นมำให้โดย

อัตโนมัติ สังเกตได้จำกพำเนล Layers มีเลเยอรใ์ หม่เพิ่มขึ้นมำ ซึง่ ช่อื ของเลเยอรเ์ ป็นข้อควำมเดียวกัน
กบั ที่พิมพเ์ ข้ำไป

1. คลกิ เมำส์ Type Tool แลว้ เลือกตัวอักษร ขนำด และสที ่ีต้องกำร
2. พิมพข์ ้อควำมลงในภำพ

3. คลิกเพื่อใชข้ ้อควำมทพ่ี ิมพ์ไว้
4. เกดิ เลเยอรข์ อ้ ควำมเป็นตวั อกั ษร “Happy New Year”

๗๐

6.3 การใชง้ านเลเยอร์
ในหัวขอ้ นี้มำเรยี นรจู้ กั วธิ กี ำรใช้งำนเลเยอร์เบ้อื งต้น เพอ่ื ให้สำมำรถประยุกตใ์ ช้กบั งำนเลเยอร์

อนื่ ๆ ได้
ทางานกับ Active Layer

ในกำรใช้งำนโปรแกรม Photoshop แม้ชิ้นงำน ประกอบไปด้วยหลำยเลเยอร์ แต่ทำงำนได้
เพียงทีละเลเยอร์เท่ำน้ัน โดยเลเยอร์ที่กำลังทำงำนอยู่ เรียกกว่ำ “Active Layer” ซ่ึงในพำเนล
Layers ปรำกฎเป็นแถบสนี ้ำเงิน แสดงวำ่ กำลังทำกำรปรบั แต่งให้กบั เลเยอรน์ ัน้

สำมำรถเรียกเลเยอร์ใด ๆ มำทำงำนก็ได้ โดยใช้กำรเล่ือนเมำส์ไปที่เลเยอร์น้ัน ตัวช้ีเมำส์
เปลีย่ นเป็นรูป แลว้ คลกิ เมำสท์ ีแ่ ถบของเลเยอรท์ ตี่ ้องกำร เลเยอรน์ ัน้ ก็กลำนเป็น Active Layer ทันที
เปลี่ยนเลเยอร์ Background ให้เปน็ เลเยอรป์ กติ

สังเกตว่ำเลเยอร์ Background มีรูป ล็อกอยู่ ทำให้ไม่สำมำรถตกแต่งแก้ไขได้ ดังน้ัน
ตอ้ งเปลยี่ นเลเยอร์ Background ใหเ้ ปน็ เลเยอรป์ กติเสยี กอ่ น จงึ สำมำรถแกไ้ ข เคลอื่ นยำ้ ยและตกแต่ง
สลี งไปได้ ตำมข้ันตอนตอ่ ไปน้ี

1. ดับเบลิ คลกิ ที่เลเยอร์ Background

๗๑

2. เลอื กช่ือพร้อมกำหนดคุณสมบัติของเลเยอร์

3. คลกิ เมำส์ใช้ค่ำที่กำหนด

ซอ่ นและแสดงเลเยอร์
ถ้ำช้ินงำนท่ีแก้ไขประกอบด้วยเลเยอร์จำนวนมำก อำจต้องกำรซ่อนบำงเลเยอร์ที่ยังไม่ได้ใช้

เพ่ือควำมสะดวกในกำรทำงำน เม่ือเสร็จแล้วก็ให้แสดงเลเยอร์นั้นให้เห็นดังเดิม ดังตัวอย่ำง ทดลอง
ซ่อนเลเยอร์ขอ้ ควำม ดงั น้ี
ซอ่ นเลเยอร์

1. คลกิ เมำส์ท่ี เพื่อซ่อนเลเยอร์ (ช่องสถำนะน้ันเปล่ียนเป็น)

2. ผลลัพธ์ท่ไี ด้ คอื เลเยอรข์ ้อควำมหำยไป

แสดงเลเยอร์
1. คลิกเมำส์ท่ี เพ่ือแสดงเลเยอร์ (ช่องสถำนะนนั้ เปล่ยี นเปน็ )

๗๒

2. ผลลพั ธ์ทไ่ี ด้ คือ เลเยอร์ขอ้ ควำมคืนกลบั มำ

ซอ่ นและแสดงหลำย ๆ เลเยอรพ์ รอ้ มกนั
1. คลิกเมำส์ค้ำงไว้แล้วลำกเมำส์ผ่ำนช่องส่ีเหล่ียมของเลเยอร์ Happy และเลเยอร์ Layer
1

2. ผลลัพธ์ท่ไี ด้ คือเลเยอร์ Happy และ Layer 1 หำยไป

๗๓

เปลยี่ นลาดบั ของเลเยอร์
โดยปกติภำพที่ซ้อนกันจะถูกเรียงลเยอร์เป็นลำดับตำมกำรสร้ำงงำน (เลเยอร์ท่ีสร้ำงก่อนอยู่

ล่ำงสดุ ) แต่เพือ่ ควำมเหมำะสม มำรถสลบั ตำแหนง่ กำรวำงของเลเยอร์แต่ละเลเยอรไ์ ด้
ในตัวอย่ำง สลับตำแหน่งของเลเยอร์ โดยให้เลเยอร์ Happy จำกท่ีเคยอยู่บนสุด มำอยู่

ด้ำนล่ำงของ Layer 1 ทเี่ ปน็ ภำพ เพ่อื ให้ขอบภำพซอ้ นอยูเ่ หนอื ข้อควำม
1. คลกิ เมำส์เลือกเลเยอร์ จำกนัน้ ลำกเมำสไ์ ปยังตำแหน่งใหม่ท่ตี ้องกำร

2. ภำพขอ้ ควำมปรำกฏอยู่ดำ้ นลำ่ งของภำพ

ลอ็ กเลเยอร์

๗๔

สำมำรถเลือกล็อกบำงอย่ำงในเลเยอร์ที่กำลังทำงำนอยู่เพ่ือไม่ให้ถูกแก้ไขโดยบังเอิญได้ โดย
คลิกเลือกท่ีเลเยอร์ท่ีต้องกำรล็อคและคลิกเลือกรูปแบบกำรล็อคท่ีพำเนล Layers ซ่ึงมี 4 รูป แบบ
ดังนี้คอื

กำรล็อคบำงส่วน (Partially Lock) ไดแ้ ก่
1. Lock Transparency pixels ลอ็ กภำพสว่ นทีโ่ ปรง่ ใส
2. Lock image pixels ล็อคกำรแก้ไขภำพ
3. Lock position ล็อคตำแหน่งภำพ

กำรลอ็ คแบบสมบรู ์ (Fully Lock) คอื
4. Lock All ล็อคทง้ั กำรแก้ไขและเคล่ือนย้ำย

1. Lock Transparency pixels ( )
รักษำทุกพิกเซลในส่วนของภำพท่ีโปร่งแสงเอำไว้ ไม่ให้มีกำรแก้ไขใด ๆ จำกตัวอย่ำงลอง

ระบำยสดี ำเปน็ เส้นยำวใน Layer 1 ด้วย Brush Tool เหน็ วำ่ บริเวณทโ่ี ปรง่ ใสระบำยสีไมไ่ ด้
2. Lock image pixels ( )

รักษำทุกพิเซลในเลเยอร์ ทั้งส่วนมีภำพและไม่มีภำพ จำกตัวอย่ำง ลองระบำยสีใน Layer 1
พบว่ำไม่สำมำรถระบำยสใี นสว่ นใด ๆ ของเลเยอร์ได้เลย
3. Lock position( )

เป็นกำรป้องกันไม่ให้มีกำรเคล่ือนย้ำยภำพในเลเยอรน์ ้ี
4. Lock All ( )

ป้องกนั กำรแกไ้ ขภำพในเลเยอร์นีท้ กุ กรณี ทง้ั 3 หวั ข้อข้ำงตน้
คัดลอกเลเยอร์

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

๗๕
Layer 1 จะได้เลเยอร์ใหม่ท่ีมีช่ือว่ำ Layer 1 copy สำมำรถทำได้โดยลำกเลเยอร์ที่ต้องกำรคัดลอก
ไปวำงในไอคอน Create New Layer
1. ทำกำรลำก Layer ท่ตี ้องกำรจะ Copy แลว้ ลำกไปทไี่ อคอน Create New Layer

2. จะได้ Layer ใหม่ทีช่ ื่อว่ำ Layer 1 Copy

ลบเลเยอร์
กำรเก็บเลเยอร์ท่ีไม่ใช้ไว้ ทำให้เปลืองหน่วยควำมจำของเคร่ือง ทำให้โปรแกรมทำงำนได้ช้ำ

กำรลบเลเยอร์สำมำรถทำไดด้ ังนี้

๗๖

1. คลิกเมำส์ค้ำงไว้ทเ่ี ลเยอร์ท่ีต้องกำรลบแล้วลำกไปปล่อยท้ิงที่ไอคอน

2. เลเยอร์ Layer 1 copy จะหำยไป

เปลี่ยนชือ่ ของเลเยอร์
จำกตัวอย่ำงท่ีผำ่ น ๆ มำ หำกสังเกตพบวำ่ ช่ือของเลเยอรท์ ีโ่ ปรแกรมตงั้ ให้นน้ั เป็นชอื่ Layer

แล้วตำมด้วยตัวเลข เมื่อเลเยอร์เพิ่มจำนวนมำกข้ึน ควรเปลี่ยนชื่อเลเยอร์ใหม่ให้สอดคล้องกับภำพ
เพอ่ื ได้หำเลเยอร์ทต่ี อ้ งกำรใช้ไดส้ ะดวก โดยกำรดบั เบิ้ลคลิกทช่ี อ่ื ของเลเยอร์น้นั แลว้ พมิ พ์แก้ไขเป็นชื่อ
ใหม่ได้เลย จำกน้นั กด <Enter>
เปลย่ี นสีเลเยอรเ์ พื่อชว่ ยในการจดจา

นอกจำกกำรต้ังช่ือเพ่ือช่วยให้จดจำเลเยอร์ได้อีกด้วยเพื่อช่วยให้จดจำกลุ่มของเลเยอร์ได้ง่ำย
ข้นึ
6.4 จดั หมวดหมขู่ องเลเยอร์