20204-2007__โปรแกรมกราฟิก

45

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

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

5.1 การสร้างตัวอักษร (Font) และข้อความ

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

5.1.1.1 True Type มีสญั ลกั ษณเ์ ป็นตวั TT อย่ดู า้ นหนา้ ของช่ือ Font คอื
แบบอกั ษร แบบดงั้ เดมิ สามารถขยายขนาดใหใ้ หญ่โดยมีความคมชดั เหมือนเดมิ

5.1.1.2 Open Type มีสญั ษณเ์ ป็นตวั O หนา้ ช่ือของ Font เป็นแบบอกั ษร
ท่ีพฒั นารว่ มกบั Adobe และ Microsoft มีคณุ สมบตั เิ ชน่ เดียวกบั True Type แตม่ ีอกั ขระมากกวา่

5.1.1.3 Raster Type จะมสี ญั ลกั ษณเ์ ป็นตวั a หนา้ ช่ือแบบอกั ษร (ในโปรแกรม
Photoshop CS4) ซง่ึ จะไมแ่ สดงสญั ลกั ษณใ์ ดๆ หนา้ แบบอกั ษรประเภทนี)้ จากดั การทางานเฉพาะดา้ น เชน่ รูปแบบ
งานพมิ พค์ ณุ ภาพสงู กาหนดความคมชดั ท่ีแตกตา่ งกนั เช่น 12 pt หรอื 18 pt เป็นตน้ แตถ่ า้ ขยายมากกวา่ นี้ Font ก็แตก
เป็นเหล่ียมทาใหภ้ าพดหู ยาบ

5.1.2 ลักษณะข้อความในโปรแกรม Adobe Photoshop คอื รูปแบบการจดั วางขอ้ ความ
และลกั ษณะขอ้ ความ ดงั นี้

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

5.1.2.2 แนวการจดั วางขอ้ ความ คือ การจดั แบง่ ลกั ษณะของขอ้ ความตามรูปแบบการจดั วางนนั้ แบง่
ออกเป็น 2 ลกั ษณะ คือ Horizontal Type Tool จดั ขอ้ ความแบบแนวนอน และ Vertical Type Tool จดั ขอ้ ความแบบ
แนวตงั้ ซ่งึ สรา้ งไดท้ งั้ แบบปกตแิ ละแบบสรา้ งขอบเขตพืน้ ท่ี

5.1.3 คุณสมบัตเิ ก่ียวกับตวั อักษร การกาหนดคณุ สมบตั ใิ หก้ บั อกั ษรและยอ่ หนา้ สามารถทาไดโ้ ดยกาหนด
ตวั เลือกหลกั บน Optionts Bar ของเคร่ืองมือ Type Tools การปรบั แตง่ และรายละเอียดการเรยี กใชพ้ าเลตแบบ
Character และพาเลต Paragraph เปิดพาเลตทาไดห้ ลายวธิ ี เชน่ เลือกคาส่งั Window  คลกิ เลือก Palette

46

ดงั นี้
5.1.3.1 Optionts Bar คอื การกาหนดคณุ สมบตั เิ บือ้ งตน้ เชน่ เลือกแบบอกั ษรขอ้ ความ ลกั ษณะ

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

5.1.3.2 Palette Character คือ พาเลตสาหรบั การปรบั แตง่ คา่ ตา่ งๆ เก่ียวกบั ตวั อกั ษร
เชน่ ขนาด ระยะหา่ งระหวา่ งตวั อกั ษร

5.1.3.3 Palette Paragrph คอื การปรบั แตง่ ยอ่ หนา้ (ขอ้ ความหลายๆ บรรทดั
ตอ่ เน่ือง) เชน่ จดั ยอ่ หนา้ ซา้ ย ขวา หรือจดั เยือ้ งในบรรทดั แรก

5.1.4 เครือ่ งมอื สาหรับการสร้างตวั อักษร คอื การสรา้ งตวั อกั ษรและขอ้ ความในรูปแบบตา่ งๆ เชน่

ตวั อกั ษรปกติ หรือตวั อกั ษรมีขอบเขตพืน้ ท่ี (Selection) เพ่ือใชเ้ ลือกขอบเขตพืน้ ท่ีภาพใหเ้ ป็นขอ้ ความ

5.1.4.1 Horizontal Type Tool คือ เคร่ืองมือสาหรบั สรา้ งตวั อกั ษรแบบ

มาตรฐานท่ีสามารถสรา้ งสรรคง์ านไดห้ ลากหลาย และสามารถแกไ้ ขไดภ้ ายหลงั

5.1.4.2 Vertical Type Tool คือ ตวั อกั ษรท่ีสามารถแกไ้ ขไดภ้ ายหลงั แต่

ตวั อกั ษรจะเรยี งกนั เป็นแนวตงั้

5.1.4.3 Horizontal Type Mask Tool เคร่อื งมือสรา้ งตวั อกั ษรแบบ Mask

โดยตวั อกั ษรจะเป็นขอบเขตพืน้ ท่ี (Selection) ท่ีสามารถใชง้ านรว่ มกบั ภาพอ่ืนๆ แตเ่ ป็นลกั ษณะแนวนอน

5.1.4.4 Vertical Type Mask Tool คือ เคร่ืองมือสรา้ งตวั อกั ษรแบบ Mask สรา้ งขอบเขต

พืน้ ท่ีเป็นตวั อกั ษร แตต่ วั อกั ษรจะเรยี งกนั เป็นแนวตงั้

5.1.4.1 การสรา้ งตวั อกั ษรดว้ ยเคร่ืองมือ Horizontal Type Tool คอื เคร่อื งมือ

สรา้ งตวั อกั ษรหรือขอ้ ความแบบแนวนอนท่ีครอบคลมุ การทางานทกุ ๆ ดา้ น โดยตวั อกั ษรลกั ษณะนีส้ ามารถยอ่ หรือขยาย

ได้ โดยไมส่ ญู เสียความคมชดั และการใชง้ านเคร่ืองมือนีส้ ามารถปฏิบตั ไิ ด้ ขนั้ ตอนดงั นี้

1. สรา้ งไฟลภ์ าพใหมค่ ลิกเมนู File  New เลือกขนาดพืน้ ท่ีการทางาน

ตามตอ้ งการ คลิก OK

2. คลกิ เคร่อื งมือ แลว้ คลกิ พืน้ ท่ีการทางานและพมิ พข์ อ้ ความ

3. ปรบั เปล่ียนรูปแบบขอ้ ความ กาหนดคณุ สมบตั บิ น Optionts Bar

5.1.4.2 การพิมพอ์ กั ษรดว้ ยเคร่ืองมือ Vertical Type Tool คือ เคร่อื งมือท่ีใชส้ รา้ งตวั อกั ษร
แบบแนวตงั้ ตวั อกั ษรลกั ษณะนีส้ ามารถย่อหรือขยาย โดยไมส่ ญู เสียความคมชดั การใชง้ านเคร่ืองมือ ขนั้ ตอนดงั นี้

1. สรา้ งไฟลภ์ าพใหมค่ ลิกเมนู File  New เลือกขนาดพืน้ ท่ีการทางาน
ตามตอ้ งการ คลิก OK

47

2. คลิกเคร่อื งมือ แลว้ คลิกพืน้ ท่ีการทางาน พมิ พข์ อ้ ความ

5.1.4.3 การพมิ พอ์ กั ษรดว้ ยเคร่ืองมือ Horizontal Type Mask Tool คอื

การสรา้ งอกั ษรแนวนอนในลกั ษณะการสรา้ งขอบเขตพืน้ ท่ี สามารถเลือกพืน้ ท่ีบนภาพ หรือเลือกเคร่อื งมือ

Vertical Type Mask Tool ขนั้ ตอนดงั นี้

1. เปิดไฟลภ์ าพท่ีตอ้ งการสรา้ งเป็นขอ้ ความ

2. คลิกท่ีเคร่ืองมือ นาเมาสค์ ลิกบนภาพ แลว้ พิมพข์ อ้ ความ คาว่า

GRAPHIC (สงั เกตภาพจะมีสีจางลง)

3. กดป่มุ Alt ท่ีคียบ์ อรด์ แลว้ คลกิ ท่ีเคร่ืองมือ เพ่ือคดั ลอกพืน้ ท่ี

ขอ้ ความแลว้ คลกิ เมาสซ์ า้ ยคา้ งไวท้ ่ีขอ้ ความแลว้ ลากไปวางบนตาแหนง่ ท่ีตอ้ งการ

หรือคลิกเมนู Edit  Copy แลว้ คลกิ ตาแหนง่ ท่ีตอ้ งการวางขอ้ ความ

ในภาพ แลว้ คลิกเมนู Edit  Paste

4. ตกแตง่ ขอ้ ความใหด้ เู ดน่ ขนึ้ โดยการเตมิ สีเสน้ ใหก้ บั ขอ้ ความแลว้ คลกิ เมนู

Edit  Stroke จะปรากฎหนา้ ตา่ งดงั ภาพ กาหนดคา่ สีเสน้ เป็นสีดา และขนาดเสน้ เทา่ กบั 2 px

คลิกป่มุ OK แลว้ กดป่มุ Ctrl + D เพ่ือยกเลกิ ขอบเขตพืน้ ท่ีขอ้ ความ

ไดข้ อ้ ความ

5.1.5 การเปลี่ยนแนวข้อความ คอื การพิมพข์ อ้ ความแนวนอนหรอื แนวตงั้ เรียบรอ้ ยแลว้ หากตอ้ งการ

เปล่ียนแนวขอ้ ความสามารถเปล่ียนไดโ้ ดยคลิกป่มุ ขนั้ ตอนดงั นี้

1. คลิกเคร่อื งมือ แลว้ พมิ พข์ อ้ ความ “KAE “

2. เลือกพาเลต Layer แลว้ ดบั เบลิ คลิกในเลเยอรข์ อ้ ความ KAE

3. กาหนดคา่ จาก Option คลกิ ท่ีป่มุ 5.1.6 การบดิ ข้อความเป็ นรูปร่างตา่ งๆ คอื การพิมพต์ วั อกั ษร

หรือขอ้ ความใหม้ ีรูปแบบหลากหลายนนั้ สามารถกาหนดไดจ้ ากการกาหนดคา่ บนออปชนั บารข์ อง

ขอ้ ความ การบดิ รูปรา่ งตา่ งๆ สาเรจ็ รูปท่ีกาหนดไวใ้ หผ้ ใู้ ชโ้ ปรแกรม คือ คาส่งั Create Warped Text

ขนั้ ตอนดงั นี้

1. พมิ พข์ อ้ ความ “วิทยาลยั พณิชยการบงึ พระพิษณโุ ลก”

2. คลกิ ป่มุ แลว้ เลือกรูปทรงตา่ งๆ

3. ปรบั คา่ ตา่ งๆ ของวารเ์ พด็ แท็กซ์ โดยดคู วามเหมาะสมจากภาพตวั อยา่ ง

4. คลิกป่มุ OK

5.2 การตกแตง่ ข้อความ 2

การตกแตง่ ขอ้ ความใหม้ ีรูปแบบหลากหลาย เชน่ การใสส่ ีเสน้ กาหนดแสงเงา และการไลโ่ ทนสีตวั อกั ษร ดงั นี้
5.2.1 การสร้าง Style ใหม่ข้อความแบบ Type Layer คอื การตกแตง่ อกั ษรและขอ้ ความใหส้ วยงาม
นา่ สนใจสามารถทาไดห้ ลายวธิ ี โดยประยกุ ตใ์ ชจ้ ากคาส่งั ตา่ งๆ เชน่ การตกแตง่ ขอ้ ความดว้ ยคาส่งั Blending Options
ขนั้ ตอนดงั นี้

48

1. พมิ พข์ อ้ ความคาว่า “Style”
2. คลกิ ป่มุ ใน Palette Layer แลว้ เลือกเมนคู าส่งั Blending Options จะปรากฏ
หนา้ ตา่ ง Layer Style
3. หนา้ ตา่ ง Layer Style คาส่งั Blending Options รายละเอียด
การกาหนดคา่ ตา่ งๆ บน Blending Options ดงั นี้

Drop Shadow การสรา้ งเงาแบบตกลงพืน้
Inner Shadow การสรา้ งเงาบรเิ วณพืน้ ภายใน
Outer Glow การสรา้ งเงาแบบฟงุ้ กระจาย
Inner Glow การสรา้ งความฟ้งุ กระจายดา้ นในของวตั ถุ

Bevel and Emboss ใหว้ ตั ถนุ นู ขนึ้ ดว้ ยแสงและเงา
ประกอบดว้ ย

Contour ตวั ปรบั แตง่ รูปแบบการนนู ของวตั ถุ
Texture ตวั เตมิ ลวดลายใหก้ บั วตั ถุ
Satin การสรา้ งพืน้ ผิวดา้ นในของวตั ถมุ ีส่ีเหล่ียมเป็นเงา
Color Overlay การเตมิ สีใหว้ ตั ถุ
Gradient Overlay การเตมิ สีแบบไลเ่ ฉดสีใหก้ บั วตั ถุ
Patten Overlay การเตมิ ลวดลายใหก้ บั วตั ถุ
Stroke การใสส่ ีเสน้ ใหก้ บั วตั ถุ
4. คลกิ เมาสเ์ พ่ือปรบั แตง่ Style ขอ้ ความตามตอ้ งการแลว้ คลิกป่มุ OK จะไดผ้ ลลพั ธ์
ตามท่ีเลือก หรือถา้ ไม่ตอ้ งการใหย้ กเลิกคาส่งั คลกิ เมาสท์ ่ีป่มุ Cancel
5.2.2 การสร้าง Style ใหม่ข้อความ คอื การใส่ Style ใหก้ บั ขอ้ ความตา่ งๆ ดงั นี้
5.2.2.1 การแรเงาขอ้ ความ คือ การเนน้ ขอบขอ้ ความใหเ้ ดน่ ขนึ้ โดยเลือกรูปแบบ
การแรเงาขอ้ ความ “ Graphic“ เลือกรูปแบบ Drop Shadow แลว้ ปรบั คา่
5.2.2.2 การเนน้ ขอ้ ความดว้ ยสี คือ การเนน้ ขอ้ ความท่ีเปลง่ เรืองแสงออกมา ขอ้ ความจะเกิด
ประกายแสงสวา่ งขนึ้ “ เทคนิคใหมๆ่ ” เลือกรูปแบบ Outer Glow แลว้ ปรบั คา่ ตา่ งๆ

5.2.2.3 การเนน้ เสน้ ขอบ คือ การเนน้ เสน้ ขอบขอ้ ความใหโ้ ดดเดน่ คมชดั มากขนึ้
เลือกรูปแบบ Stroke แลว้ ปรบั คา่ ตา่ งๆ กาหนดคา่ Size มีคา่ เพ่มิ มาก ขนาดเสน้ จะมีขนาด

หรอื หากตอ้ งการใหเ้ สน้ ขอบการไลโ่ ทนสีแบบ Gradient ปรบั คา่ ตา่ งๆ ของเสน้ ขอบ
5.2.2.4 การไลโ่ ทนสี คอื การไลโ่ ทนสีขอ้ ความใหส้ วยงาม “ ขอ้ ความ” เลือกรูปแบบ Gradient โดย

ไลโ่ ทนสี สม้ -นา้ เงิน-สม้ –ชมพู แลว้ ปรบั คา่ ตา่ งๆ

49

5.2.2.5 ขอ้ ความสีทองแวววาว คอื การใชร้ ูปแบบ Style Drop Shadow ใชค้ าส่งั พืน้ ฐานและใสส่ ีจาก
Gradient Overlay โดยไลโ่ ทนสี สม้ – เหลือง แลว้ กาหนดความนนู ของขอ้ ความดว้ ย Bevel and Emboss

5.2.3 การสร้างข้อความรูปแบบภาพ คือ เทคนิคการสรา้ งขอ้ ความแบบภาพท่ีไดผ้ ลลพั ธส์ วยงาม นา
รูปภาพท่ีตอ้ งการมาวางซอ้ นไวเ้ หนือขอ้ ความแลว้ คลิกขวาเลือกคาส่งั Create Clipping Mask เพ่ือสรา้ งมาสกค์ รอบ
ภาพตามลกั ษณะตวั อกั ษรแตล่ ะตวั ขนั้ ตอนดงั นี้

1. คลกิ เคร่อื งมือ พมิ พข์ อ้ ความ “ใบบวั ”
2. คดั ลอกภาพสาหรบั การทาลวดลายให้ Layer ภาพอยดู่ า้ นบน Layer ขอ้ ความ
3. เลือก Layer ภาพแลว้ คลิกขวา เลือก คาส่งั Create Clipping Mask
ขอ้ ความท่ีไดเ้ บอื้ งตน้ ดไู มน่ า่ สนใจ การปรบั แตง่ เพ่มิ เลือก Layer Styleในขอ้ ความ

หากภาพใหญ่กวา่ ขอ้ ความใหค้ ลิกลากเล่ือนตาแหนง่ ภาพบนขอ้ ความในมมุ มอง
จดุ อ่ืนๆ ของภาพ เพ่ือใหเ้ กิดมมุ มองภาพของขอ้ ความไดห้ ลายแบบ

การยกเลิกภาพออกจากขอ้ ความ โดยคลกิ ขวาบน Layer ของภาพแลว้ เลือก
Release Clipping Mask ขอ้ ความและภาพจะเหมือนเดิม

5.2.4 การตกแต่งข้อความดว้ ย PALETTE STYLES คอื รูปแบบการตกแตง่ ขอ้ ความแบบ Style สาเรจ็ รูป
ท่ีโปรแกรมกาหนดให้ สาหรบั ผใู้ ชโ้ ปรแกรมท่ีตอ้ งการความรวดเรว็ ในการออกแบบ ดงั นี้

5.2.4.1 การเลือกรูปแบบ Style คือ การกาหนดรูปแบบ Styleใหก้ บั ขอ้ ความ ขนั้ ตอนดงั นี้
1. พิมพข์ อ้ ความท่ีตอ้ งการแลว้ คลิก Palette Style ปรากฏรูปแบบ Style เพ่ือเลือก

ถา้ ไมต่ อ้ งการ Style ดงั กลา่ วแตต่ อ้ งการเปล่ียนรูปแบบ Style ใหมค่ ลิกป่มุ เลือก Style ดงั ภาพ
2. คลิกเลือกรูปแบบ Style ท่ีตอ้ งการ
3. ลกั ษณะตวั อกั ษรท่ีได้

1 เปิด New Style กาหนดรูปแบบการแสดงรูปทรง

เลอื กรูปแบบ Style

2 คลกิ เพื่อเลอื กคาส่งั จดั การกบั ชดุ รูปทรง
สาเรจ็ รูป

คลกิ เลอื กรูปทรงสาเรจ็ รูป

3

Styleขอ้ ความทีเ่ ลอื ก

50

5.2.4.2 การยกเลิกรูปแบบ Style คอื การยกเลิกรูปแบบ Style ท่ีใชก้ บั Layer เพ่ือใหข้ อ้ ความเป็น
ขอ้ ความปกตทิ ่ีไมม่ ีการใชร้ ูปแบบ Layer ขนั้ ตอนดงั นี้

1. คลิกป่มุ No Style บน PALETTE STYLES
2. หรอื คลิกขวาขอ้ ความ แลว้ เลือก Clear Layer Style
3. การยา้ ย Layer Style คือ การยา้ ย Style ท่ีกาหนดไวใ้ น Layer หนง่ึ ไปใชย้ งั
Layer อ่ืน โดยคลิกลาก Layer Style วางทบั Layer ตวั อยา่ ง ขนั้ ตอนดงั นี้

1. เลือก Layer Style
2. คลิก นาไปวางทบั ท่ี Layer อ่ืน

5.2.4.3 การคดั ลอกรูปแบบ Style (Copy Layer Style) คือ การใช้ Style กบั Layer หน่งึ ไปแลว้
ตอ้ งการนา Style ดงั กลา่ วไปใชก้ บั Layer อ่ืนอีก ขนั้ ตอนดงั นี้

1. เลือก Layer Style ท่ีตอ้ งการคดั ลอก คลิกขวาเลือก Copy Layer Style
2. เลือก Layer ท่ีตอ้ งการวาง Layer Style แลว้ คลิกขวาเลือกวาง Layer
5.2.5 การสร้างข้อความลิขสิทธิบ์ นภาพ คอื การนาภาพถา่ ยท่ีถ่ายดว้ ยกลอ้ งดจิ ิตอลเผยแพรใ่ นหลายๆ
ชอ่ งทาง ยคุ สงั คมออนไลน์ เชน่ Facebook, Twitter, Multiply, Webboard และ Blog ตา่ งๆ ก่อนนาภาพออกไปโพสต์
นนั้ ตอ้ งการใสข่ อ้ ความลงไปเพ่ือแจง้ ถงึ ลขิ สทิ ธิ์ของเจา้ ของภาพ เพ่ือปอ้ งกนั มิใหผ้ อู้ ่ืนนาไปใชง้ าน การสรา้ งขอ้ ความ
เหมือนการพิมพข์ อ้ ความท่วั ไป ขนั้ ตอนดงั นี้
1. เปิดไฟลภ์ าพท่ีตอ้ งการสรา้ งลขิ สทิ ธิ์ของเจา้ ของภาพ
2. พมิ พข์ อ้ ความในตาแหนง่ ภาพแลว้ ปรบั สีและขนาดขอ้ ความตามความ เหมาะสม
3. กาหนดคา่ ความโปรงใส Layer ขอ้ ความใหอ้ อ่ นลง เชน่ 50 %
4. เลือกคาส่งั Layer  Flatten Image หรอื กดคีย์ Ctrl + E
5. บนั ทกึ ไฟล์ File Save As หรือ File  Save for Web & Devices
5.2.7 การแปลงตัวอักษรเป็ นรูปทรงแบบ Vector คือ การแปลงตวั อกั ษรท่ีสรา้ งจากเคร่ืองมือ
และ ใหก้ ลายเป็นรูปทรงแบบ Vector ท่ีสามารถปรบั แตง่ เสน้ Path ได้ การสรา้ งตวั อกั ษรดงั กลา่ วขอ้ ความ
จะกลายเป็นภาพ ไมใ่ ช่ ขอ้ ความอีกตอ่ ไป โดยสามารถแกไ้ ขไดเ้ หมือนกบั การแกไ้ ขภาพ เชน่ การลบภาพบางสว่ น
และการไลโ่ ทนสี ขนั้ ตอนดงั นี้
1. สรา้ งขอ้ ความดว้ ยเคร่ืองมือ Horizontal Type Tool
2. เลือก Layer ขอ้ ความคลกิ เมาสข์ วาแลว้ เลือกคาส่งั Convert to Shape
เพ่ือแปลงตวั อกั ษรทงั้ หมดใหก้ ลายเป็น Shape
3. ลกั ษณะตวั อกั ษรจะมีจดุ Anchorage อยรู่ อบๆ ขอบตวั อกั ษร
5.3 สร้างข้อความภายในรูปทรง
การสรา้ งขอ้ ความปกตทิ าใหข้ อ้ ความไมน่ า่ สนใจ ดงั นนั้ การสรา้ งขอ้ ความภายในรูปทรงตา่ งๆ เป็นอีกวิธีหน่งึ ใน
การเพ่ิมความสวยงาม โดยการสรา้ งขอ้ ความภายในรูปทรงนนั้ มีหลายรูปแบบ เชน่ การพมิ พข์ อ้ ความเขา้ กบั เสน้ Path

51

ของรูปทรง หรอื จากการพิมพใ์ นรูปทรงสาเรจ็ รูปดงั นี้
5.3.1 การสร้างข้อความในรูปทรง คือ การสรา้ งขอ้ ความใหอ้ ยภู่ ายในรูปทรงเพ่ือใชอ้ อกแบบชิน้ งานไมว่ า่

จะเป็นรูปส่ีเหล่ียม วงกลมหรอื รูปทรงอิสระอ่ืนๆ สามารถทาไดง้ ่ายๆ ขนั้ ตอนดงั นี้
1. คลิกเลือกเคร่อื งมือ Custom Shape Tool แลว้ เลือกคณุ สมบตั ริ ูปทรงแบบ Shape Layers คลกิ เลือก
รูปทรงสาเรจ็ รูปแลว้ กาหนดสีหรอื Style

1. คลกิ Drag เมาสเ์ พ่ือวาดรูปทรงแลว้ คลิกเคร่ืองมือ
2. เล่ือนเมาสค์ ลกิ ภายในรูปทรง สงั เกตเมาสเ์ ป็นสญั ลกั ษณ์ แลว้ พิมพข์ อ้ ความ
5.3.2 การแก้ไขข้อความในรูปทรง คือ การแกไ้ ขขอ้ ความ โดยการคลกิ Layer ขอ้ ความหรอื แกไ้ ขรูปทรงนนั้
คลกิ ท่ีรูปทรง แตร่ ูปทรงท่ีวาดเป็นเสน้ Path ตอ้ งใชเ้ คร่ืองมือในกลมุ่ Pen Tool เพ่ือแกไ้ ขเสน้ Path เชน่ เคร่ืองมือ
และ ขนั้ ตอนดงั นี้

1. เลือก Layer ขอ้ ความ
2. Duble Click เพ่ือแกไ้ ขขอ้ ความ

52

5. การวัดผลและประเมินผล

วิธีวัด เคร่ืองมอื เกณฑ์

-การสงั เกต -การสงั เกต -ตอบไดถ้ กู ตอ้ ง
-ผา่ นเกณฑ์ 60%
-การใชข้ อ้ คาถาม -ขอ้ คาถาม
-ตอบไดถ้ กู ตอ้ ง
-การทดสอบ -แบบทดสอบ

-การสงั เกต -การสงั เกต

-การใชข้ อ้ คาถาม -ขอ้ คาถาม

53

6. บันทกึ หลังการสอน หนว่ ยท่ี.............. ภาคเรียนท่ี.............. ปีการศกึ ษา..............
1) ผลการสอน

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

2) ปัญหา/อุปสรรค

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

3) ข้อเสนอแนะและแนวทางแก้ไข

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

ลงช่ือ
(นายมนตธ์ ร สาระบรู ณ)์

ตาแหนง่ ครูจา้ งสอนประจารายเดือน

7. ข้อเสนอแนะของหวั หน้าสถานศึกษาหรือผู้ทไ่ี ด้รับมอบหมาย (ตรวจ/นิเทศ/เสนอแนะ/รับรอง)

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

ลงช่ือ
(นางสาวจามมจั จลุ ี มีศลิ ป์ )

ตาแหนง่ รองผอู้ านวยการฝ่ายวชิ าการ

54

แผนการจัดการเรยี นรู้ หน่วยที่ 6

ช่อื วิชา โปรแกรมกราฟิก สอนสัปดาหท์ ่ี 10-12
ชือ่ หน่วย การระบายสี และภาพกราฟิกสาหรบั เวบ็ เพจ สอนครั้งที่ 10-12

ช่ือเรือ่ ง การระบายสี และภาพกราฟิกสาหรบั เว็บเพจ จานวนช่ัวโมง 12

1. สาระสาคัญ
การระบายสีใหภ้ าพสามารถนาเคร่ืองมือกลมุ่ ระบายสีภาพรูปแบบตา่ งๆ นามาประยกุ ตใ์ ชก้ บั การ

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

2. สมรรถนะประจาหน่วย
ออกแบบภาพกราฟิกตามหลกั องคป์ ระกอบศลิ ป์

3. จุดประสงคก์ ารเรยี นรู้
1.ระบายสี โดยการใชก้ ลมุ่ เคร่ืองมือระบายสีได้
2. ลบรูปภาพโดยใชเ้ คร่ืองมือกลมุ่ การลบได้
3. เตมิ สีและ Pattern ใหภ้ าพดว้ ยคาส่งั Fill ได้
4. ออกแบบ Page Header ได้
5. มีความรบั ผดิ ชอบตอ่ งานท่ีไดร้ บั มอบหมาย

งานพฒั นาหลกั สูตรการเรียนการสอน ฝ่ ายวชิ าการ วทิ ยาลยั อาชีวศึกษาพิษณุโลก

55

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

การเลือกใชร้ ูปแบบสีตา่ งๆ นอกจากการปรบั แตง่ ความสวา่ งภาพ และสีสนั แลว้ สามารถ ใชง้ านเคร่ืองมือ

อ่ืนๆ เชน่ เคร่อื งมือสาหรบั ระบายสี และการสรา้ งพืน้ ผวิ ในลกั ษณะตา่ งๆ ในโปรแกรมซ่งึ รูปแบบเหลา่ นีม้ ี

ประโยชนก์ บั การปรบั แตง่ ภาพ และนาความรูม้ าประยกุ ตใ์ ชส้ าหรบั การออกแบบWeb Page ใหส้ วยงาม

6.1 เครอ่ื งมอื การระบายสี

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

6.1.1 กลุ่มเครอื่ งมือการไล่โทนสีและเทสี คอื กลมุ่ เคร่อื งมือสาหรบั การไลโ่ ทนสีและเทสี พืน้ ตา่ งๆ ใน
ภาพ ดงั นี้

6.1.1.1 Gradient Tool คอื การไลโ่ ทนสีใหภ้ าพนาไปสรา้ ง

พืน้ หลงั ใหภ้ าพตา่ งๆ หรือสรา้ ง Effects ในการออกแบบภาพ

6.1.1.2 Paint Bucket Tool คอื การเทสีลงไปในขอบเขตพืน้ ท่ีท่ีกาหนดไว้ และรูปแบบการ

เทสีพืน้ ผิวแบบ Pattern สาเรจ็ รูปในโปรแกรม

6.1.1.1 การเตมิ สีแบบ Paint Bucket คอื การเติมสีดว้ ยสี Foreground

หรอื สีแบบ Pattern ขนั้ ตอนดงั นี้

1. คลิกเคร่อื งมือ

2. ปรบั เปล่ียน Option Bar รายละเอียด

6.1.1.2 การลงสีแบบไลโ่ ทนสีดว้ ยเคร่อื งมือ Gradient Tool คอื การเตมิ สีแบบไลโ่ ทนสี

สามารถกาหนดสี และทิศทางของแถบสีอยา่ งอิสระ รูปแบบวธิ ีการปรบั แตง่ Option Bar

กรณีท่ีชดุ สีท่ีกาหนดใหย้ งั ไมเ่ พียงพอ หรือไมเ่ หมาะสมสามารถสรา้ งชดุ สีใหมข่ นึ้ มาใหม่
โดยมีวิธีการสรา้ ง

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

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

56

ความสามารถในการใชง้ านแตกตา่ งกนั ไป

6.1.2.1 Brush Tool คอื เคร่ืองมือสาหรบั การระบายสี โดยสามารถกาหนด
รูปแบบของเสน้ ไดม้ ากมาย มีความยืดหย่นุ ในการใชง้ านกบั ภาพสงู สดุ

6.1.2.2 Pencil Tool คือ เคร่อื งมือระบายสีเป็นภาพตา่ งๆ ผลของการใช้
เคร่อื งมือนีจ้ ะไดเ้ สน้ ท่ีเป็นเสน้ แขง็ และหยาบซง่ึ เหมาะกบั ภาพบางประเภทเทา่ นนั้

6.1.2.3 Color Replacement Tool คือ การระบายสีทบั ลงไปบนพืน้ ผวิ
เพ่ือเปล่ียนสีของจดุ ท่ีนาเมาสค์ ลกิ เลือก

6.1.2.4 Mixer Brush Tool คือ เคร่ืองระบายสี โดยสามารถเลือกกาหนด
รูปแบบไดม้ ากมาย และไดเ้ สน้ ท่ีมีสีออ่ นหรือนมุ่ นวลกวา่

กลมุ่ วาดภาพและระบายสีภาพนนั้ มีขนั้ ตอนการใชง้ านไมแ่ ตกตา่ งกนั มาก จงึ ขอยกตวั อยา่ งการใช้
งานเคร่อื งมือจานวน 2 ตวั คือ เคร่ืองมือ Brush Tool และเคร่อื งมือ Pencil Tool ดงั นี้

6.1.2.1 เคร่ืองมือ Brush Tool คอื เคร่ืองมือท่ีโดดเดน่ ท่ีสดุ ในกลมุ่ เน่ืองจาก
มีความสามารถในการทางานและประยกุ ตใ์ ชก้ บั การวาดภาพรว่ มกบั การปรบั แตง่ ภาพระบายสี ดงั นี้

1. เลือกเคร่อื งมือ
2. ปรบั แตง่ เคร่อื งมือท่ี Option Bar
3.Option การปรบั ความเขม้ Brush Tool มีวิธีการปรบั รูปแบบความเขม้ การระบายสี เชน่
Opacity คอื การกาหนดความเขม้ สงู สดุ ของเคร่ืองมือในการแดรกเมาสร์ ะบายสีหนง่ึ ครงั้ เม่ือปล่อยเมาสแ์ ลว้
ระบายสีซา้ ท่ีจดุ เดมิ อีกก็จะเขม้ ขนึ้
Flow คือ การกาหนดเปอรเ์ ซ็นตข์ องสีท่ีจะถกู ระบายสีออกมาในการ Drag Mouse หน่งึ ครงั้ โดยความเขม้ จะ
ขนึ้ อยกู่ บั คา่ Opacity ท่ีกาหนด เชน่ หากกาหนด Opacity 40 % และคา่ Flow 20% หมายความวา่ สีท่ีถกู ระบาย
ครงั้ แรกนนั้ จะเป็น 20% ถา้ ตอ้ งการใหส้ ีมีความเขม้ สงู สดุ จะตอ้ งระบายทบั จดุ เดมิ ถึง 2 ครงั้
Airbrush ผใู้ ชส้ ามารถคลิกเลือกป่มุ นี้ เพ่ือกาหนดความเขม้ ของสีท่ีระบายลงไปจากการคลิกเมาสค์ า้ งไวท้ ่ีจดุ
เดมิ ซง่ึ มีหลกั การเหมือนกบั การพน่ สีดว้ ย Airbrush
3. เลือกรูปแบบ Brush Tool โดยกาหนดคา่ ตามตอ้ งการแลว้ คลกิ เมาสซ์ า้ ย
คา้ งไวแ้ ลว้ ระบายสีบรเิ วณพืน้ ท่ีการทางานเพ่ือวาดรูปตามตอ้ งการ เคร่ืองมือ Pencil Tool การระบายสีเป็นภาพ
ตา่ งๆ การใชเ้ คร่อื งมือนี้
ไดเ้ สน้ ท่ีเป็นเสน้ แข็งและหยาบซง่ึ เหมาะกบั ภาพบางประเภทเทา่ นนั้ ขนั้ ตอนดงั นี้
1. คลกิ เลือกเคร่ืองมือ
2. กาหนดคา่ Option Bar

3. เลือกรูปแบบและกาหนดคา่ ตามตอ้ งการแลว้ คลิกเมาสซ์ า้ ยคา้ งไวร้ ะบาย
บรเิ วณพืน้ ท่ีการทางานเพ่ือวาดภาพตามตอ้ งการ ดงั นี้

57

6.1.2 กลุ่มเครอ่ื งมือการระบายสพี เิ ศษ คือ กลมุ่ เคร่ืองมือการระบายสีพิเศษสามารถ
เลือกใชง้ านได้ 2 แบบ ท่ีแตกตา่ งกนั ดงั ภาพ

6.1.3.1 History Brush Tool คือ เคร่ืองมือเรียกคืนภาพก่อนหนา้ การปรบั แตง่
คืนมา ซง่ึ มีลกั ษณะเหมือนกบั การใชค้ าส่งั Undo แตส่ ามารถเรยี กใชก้ ารทางานเฉพาะจดุ ได้

6.1.3.2 Art History Brush Tool คือ เคร่ืองมือท่ีใชส้ าหรบั การเปล่ียนแปลงภาพถา่ ย
ธรรมดาใหม้ ีรูปแบบเหมือนกบั งานศลิ ปะ

ขนั้ ตอนการเรียกใชเ้ คร่อื งมือกลมุ่ ระบายสีพิเศษท่ีแตกตา่ งกนั ดงั นี้

6.1.3.1 เคร่อื งมือ History Brush Tool คือ การเรียกภาพท่ีตกแตง่ ภาพหรือ

ตดั ภาพออกจากฉากหลงั แลว้ พืน้ ท่ีบางสว่ นหายไปแลว้ สามารถ เรียกคืนสว่ นท่ีหายไปได้ ซ่งึ สามารถปรบั แตง่ คา่ การ

ทางานบน Option Bar

6.1.3.2 เคร่อื งมือ Art History Brush Tool คือ การเปล่ียนภาพถา่ ยธรรมดา

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

ใหผ้ ลลพั ธเ์ หมือนกบั งานศลิ ปะ กาหนดคา่ ตา่ งๆ บน Option Bar ดงั ภาพ

กาหนดรูปแบบเคร่อื งมือ กาหนดเปอรเ์ ซ็นตค์ วามเปล่ียนแปลงของสีใกลเ้ คียง
กาหนดความกวา้ งที่จะเปลี่ยนแปลง

กาหนดโหมดการผสาน กาหนดความโปรง่ ใส เลือกรูปแบบการหมนุ หวั แปรง
สี

การเปล่ียนภาพถา่ ยธรรมดาใหม้ ีรูปแบบเหมือนกบั งานศลิ ปะ โดยการแดรกเมาส์
ผา่ นสว่ นตา่ งๆ ของภาพ ขนั้ ตอนดงั นี้

1. เปิดไฟลภ์ าพ
2. คลกิ เคร่อื งมือ แลว้ แดรกเมาสบ์ รเิ วณภาพทงั้ หมด

58

2 กลุ่มเคร่ืองมือการลบ

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

6.2.1 Eraser Tool คอื การลบภาพใน Layer ปกตภิ าพท่ีแดรกเมาสผ์ า่ นจะหายไป
6.2.2 Background Eraser Tool คอื เคร่ืองมือสาหรบั ลบภาพใน Layer พืน้ หลงั ภาพท่ีใชง้ าน
เคร่อื งมือนีแ้ ลว้ Laye r พืน้ หลงั จะถกู ลบไป และจะถกู เปล่ียนเป็น Layer ปกตจิ ดุ ท่ีถกู ลบทงิ้ เปล่ียน
เป็นพืน้ หลงั แบบโปรง่ ใส (Transparent) ทนั ที
6.2.3 Magic Eraser Tool คอื เคร่ืองมือท่ีคลิกเมาสเ์ ลือกชว่ งสีท่ีตอ้ งการลบภาพ
แลว้ กดป่มุ Delete เพ่ือลบทงิ้ โดยจะลบสีท่ีเหมือนกนั หรอื ใกลเ้ คยี งกนั มากท่ีสดุ (แตม่ ีขอ้ จากดั คือ ตวั เลือกนีจ้ ะใช้
งานไมไ่ ดถ้ า้ หากภาพมีการยอ่ หรอื ขยายดว้ ยคาส่งั Image Size ขณะท่ีปรบั แตง่ ภาพ

6.2.1 การลบภาพด้วยเครื่องมอื Eraser Tool คือ เคร่ืองมือลบภาพ และแกไ้ ข ความผิดพลาด
จากการทางานกาหนดคา่ Option ตา่ งๆ

6.2.2 การลบภาพเคร่ืองมือ Background Eraser Tool คือ เคร่ืองมือสาหรบั คลิกเลือกสีท่ีตอ้ งการ

ลบแลว้ กดป่มุ Delete

เพ่ือลบทงิ้ การกาหนดคา่ Option

6.2.3 การลบภาพด้วยเครื่องมอื Magic Eraser Tool คือ เคร่อื งมือลบภาพท่ี
ตอ้ งคลิกเลือกสีท่ีตอ้ งการลบแลว้ กดป่มุ Delete เพ่ือลบทงิ้ เคร่ืองมือนีจ้ ะใชง้ านไมไ่ ด้ ถา้ หากรูปภาพดงั กลา่ วมีการ
ยอ่ หรือขยายดว้ ยคาส่งั Image Size ขณะท่ีปรบั แตง่ การกาหนดคา่ Option

6.3 การเตมิ สีและ Pattern ใหภ้ าพด้วยคาส่ัง Fill

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

1. กาหนดสีดา้ นบน (สีชมพ)ู Foreground Color

59

2. สรา้ งขอบเขตพืน้ ท่ีภาพใหภ้ าพ ณ จดุ ท่ีตอ้ งการเตมิ สี
3. คลกิ เมนู Edit  Fill หรอื Shift + F5 กาหนดคา่ ตา่ งๆ ดงั ภาพ

เลือกสีหรือพืน้ ผวิ ท่ี เลือก Option เพ่ือ
จะเทสีลงไปภาพ ปอ้ งกนั การเทสีลง
พืน้ ท่ีสว่ นท่ีไมม่ ีจดุ
กาหนดโหมดการ ของสี
ผสานสีและความ
โปรง่ ใส

23

ตัวอยา่ ง การเตมิ สีบรเิ วณท่ีสรา้ งขอบเขตพืน้ ท่ี โดยกาหนดคา่ Opacity 100 % กาหนดสีดา้ นบน
Foreground Color (สีชมพ)ู

การกาหนดคา่ การผสานและความโปรง่ ใสของภาพ ถา้ กาหนดคา่ มากจะทาใหส้ ีมีความเขม้ สงู แตถ่ า้
กาหนดคา่ นอ้ ยสีจะจางหรือโปรง่ ใสตามคา่ ท่ีกาหนด เชน่ คา่ Opacity = 50 % ดงั ภาพ

ตวั อยา่ ง การเตมิ สีบรเิ วณท่ีสรา้ งขอบเขตพืน้ ท่ี โดยกาหนดคา่ Opacity 50 % สี Foreground Color
เหมือนกบั สีขอ้ ท่ี 1

6.4 การออกแบบ Web Page

การสรา้ ง Web Pageใหม้ ีความสวยงามตอ้ งใชโ้ ปรแกรมสาหรบั การสรา้ งภาพกราฟิก เพ่ือใหไ้ ด้ Web Page ท่ี
สวยงาม เชน่ การออกแบบภาพ นาภาพถ่ายตกแตง่ แกไ้ ขความบกพรอ่ งสว่ นตา่ งๆ ของภาพ และการใช้ Effects ตา่ งๆ
เชน่ สรา้ งตวั อกั ษรใหเ้ หมาะสมสาหรบั Web Page การเลือกภาพ การกาหนดขนาดภาพ ดงั นี้

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

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

60

ภาพออกเป็นภาพเล็กๆ เรียงลาดบั ก่อนหลงั แลว้ นาไปใชง้ านจรงิ ในโปรแกรมสาหรบั สรา้ ง Web Page เชน่ โปรแกรม
Adobe Dreamweaver ตวั อยา่ งการตดั ภาพเป็นภาพเลก็ ๆ ชว่ ยในการโหลดภาพเร็วขนึ้

6.4.3 ความละเอยี ดของภาพ การกาหนดความละเอียดของภาพจะมีผลตอ่ ขนาดของภาพ
ถา้ มีความละเอียดของภาพมากจะทาใหก้ ารแสดงผลภาพบนเวบ็ ไซตช์ า้ กว่าภาพท่ีมีความละเอียดต่าการกาหนดความ
ละเอียดใหภ้ าพสามารถทาไดข้ ณะบนั ทกึ ภาพ คือ คลิกเมนู File Save for web ดงั นี้

6.4.3.1 การบนั ทกึ ไฟล์ คือ การบนั ทึกไฟล์ เพ่ือปรบั เปล่ียนความละเอียดของภาพ
ขนั้ ตอนดงั นี้

1. คลิกเมนู File  Save for web
2. ลกั ษณะภาพท่ีได้
3. คลิกป่มุ Save เพ่ือบนั ทึกภาพ
4. เลือก Folder เก็บภาพ และกาหนดการบนั ทกึ ภาพเฉพาะภาพเทา่ นนั้
โดยเลือกรูปแบบ Image Only จากชอ่ ง Format และคลิกป่มุ Save

6.4.3.2 การเลือกประเภทไฟลภ์ าพสาหรบั Web Page คือ การเลือกไฟลภ์ าพประเภท
ตา่ งๆ ท่ีสามารถใชง้ านบน Web Page เชน่ สว่ นขยาย .GIF .JPEG และ . PNG เน่ืองจากแสดงขอ้ มลู สีไดด้ แี ละ
มีขนาดไฟลท์ ่ีเล็ก โดยไฟลแ์ ตล่ ะแบบเหมาะกบั ภาพมีลกั ษณะตา่ งกนั ดงั นี้

1) .GIF ย่อมาจาก Graphics Interchange Format คอื ไฟลภ์ าพท่ีจะลดทอนสี
ไดส้ งู สดุ 256 สีเทา่ นนั้ เหมาะกบั ภาพท่ีมีรายละเอียดไมม่ าก เชน่ Logo ภาพการต์ นู ตา่ งๆ ท่ีไมเ่ นน้ ลวดลายภาพ
แสดงภาพแบบพืน้ หลงั ทะลุ และบนั ทกึ ไฟลภ์ าพแบบเคล่ือนไหว .JPG และ . JPEG ยอ่ มาจาก Joint Photographic
Export Group คือ ไฟลภ์ าพท่ี
แสดงสีไดส้ งู สดุ ถึง 16.7 ลา้ นสี เม่ือตอ้ งการแสดงภาพเหมือนจรงิ เชน่ ภาพวิวทวิ ทศั น์ ภาพคน

2) .PNG ยอ่ มาจาก Portable Network Graphics ไฟลภ์ าพท่ี รวมเอาคณุ สมบตั ขิ อง
ไฟลแ์ บบ .GIF และ .JPEG เขา้ ดว้ ยกนั สามารถแสดงสีไดม้ ากถึง 16.7 ลา้ นสี และบนั ทกึ ไฟลภ์ าพพืน้ หลงั แบบพืน้ หลงั
ทะลไุ ด้

6.4.4 ส่วนประกอบสาคัญของ Web Page คือ การกาหนดรูปแบบของ Web Pageใหม้ ีสว่ นตา่ งๆ แยก
ออกจากกนั อย่างชดั เจน เพ่ือลดความซบั ซอ้ นในการเรยี กใชง้ าน โดยโครงสรา้ งหลกั ท่ีนิยมใชม้ ี

6.4.5 การใช้เคร่อื งมือสาหรับการออกแบบ Web Page โดยขนั้ ตอนการออกแบบ Web Pageมี

เคร่อื งมือท่ีเก่ียวขอ้ ง 2 ตวั คอื Slice Tool และ Select Slice Tool ซ่งึ เป็นขนั้ ตอนสาคญั สดุ ทา้ ย

หลงั จากออกแบบกราฟิก ดงั นี้

6.4.5.1 การใชเ้ คร่ืองมือ Slice Tool คือ ตดั ภาพเป็นภาพเล็ก ๆ ขนั้ ตอนดงั นี้

1. เปิ ดภาพท่ีตอ้ งการนาไปใชง้ านบน Web Page

61

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

3. แดรกเมาส์บนภาพท่ีเหลือ โดยเส้นกรอบท่ีแดรกเมาส์ผา่ นเกิดเป็ นเส้นติดกนั
พอดี (ถา้ มีช่องวา่ งเล็กๆ จะนบั เป็นไฟลล์ าดบั ถดั มา) ดงั ภาพ

แดรกเมาส์ลากใหไ้ ดข้ นาดเหมาะสม ภาพที่ถูกตดั มีลาดบั ชื่อไฟลท์ นั ที

6.4.5.2 การปรบั แตง่ Slice ดว้ ยเคร่ืองมือ Slice Select Tool คอื หลงั จากตดั ภาพแลว้ พบวา่
เสน้ Slice ท่ีสรา้ งไวย้ งั ไมเ่ รยี บรอ้ ย หรือสรา้ ง Slice ภาพมากเกินไป สามารถใชเ้ คร่ืองมือในการย่อหรือขยายขอบเขต
ภาพได้ ขนั้ ตอนดงั นี้

1. คลิกเคร่ืองมือ คลิกบนภาพท่ีตอ้ งการแกไ้ ข จะปรากฏเสน้ Sliceปรากฏขนึ้ มาใหแ้ กไ้ ข (สี
เสน้ เปล่ียนเป็นสีนา้ ตาลสามารถคลิกป่มุ ส่ีเหล่ียมเพ่ือแกไ้ ข)

2. คลิกเมาสท์ ่ีจดุ ส่ีเหล่ียมแดรกเมาสป์ รบั แตง่ เสน้ ขอบเขตเสน้ ได้
3. ถา้ ตอ้ งการลบคลกิ เมาสบ์ นเสน้ Slice แลว้ กดป่มุ Delete ท่ีแปน้ พมิ พเ์ พ่ือลบ Slice ของภาพเสน้
Slice จะหายไป

62

6.4.6 การออกแบบป่ ุมลิงค์ คอื การออกแบบป่มุ ลงิ คเ์ พ่ือความสวยงามของ Web Page โดยการอาศยั
รูปแบบสาเรจ็ รูปท่ีกาหนดจากพาเลต Style ขนั้ ตอนดงั นี้

1. สร้างไฟลใ์ หม่ แลว้ เลือกเครื่องมือ วาดรูปสี่เหล่ียมมุมมน
2. เปิ ดพาเลต Style แลว้ เลือกชุดสไตล์ แบบ Web Style

3. คลิกเลือกรูปแบบป่ ุมท่ีตอ้ งการ  ลกั ษณะป่ ุมที่ได้
4. พมิ พข์ อ้ ความ “การออกแบบกราฟิ ก” บนป่ ุมแลว้ บนั ทึกไฟล์
ถา้ ตอ้ งการป่ ุมสถานะแบบ Rollover ใหท้ าตามขอ้ 3-4 อีกคร้ัง แลว้ บนั ทึกไฟล์

1 Sty1le วาดรูปสี่เหลี่ยมมุมมน
เปิ ดพาเลต ลกั ษณะป่ ุมที่ได้
2
3
4

พิมพข์ อ้ ความ
หรือเลือกลกั ษณะป่ ุม ดงั น้ี

6.4.7 การออกแบบ Page Header การออกแบบ Page Header สว่ นแรกท่ีดงึ ดดู ความสนใจตอ่ ผเู้ ขา้ ชม
เว็บไซต์ เน่ืองจากเป็นสว่ นแรกท่ีบอกถึงความหมาย ช่ือหวั เว็บ และแสดงช่ือเจา้ ของ Web Page ขนั้ ตอนดงั นี้

1. สรา้ งไฟลใ์ หมข่ นาด 1,000 x 150 Pixels
2. คลิกเคร่ืองมือ Gradient Tool แลว้ กาหนดคา่ Option คลกิ เลือก แลว้ คลิกเมาสซ์ า้ ยคา้ งไว้
ลากเมาสเ์ พ่ือไลโ่ ทนสี ฟา้ – นา้ เงิน ดงั ภาพ

63

3. คดั ลอกภาพ Logo วางมมุ ดา้ นซา้ ยของภาพ

4. เพ่มิ Layer 2 แลว้ ดงึ Layer 1 วางไวด้ า้ นบน Layer 2 แลว้ คลิกเลือก Layer เลือก Layer 2 สรา้ ง
ขอบเขตพืน้ ท่ีใหม้ ีขนาดความกวา้ งกวา่ ภาพ Logo

6. คลกิ เมนู Seclec Modify Feather (กาหนดคา่ 15 Pixels) คลิกเคร่ืองมือ Paint Tool เทสี
ขาวลงในขอบเขตพืน้ ท่ีแลว้ ยกเลิกขอบเขตพืน้ ท่ีกดป่มุ Ctrl + D ดงั ภาพ

7. พิมพช์ ่ือ “วทิ ยาลยั พณิชยการบึงพระพิษณุโลก” ใส่เส้นขอบและเงา แลว้ คดั ลอกภาพ 1 ภาพวาง
ดา้ นขวาของหวั เวบ็ ดงั ภาพ

ภาพท่ี 6.26 ข้นั ตอนการออกแบบ
6.3.7 การสร้างป่ ุมเมนู การสรา้ งป่มุ เมนสู าหรบั Link ตา่ งๆ เพ่ือความสวยงามแลว้ นาไปตกแตง่ Web
Page เชน่ สรา้ งป่มุ เมนหู นา้ หลกั แลว้ นาไปเช่ือมโยงไปยงั Link ตา่ งๆ ในโปรแกรม
Adobe Dream weaver หรอื นาภาพดงั กลา่ วประยกุ ตใ์ ชใ้ นงานเอกสารตา่ งๆในโปรแกรมอ่ืนๆ เชน่ Microsoft Word,
Microsoft Power Point ฯลฯ ขนั้ ตอนดงั นี้

1. สรา้ งไฟลภ์ าพขนาด 15 x 1.5 cm (พืน้ หลงั Transparent)
2. คลกิ เคร่อื งมือ Polygonal Lasso Tool วาดภาพ ดงั ภาพ

3. คลกิ เมนู Select  ModifySmooth กาหนดคา่ 6 pixels

64

4. คลิกเคร่อื งมือ Gradient Tool เพ่ือไลโ่ ทน 3 สี (1= R:191 G:4 B:39, 2= R:248
G:113 B:227 และ 3= R:206 G:8 B:185 แลว้ คลิกเมาสล์ ากไลโ่ ทนสีแลว้ กด Ctrl + D ดงั ภาพ

ทิศทางการไล่โทนสี (บนลงล่าง)

5. พิมพข์ อ้ ความ “หนา้ หลกั ” คลกิ Add Layer Styles  Blending
Option ตกแตง่ ขอ้ ความใหส้ วยงาม ดงั ภาพ

พิมพข์ อ้ ความ “หนา้ หลกั ”

6. บนั ทกึ ไฟลน์ ามสกลุ .GIF

65

5. การวัดผลและประเมินผล

วธิ ีวัด เคร่ืองมือ เกณฑ์

-การสงั เกต -การสงั เกต -ตอบไดถ้ กู ตอ้ ง
-ผา่ นเกณฑ์ 60%
-การใชข้ อ้ คาถาม -ขอ้ คาถาม
-ตอบไดถ้ กู ตอ้ ง
-การทดสอบ -แบบทดสอบ

-การสงั เกต -การสงั เกต

-การใชข้ อ้ คาถาม -ขอ้ คาถาม

66

6. บันทกึ หลังการสอน หนว่ ยท่ี.............. ภาคเรียนท่ี.............. ปีการศกึ ษา..............
1) ผลการสอน

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

2) ปัญหา/อุปสรรค

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

3) ข้อเสนอแนะและแนวทางแก้ไข

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

ลงช่ือ
(นายมนตธ์ ร สาระบรู ณ)์

ตาแหนง่ ครูจา้ งสอนประจารายเดือน

7. ข้อเสนอแนะของหัวหน้าสถานศกึ ษาหรือผู้ทไ่ี ด้รับมอบหมาย (ตรวจ/นิเทศ/เสนอแนะ/รับรอง)

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

ลงช่ือ
(นางสาวจามมจั จลุ ี มีศลิ ป์ )

ตาแหนง่ รองผอู้ านวยการฝ่ายวิชาการ

67

แผนการจัดการเรียนรู้ หน่วยที่ 7

ชอื่ วิชา โปรแกรมกราฟิก สอนสัปดาหท์ ี่ 13-14
ชือ่ หน่วย การวาดภาพ (Drawing) สอนครั้งที่ 13-14

ชื่อเร่ือง การวาดภาพ (Drawing) จานวนช่ัวโมง 8

1. สาระสาคัญ
การสรา้ งภาพใหเ้ หมาะสมสวยงาม โดยการใชก้ ลมุ่ เคร่อื งมือวาดรูปทรงสาเรจ็ รูปท่ีโปรแกรมกาหนดให้

แลว้ ตอ้ งการใหร้ ูปทรงตา่ งๆ มีลกั ษณะท่ีแตกตา่ งไปจากการวาดรูปทรงปกติ โดยการเลือกรูปแบบการรวมหรือการลด
พืน้ ท่ีรูปทรงเพ่ือใหไ้ ดร้ ูปทรงใหม่ และการสรา้ งรูปทรงจากการวาดเสน้ แบบ Vector แลว้ ปรบั แตง่ เสน้ Pathใหม้ ีความ
สวยงามเพ่มิ ขนึ้ การสรา้ งขอบเขตพืน้ ท่ีเพ่ือการระบายสีเฉพาะหรอื การไลโ่ ทนสีใหมใ่ หม้ ีสวยงาม เพ่ือใหไ้ ดอ้ งคป์ ระกอบ
ภาพใหมแ่ ลว้ นาภาพพมิ พอ์ อกทางเคร่อื งพมิ พ์

2. สมรรถนะประจาหน่วย
สรา้ งภาพโดยใชเ้ คร่อื งมือรูปทรงสาเรจ็ รูปดว้ ยโปรแกรมกราฟิก

3. จุดประสงคก์ ารเรยี นรู้
1. สรา้ งรูปทรงสาเรจ็ รูปได้
2. วาดรูปทรงแบบรวม-ลดพืน้ ท่ีได้
3. สรา้ งเสน้ Path รูปทรงตา่ งๆได้
4. แสดงตวั อยา่ งและการตงั้ คา่ ก่อนพิมพไ์ ด้
5. มีความประหยดั ตามหลกั เศรษฐกิจพอเพียง

งานพฒั นาหลกั สูตรการเรียนการสอน ฝ่ ายวชิ าการ วทิ ยาลยั อาชีวศึกษาพษิ ณุโลก

68

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

กลมุ่ เคร่อื งมือหน่งึ ท่ีสนบั สนนุ การทางานดา้ นการวาดภาพ คอื ปากกาสาหรบั วาดภาพซง่ึ สามารถสรา้ งรูปทรงแบบ
Vector การสรา้ งเสน้ Path เพ่ือออกแบบสรา้ งสรรคง์ านกราฟิกท่ีสวยงามไดม้ ากมายเพ่ือตดั ตอ่ ปรบั แตง่ สีสนั ภาพให้
สวยงามการวาดรูปทรงหรือภาพแบบลายเสน้ ท่ีมีความซบั ซอ้ นดว้ ยเคร่ืองมือในกลมุ่ Shape Tool และเคร่อื งมือ Pen
Tool เคร่ืองมือเหลา่ นีค้ รอบคลมุ ไปถงึ การสรา้ งขอบเขตพืน้ ท่ีใหร้ ูปทรงการสรา้ งเสน้ Path เพ่ือใหเ้ กิดลวดลายจากเสน้
กาหนดขอบเขตพืน้ ท่ีในการลงสีเพ่ือการระบายสีเสน้ เสน้ สามารถยอ่ /ขยายและภาพไมส่ ญู เสียความละเอียดคมชดั ดงั นี้

7.1 กลุ่มเคร่ืองมอื สร้างรูปทรงสาเรจ็ รูป

เคร่อื งมือวาดรูปทรงแบบ Vector แบบงา่ ยๆ เชน่ ส่ีเหล่ียม ส่ีเหล่ียมมมุ มน วงกลม หรือรูปทรงแบบตา่ งๆ ท่ี
โปรแกรมจดั ไวใ้ ห้ ดงั ภาพ

7.1.1 Rectangle Tool สรา้ งรูปทรงแบบส่ีเหล่ียม
7.1.2 Rounded Rectangle Tool สรา้ งรูปทรงส่ีเหล่ียมมมุ มน
7.1.3 Ellipse Tool สรา้ งรูปทรงกลมหรือทรงรี
7.1.4 Polygon Tool วาดรูปทรงหลายเหล่ียม และดดั แปลงเคร่ืองมือใหส้ ามารถวาดรูปทรงแบบอ่ืนได้
7.1.5 Line Tool สรา้ งเสน้ ตรง โดยกาหนดความหนาและสรา้ งหวั ลกู ศร
7.1.6 Custom Shape Tool สรา้ งรูปทรงสาเรจ็ รูป

เคร่อื งมือแตล่ ะตวั มี Option Bar สาหรบั กาหนดคณุ สมบตั พิ ิเศษตา่ งๆ เฉพาะเพ่ือความสะดวก เชน่ Option Bar
เคร่อื งมือ Rectangle Tool ดงั ภาพ

รูปทรงมีพืน้ หลงั ขนาดเสน้ รูปแบบเสน้ รูปแบบการจดั วาง
รูปแบบการวาด

เลือกสี กาหนดขนาด

69

7.1.1 การใช้เครอื่ งมอื Rectangle การวาดรูปทรงส่ีเหล่ียมแบบอสิ ระ หรือการกาหนดรูปแบบใน
การวาดรูปทรงใน Option Bar เคร่อื งมือแตล่ ะตวั ดงั นี้

1. คลิกท่ีเคร่ืองมือ
2. กาหนดลกั ษณะการทางานของเคร่ืองมือ และเลือกรูปแบบสี

7.1.2 การใช้เคร่อื งมอื Rounded Rectangle คอื เคร่อื งมือวาดรูปทรงส่ีเหล่ียมมมุ โคง้ มนกาหนดมมุ ได้

จากคาส่งั Radius ขนั้ ตอนดงั นี้

1. คลิกเคร่อื งมือ

2. กาหนดลกั ษณะการทางานเคร่อื งมือ ซ่งึ มีรายละเอียดเหมือนกบั เคร่ืองมือ Rectangle

แตเ่ พ่มิ ชอ่ งของ Radius บน Option Bar กาหนดความโคง้ มนของมมุ ภาพ

3. คลิกเมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากเพ่ือวาด

7.1.3 การใช้เครือ่ งมือ Ellipse คอื เคร่อื งมือวาดรูปทรงวงกลมหรือทรงรขี นั้ ตอนดงั นี้

1. คลกิ เคร่อื งมือ

2. กาหนดคณุ ลกั ษณะเหมือนกบั เคร่ืองมือ Rectangle

3. คลิกเมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากเพ่ือวาด

7.1.4 การใช้เครื่องมือ Polygon Tool คอื เคร่ืองมือวาดรูปทรงเหล่ียมและสามารถกาหนดจานวน

เหล่ียมของภาพได้ ดงั นี้

1. คลิกท่ีเคร่ืองมือ กาหนดลกั ษณะการทางานของเคร่ืองมือรายละเอียด ดงั นี้

Sides กาหนดจานวนมมุ ใหก้ บั รูปทรง

Radius กาหนดรูปทรงใหม้ ีขนาดแน่นอนโดยกาหนดเสน้ รศั มี

Smooth Corners กาหนดใหม้ มุ มีความโคง้ มน

Star สรา้ งรูปดาว

Indent Sides By กาหนดระยะการเวา้ โคง้ มน

Smooth Indents กาหนดใหม้ มุ ท่ีเวา้ มีความโคง้ มน

2. คลิกเมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากบนพืน้ ท่ีการทางานเพ่ือวาดรูปทรง

Smooth Corners Star

ภาพท่ี 7.6 เคร่ืองมือ Polygon Options

70

7.1.5 การใช้เครือ่ งมอื Line Tool คอื เคร่ืองมือวาดเสน้ ตรงและสามารถกาหนดเป็นลกู ศรทิศทาง

ตา่ งๆ ขนั้ ตอนดงั นี้

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

2. กาหนดคณุ ลกั ษณะการทางานของเคร่อื งมือรายละเอียด ดงั นี้

Weight กาหนดขนาดเสน้

Arrowheads กาหนดหวั ลกู ศร

Start สรา้ งหวั ลกู ศรท่ีสว่ นหวั เสน้

End สรา้ งหวั ลกู ศรส่วนปลายเสน้

Width กาหนดความกวา้ งหวั ลกู ศร

Length กาหนดความยาวหวั ลกู ศร

Concavity กาหนดความเวา้ ของฐานลกู ศร

3. คลิกเมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากบนพืน้ ท่ีการทางานเพ่ือวาดรูปทรง ดงั ภาพ

กาหนดคุณลกั ษณะการทางาน คลิกป่ ุม End คลิกป่ ุม Start และ ป่ ุม End

ของเคร่ืองมือ

คลิกป่ ุม Start

7.1.6 การใช้เครื่องมอื Custom Shape คือ เคร่ืองมือสรา้ งรูปทรงสาเรจ็ รูปท่ีโปรแกรมกาหนด ขนั้ ตอน
ดงั นี้

1. คลิกเคร่อื งมือ
2. กาหนดลกั ษณะของเคร่ืองมือ รายละเอียดดงั ภาพ

Custom Shape Options การวาดรูปทรงสาเรจ็ รูป รายละเอียดดงั นี้
Unconstrained วาดรูปทรงอยา่ งอสิ ระโดยไมก่ าหนดสดั สว่ น
Defined Proportional วาดรูปทรงแบบกาหนดสดั สว่ น
Defined Size วาดรูปทรงแบบกาหนดสดั สว่ นตายตวั มีขนาดเทา่ กนั

71

Fixed Size กาหนดขนาดรูปทรงโดยระบคุ า่ ดว้ ยตนเอง
From Center เลือก Option การวาดรูปทรง โดยใหข้ ยายขนาดจากจดุ ท่ีแดรกเมาส์
3. คลิกเลือกชดุ รูปทรงแลว้ คลิกลากเมาสเ์ พ่ือวาดรูปทรง
การเพ่ิมชดุ รูปทรง คือ ชดุ รูปทรงสาเรจ็ รูปท่ีโปรแกรมเตรียมไวใ้ หเ้ ลือกหลายชดุ ซ่งึ หากตอ้ งการเพ่ิมชดุ
รูปทรงเขา้ มาใหม่ โดยคลิก แลว้ คลกิ เลือกช่ือชดุ รูปทรงท่ีตอ้ งการใชง้ านได้

7.2 การวาดรูปทรงแบบรวม - ลดพนื้ ท่ี

การวาดวาดรูปทรงในรูปแบบตา่ งๆ ขนึ้ มาใหม่ โดยการกาหนดคา่ บน Option Bar สาหรบั การสรา้ งรูปทรง
หลายๆ ภาพใหม้ ีลกั ษณะท่ีโดดเดน่ โดยวธิ ีการซอ้ นทบั ของเสน้ Pathไดร้ ูปทรงแบบใหมก่ ารกาหนดคา่ Option Bar ดงั นี้

New layer การเลือกขอบเขตพืน้ ท่ีใหม่
Combine Shapes ขอบเขตพืน้ ท่ีการรวมพืน้ ท่ีซอ้ นกนั หลายชนิ้ ใหเ้ ป็นชิน้ เดยี วกนั
Intersect Shape Areas ขอบเขตพืน้ ท่ีตดั สว่ นท่ีซอ้ นทบั กนั ออก
Exclude Overlapping Shapes ขอบเขตพืน้ ท่ีตดั รูปทรง เก็บเฉพาะสว่ นท่ีซอ้ นทบั กนั ไว้

7.2.1 เลอื กใช้เฉพาะส่วนของรูปทรง คือ การสรา้ งรูปทรงดว้ ยเคร่อื งมือในกลมุ่ Shape Tool มีหลกั การ

ทางาน ขนั้ ตอนดงั นี้

1. คลิกเลือกเคร่ืองมือ แลว้ เลือกวาดรูปทรงแบบมีพืน้ หลงั และเลือกภาพ

ท่ีตอ้ งการวาดรูปทรง กาหนดรูปแบบเป็น Shape

2. วาดรูปทรงแลว้ คลกิ เลือก Option Bar กาหนดแบบ Exclude Overlapping

Shapes เลือกรูปทรงแบบวงกลมแลว้ วาดรูปทรงใหม่ทบั รูปทรงเดมิ

7.2.2 การรวมรูปทรงเข้าดว้ ยกัน คือ การวาดรูปทรงหลายๆ สว่ นใหเ้ ป็นรูปทรงเดียวกนั
ขนั้ ตอนดงั นี้

1. เลือกการวาดรูปทรงแบบมีพืน้ หลงั
2. เลือกรูปทรงแลว้ เลือกสี
3. คลกิ เลือก แลว้ วาดรูปทรงแรก และวาดภาพตอ่ ไปตามจานวนท่ีเหมาะสม

72

7.3 การใช้เครือ่ งมือวาดเส้น Path

เคร่อื งมือสรา้ งเสน้ Path หรือรูปทรงตา่ งๆ ซง่ึ สว่ นประกอบของเสน้ มีจดุ แองเคอร์ (จดุ ยอ่ ยท่ีอย่ตู ามแนวเสน้ )
คือ กลมุ่ เคร่ืองมือ Pen Tool สามารถสรา้ งเสน้ Path

Pen สรา้ งเสน้ Path โดยการคลิกวางจดุ แองเคอร์
Freeform Pen สรา้ งเสน้ Path แบบลากอสิ ระ
Add Anchor Point เพ่มิ จดุ แองเคอร์
Delete Anchor Point ลดจดุ แองเคอร์
Convert Point แปลงรูปแบบของเสน้ และมมุ

ลกั ษณะของเสน้ Path สามารถแบง่ ออกเป็น 2 แบบ คือ
1. แบบ Shape Layer คอื การวาดเสน้ Path แบบ Layer ภาพโดยการเลือกสี

ของรูปทรงเสน้ Path นีไ้ ด้
2. แบบ Paths คือ การวาดเสน้ Path อยา่ งเดียว ท่ีประกอบดว้ ยจดุ และ

เสน้ โคง้ โดยยงั ไมม่ ีการกาหนดสีเสน้ หรือสีพืน้ และเสน้ Path จะไมป่ รากฎในภาพผลลพั ธท์ ่ีนาไปใชง้ านแตส่ ามารถเตมิ สี
พืน้ หรือสีเสน้ ในภายหลงั ได้

7.3.1 การสร้างเส้น Path คือ การวาดรูปทรงดว้ ยการคลิกเมาสว์ าดรูปทรงตามจินตนาการ
ของผวู้ าด ซ่งึ สามารถวาดไดห้ ลายวธิ ี และแกไ้ ขรูปทรงในภายหลงั ได้ ดงั นี้

7.3.1.1 การสรา้ งเสน้ Path ดว้ ยเคร่ืองมือ Pen Tool คือ เคร่อื งมือสรา้ ง
เสน้ Path รูปทรงตา่ งๆ แบบอสิ ระ ขนั้ ตอนดงั นี้

1. คลิกเคร่อื งมือ
2. คลกิ เมาสซ์ า้ ยในตาแหนง่ ท่ีตอ้ งการสรา้ งเป็นเสน้ Path หรือรูปทรงท่ีตอ้ งการ
จดุ ท่ีคลิกเมาสจ์ ะปรากฏจดุ ส่ีเหล่ียมเลก็ ๆ ณ บรเิ วณดงั กลา่ ว เรยี กวา่ จดุ แองเคอร์

7.3.1.2 การสรา้ งเสน้ Path ดว้ ยเคร่ืองมือ Freeform Pen Tool คอื การวาดเสน้
Path แบบครา่ วๆ ก่อน ขนั้ ตอนดงั นี้

1. คลกิ เคร่อื งมือ
2. คลกิ เมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากไปในตาแหนง่ ท่ีตอ้ งการสรา้ งเป็นเสน้ Path แลว้
ปลอ่ ยเมาสเ์ ม่ือไดร้ ูปทรงท่ีตอ้ งการ

7.3.1.3 การเพ่ิมจดุ แองเคอรด์ ว้ ยเคร่ืองมือ Add Anchor Point Tool คือ
เคร่อื งมือเพ่มิ จดุ แองเคอรแ์ ละแกไ้ ขจดุ ดงั กล่าว ขนั้ ตอนดงั นี้

1. คลกิ ท่ีเคร่อื งมือ
2. คลิกเมาสซ์ า้ ยในตาแหนง่ ท่ีตอ้ งการเพ่มิ จดุ แองเคอรแ์ ลว้ คลิกเมาสซ์ า้ ยคา้ งไว้

73

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

7.3.1.4 การลบจดุ แองเคอรด์ ว้ ยเคร่อื งมือ Delete Anchor Point Tool คอื
เคร่อื งมือลบจดุ แองเคอรอ์ อกเพ่ือแกไ้ ขภาพ

ขนั้ ตอนดงั นี้ 7.3.1.5 การแปลงรูปแบบของเสน้ และมมุ ดว้ ยเคร่ืองมือ Convert Point

1. คลิกท่ีเคร่ืองมือ
2. คลิกเมาสซ์ า้ ยในตาแหนง่ ท่ีตอ้ งการแปลงเสน้ รูปแบบใหม่

7.3.2 การเคลอื่ นยา้ ยเส้น Path
การวาดรูปทรงเสน้ Path นนั้ เม่ือรูปทรงท่ีไดย้ งั ไมเ่ หมาะสม และตอ้ งการแกไ้ ขทศิ ทาง

หรือตาแหนง่ ตา่ งๆ ในรูปทรง ซง่ึ สามารถแกไ้ ขไดด้ ว้ ยเคร่ืองมือ Direct Select Tool คือ เคร่ืองมือสาหรบั แกไ้ ขเสน้ Path
ดงั นี้

7.3.2.1 Path Selection Tool คือ การเคล่ือนยา้ ยเสน้ Path ทงั้ หมด
7.3.2.2 Direct selection Tool คอื การเคล่ือนยา้ ยเสน้ Path เฉพาะจดุ แองเคอร์
7.3.2.1 การเคล่ือนยา้ ยเสน้ Path ดว้ ยเคร่ืองมือ Path Selection Tool คือ การเคล่ือนยา้ ยวตั ถทุ ่ีวาดจาก
เสน้ Path ทงั้ หมดไปยงั ตาแหนง่ ตา่ งๆ คลิกท่ีเคร่อื งมือ คลกิ เมาสท์ ่ีภาพแลว้ สามารถเคล่ือนยา้ ยภาพไดท้ งั้ หมด

7.3.2.2 การเคล่ือนยา้ ยเสน้ Path ดว้ ยเคร่ืองมือ Direct selection Tool คือ การเคล่ือนยา้ ยตาแหนง่ เสน้
Path ณ จดุ แองเคอรท์ ่ีคลิกเมาส์ คลกิ ท่ีเคร่อื งมือ คลกิ เมาส์ ณ จดุ แองเคอรค์ า้ งไวแ้ ลว้ ลากไปในตาแหนง่ ท่ีตอ้ งการ

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

74

7.3.3 สร้างข้อความบนเส้น Path คอื การสรา้ งขอ้ ความทอดโคง้ ไปตามแนวเสน้ Pathใดๆ โดยการวาดเสน้
Path ดว้ ยเคร่ืองมือ Pen Tool เพ่ือใหไ้ ดล้ กั ษณะเสน้ ท่ีตอ้ งการแลว้ จงึ พมิ พข์ อ้ ความลงไปในเสน้ Path นนั้ ขอ้ ความ
เหลา่ นีส้ ามารถกาหนดทิศทางตามเสน้ Path ตา่ งๆ ดงั นี้

7.3.3.1 การพิมพข์ อ้ ความ คือ ขนั้ ตอนการพิมพข์ อ้ ความตามแนวเสน้ Path ขนั้ ตอนดงั นี้
1. คลกิ เคร่ืองมือ เลือกรูปแบบไมม่ ีสีพืน้ หลงั
2. วาดเสน้ Path เป็นตามแนวภาพ

สร้างแนวเส้น Path

คลิกจุดเริ่มตน้

4. คลิกเคร่ืองมือ นาเมาสว์ างจะปรากฏสญั ลกั ษณ์ คลกิ เมาสบ์ นเสน้ Path
5. พิมพข์ อ้ ความ โดยขอ้ ความจะไลไ่ ปตามแนวเสน้ Path ท่ีสรา้ งไว้

7.3.3.2 แกไ้ ขขอ้ ความบนเสน้ Path คอื การแกไ้ ขขอ้ ความท่ีอยบู่ นแนวเสน้ Path ทาเหมือนกบั การแกไ้ ข
ขอ้ ความปกติ โดยคลิกเลือกเคร่ืองมือ เพ่ือแกไ้ ขขอ้ ความนนั้ หรอื ปรบั เปล่ียนตวั เลือก Option Bar เชน่ การเปล่ียน
Font เปล่ียนสี หรอื ขนาดขอ้ ความใหม่ ขนั้ ตอนดงั นี้

1. ดบั เบลิ คลกิ Layer ขอ้ ความ
2. เลือก Option ขอ้ ความท่ีตอ้ งการปรบั แตง่

7.3.4.3 การปรบั ตาแหนง่ ขอ้ ความบน Path คอื การเล่ือนตาแหนง่ ขอ้ ความท่ีพิมพ์
โดยการกาหนดจดุ เร่มิ ตน้ และจดุ สิน้ สดุ ขอ้ ความแลว้ ใชเ้ คร่อื งมือ Path Selection Tool หรอื Direct Selection
Tool ปรบั แตง่ ตาแหนง่ ขอ้ ความ

เม่ือเล่ือนเมาสจ์ ากตน้ ขอ้ ความ สงั เกตเมาสจ์ ะเป็นรูป
เม่ือเล่ือนเมาสจ์ ากทา้ ยขอ้ ความ สงั เกตเมาสจ์ ะเป็นรูป

7.4 แสดงตัวอยา่ งและการตงั้ ค่าก่อนพมิ พ์

ก่อนพิมพภ์ าพจรงิ นนั้ ตอ้ งมีการดตู วั อยา่ งภาพก่อนพมิ พก์ ่อน เพ่ือใหไ้ ดภ้ าพตรงความตอ้ งการหรือกาหนดขนาด
ของภาพใหม่ เชน่ เปล่ียนแนวการพิมพ์ หรือเลือก Option การพมิ พอ์ ่ืนๆ เพ่ิมเตมิ ได้ โดยการเลือกคาส่งั File  Print
เพ่ือเขา้ สู่ Dialog Box การพิมพ์ ขนั้ ตอนดงั นี้

รายละเอียดใน Dialog Box การพิมพ์ ดงั นี้
Printer เลือกช่ือเคร่อื งพมิ พท์ ่ีใชง้ าน

75

Copies จานวนชดุ ท่ีพมิ พ์
Print Settings ตงั้ คา่ เก่ียวกบั เคร่ืองพมิ พ์ หนา้ กระดาษ และการใสก่ ระดาษ

เลือกแนวการพมิ พ์ แนวตงั้ หรอื แนวนอน
กลุ่ม Position จดั แนวของภาพ โดย

Center Image คลิก ถา้ ตอ้ งการจดั ภาพอยกู่ ่งึ กลางหนา้ กระดาษ
Top, Left คือ ระบตุ าแหนง่ ขอบบนและขอบซา้ ย
กลุ่ม Scaled Print Size กาหนดขนาดภาพ
Scale to Fit Media ตอ้ งการใหป้ รบั ขนาดพอดีกบั กระดาษ
Scale ขนาดของภาพเป็นเปอรเ์ ซ็นต์ (ตอ้ งยกเลิก Scaled Tool Print กอ่ น)
Height ความสงู ของภาพ (ตามหนว่ ยวดั ของ Unit)
Width ความกวา้ งของภาพ (ตามหนว่ ยวดั ของ Unit)
Print Resolution แสดงคา่ ความละเอียดจรงิ ภาพจากการพิมพ์
Bounding Box คลกิ เลือก แสดงกรอบปรบั ขนาดและเล่ือนตาแหนง่ ภาพบนหนา้ กระดาษ
Unit เลือกหนว่ ยวดั

7.4.1 ข้ันตอนการพมิ พ์ คือ เม่ือเขา้ ใจหลกั การการกาหนดคา่ ตา่ งๆ สาหรบั การพิมพแ์ ลว้ ตอ้ งการพมิ พ์
ภาพออกทางเคร่อื งพมิ พ์ สามารถปฏิบตั ไิ ด้ ขนั้ ตอนดงั นี้

1. เปิดไฟลภ์ าพท่ีตอ้ งการพิมพ์ เลือกเมนู File  Print
3. ตงั้ คา่ การพิมพ์
4. ส่งั พิมพค์ ลกิ

76

5. การวัดผลและประเมินผล

วธิ ีวัด เคร่ืองมือ เกณฑ์

-การสงั เกต -การสงั เกต -ตอบไดถ้ กู ตอ้ ง
-ผา่ นเกณฑ์ 60%
-การใชข้ อ้ คาถาม -ขอ้ คาถาม
-ตอบไดถ้ กู ตอ้ ง
-การทดสอบ -แบบทดสอบ

-การสงั เกต -การสงั เกต

-การใชข้ อ้ คาถาม -ขอ้ คาถาม

77

6. บันทกึ หลังการสอน หนว่ ยท่ี.............. ภาคเรียนท่ี.............. ปีการศกึ ษา..............
1) ผลการสอน

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

2) ปัญหา/อุปสรรค

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

3) ข้อเสนอแนะและแนวทางแก้ไข

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

ลงช่ือ
(นายมนตธ์ ร สาระบรู ณ)์

ตาแหนง่ ครูจา้ งสอนประจารายเดือน

7. ข้อเสนอแนะของหวั หน้าสถานศกึ ษาหรือผู้ทไ่ี ด้รับมอบหมาย (ตรวจ/นิเทศ/เสนอแนะ/รับรอง)

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

ลงช่ือ
(นางสาวจามมจั จลุ ี มีศลิ ป์ )

ตาแหนง่ รองผอู้ านวยการฝ่ายวชิ าการ

78

แผนการจัดการเรียนรู้ หน่วยท่ี 8

ชอ่ื วชิ า โปรแกรมกราฟิก สอนสัปดาหท์ ่ี 15-16
ชื่อหน่วย การใชโ้ ปรแกรมกราฟิกแบบเวคเตอร์ สอนครั้งที่ 15-16

ช่ือเรือ่ ง การใชโ้ ปรแกรมกราฟิกแบบเวคเตอร์ จานวนช่ัวโมง 8

1. สาระสาคัญ
การใชโ้ ปรแกรมสรา้ งภาพกราฟิกแบบ Vector มีหลากหลายโปรแกรม Adobe Illustrator โปรแกรมมี

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

1. เรยี กใชโ้ ปรแกรมและออกจากโปรแกรมได้
2 อธิบายขนั้ ตอนการสรา้ งไฟลภ์ าพใหมไ่ ด้
3. ปรบั มมุ มองของภาพได้
4. วาดภาพ โดยการใชเ้ คร่อื งวาดภาพได้
5. กาหนดสีพืน้ และสีเสน้ ขอบได้
6. วาดเสน้ ดว้ ยกลมุ่ เคร่ืองมือ Line ได้
7. ซอ่ นขอบเขตของภาพได้

งานพฒั นาหลกั สูตรการเรียนการสอน ฝ่ ายวชิ าการ วทิ ยาลยั อาชีวศกึ ษาพษิ ณุโลก

79

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

โปรแกรม Adobe Illustrator คอื โปรแกรมท่ีนยิ มใชใ้ นการวาดภาพลายเสน้ เชน่ การวาดภาพการต์ นู การออกแบบ
Logo การออกแบบผลิตภณั ฑ์ การออกแบบปกหนงั สือ การออกแบบปา้ ยโฆษณาตา่ งๆ และการออกแบบองคป์ ระกอบ
Web Page ซง่ึ เป็นโปรแกรมท่ีใชง้ านงา่ ยเน่ืองจากเคร่ืองมือตา่ งๆ อานวยความสะดวกในการสรา้ งภาพไดส้ วยงาม
เหมาะสม

8.1 การเข้า/ออกโปรแกรม Adobe Illustrator

การเรียกใชโ้ ปรแกรม คอื ขนั้ ตอนการใชง้ านแรกเม่ือใชง้ านเสรจ็ แลว้ ควรมีการปิดโปรแกรม เพ่ือปอ้ งกนั
ขอ้ ผิดพลาดท่ีอาจขนึ้ กรณีใชโ้ ปรแกรมหลายๆ โปรแกรมพรอ้ มๆ กนั ดงั นี้

8.1.1 การเข้าโปรแกรม Adobe Illustrator คอื ขนั้ ตอนการเรยี กใชโ้ ปรแกรม คลกิ Start  All Program
 Adobe Master Collection CS3 Adobe Illustrator รอสกั ครูจ่ ะปรากฏหนา้ ตา่ งโปรแกรม Adobe Illustrator

8.1.2 ส่วนประกอบของโปรแกรม Adobe Illustrator
8.1.3 การออกโปรแกรม Adobe Illustrator คือ ขนั้ ตอนสดุ ทา้ ยเม่ือใชง้ านสิน้ สดุ แลว้ ตอ้ งการปิดโปรแกรม
ดงั กลา่ ว ขนั้ ตอนดงั นี้

1. คลกิ ท่ีป่มุ Close มมุ ขวาบนสดุ ของหนา้ ตา่ งหลกั หรอื
2. คลกิ ท่ีเมนู File  Exit ดงั ภาพ

8.1.4 Menu Bar “เมนูบาร”์ คือ เคร่ืองมือท่ีเก็บรวบรวมคาส่งั ไวเ้ ป็นหมวดหมู่ เพ่ือใชจ้ ดั การกบั ภาพ และปรบั
คา่ ตา่ งๆ ดงั นี้

File มีหนา้ ท่ีจดั การเก่ียวกบั การสรา้ ง การเปิด การบนั ทกึ และการตงั้ คา่ ตา่ งๆ
Edit มีหนา้ ท่ีเก่ียวกบั การยกเลิก การคดั ลอก การปรบั เปล่ียนตา่ งๆ
Object มีหนา้ ท่ีเก่ียวกบั การปรบั เปล่ียนวตั ถตุ า่ งๆ
Type มีหนา้ ท่ีเก่ียวกบั การจดั การกบั ขอ้ ความ
Select มีหนา้ ท่ีเก่ียวกบั การเลือกขอบเขตพืน้ ท่ีและการยกเลกิ การเลือก
Filter มีหนา้ ท่ีเก่ียวกบั การใสล่ กั ษณะพเิ ศษตา่ งๆ ใหก้ บั วตั ถุ
Effect มีหนา้ ท่ีเก่ียวกบั การใส่ Effects ตา่ งๆ ใหก้ บั วตั ถุ
View มีหนา้ ท่ีจดั การมมุ มองหนา้ ตา่ งการทางาน
Window มีหนา้ ท่ีเปิด/ปิดพาเลตตา่ งๆ

80

Help มีหนา้ ท่ีแนะนาการใชเ้ คร่อื งมือตา่ งๆ
8.1.5 Control Panel คือ สว่ นการปรบั แตง่ คา่ การทางานของเคร่อื งมือตา่ งๆ ซง่ึ รายละเอียด จะเปล่ียนไปตาม
การเลือกเคร่ืองมือ หรือเลือก Object ขณะนนั้ เชน่ หากเลือก Object ท่วั ๆ ไป Control Panel จะแสดง Option การ
กาหนดสี ขนาดของพืน้ และเสน้ หรอื หากเลือก Object ตวั อกั ษรหรือขอ้ ความจะแสดง Option ท่ีเก่ียวกบั การกาหนด
รูปแบบตวั อกั ษร เป็นตน้
8.1.6 Title Bar คือ มีหนา้ ท่ีแสดงช่ือโปรแกรมมมุ ดา้ นซา้ ย
8.1.7 Status Bar คอื แถบสถานะปรากฏอยดู่ า้ นลา่ งสดุ ของวนิ โดว์ แสดงเปอรเ์ ซ็นต์ ของการ Zoom ภาพ
(เลือก Zoom ภาพไดจ้ ากเมนหู รือพมิ พค์ า่ ลงไป)
8.1.8 Tool box คอื เคร่ืองมือตา่ งๆ ท่ีจาเป็นตอ่ การทางานและมีจานวนมาก ดงั นนั้ จงึ มี การรวมเคร่ืองมือ
บางอยา่ งเป็นกลมุ่ ๆ โดยมีสญั ลกั ษณร์ ูปสามเหล่ียม อยมู่ มุ ขวาดา้ นลา่ ง
เพ่ือแสดงวา่ ยงั มีเคร่อื งมืออ่ืนๆ อยรู่ ว่ มและสามารถเรียกใชง้ านได้

8.1.9 Palette “พาเลต” คือ หนา้ ตา่ งการทางานตา่ งๆ แตล่ ะพาเลตมีหนา้ ท่ีการทางานท่ีแตกตา่ งกนั เชน่ พา
เลต Color สาหรบั เลือกสี พาเลต Appearance สาหรบั ใสส่ ีพืน้ และสีเสน้ พาเลต Brushes สาหรบั เลือกรูปแบบของหวั
พกู่ นั การเรียกใชพ้ าเลต Color คอื คลิกเมนู Windows  Color ถา้ ตอ้ งการปิดพาเลตอ่ืนๆ ทาตามขนั้ ตอนเดิมอีกครงั้

8.2 การจดั การสร้างไฟลภ์ าพ

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

8.2.1 การสร้างไฟลภ์ าพใหม่หรือการสร้างอารบ์ อรด์ คือ การสรา้ งไฟลภ์ าพใหม่ ดงั นี้
1. คลกิ เมนู File  New จะปรากฏหนา้ ตา่ ง New Document
2. Name ตงั้ ช่ือไฟลภ์ าพ หรอื เก็บไวข้ ณะบนั ทกึ ไฟล์
3. New Document Profile คลิกแลว้ เลือก Profile มาตรฐานท่ีตรงกบั ลกั ษณะงาน เชน่ Print

คือไฟลเ์ อกสารสาหรบั งานพิมพ,์ Web คอื ไฟลเ์ อกสารสาหรบั งาน Web Page
4. Size คลิกแลว้ เลือกขนาดพืน้ ท่ีการทางานท่ีตอ้ งการ
5. Orientation เลือกแนวการวางแนวตงั้ หรือแนวนอน แลว้ กดป่มุ OK การกาหนดคา่
Option การสรา้ งไฟลภ์ าพใหม่ ดงั นี้
1. กาหนดความกวา้ งและความสงู
2. พืน้ ท่ีการพมิ พส์ ว่ นท่ีเกินออกมาดา้ นนอกอาจมีการกาหนดคา่ ใหเ้ กินออกมาเล็กนอ้ ย

เป็นการเผ่ือพืน้ ท่ีในการตดั ออก หรือเรยี กวา่ “ตดั ตก”

81

3. คลกิ Advanced ก่อน
Color Mode เลือกโหมดสีของไฟล์
Raster Effects ความละเอียดของภาพเม่ือมีการปรบั แตง่ ดว้ ย Filter/Effects
Preview Mode มมุ มองภาพผลลพั ธ์ (ปกตจิ ะถกู ตงั้ ใหต้ ามท่ีเลือกตรง

New Document Profile ดา้ นบน)

8.2.2 การสร้างไฟลแ์ บบรวดเร็ว โดยกดคีย์ Alt + Ctrl + N โปรแกรมจะสรา้ ง
ไฟลข์ นึ้ มาใหม่ โดยไมม่ ีการกาหนด Option แตจ่ ะใชต้ าม Option ลา่ สดุ ท่ีเคยกาหนดไวล้ า่ สดุ

8.2.3 การเปิ ดไฟลภ์ าพทมี่ ีอยแู่ ล้ว คอื ขนั้ ตอนการเปิดไฟลเ์ กา่ ท่ีไดบ้ นั ทกึ แลว้ ขนึ้ มาปรบั ปรุงหรือแกไ้ ข
สามารถ ขนั้ ตอนดงั นี้

1. คลกิ เมนู File  Open หรือกดป่มุ Ctrl + O ท่ีคยี บ์ อรด์
2. ระบโุ ฟลเดอรท์ ่ีจดั เก็บไฟลภ์ าพ
3. คลิกเลือกไฟลภ์ าพท่ีตอ้ งการ
4. แสดงตวั อยา่ งภาพจากไฟลท์ ่ีเลือก

8.3 การปรับมุมมองและการใช้คาส่ังเบอื้ งตน้

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

8.3.1 การปรับมุมมองวนิ โดวโ์ ปรแกรม คือ การปรบั มมุ มองเพ่ือความสะดวกในการทางาน
โดยคลกิ กลมุ่ เคร่ืองมือ Screen Mode จาก Tool Panels หรือกดคีย์ F เพ่ือการสลบั มมุ มอง ดงั นี้

8.3.1.1. Normal Screen Mode คอื การแสดงสว่ นประกอบทกุ อยา่ งทงั้ หมดเหมือนกบั ขณะท่ีเปิด
โปรแกรมครงั้ แรก แสดงเคร่ืองมือตา่ งๆ ทงั้ หมดติดกบั วนิ โดวโ์ ปรแกรม

8.3.1.2 Full Screen Mode With Menu Bar คือ แสดงวินโดวเ์ ตม็ หนา้ จอ โดยไมแ่ สดงช่ือของโปรแกรม
และ Taskbar ของวินโดว์ เพ่ือเพ่มิ พืน้ ท่ีการทางานมากขนึ้

8.3.1.3 Full Screen Mode คือ แสดงพืน้ ท่ีการทางานมากท่ีสดุ แตไ่ มแ่ สดงเมนบู าร์
8.3.2 มุมมองการทางาน คือ การเปล่ียนมมุ มองใหเ้ หมาะสมกบั ภาพนนั้ ๆ โดยคลกิ คาส่งั View 
Preview หรอื View  Outline (คยี ล์ ดั Ctrl + Y ) เพ่ือสลบั มมุ มอง Priview และ Outline ดงั นี้

8.3.2.1 Preview คือ การเปิดไฟลก์ ารทางานครงั้ แรกจะทางานในมมุ มองนี้
เป็นมมุ มองแรก (สงั เกตจากแถบ Title Bar) ซ่งึ เป็นมมุ มองท่ีเห็นสีพืน้ สีเสน้ Effects และลกั ษณะการซอ้ นทบั กนั ของ
Object ตามจรงิ แบบปกติ

82

8.3.2.2 Outline คือ มมุ มองภาพแบบโครงรา่ ง แสดงเฉพาะโครงรา่ งของเสน้ ท่ีประกอบกนั เป็น Object
ทงั้ หมดทกุ ภาพ Object ท่ีมีการซอ้ นทบั กนั อยเู่ ป็นจานวนมากการใชม้ มุ มองนีเ้ ลือกจดั การกบั Object ท่ีซอ้ นอย่ดู า้ นหลงั
ไดง้ ่ายขนึ้ และโปรแกรมตอบสนองการทางานไดร้ วดเรว็ ขนึ้

8.3.3 การใช้เมนูลัด คือ การคลิกขวาบนอารต์ บอรด์ หรอื บน Object ท่ีเลือกไวเ้ พ่ือเปิดเมนลู ดั ซง่ึ เป็นอีกวิธีท่ี
ใชเ้ รยี กคาส่งั อยา่ งรวดเร็วแทนการคลกิ คาส่งั จากแถบเมนหู ลกั เชน่ การคลกิ ขวาบนขอ้ ความจะแสดงคาส่งั ในการ
ปรบั แตง่ ขอ้ ความ หรอื คลิกขวาบน Object แบบ Symbol จะแสดงคาส่งั ในการจดั การกบั Symbol ตวั อยา่ งดงั นี้

ตวั อย่าง เม่ือคลิกขวาบน Symbol จะแสดงคาส่งั จดั การ Symbol ดงั ภาพ

ตัวอยา่ ง เม่ือคลกิ ขวาบนขอ้ ความจะแสดงคาส่งั จดั การขอ้ ความ ดงั ภาพ

คลิกขวาบนขอ้ ความ

8.3.4 ยกเลกิ หรือทาซา้ คาส่ัง คือ การยกเลกิ คาส่งั ก่อนหนา้ นนั้ หรือยกเลิกการทางานกลบั ไป 1 ขนั้ ดงั นี้
8.3.4.1 ยกเลิกหรือทาซา้ คาส่งั ทีละคาส่งั ดงั นี้
1. Undo คือ คาส่งั เพ่ือยอ้ นกลบั การทางานกลบั ไป 1 ขนั้ หรือวธิ ี

ยกเลกิ คาส่งั ครงั้ หลงั สดุ ท่ีทาไป 1 คาส่งั ถา้ ตอ้ งการยอ้ นกลบั ไปหลายขนั้ ใชค้ าส่งั นีซ้ า้ ๆ โดยวิธีการเรยี กใชจ้ ากเมนู Edit
 Undo หรอื Ctrl + Z

2. Redo คือ คาส่งั ทาซา้ การกระทา หรือคาส่งั ท่ีถกู ยกเลิกไป ถา้ มีการยกเลิกหลายคาส่งั
สามารถทาซา้ กลบั มาทีละคาส่งั ไดต้ ามจานวน

8.3.4.2 ยกเลิกคาส่งั ท่ีทาไปแลว้ ทงั้ หมด คือ การยกเลิกคาส่งั การทางานทกุ อยา่ ง ในขนั้ ตอนเดียว
โดยเนือ้ หาบนอารต์ บอรด์ จะยอ้ นกลบั ไปเป็นเหมือนครงั้ สดุ ทา้ ยท่ีไดบ้ นั ทกึ ไฟลน์ นั้ โดยการคลิกเมนู File  Revert

83

แลว้ เลือก Revert อีกครงั้ เพ่ือยืนยนั การยกเลิกคาส่งั

8.4 การใช้เครอ่ื งมอื วาดภาพ

โปรแกรม Adobe Illustrator คือ โปรแกรมสาหรบั การวาดภาพลายเสน้ การปรบั แตง่ ภาพ โปรแกรมมีเคร่อื งมือท่ี
สามารถใชว้ าดภาพและสามารถปรบั การใชง้ านไดเ้ หมือนกบั เคร่ืองมือวาดภาพบนกระดาษการกาหนดคา่ เคร่ืองมือตา่ งๆ
ใหใ้ ชง้ านไดง้ ่าย เชน่ เคร่ืองมือ Pencil เคร่ืองมือ Pen และเคร่อื งมือ Mesh เป็นตน้

8.4.1 ส่วนประกอบของ Object คือ ภาพกราฟิกแบบ Vector ประกอบดว้ ยเสน้ ชนิ้ สว่ นตา่ งๆ เรียกวา่
Object หลายๆ ชนิ้ วางรวมกนั โดยแตล่ ะ Object มีองคป์ ระกอบหลกั ๆ ดงั นี้

Stroke Bounding Box
Fill เส้น Path
Anchor Point

Stroke คือ เสน้ ตามรูปทรงของ Object สามารถกาหนดสี ขนาด และรูปแบบ
ลกั ษณะของเสน้

Fill คอื พืน้ ท่ีดา้ นในของ Object ซง่ึ สามารถกาหนดสีไดท้ งั้ สีแบบทบึ สีพืน้
แบบไลโ่ ทนสี การใสล่ วดลาย การกาหนดความโปรง่ ใสของภาพ และการปรบั Filter และ Effect ของภาพ

Bounding Box คอื ขอบเขตการปรบั ขนาดภาพ เชน่ การยอ่ ภาพและการขยายภาพ
หรอื การหมนุ ภาพในลกั ษณะตา่ งๆ

Path คือ เสน้ โครงรา่ งพืน้ ฐานของ Object ปรบั เปล่ียนรูปทรงของ Object
Anchor Point คือ จดุ กาหนดความโคง้ หรือปรบั ความโคง้ สามารถเพ่ิมและลดจานวนจดุ
8.4.1.2 วธิ ีการควบคมุ เสน้ Path ของภาพลายเสน้ คือ การวาดภาพลายเสน้ ในลกั ษณะ
ตา่ งๆ โดย Object ท่ีวาดมีเสน้ โครงรา่ งเป็นตวั กาหนดรูปทรงเรียกวา่ “Path Line” ดงั นนั้ Object ท่ีสรา้ งจะมีความ
สวยงามมากนอ้ ยเพียงใดขนึ้ อยกู่ บั การควบคมุ เสน้ Path ของผวู้ าดเอง ถา้ มีการวาดสว่ นท่ีมีความโคง้ เวา้ ไดด้ ีรูปทรง
สวยงามการกาหนดเสน้ Path แตล่ ะเสน้ นนั้ มีความสมั พนั ธ์

Anchor Point คอื จดุ ท่ีตรงึ เสน้ Path แตล่ ะชว่ งไวใ้ นตาแหนง่ ตา่ งๆ อยตู่ อ่ เน่ือง เม่ือ Anchor Point เปล่ียน
ตาแหนง่ ก็จะมีผลตอ่ รูปทรงเปล่ียนตาม

Direction คือ สว่ นท่ีควบคมุ ความโคง้ และทิศทางของเสน้ Path ท่ีออกจาก Anchor Point
หากแขนยาวจะไดม้ มุ โคง้ ท่ีกวา้ งในทางตรงกนั ขา้ มหากแขนสนั้ ไดม้ มุ โคง้ ท่ีแคบหรือหากจดุ Anchor Point ท่ีไมม่ ีแขนสอง
จดุ ตดิ กนั เสน้ Path นนั้ เป็นเสน้ ตรง

84

จุดปลายเส้น คือ จดุ สิน้ สดุ ของเสน้ Path แบบปลายเปิด (เสน้ Path ไมค่ รบรอบเป็นวง)
ส่วนโค้งของเส้น Path คอื สว่ นโคง้ ท่ีเกิดจากการปรบั ดงึ แขนท่ีกางออก และเป็นตวั กาหนด
รูปทรงของ Object
วาดเสน้ Path เสรจ็ แลว้ ไปทางาน ณ ตาแหนง่ อ่ืน Anchor Point และแขนของ Object จะถกู ซอ่ นหากตอ้ งการ
แสดงสว่ นตา่ งๆ เสน้ นนั้ อีก โดยใชเ้ คร่ืองมือ (Selection) ปรบั แก้ Object ทงั้ หมด เชน่ การย่อการขยายหรือ
Direct Selection คลกิ บน Object เพ่ือปรบั ตาแหนง่ เฉพาะจดุ ดงั กลา่ ว

8.4.3 ตวั อยา่ งผลลัพธก์ ารใช้เส้น Path วาดรูปต่างๆ การวาดท่ีมีความสวยงามเกิดจากการวาดดว้ ยเสน้
Path ท่ีมีการดดั เสน้ ในลกั ษณะตา่ งๆ ตามผใู้ ชก้ าหนดในตาแหนง่ และทิศทางเพ่ือใหเ้ กิดภาพท่ีมีความ

8.5 การใช้สี

การเลือกลกั ษณะการใชส้ ีจากพาเลต Appearance หรอื การใชส้ ีจากพาเลต Swatches ขนึ้ อยกู่ บั ความตอ้ งการ
ของผใู้ ช้ ซ่งึ มีการเลือกหลายรูปแบบใหเ้ หมาะสมกบั Object นนั้ ดงั นี้

8.5.1 การเลือกลักษณะการใช้สจี ากพาเลต Appearance คอื การเตมิ สีภาพสามารถเตมิ เฉพาะ Stroke
หรือ Fill โดยคลิกเมนู Window  Appearance เพ่ือแสดงพาเลต Appearanceรายละเอียดดงั นี้

เลือกใส่สีเส้น

เลือกใส่สีพ้นื

8.5.2 การใช้สจี ากพาเลต Swatches การเลือกวตั ถทุ ่ีตอ้ งการใสส่ ีก่อนแลว้ คลิกสี ท่ีตอ้ งการ
(สีเหลือง)สงั เกตเห็นวา่ วตั ถเุ ปล่ียนเป็นสีท่ีเลือก(กาหนดสีพืน้ กาหนดสีเสน้

8.5.3 กาหนดสพี ืน้ และเส้นก่อนการวาด โดยพาเลต Color คอื กาหนดคา่ สีเร่มิ ตน้ สีพืน้ เป็นสีขาวและ
เสน้ เป็นสีดา โดย Object ท่ีวาดขนึ้ ใชส้ ีพืน้ และสีเสน้ ดงั กลา่ ว แตห่ ากตอ้ งการให้ Object เป็นสีท่ีตอ้ งการตอ้ งกาหนดสี
ก่อนการวาด

8.5.4 การเตมิ สีพนื้ และสีเส้นดว้ ย Color Picker คือ การเตมิ สีพืน้ และเสน้ โดยเลือก Object ก่อนแลว้

คลิกเลือก สีพืน้ หรือสีเสน้ ขนั้ ตอนดงั นี้

1. เลือก Object ดบั เบลิ คลิกสีพืน้ (จะปรากฏ Panel Color)

2. คลิกบนแถบสีเพ่ือกาหนดคา่ สีขององคป์ ระกอบแรกหรือคลิกลากเล่ือนแถบสี

3. คลิกบนกรอบส่ีเหล่ียมใหญ่เพ่ือเลือกสีท่ีตอ้ งการ คลิกป่มุ OK

2

85

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

1. เลือกเสน้ หรอื ภาพท่ีตอ้ งการ
2. เลือกพาเลต Stroke แลว้ คลกิ Stroke กาหนดคา่ Option

พาเลต Stroke มี Option ในการปรบั แตง่ รูปแบบเสน้ ลกั ษณะตา่ งๆ ดงั นี้
Weight คือ ขนาดของเสน้ ซ่งึ มีหนว่ ยเป็น Point (pt.) โดย 1 pt. เทา่ กบั 1/72 นวิ้
Cap รูปแบบของปลายเสน้ สาหรบั รูปทรงปลายเปิดหรือเสน้ ประ มี 3 แบบ คือ
ปลายเสน้ ตดั พอดีกบั เสน้ Path
ปลายเสน้ โคง้ มนรอบเสน้ Path
ปลายเสน้ ตดั ย่ืนยาวรอบเสน้ Path

8.6 การวาด1 เส้นดว้ ยกลุ่มเครือ่ งมือวาดเส้น Line

กลมุ่ เคร่อื งมือวาดเสน้ แบบเสน้ สาเรจ็ รูป ซ่งึ การวาดนนั้ ทาได้ 2 วธิ ี คือ วาดโดยการคลิกลาก และวาดโดยการ
กาหนดคา่ Option

8.6.1 วาดเส้นตรงดว้ ยเครื่องมอื Line Segment คือ การวาดลกั ษณะของเสน้ ในรูปแบบเสน้ ตรง
ขนั้ ตอนดงั นี้

1. คลกิ เคร่อื งมือ
2. คลกิ ลากบนพืน้ ท่ีการทางานตามตาแหนง่ ขนาดและทิศทางท่ีตอ้ งการ

2.1 กดคยี ์ Shift คา้ งไวข้ ณะวาดจะทาใหจ้ ดุ เร่มิ ตน้ ท่ีคลกิ ถกู ยดึ ออกเป็นเสน้ ตรง
2.2 กดคีย์ Alt คา้ งไวข้ ณะวาดทาใหจ้ ดุ เร่มิ ตน้ ท่ีคลิกถกู ยดึ เป็นจดุ ก่งึ กลางและ
ผลลพั ธข์ องเสน้ ยาวทงั้ 2 ดา้ นเทา่ ๆ กนั

2.3 กดคีย์ ˜ คา้ งไวข้ ณะวาดจะเป็นการวาดเสน้ ใหมเ่ พ่มิ ขนึ้ เร่อื ยๆ โดยวนรอบ

จดุ ศนู ยก์ ลาง

8.6.2 การวาดเส้นโค้งดว้ ยเครอ่ื งมอื Arc คอื เคร่อื งมือการวาดเสน้ ลกั ษณะโคง้ ดงั นี้
1. คลิกเคร่ืองมือ
2. คลิกเมาสล์ ากบนพืน้ ท่ีการทางาน ตามตาแหนง่ ขนาดและทิศทางท่ีตอ้ งการ
1.1 กดคยี ์ C ขณะลากเสน้ จะเป็นการสลบั เสน้ ระหวา่ งการวาดเสน้ แบบปลายปิด

และปลายเปิด
1.2 กดคยี ์ F ขณะกาลงั วาดเสน้ จะเป็นการสลบั พลิกกลบั แนวโคง้ ของเสน้

86

2. กดคีย์  หรอื  ขณะกาลงั วาดเสน้ จะเป็นการเพ่มิ หรือลดความโคง้ ของเสน้
8.6.3 การใช้เคร่อื งมือ Spiral การวาดเสน้ จะเป็นการเพ่มิ หรอื ลดจานวนโคง้ เสน้ ดงั นี้

1. คลิกเคร่อื งมือ คลิกเมาสล์ ากบนพืน้ ท่ีตามตาแหนง่ ขนาดและทิศทางท่ีตอ้ งการ
2. กดคีย์  หรือ  ขณะวาดเสน้ จะเป็นการเพ่มิ หรือลดจานวนโคง้ ของเสน้
โดยกาหนดคา่ Segments หรือกาหนดคา่ ตา่ งๆ เคร่อื งมือวาดแลว้ คลิกบนอารต์ บอรด์

8.6.4 การใช้เครือ่ งมือ Rectangular Grid คอื การวาดเสน้ กรดิ (Grid) ขนั้ ตอนดงั นี้
1. คลิกเคร่อื งมือ แลว้ คลิกเมาสซ์ า้ ย 1 ครงั้ บนพืน้ ท่ีการทางานจะปรากฏ

หนา้ ตา่ ง Rectangular Grid Tool Option ดงั ภาพ

กาหนดกวา้ ง
กาหนดความสูง

กาหนดจานวนเส้นแนวต้งั
กาหนดระยะห่างแตล่ ะแถว

กาหนดจานวนเส้นแนวนอน
กาหนดระยะห่างแตล่ ะแถว

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

8.6.5 การใช้เครอื่ งมอื Polar Grid คอื การวาดเสน้ รศั มี ขนั้ ตอนดงั นี้
1. คลิกเคร่อื งมือ แลว้ คลิกเมาส์ 1 ครงั้ บนพืน้ ท่ีการทางานจะปรากฏหนา้ ตา่ ง

Polar Grid Tool Options เพ่ือกาหนดคา่ คลิกลากบนพืน้ ท่ีการทางานตามตาแหนง่ ขนาดและทิศทางท่ีตอ้ งการ
2. หรือคลิกเมาสค์ า้ งแลว้ ลากตามขนาด ดงั ภาพ

87

8.6.6 การใช้เครอ่ื งมือ Symbol Sprayer คอื เคร่ืองมือสรา้ งสญั ลกั ษณพ์ เิ ศษตา่ งๆ ท่ีโปรแกรมกาหนด
ขนั้ ตอนดงั นี้

1. คลกิ เคร่อื งมือ แลว้ คลิกเลือกสญั ลกั ษณท์ ่ีตอ้ งการจากพาเลต Symbol
2. คลิกเลือก (Symbols ) ท่ีตอ้ งการเลือก
3. คลิกเมาสด์ งึ ภาพจาก Symbol วางบนพืน้ ท่ีการทางาน
การย่อหรือขยายสญั ลกั ษณน์ นั้ คลิกเคร่ืองมือ แลว้ คลกิ ท่ีสญั ลกั ษณท์ ่ีตอ้ งการเพ่ือยอ่ หรือขยายตามความ
เหมาะสม
กรณีตอ้ งการสญั ลกั ษณพ์ เิ ศษจากพาเลตอ่ืนๆ โดยคลิก บนพาเลต Symbol เลือกคาส่งั
Open Symbol Library แลว้ เลือกเปิดพาเลตใหมใ่ ดๆ

8.7 การซ่อนขอบเขตของภาพ

การซอ่ นขอบเขตของภาพในสว่ นท่ีไมต่ อ้ งการ หรือแสดงภาพเฉพาะสว่ นท่ีตอ้ งการเลือกไวใ้ หป้ รากฏในลกั ษณะ
ตา่ งๆ ตามรูปแบบของภาพท่ีอยดู่ า้ นบนของภาพ และสามารถนาภาพดงั กลา่ วแกไ้ ขปรบั แตง่ เชน่ กาหนดเสน้ ขอบของ
ภาพ กาหนดความฟ้งุ เบลอ ขนั้ ตอนดงั นี้

8.7.1 การซ่อนขอบเขตของภาพ คือ การซอ่ นภาพท่ีอยดู่ า้ นลา่ งใหแ้ สดงภาพในขอบเขตภาพเทา่ กบั ภาพท่ีอยู่
ดา้ นบน ขนั้ ตอนดงั นี้

1. เปิดไฟลภ์ าพ
2. วาดรูปทรงภาพดา้ นบน ณ ตาแหนง่ ท่ีตอ้ งการ
8.7.2 การกาหนดเส้นขอบภาพทซ่ี ่อนขอบเขต คอื การกาหนดขนาดเสน้ หรือกาหนดสีเสน้ ใหภ้ าพเพ่ือความ
สวยงามย่ิงขนึ้ (ภาพท่ีไมม่ ีการซอ่ นขอบเขตของภาพไมส่ ามารถกาหนดเสน้ ขอบ)ขนั้ ตอนดงั นี้
1. คลกิ เลือกภาพแลว้ เลือกพาเลต Stroke เพ่ือกาหนดขนาดเสน้
2. เลือกพาเลต Color แลว้ กาหนดสีเสน้ ขอบ

88

5. การวัดผลและประเมินผล

วิธีวัด เครอื่ งมอื เกณฑ์

-การสงั เกต -การสงั เกต -ตอบไดถ้ กู ตอ้ ง
-ผา่ นเกณฑ์ 60%
-การใชข้ อ้ คาถาม -ขอ้ คาถาม
-ตอบไดถ้ กู ตอ้ ง
-การทดสอบ -แบบทดสอบ

-การสงั เกต -การสงั เกต

-การใชข้ อ้ คาถาม -ขอ้ คาถาม

89

. บันทกึ หลังการสอน หนว่ ยท่ี.............. ภาคเรียนท่ี.............. ปีการศกึ ษา..............
1) ผลการสอน

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

2) ปัญหา/อุปสรรค

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

3) ข้อเสนอแนะและแนวทางแก้ไข

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

ลงช่ือ
(นายมนตธ์ ร สาระบรู ณ)์

ตาแหนง่ ครูจา้ งสอนประจารายเดือน

7. ข้อเสนอแนะของหัวหน้าสถานศึกษาหรอื ผู้ทไ่ี ด้รับมอบหมาย (ตรวจ/นิเทศ/เสนอแนะ/รับรอง)

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

ลงช่ือ
(นางสาวจามมจั จลุ ี มีศลิ ป์ )

ตาแหนง่ รองผอู้ านวยการฝ่ายวิชาการ

88

แผนการจัดการเรยี นรู้ หน่วยที่ 9
สอนสัปดาหท์ ่ี 17-18
ชือ่ วิชา โปรแกรมกราฟิก สอนคร้ังที่ 17-18
ช่อื หน่วย การสรา้ งขอ้ ความ การปรบั รูปทรงภาพ และการใชพ้ า
เลต Pathfinder จานวนช่ัวโมง 8
ชอื่ เรอื่ ง การสรา้ งขอ้ ความ การปรบั รูปทรงภาพ และการใชพ้ าเลต Pathfinder

1. สาระสาคัญ
การส่ือความหมายของภาพใหช้ ดั เจน คือ การสรา้ งขอ้ ความแทรกท่ีสวยงามนา่ สนใจและมีความ

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

1. สรา้ งขอ้ ความกลมุ่ เคร่อื งมือกลมุ่ Type Tool ได้
2. สรา้ งขอ้ ความหลายบรรทดั ได้
3. เลือกและการปรบั แตง่ รูปแบบขอ้ ความได้
4. ปรบั แตง่ ดดั แปลง จดั รูปทรงภาพได้
5. สรา้ งภาพใหมโ่ ดยพาเลต Pathfinder ได้
6. มีความรบั ผดิ ชอบตอ่ งานท่ีไดร้ บั มอบหมาย

89

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

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

9.1 การสร้างข้อความดว้ ยเครอื่ งมอื กลุ่ม Type Tool

การนาตวั อกั ษรหรือขอ้ ความประกอบกบั ภาพเพ่ือส่ือความหมาย หรือแสดงรายละเอียดตา่ งๆ การนาตวั อกั ษร

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

แตกตา่ งกนั ดงั นี้

9.1.1 Point Type คอื ขอ้ ความแบบงา่ ยๆ เหมาะสาหรบั เนือ้ หาท่ีมีความยาวไมม่ ากนกั เชน่ ไมก่ ่ีตวั อกั ษร หรือ

ไมก่ ่ีบรรทดั และมีคณุ สมบตั พิ ืน้ ฐานเหมือน Object ท่ีเป็นภาพวาดท่วั ไป คือ สามารถใช้ Bounding box เพ่ือย่อ/ขยาย

ขนาด หรือหมนุ รูปทรงตวั อกั ษร

9.1.2 Area Type คือ ขอ้ ความซ่งึ เหมาะสาหรบั เนือ้ หาท่ีมีความยาวมากๆ เชน่ หลายบรรทดั หรือหลายหนา้

โดยการสรา้ งขอ้ ความบรรจไุ วภ้ ายในกรอบรูปทรงใดๆ โดยสามารถเช่ือมโยงเนือ้ หาจากกรอบหนง่ึ ไปยงั อีกกรอบหนง่ึ

และเม่ือมีการปรบั รูปทรงของกรอบหน่งึ ไปยงั อีกกรอบหน่งึ จะสง่ ผลใหร้ ูปทรงตวั อกั ษรเปล่ียนแปลง

9.1.3 Type on a Path คือ ขอ้ ความท่ีเหมาะสาหรบั การประดบั ตกแตง่ โดยตวั อกั ษรจะเรียงตวั ไปตามแนวของ

เสน้ Path

9.1.1 การใชเ้ คร่ืองมือ Type Tool และเคร่อื งมือ Vertical Type Tool สรา้ งขอ้ ความ คือ การ

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

คณุ สมบตั พิ ืน้ ฐานเหมือนออบเจค็ (Object) ท่ีเป็นภาพวาดท่วั ไป คอื ใช้ Bounding box เพ่ือการยอ่ /ขยายขนาด

ขนั้ ตอนดงั นี้

1. คลกิ ท่ีเคร่ืองมือ หรอื แลว้ คลิกเมาสบ์ รเิ วณอารต์ บอรด์ ท่ีตอ้ งการ

พมิ พแ์ ลว้ พมิ พข์ อ้ ความ “กราฟิก”

2. พิมพข์ อ้ ความ

3. คลกิ ท่ีเมนู Window  Type  Character แลว้ แสดงพาเลต Character เพ่ือจดั รูปแบบ
ขอ้ ความตามความ ปรบั เปล่ียนรูปแบบขอ้ ความ
9.1.2 การใชเ้ คร่ืองมือ Area Type Tool และเคร่ืองมือ Vertical Area Type Tool คือ การสรา้ ง
ขอ้ ความอยภู่ ายขอบเขตรูปทรงหรือเสน้ Path ท่ีสรา้ งไวแ้ ลว้ ผลลพั ธท์ ่ีเหมือนกบั การสรา้ งขอ้ ความในกรอบส่ีเหล่ียมดว้ ย
เคร่อื งมือ Type Tool แตต่ า่ งกนั คือ ตอ้ งวาดเสน้ Path กอ่ นเป็นรูปทรงใดๆ เชน่ รูปทรงส่ีเหล่ียม รูปทรงวงกลม และ
รูปทรงอสิ ระตา่ งๆ ขนั้ ตอนดงั นี้

90

1. สรา้ งวตั ถทุ ่ีตอ้ งการพิมพข์ อ้ ความ

2. คลิกเคร่อื งมือ หรือ และกาหนดรูปแบบขอ้ ความบน Option Bar

3. นาเมาสส์ ญั ลกั ษณ์ คลิกเมาสภ์ ายในวตั ถทุ ่ีตอ้ งการพิมพข์ อ้ ความ และพมิ พ์

ขอ้ ความท่ีตอ้ งการ ขณะพิมพช์ นขอบดา้ นขวาจะขนึ้ บรรทดั ใหมท่ นั ที ขนึ้ ยอ่ หนา้ ใหมก่ ดป่มุ คีย์ Enter

4.คลิกเคร่อื งมือ หรือ ESC เพ่ือจบการพิมพ์

9.1.2.1 การแทรกหรอื การแกไ้ ขขอ้ ความ โดยใชเ้ คร่ืองมือ Type Tool แบบใดแบบหน่งึ นาเมาสค์ ลิก

บนขอ้ ความแลว้ พิมพแ์ กไ้ ขขอ้ ความ

9.1.2.2 การปรบั แตง่ กรอบขอ้ ความ คือ การปรบั แตง่ รูปทรงของกรอบขอ้ ความหลงั จากการพมิ พแ์ ลว้

โดยใชเ้ คร่ืองมือ Direct Selection คลกิ Anchor Point แลว้ คลิกลากปรบั เสน้ หรือใชเ้ คร่อื งมือกลมุ่ Pen Tool

ปรบั แตง่ ขนั้ ตอน

9.1.3 การใชเ้ คร่อื งมือ Type on a Path และ เคร่อื งมือ Vertical Type on a path คือ การ

สรา้ งขอ้ ความตามแนวบนเสน้ Path โดยยดึ เสน้ Path เป็นเสน้ บรรทดั เชน่ การพมิ พอ์ กั ษรหมนุ รอบกรอบภาพตา่ งๆ

หรอื พิมพบ์ นเสน้ Path รูปทรงตา่ งๆ ขนั้ ตอนดงั นี้

1. สรา้ งเสน้ Path ท่ีตอ้ งการพิมพข์ อ้ ความดว้ ยเคร่ืองมือ Pen Tool

2. คลกิ เคร่อื งมือ หรอื แลว้ คลิกเมาสบ์ นเสน้ Path

3. กาหนดคา่ รูปแบบขอ้ ความบน Option Bar แลว้ พิมพข์ อ้ ความท่ีตอ้ งการ

4. คลิกเคร่อื งมือ หรือ ESC เพ่ือจบการพมิ พ์ ขอ้ ความท่ีพมิ พจ์ ะเรม่ิ แสดง

ขอ้ ความจากตาแหนง่ ท่ีคลกิ เมาสไ์ ปยงั จดุ ปลายของเสน้ ถา้ เสน้ Path เป็นรูปทรงปลายปิดขอ้ ความจะ

วนตามเขม็ นาฬกิ ากรณีขอ้ ความยาวกวา่ เสน้ Path จะทาการแสดงขอ้ ความสว่ นท่ีหายไปดว้ ย

สญั ลกั ษณร์ ูป + ขนึ้ มา

9.1.3.1 การปรบั แตง่ ขอ้ ความบนเสน้ Path คือ การปรบั แตง่ เสน้ Path ดว้ ยการปรบั

ขนาด การหมนุ การบดิ เอียง และการพลิกกลบั ตาแหนง่ ขอ้ ความ โดยการปรบั สว่ นประกอบตา่ งๆ ของขอ้ ความบนเสน้

Path การเล่ือนตาแหนง่ ขอ้ ความ คอื หากขอ้ ความบนเสน้ Path นนั้ ไมอ่ ยใู่ น

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

ใชเ้ คร่อื งมือ Selection ขนั้ ตอนดงั นี้

1. คลกิ เลือกเคร่ืองมือ

2. คลิกเลือกขอ้ ความ

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

9.2 การสร้างข้อความแบบหลายบรรทดั และการจัดการข้อความ

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

9.2.1 การสรา้ งขอ้ ความแบบหลายบรรทดั คือ การสรา้ งขอ้ ความและแกไ้ ขขอ้ ความภายใน

91

รูปทรง ขนั้ ตอนดงั นี้
1. คลิกเคร่อื งมือ แลว้ คลกิ เมาสค์ า้ งไว้ ณ จดุ เร่มิ ตน้ ขอ้ ความแลว้ ลากเมาสไ์ ป

ยงั ตาแหนง่ สนิ้ สดุ การพิมพข์ อ้ ความ
2. กาหนดคา่ Option ตา่ งๆ ของขอ้ ความ
3. คลิกตาแหนง่ ท่ีตอ้ งการพมิ พข์ อ้ ความ โดยพิมพไ์ ปเร่อื ยๆ เม่ือถงึ ขอบสิน้ สดุ จะตดั ขนึ้ บรรทดั ใหมใ่ ห้

อตั โนมตั ิการกด Enter คือ การขนึ้ บรรทดั ใหม่
4. คลิกเคร่ืองมือ หรือกดคีย์ ESC เพ่ือจบการพมิ พ์

การสรา้ งขอ้ ความแนวตงั้ คือ เปล่ียนจากการคลิกเคร่ืองมือ เป็น แทนการพิมพ์

ภาษาไทยอาจพบสญั ลกั ษณ์ - อยทู่ า้ ยบรรทดั (บนเสน้ กรอบภาพหรอื เลยกรอบภาพออกไป) แสดงวา่ บรรทดั นนั้

ไมม่ ีการเคาะวรรคโปรแกรมจงึ ตดั ขอ้ ความขนึ้ บรรทดั ใหมใ่ หซ้ ่งึ อาจมีความผดิ พลาดในการตดั คา เชน่ คาวา่ “เฉพาะ

อาจเป็นตวั อกั ษร “เฉ” ทา้ ยบรรทดั ดา้ นบนตวั อกั ษร “พาะ” หนา้ บรรทดั ถดั ไปซ่งึ ไมถ่ กู ตอ้ งการแกไ้ ขทาได้ โดยคลกิ วาง

Cursor ตรงจดุ ท่ีตอ้ งการตดั คาแลว้ กดคยี ์ Shift + Enter

หากขอ้ ความยาวเกินกรอบส่ีเหล่ียมท่ีสรา้ งไวจ้ ะปรากฏสญั ลกั ษณ์ + อยดู่ า้ นลา่ งขวาของกรอบและ

ขอ้ ความบางสว่ นตกหายไปการแกไ้ ข คือ คลิกเลือกเคร่ืองมือ แลว้ คลกิ ลากขยายกรอบใหม้ ีขนาดเพ่มิ ขนึ้ เพ่ือ

แสดงขอ้ ความทงั้ หมดหรือเช่ือมโยงขอ้ ความท่ีเหลือไปแสดงบนกรอบอ่ืน

9.2.2 การจดั การขอ้ ความ คอื การปรบั เปล่ียนรูปแบบอกั ษรลกั ษณะตา่ งๆ ขนั้ ตอนดงั นี้

1. คลิกเลือกขอ้ ความท่ีตอ้ งการปรบั เปล่ียน

2. คลกิ เมนู Window  Type Paragraph แสดงพาเลต Paragraph

9.3 การเลือกและการปรับแต่งรูปแบบข้อความ

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

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

1. คลกิ เคร่ืองมือ
2. คลิกลากคลมุ ขอ้ ความ

9.3.2 การเลือกขอ้ ความทงั้ หมด คือ การเลือกโดยใชเ้ คร่ืองมือ เพ่ือเลือกขอ้ ความดงั กลา่ วจะมีผลกบั
ขอ้ ความทงั้ หมดพรอ้ มๆ กนั ขนั้ ตอนดงั นี้

1. คลิกเคร่ืองมือ

92

2. คลิกเลือกขอ้ ความแลว้ กาหนดสีพืน้
9.3.3 กาหนดสีพืน้ และสีเสน้ ขอบตวั อกั ษร คอื การกาหนดสีพืน้ และสีเสน้ ขอบใหก้ บั อักษรวธิ ีการเชน่ เดยี วกนั
กบั Object ขนั้ ตอนดงั นี้

1. คลกิ เลือกขอ้ ความ
2. เลือกพาเลต Color แลว้ กาหนดสีพืน้ และสีเสน้ ขอบ
3. เลือกพาเลตสะโตรกแลว้ กาหนดขนาดและรูปแบบเสน้

9.3.4 ตกแตง่ ขอ้ ความดว้ ยคาส่งั กราฟิกสไตล์ (Graphic Styles) คือ การใส่กราฟิกสไตลใ์ ห้ Object ท่วั ไป
โดยใชพ้ าเลตกราฟิกสไตลซ์ ง่ึ มีรูปแบบ Style ใน Bilbray ของสไตลท์ ่ีเหมาะสมสาหรบั ใชก้ บั ขอ้ ความโดยเฉพาะ เชน่ พา
เลต Type Effects วธิ ีการเรียกใชค้ าส่งั คือ Window  Graphic Style Libraries  Type Effects ขนั้ ตอนดงั นี้

1. คลิกเมนู Window  Graphic Style Libraries  Type Effects
2. คลิกเลือกขอ้ ความ
3. เลือกพาเลต Type Effects แลว้ เลือก Style

9.4 การปรับแตง่ ดัดแปลง จดั รูปทรงภาพ

การวาดภาพหรือวตั ถใุ ดๆ โดยใชเ้ คร่อื งมือวาดรูปทรงต่างๆ เชน่ เคร่อื งมือ Pen Tool เคร่อื งมือวาดรูปทรง

เรขาคณิต และรูปทรงสาเรจ็ รูปจากพาเลต Symbol สามารถดดั แปลงเสน้ และปรบั รูปทรงเพ่ือใหไ้ ดภ้ าพตา่ งๆ ได้

หลากหลายมากขนึ้ เชน่ การปรบั ย่อ/การขยาย การหมนุ และการพลิกกลบั และการจดั ลาดบั ภาพ ดงั นี้

9.4.1 การย่อ/ขยาย โดยคลิกท่ีเคร่อื งมือ Selection แลว้ คลิกวตั ถทุ ่ีตอ้ งการ ซ่งึ แตล่ ะมมุ สามารถปรบั

รูปทรง การยอ่ /ขยาย โดยคลิกเมาสซ์ า้ ยคา้ งไว้ ณ มมุ ใดๆ ของวตั ถุ แลว้ คลกิ ลากดงึ ยอ่ หรือขยาย การหมนุ วตั ถุ โดย

คลกิ ท่ีเคร่อื งมือ Rotate แลว้ คลิกเมาสซ์ า้ ยคา้ งไวณ้ บรเิ วณภาพเพ่ือปรบั หมนุ วตั ถตุ ามตอ้ งการ

9.4.3 การจดั ลาดบั การวางภาพ คือ การจดั วางภาพท่ีมีการวางซอ้ นกนั หลายๆ ภาพ เพ่ือใหไ้ ดอ้ งคป์ ระกอบ
ภาพท่ีเหมาะสม ดงั นี้

9.4.3.1 Bring to Front คอื การนาภาพไวข้ า้ งหนา้ สดุ โดยคลกิ ภาพท่ีตอ้ งการ
(สีเขียว) แลว้ คลิกขวาเลือก  Arrange  Bring to Front

9.4.3.2 Bring Forward คอื การนาภาพไวข้ า้ งหนา้ ถดั มาอีก 1 ขนั้ โดยคลิกภาพท่ี
ตอ้ งการ (สีชมพ)ู แลว้ คลกิ ขวาเลือก  Arrange  Bring Forward Send Backward คือ การยา้ ยภาพไวข้ า้ ง
หลงั ถดั ไปอีก 1 ขนั้ โดยคลิกภาพท่ีตอ้ งการ (สีเขียว) แลว้ คลกิ ขวาเลือก  Arrange  Send

9.4.3.4 Send to back คือ การยา้ ยภาพไวข้ า้ งหลงั สดุ โดยคลิกภาพท่ีตอ้ งการ
(สีเขียว) แลว้ คลิกขวาเลือก  Arrange  Send to back