หน่วย 6 การวาดภาพลายเส้นแบบ vector

หนว ยการเรย� นรทู ่ี 6

6.1 กลุม เคร่อ� งมือวาดภาพแบบ Vector
6.2 สว นประกอบของเสน Path
6.3 การวาดภาพดว ยเคร่อ� งมอื Pen Tool
6.4 การเตมิ สีใหก บั เสน Path
6.5 การใสส ีใหกับขอบเสน Path
6.6 การสรา งขอบเขตความฟงุ กระจายของเสนขอบ Path
6.7 การลบเสน Path
6.8 การสรางรปู ทรงอิสระ
6.9 การสรางรูปทรงเรขาคณติ และรูปทรงสำเรจ็ รูป

สาขาวชิ าคอมพวิ เตอรธ รุ กจิ วทิ ยาลยั อาชวี ศกึ ษาปต ตานี
สำนกั งานคณะกรรมการการอาชวี ศกึ ษา กระทรวงศกึ ษาธกิ าร

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 191

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

6.1 กลมุ่ เครอ่ื งมอื วาดภาพแบบ Vector

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

ตารางที่ 6.1 กลุ่มเคร่ืองมือวาดภาพแบบ Vector

เคร่อื งมือ คุณลกั ษณะ

Pen Tool
ปากกาใช้สรา้ งเส้น Path ด้วยวิธีกำหนดจุด (Anchor)

Freeform Pen Tool
สรา้ งเสน้ Path แบบอิสระดว้ ยการเคลอื่ นเมาส์

Add Anchor Point Tool
เพม่ิ จุด anchor ที่เสน้ Path

Delete Anchor Point Tool
ลบเพ่ิมจดุ anchor ท่เี ส้น Path

Convert Point Tools
ใช้ปรับแตง่ เสน้ ทำงานกับจดุ

หน่วยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหัสวชิ า 20204-2007 192

ตารางที่ 6.1 (ต่อ) คณุ ลกั ษณะ
เครอื่ งมือ
Rectangle Tool
ใช้วาดรูปสีเ่ หล่ยี ม
Rounded Rectangle Tool
ใช้วาดรปู ส่เี หลีย่ มมุมโคง้
Ellipse Tool
ใชว้ าดรปู วงกลม หรอื วงรี
Polygon Tool
ใช้วาดรูปหลายเหลย่ี ม

Line Tool
ใช้วาดเส้นตรงหรือลกู ศร
Custom Shape Tool
ใช้วาดรปู ทรงสำเร็จรูปต่าง ๆ
Path Selection Tool
ใช้เลือกเส้น Path ทั้งเส้น เพื่อย้ายตำแหน่ง ปรับขนาด
หมนุ บิดรปู ทรง หรือเปล่ยี นคณุ สมบัตติ า่ ง ๆ

Direct Selection Tool
ใช้เลือกจุด anchor หรือท่อนย่อยของเส้น Path เพื่อย้าย
หรือดดั แปลงรูปทรง

6.2 สว่ นประกอบของเสน้ Path

ส่วนประกอบของเส้นพาธ ในการสร้างภาพแบบ Vector มีเส้น Path ซึ่งมี 2 ประเภท ได้แก่
1) เส้น Path แบบเปิด คือ เสน้ ทห่ี ัวท้ายไม่ชนกัน เชน่ เส้นตรง เสน้ โค้ง 2) เสน้ Path แบบปิด คอื เส้น
ที่หวั ทา้ ยชนกัน

ภาพที่ 6.1 สว่ นประกอบเส้น Path

หน่วยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วชิ า 20204-2007 193

ตารางที่ 6.2 สว่ นประกอบเส้น Path

เคร่อื งมอื คณุ ลกั ษณะ

Path เส้นท่ีเกิดจากการเช่อื มต่อระหวา่ งจดุ

Anchor จุดบนเส้น Path

Handle แขนปรบั ความโค้ง

ภาพที่ 6.2 ประเภทเส้น Path

กรณีต้องการใหเ้ สน้ ที่วาดบรรจบกันให้ทำการกดปุ่ม Ctrl ค้างไว้เป็นจบเส้นทที่ ำ และเร่มิ ตน้
เส้นใหม่ สงั เกต Pen Tool จะมรี ปู ดอกจนั ทร์เล็ก ๆ

6.3 การวาดภาพดว้ ยเคร่ืองมือ Pen Tool

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

1) แถบตวั เลอื ก Shape/Path มีรายละเอียดทีเ่ หมือนกันดังนี้

ภาพที่ 6.3 การกำหนดลกั ษณะแถบเคร่ืองมือ Shape/Path

แถบตัวเลือกส่วน Shape/Path ที่ใช้ในการกำหนดเส้น Path มดี งั ตอ่ ไปน้ี

หมายเลข 1 Fill หมายถงึ กลมุ่ สีพืน้

หมายเลข 2 Stroke หมายถงึ กล่มุ สสี ำหรบั เส้นขอบ

หมายเลข 3 Size หมายถงึ ขนาดของเส้น

หมายเลข 4 Stroke Option หมายถึง ตัวเลือกลกั ษณะเสน้

หนว่ ยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรยี นการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 194
2) แถบตวั เลอื ก Pixels มีรายละเอียดที่เหมอื นกนั ดังน้ี

ภาพที่ 6.4 การกำหนดลักษณะแถบเครื่องมือแบบ Pixels

แถบตวั เลือก Pixels ท่ใี ชใ้ นการกำหนดเสน้ Path มดี งั ต่อไปนี้

หมายเลข 1 Mode หมายถงึ โหมดในการปรบั สี

หมายเลข 2 Opacity หมายถงึ การกำหนดความจางและความเขม้ ของสี

หมายเลข 3 Anti-alias หมายถงึ การกำหนดให้ขอบของพ้นื ทท่ี ีเ่ ลือกมีความ

เรยี บไม่ขรุขระ

6.3.1 การใช้เครอื่ งมือ Pen Tool
ข้ันตอนการใช้เคร่ืองมี Pen มีดงั นี้

1) คลกิ เครื่องมือ Pen Tool

ภาพที่ 6.5 การเลือกใช้เครื่องมอื Pen Tool
2) แถบตัวเลือก (Options Bar) คลิกเมาส์เลือกและกำหนดค่าคณุ สมบัตติ ่าง ๆ

ภาพที่ 6.6 การกำหนดลักษณะแถบเครื่องมือ Pen Tool
3) คลิกสร้างจดุ Anchor จดุ แรก แลว้ ปลอ่ ยเมาส์ คลิกจดุ ตอ่ ไปตามต้องการจะเกิด
เส้นตรงเช่ือมตอ่ ระหวา่ งจดุ เหล่าน้ี คลกิ ท่จี ดุ เริ่มต้นอีกคร้ังเมือ่ ต้องการปิดเสน้ Path

หนว่ ยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหัสวิชา 20204-2007 195
ตารางท่ี 6.3 ขั้นตอนการวาดภาพด้วยเครอื่ งมือ Pen Tool

1. กำหนดจดุ Anchor จดุ เร่ิมตน้ 2. เลือ่ นเมาสค์ ลิกจุดต่อไป

3. เลื่อนเมาสค์ ลิกจุดต่อไป 4. เลอื่ นเมาสค์ ลกิ จดุ ต่อไป

5. เลอ่ื นเมาส์คลกิ จดุ ต่อไป 6. เลอื่ นเมาส์คลกิ ปลายทางที่เดยี วกัน
จดุ เริม่ ต้น

6.3.2 การใช้เคร่ืองมือ Add Anchor Point Tool
เปน็ เครอ่ื งมอื ที่ใช้ในการเพ่ิมจุดใหก้ ับเสน้ พาธ เพ่ือใช้ในการดัดปรับแต่งเสน้ พาธให้เป็น
รูปทรงตามความต้องการ การเพิ่มจดุ ให้กับเส้นพาธ

ข้ันตอนการใชเ้ ครื่องมือ Add Anchor Point Tool มีดังน้ี

ต่อไ

1) คลกิ เคร่อื งมอื คลิกกำหนดจุดเริม่ ต้นตำแหน่งที 1
2) เลื่อนเมาส์คลิกกำหนดจดุ ที่ 2 ปลอ่ ยเมาส์ จะได้เสน้ ตรง จากนน้ั คลกิ กำหนดจดุ
ไปตามความต้องการจากภาพจะเป็นรูปสามเหลย่ี ม

ภาพที่ 6.7 การใชเ้ ครื่องมือ Add Anchor Point Tool

หน่วยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรยี นการสอน วิชาโปรแกรมกราฟิก รหัสวิชา 20204-2007 196
3) คลิกเลือกเครื่องมือ Add Anchor Point Tool เพอ่ื ทำการเพ่ิมจุดในบริเวณ

ที่ต้องการ โดยการนำเมาส์ไปคลิก 1 ครั้งที่เส้น Path หรือให้เลื่อนเมาส์ไปที่เส้น Path ทีได้สร้างไว้
คลิกขวาเลือกคำส่งั Add Anchor Point การเพ่ิมจดุ สามารถเพ่ิมไดท้ ุกบริเวณทตี อ้ งการบนเสน้ Path

ภาพที่ 6.8 การเพิ่มจุดบนเส้น Path
4) ทำใหม้ ีเสน้ มคี วามโค้ง โดยเล่ือนเมาส์ไปท่จี ุดก่ึงกลาง กดเมาสค์ า้ งจากน้ันทำการ
ดึงลงหรือดึงข้ึนตามต้องการ

ภาพที่ 6.9 การดงึ เส้นให้มีความโค้ง
6.3.3 การใช้เครอ่ื งมือ Delete Add Anchor Point Tool
ในการลบจุดที่ได้สร้างเพิ่มออกไปจากเส้น Path สามารถทำได้โดยใช้เครื่องมือ
Delete Add Anchor Point Tool โดยทำการเลื่อนเมาส์ไปยังตำแหน่งที่ต้องการลบจุด โดยทำการ
คลกิ ตรงบรเิ วณจุดทไี่ มต่ ้องการบนเสน้ Path จุดบนเส้น Path ก็ถูกลบไปซง่ึ ในการลบจดุ บนเสน้ Path
สามารถลบจดุ ไดห้ ลาย ๆ ตำแหนง่ ตามความต้องการ

หนว่ ยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007 197
ขนั้ ตอนการใชเ้ คร่ืองมือ Delete Add Anchor Point Tool มีดงั น้ี
1) คลกิ เลือก Delete Add Anchor Point Tool

ภาพที่ 6.10 การลบจุดโดยใชเ้ ครอื่ งมือ Delete Add Anchor Point Tool
2) คลิก 1 ครัง้ ตรงกับจดุ ทต่ี ้องการลบ จดุ บนเส้น Path หายไป

ภาพท่ี 6.11 ผลลพั ธ์การใช้เคร่ืองมือ Delete Add Anchor Point Tool
6.3.4 การใชเ้ ครอื่ งมือ Convert Point
เครื่องมือ Convert Point เป็นการปรับความโค้งให้กับเส้นโดยทำการคลิกลากที่
Direction Point ตรงปลายเส้นที่ยื่นออกมาจากจุด anchor ซึ่งทิศทางในการลาก Direction Point
จะส่งผลต่อลักษณะการโคง้ ของเสน้

ขน้ั ตอนการใชเ้ ครื่องมือ Convert Point มีดงั น้ี
1) คลกิ เลอื กเครื่องมือ เพื่อสรา้ งเสน้ Path เปน็ เสน้ ตรง

ภาพท่ี 6.12 การลากเสน้ Path โดยเครอื่ งมอื Pen Tool

หน่วยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหสั วิชา 20204-2007 198
2) กำหนดตวั เลือกตา่ ง ๆ บนแถบตวั เลือก

ภาพที่ 6.13 แถบกำหนดลกั ษณะเสน้ Path
3) คลกิ เลอื กเคร่ืองมือ Convert Point นำเมาสไ์ ปยงั ไปจดุ anchor

ภาพที่ 6.14 การเลือกจดุ anchor
4) ตรงจุด anchor (ตามรปู ) กดเมาสค์ ้างลากไปด้านบนเพ่ือทำใหโ้ คง้

ภาพท่ี 6.15 การปรับจดุ anchor ให้โค้ง
5) จดุ anchor อกี ดา้ น (ตามรูป) กดเมาสค์ ้างลากไปดา้ นลา่ ง ปรับให้เหมาะเพ่ือ

ทำใหโ้ ค้ง

ภาพที่ 6.16 การปรับจดุ anchor ใหโ้ ค้งตามความต้องการ
6) คลิกเมาสท์ วี่ ่าง 1 ครั้ง จุดต่าง ๆ จะหายไป
ถ้าลากไปในทิศทางเดียวกันกับจดุ ที่แล้วกจ็ ะได้เสน้ ในลักษณะตัว S
ถ้าลายในทิศทางตรงกนั ข้ามกับจดุ ทแี่ ลว้ กจ็ ะไดเ้ สน้ ในลักษณะตัว Cs

ภาพท่ี 6.17 ผลลพั ธ์การปรับจุด anchor

หนว่ ยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรยี นการสอน วิชาโปรแกรมกราฟิก รหัสวิชา 20204-2007 199

6.4 การเติมสใี หก้ บั เส้น Path

การใส่สใี หก้ ับเส้น Path เม่ือสรา้ งเส้น Path จดุ เร่มิ ต้นและจุดสดุ ทา้ ยบรรจบกนั สามารถใส่สี
โดยใช้คำส่ัง Fill Path

ขัน้ ตอนการเติมสีให้กับเสน้ Path มีดังตอ่ ไปนี้
1) คลิกสร้างเส้น Path ดว้ ย Pen Tool

ภาพท่ี 6.18 การวาดเสน้ Path
2) คลกิ เครื่องมือ Foreground Color เลอื กสี ตามความตอ้ งการ

ภาพท่ี 6.19 การกำหนดค่าแถบ Foreground Color
3) คลิกเลือก Palette Paths (อยู่ใกล้กบั Palette Layer) คลิกขวาเลอื ก Fill Path...
ปรากฏหน้าตา่ ง Fill Path ปรบั แตง่ จากนัน้ คลกิ OK

ภาพท่ี 6.20 การกำหนดค่าแถบ Palette Paths

หนว่ ยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรยี นการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 200

ภาพที่ 6.21 ผลลพั ธก์ ารใส่สี Fill

6.5 การใสส่ ใี ห้กบั ขอบเสน้ Path

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

ขัน้ ตอนการใสส่ ีให้กบั ขอบเส้น Path มีดังต่อไปนี้
1) สรา้ งเส้น Path ด้วย Pen Tool

ภาพที่ 6.22 การสรา้ งเสน้ Path
2) คลกิ เลอื กสี Foreground Color เลอื กสีเสน้ ขอบ

ภาพที่ 6.23 การกำหนดค่าแถบ Foreground Color

หน่วยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรยี นการสอน วชิ าโปรแกรมกราฟิก รหสั วชิ า 20204-2007 201
3) คลิกเลือกหวั แปรง และขนาดของหวั แปรง

ภาพที่ 6.24 การปรบั รูปแบบหัวแปรง Brush Tool
4) คลิก Palette Paths คลกิ ขวาเลอื ก Stroke Path...ปรากฏหน้าตา่ ง
5) คลิกเลือกหวั แปรง จากน้นั คลกิ OK

ภาพท่ี 6.25 การเลือกใช้ Palette Paths

ภาพที่ 6.26 ผลลัพธ์การใส่สีใหก้ บั ขอบเส้น Path

หน่วยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรยี นการสอน วชิ าโปรแกรมกราฟิก รหสั วิชา 20204-2007 202

6.6 การสร้างขอบเขตความฟุ้งกระจายของเส้นขอบ Path

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

ขัน้ ตอนการสรา้ งขอบเขตความฟุ้งกระจายขอบเส้น Path มีดังนี้
1) สรา้ งเสน้ Path ดว้ ย Pen Tool ใส่สีและใส่เส้นขอบให้กบั เส้น Path

ภาพท่ี 6.27 การสรา้ งภาพด้วยเส้น Path
2) คลกิ Palette Paths คลกิ ขวาเลอื ก Make Selection…ปรากฏหนา้ ตา่ ง

ภาพท่ี 6.28 การกำหนดคา่ แถบ Palette Paths
3) กำหนดค่า Feather Radius (ความฟงุ้ กระจาย) จากนั้นกด OK

ภาพที่ 6.29 ผลลัพธ์ความฟงุ้ กระจายของเสน้ ขอบ Path

หน่วยท่ี 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007 203

6.7 การลบเสน้ Path

เมอ่ื สรา้ งเสน้ Path หากไม่ต้องการขอบเสน้ จึงต้องมีการลบเสน้ Path ทไ่ี มต่ อ้ งการได้
ขั้นตอนการลบเสน้ Path มีดังนี้
1) สร้างเส้น Path ด้วย Pen Tool จากนน้ั ใส่สี

ภาพท่ี 6.30 การสร้างภาพด้วยเส้น Path
2) คลิก Palette Paths คลิกขวาเลอื ก Delete Path

ภาพที่ 6.31 การลบเสน้ Path แถบ Palette Paths

6.8 การสร้างรปู ทรงอิสระ

การสร้างรูปทรงอิสระ Freeform Pen Tool สามารถสรา้ งรปู ทรงต่าง ๆ ได้เช่นเดยี วกับการ
ใช้เครื่องมือ Lasso Tool โดยโปรแกรมจะวางจุด anchor ต่าง ๆ ให้โดยอัตโนมัติ นอกจากน้ียัง
ปรับแต่งเส้น Path ไดเ้ ช่นเดยี วกับ Path ที่สรา้ งด้วยเครื่องมอื Pen Tool

6.8.1 เคร่อื งมือ Freeform Pen Tool
เมื่อต้องการสร้างรูปทรงอิสระโดยการใช้เครื่องมือ Freeform Pen Tool สามารถลากเป็น
รูปร่างต่าง ๆ ได้ตามความต้องของผู้วาด โดยลักษณะของเครื่องมือเหมือนใช้ปากกา หรือดินสอ วาด
ภาพบนกระดาษวาดภาพน้ันเอง ความสวยงามจะเกดิ ถา้ มีทกั ษะทางการวาดภาพ

หน่วยท่ี 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหสั วชิ า 20204-2007 204
ข้นั ตอนการใช้เครื่องมือ Freeform Pen Tool มดี งั นี้
1) คลิกเลอื กเคร่ืองมือ Freeform Pen Tool

ภาพท่ี 6.32 การเลือกใช้เครื่องมือ Freeform Pen Tool
2) แถบตัวเลอื ก (Options Bar) คลกิ เมาสเ์ ลือกและกำหนดคา่ คุณสมบัตติ ่าง ๆ

ภาพท่ี 6.33 การกำหนดลกั ษณะแถบเครื่องมือ Freeform Pen Tool
3) คลกิ พน้ื ท่ตี ้องการวาด จากนน้ั ลากเส้นรูปทรงที่ต้องการ เมื่อปล่อยเมาส์ก็จะได้

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

ภาพที่ 6.34 การวาดรปู ทรงอสิ ระ
4) คลิก Palette Paths คลิกขวาเลอื ก Make Selection เลอื ก Fill Path กำหนดสี

ภาพท่ี 6.35 การใส่สี (Fill Path)

หน่วยท่ี 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรยี นการสอน วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007 205
5) คลกิ Palette Paths คลกิ ขวาเลือก Make Selection เลือก Stroke Path เพือ่

เลือกเส้นขอบ

ภาพที่ 6.36 การใส่สเี ส้นขอบ (Stroke Path)
7) กำหนดค่า Feather Radius (ความฟุ้งกระจาย)

ภาพที่ 6.37 การกำหนดค่าแถบ Make Selection สรา้ งความฟุ้งกระจายขอบเสน้

6.9 การสรา้ งรูปทรงเรขาคณิตและรปู ทรงสำเรจ็ รปู

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

ตารางท่ี 6.4 เครื่องมือสร้างรูปทรงเรขาคณติ และรูปทรงสำเรจ็ รูป

เคร่อื งมือ คณุ ลักษณะ

Rectangle Tool ใชว้ าดรปู สเี่ หลย่ี ม

Rounded Rectangle Tool ใช้วาดรูปส่ีเหลย่ี มมมุ โค้ง

Ellipse Tool ใช้วาดรูปวงกลม หรือวงรี

Polygon Tool ใชว้ าดรปู หลายเหลย่ี ม

Line Tool ใชว้ าดเสน้ ตรงหรือลูกศร

Custom Shape Tool ใชว้ าดรปู ทรงสำเร็จรปู ต่าง ๆ

หน่วยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 206
6.9.1 เครือ่ งมือ Rectangle Tool
การวาดรูปทรงสี่เหลี่ยม โดยเลือกใช้เครื่องมือ Rectangle Tool ในการวาดรูปทรงสี่เหลี่ยม
จะมีแถบตวั เลอื กใหท้ ำการกำหนดคา่ ต่าง ๆ สามารถทำได้ดังนี้

ภาพที่ 6.38 การเลอื กใช้เคร่ืองมือ Rectangle Tool
แถบตวั เลอื กเคร่ืองมือ Rectangle Tool มีรายละเอยี ดดงั ต่อไปน้ี
1) Unconstrained สร้างรูปทรงส่ีเหลีย่ มขนาดอิสระตามการคลกิ ลากเมาส์
2) Square ใช้สรา้ งรปู ทรงสี่เหลย่ี มจัตรุ สั
3) Fixed Size ใชส้ รา้ งรูปทรงสี่เหลย่ี มท่กี ำหนดความกวา้ ง (W) และความ สงู (H)
4) Proportional ใช้สร้างรปู สี่เหลี่ยมทม่ี สี ดั สว่ นแน่นอน โดยกำหนดสัดส่วนความกว้าง (W)
ต่อความสงู
5) From Center รูปสี่เหล่ียมทสี่ รา้ งจะขยายขนาดจากจดุ ศนู ยก์ ลางทค่ี ลิกลากเมาส์
6) Snap to Pixels ให้ขอบของรปู ทรงส่ีเหลีย่ มอยู่ตรงกับแนว Pixel ของภาพพอดี
ขน้ั ตอนการใช้เครื่องมือ Rectangle Tool มีดงั น้ี
1) คลิกเครื่องมือ Rectangle Tool

ภาพที่ 6.39 การเลือกใช้เคร่ืองมือ Rectangle Tool
2) แถบตัวเลือก (Options Bar) คลิกเมาสเ์ ลือกและกำหนดคา่ คุณสมบัตติ า่ ง ๆ ดตวั เลือก
บนแถบตัวเลอื ก

ภาพท่ี 6.40 การกำหนดลกั ษณะแถบเคร่ืองมือ Rectangle Tool

หนว่ ยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วชิ า 20204-2007 207

3) คลกิ วาดรูปสเ่ี หลย่ี มใหไ้ ด้ขนาด และรปู ทรงตามต้องการ

ภาพที่ 6.41 ผลลัพธ์การใช้เครื่องมือ Rectangle Tool
4) กรณตี ้องการเปลย่ี นรูปสเ่ี หลยี่ มจัตรุ ัส จะต้องกดปุ่ม Shift ทแี่ ปน้ พิมพ์ค้างไว้ขณะทว่ี าด
รปู และถา้ ต้องการใหร้ ูปทรงขยายตวั ออกจากจุดเร่ิมต้น คลกิ ลากเมาส์ แล้วกดปุ่ม Alt ที่แป้นพิมพ์
คา้ งไว้

ภาพท่ี 6.42 ผลลัพธ์การใช้เครื่องมือ Rectangle Tool โดยการกด Shift
6.9.2 เคร่อื งมือ Rounded Rectangle tool
การวาดรูปสี่เหลี่ยมมุมโค้ง โดยเลือกใช้เครื่องมือ Rounded Rectangle tool โดยจะมีแถบ
ตวั เลือกให้ทำการกำหนดรัศมคี วามโคง้ มนของมุมคา่ ต่าง ๆ

ภาพท่ี 6.43 การกำหนดลักษณะแถบเครื่องมือ Rounded Rectangle Tool
ขน้ั ตอนการใชเ้ ครื่องมือ Rounded Rectangle Tool มีดงั น้ี
1) คลกิ เครื่องมือ Rounded Rectangle Tool

ภาพที่ 6.44 การเลือกใช้เครื่องมือ Rounded Rectangle Tool

หน่วยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรยี นการสอน วิชาโปรแกรมกราฟิก รหสั วชิ า 20204-2007 208
2) คลกิ กำหนดตัวเลือกบนแถบตัวเลอื ก

ภาพที่ 6.45 การกำหนดลักษณะแถบเคร่ืองมือ Rounded Rectangle tool
3) คลกิ วาดรูปส่เี หล่ียมมมุ โคง้ ให้ไดข้ นาดและรูปทรงตามต้องการ

ภาพที่ 6.46 ผลลพั ธ์การใชเ้ คร่อื งมือ Rounded Rectangle tool
4) คลิกสร้างรูปสี่เหลี่ยมหรือตอ้ งการคงสัดส่วนเดมิ พร้อมกดปุ่ม Shift ที่แป้นพิมพ์
ค้างไว้ขณะที่คลิกวาดรูป และถ้าต้องการให้รูปทรงขยายตัวออกจากจุดเริ่มต้นคลิกลากเมาส์ แล้วกด
ปุ่ม Alt ทแี่ ปน้ พมิ พค์ า้ งไว้

ภาพที่ 6.47 ผลลพั ธก์ ารใชเ้ คร่ืองมือ Rounded Rectangle tool โดยการกด Shift
6.9.3 เครอ่ื งมือ Ellipse Tool
การวาดวงกลม โดยเลือกใช้เครื่องมือ Ellipse Tool ในการวาดวงกลมจะมีแถบตัวเลือกให้
ทำการกำหนดคา่ ต่าง ๆ สามารถทำไดด้ งั น้ี

ภาพท่ี 6.48 การกำหนดลักษณะแถบเคร่ืองมือ Ellipse Tool
ตัวเลือกเคร่ืองมือ Ellipse Tool มีรายละเอยี ดดังตอ่ ไปน้ี
1) Unconstrained สรา้ งรปู ทรงวงกลมขนาดอสิ ระตามการคลกิ ลากเมาส์
2) Circle (draw diameter or radius) ใชส้ รา้ งรูปทรงวงกลม
3) Fixed Side ใช้สร้างรูปทรงวงกลมทก่ี ำหนดความกว้าง (W) และความ สงู (H)

หน่วยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหัสวิชา 20204-2007 209
4) Proportional ใชส้ ร้างรูปวงกลมท่ีมสี ัดสว่ นแนน่ อน โดยกำหนดสดั ส่วนความกว้าง (W)
ตอ่ ความสูง
5) From Center รปู วงกลมทส่ี รา้ งจะขยายขนาดจากจุดศูนยก์ ลางที่คลิกลากเมาส์

ขั้นตอนการใช้เคร่ืองมือ Ellipse Tool มดี งั น้ี
1) คลกิ เคร่ืองมือ Ellipse Tool

ภาพที่ 6.49 การเลือกใช้เครื่องมือ Ellipse Tool
2) แถบตัวเลอื ก (Options Bar) คลิกเมาสเ์ ลือกและกำหนดคา่ คณุ สมบตั ติ า่ ง ๆ

ภาพที่ 6.50 การกำหนดลักษณะแถบเคร่ืองมือ Ellipse Tool
3) คลิกลากบนรปู ภาพให้ได้ขนาดและรปู ทรงตามต้องการ

ภาพที่ 6.51 ผลลัพธ์การใชเ้ ครอื่ งมือ Ellipse Tool
4) กรณีต้องการรูปวงกลมหรือต้องลมการคงสัดส่วนเดิมจะต้องกดปุ่ม Shift ที่
แป้นพิมพ์ค้างไว้ขณะที่วาดรูป และถ้าต้องการให้รูปทรงขยายตัวออกจากจุดเริ่มต้น คลิกลากเมาส์
แล้วกดปุ่ม Alt ทแ่ี ป้นพิมพ์ค้างไว้

ภาพที่ 6.52 ผลลัพธ์การใชเ้ คร่ืองมือ Ellipse Tool โดยการกด Shift

หน่วยท่ี 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 210
6.9.4 เครอ่ื งมือ Polygon Tool
การวาดรูปหลายเหลี่ยมหรือรูปดาว โดยเลือกใช้เครื่องมือ Polygon Tool ในการวาดรูป
หลายเหลี่ยมหรือรูปดาว จะมแี ถบตัวเลอื กให้ทำการกำหนดค่าต่าง ๆ สามารถทำไดด้ งั นี้

ภาพท่ี 6.53 การกำหนดลักษณะแถบเคร่ืองมือ Polygon Tool
ตวั เลอื กเครื่องมือ Polygon Tool มรี ายละเอียดดังต่อไปนี้
1) Sides ใช้กำหนดจำนวนด้านของรูปหลายเหลี่ยมได้ตามต้องการ เช่น ถ้าสร้างรูป
5 เหลย่ี มก็ใสค่ า่ 5
2) Radius ใช้สร้างรูปหลายเหลี่ยมที่มีขนาดแน่นอน โดยกำหนดค่ารัศมีจากจุดศูนย์กลาง
ถงึ ยอดแหลมของมุม
3) Smooth Corners ใชก้ ำหนดให้มุมของรูปหลายเหล่ียมโคง้ มน
4) Star ใชส้ รา้ งรูปดาว
5) Indent Sides By กำหนดระยะท่ีเวา้ เข้าไปของรูปดาว โดยระบุเปน็ เปอรเ์ ซน็ ต์ ตงั้ แต่
1-99
6) Smooth Indents กำหนดให้มมุ ทเี่ ว้าเข้าไปมีความโค้งมน

ขนั้ ตอนการใช้เคร่ืองมือ Polygon Tool มดี งั น้ี
1) คลกิ เครื่องมือ Polygon Tool

ภาพที่ 6.54 การเลือกใช้เครื่องมือ Polygon Tool
2) แถบตัวเลือก (Options Bar) คลิกเมาสเ์ ลือกและกำหนดค่าคณุ สมบตั ติ ่าง ๆ

ภาพที่ 6.55 การกำหนดลกั ษณะแถบเคร่ืองมือ Polygon Tool

หนว่ ยท่ี 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 211
3) คลกิ วาดรปู หลายเหลี่ยมหรอื รปู ดาว ไดข้ นาดและรปู ทรงตามต้องการ ถ้าตอ้ งการ

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

ภาพท่ี 6.56 ผลลัพธ์การใช้เครื่องมือ Polygon Tool
6.9.5 เครอื่ งมือ Line Tool
การวาดเส้นตรงหรือลูกศร โดยเลือกใช้เครื่องมือ Line Tool จะมีแถบตัวเลือกให้ทำการ
กำหนดค่าต่าง ๆ สามารถทำได้ดังน้ี

ภาพท่ี 6.57 การกำหนดลักษณะแถบเคร่ืองมือ Line Tool
ตวั เลอื กเคร่ืองมือ Line Tool มีรายละเอยี ดดงั ต่อไปน้ี
1) Weight ใช้กำหนดความหนาของเสน้
2) Arrowheads ใชส้ ร้างและกำหนดคณุ สมบตั ิของหวั ลกู ศร
3) Start สร้างหัวลกู ศรที่ส่วนหัวของเส้น
4) End สรา้ งหัวลกู ศรที่ส่วนทา้ ยของเส้น
5) Width กำหนดความกวา้ งของหวั ลูกศร (ตงั้ แต่ 10% - 1,000% ของความหนาเสน้ )
6) Length กำหนดความยาวของหวั ลกู ศร (ตง้ั แต่ 10% - 5,000% ของความหนาเส้น)

หนว่ ยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหสั วชิ า 20204-2007 212
7) Concavity กำหนดคา่ ความเว้าขา้ วของฐานลูกศร (ตั้งแต่ -50% จนถึง +50%)

ขน้ั ตอนการใช้เครื่องมือ Line Tool มดี ังต่อไปน้ี
1) คลิกเคร่ืองมือ Line Tool

ภาพท่ี 6.58 การเลือกใช้เครื่องมือ Line Tool
2) แถบตัวเลอื ก (Options Bar) คลกิ เมาส์เลือกและกำหนดคา่ คณุ สมบัติตา่ ง ๆ

ภาพท่ี 6.59 การกำหนดลักษณะแถบเครื่องมือ Line Tool
3) คลกิ วาดเส้นตรงหรือลูกศรให้ไดข้ นาดและรปู ทรงตามต้องการ

ภาพท่ี 6.60 ผลลพั ธ์การใชเ้ ครือ่ งมือ Line Tool

หน่วยท่ี 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหสั วิชา 20204-2007 213
6.9.6 เคร่อื งมือ Custom shape Tool
Palette Custom Shape เป็นเครือ่ งมอื ทมี่ ีรปู ทรงสำเร็จรูปตา่ ง ๆ โดยถกู จัดเก็บเป็นชดุ
สามารถเรยี กใช้โดยกดปุ่ม Drop Down List
ตวั เลอื กเฉพาะของเครื่องมือ Custom shape Tool

ภาพท่ี 6.61 การกำหนดลักษณะแถบเคร่ืองมือ Custom shape Tool
ตัวเลือกเครื่องมือ Custom shape Tool มรี ายละเอยี ดดงั ตอ่ ไปนี้
1) Unconstrained
2) Defined Proportions กำหนดใหใ้ ช้สัดสว่ นเดมิ ของรูปทรงสำเรจ็ รูป
3) Defined Size กำหนดให้ใช้ขนาดเดิมของรูปทรง
4) Fixed Size
5) From Center

ข้ันตอนการใชเ้ คร่ืองมือ Custom shape Tool มดี งั ต่อไปนี้
1) คลิกเคร่ืองมือ Custom shape Tool

ภาพที่ 6.62 การเลือกใช้เคร่ืองมือ Custom shape Tool
2) แถบตัวเลอื ก (Options Bar) คลกิ เมาส์เลือกและกำหนดค่าคุณสมบตั ติ า่ ง ๆ

ภาพท่ี 6.63 การกำหนดลักษณะแถบเครื่องมือ Custom shape Tool

หน่วยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วชิ าโปรแกรมกราฟิก รหสั วชิ า 20204-2007 214
3) คลกิ วาดรูปทรงสำเร็จรปู ตา่ ง ๆ ใหไ้ ด้ขนาดและรูปทรงตามตอ้ งการ

ภาพท่ี 6.64 ผลลพั ธก์ ารใชเ้ ครอื่ งมือ Custom shape Tool แบบตา่ ง ๆ

หน่วยที่ 6 วาดภาพลายเสน้ แบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหสั วิชา 20204-2007 215

การวาดภาพแบบ Vector ใน Adobe Photoshop แบ่งเป็น 2 ประเภท ได้แก่ 1) เส้นโครง
ร่าง (Path) คือ ภาพที่เป็นเส้นโครงร่างโดยยังไม่กำหนดสเี ส้นหรือสีพื้น ดังนั้นเส้นPath จะไม่ปรากฏ
ในภาพผลลัพธ์ท่ีนำไปใช้งาน 2) รูปทรง (Shape) คือ เส้นโครงร่างท่ีมีการกำหนดสี ดังนั้นรูปทรงจะ
ปรากฏในภาพผลลพั ธ์ ลักษณะเด่นของภาพแบบ Vector คือ สามารถย่อหรือขยายขนาดโดยท่ีภาพ
ยังคงความชดั เหมอื นเดิม
1. กล่มุ เครอื่ งมอื วาดภาพแบบ Vector

กลุ่มเครื่องมือวาดภาพแบบ Vector แบ่งออกเป็น 3 กลุ่ม ได้แก่ กลุ่มเครื่องมือ Pen กลุ่ม
เครื่องมอื เคล่ือนยา้ ย และกลุม่ เครอื่ งมือวาดรปู ทรง
2. สว่ นประกอบของเส้น Path

พื้นฐานของภาพแบบ Vector ต้องมีเส้น Path ซึ่งมี 2 ประเภท ได้แก่ เส้น Path แบบเปิด
คือ เสน้ ทห่ี ัวทา้ ยไมช่ นกัน เช่น เสน้ ตรง เสน้ โค้ง และเสน้ Path แบบปดิ คือเสน้ ทหี่ วั ท้ายชนกัน
3. การวาดด้วยเคร่อื งมือ Pen

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

การใชเ้ คร่อื งมือ Add Anchor Point Tool เปน็ เครื่องมือทใ่ี ชใ้ นการเพิม่ จดุ ใหก้ ับเสน้ เพือ่ ใช้
ในการดงึ เสน้ ให้มีความโค้ง

การใชเ้ คร่ืองมือ Delete Add Anchor Point Tool หากต้องการลบจุดที่ได้สร้างเพ่ิมออกไป
จากเส้น Path สามารถทำได้โดยใช้เครื่องมือ Delete Add Anchor Point Tool เลื่อนเมาส์ไปคลิก
ทจ่ี ุดทีไ่ ม่ตอ้ งการบนเส้น Path

การใช้เคร่ืองมอื Convert Point เครอ่ื งมอื Convert Point เป็นการปรบั ความโคง้ ให้กับเส้น
ซ่งึ ทิศทางในการลากหรอื Direction Point จะส่งผลตอ่ ลกั ษณะการโคง้ ของเส้น
4. การเติมสีใหก้ ับเสน้ Path

การใส่สีใหก้ ับเสน้ Path เม่อื สรา้ งเสน้ Path จุดเร่มิ ตน้ และจดุ สดุ ท้ายบรรจบกนั สามารถใส่สี
โดยใช้คำสง่ั Fill Path
5. การใสส่ ใี หก้ บั ขอบเสน้ Path

การใส่สีให้กับขอบเส้น Path เมื่อสร้างเส้น Path จุดเริ่มต้นและจุดสุดท้ายบรรจบกัน
สามารถใส่สโี ดยใช้คำส่ัง Stroke Path
6. การสร้างขอบเขตความฟงุ้ กระจายของเสน้ ขอบ Path

การสร้างขอบเขตความฟุ้งกระจายของเส้นขอบ Path เพื่อให้การกำหนดขอบเขตของเส้น
ขอบ Path ท่แี นน่ อน
7. การลบเสน้ Path

การสรา้ งเส้น Path หากไม่ต้องการเส้นทีว่ าดไว้ จงึ ต้องมกี ารลบเสน้ Path ที่ไมต่ อ้ งการไป

หนว่ ยที่ 6 วาดภาพลายเส้นแบบ Vector

เอกสารประกอบการเรียนการสอน วิชาโปรแกรมกราฟิก รหัสวชิ า 20204-2007 216

8. การสรา้ งรปู ทรงอสิ ระ
การใช้เครื่องมอื Freeform Pen Tool เมื่อต้องการสร้างรูปทรงอิสระ ซึ่งมีลักษณะเช่นเดียว

กับการใช้เครื่องมือ Lasso สร้าง Selection โดยโปรแกรมจะวางจุด anchor ต่าง ๆ ให้โดยอัตโนมัติ
นอกจากนี้ ยงั สามารถปรับแต่งเสน้ Path ได้เช่นเดียวกบั Path ท่ีสรา้ งด้วยเครื่องมือ Pen
9. การสร้างรูปทรงเรขาคณติ และรปู ทรงสำเรจ็ รูป

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

9.1 การใช้เครื่องมือ Rectangle Tool
เมื่อต้องการวาดรูปทรงสี่เหลี่ยม โดยเลือกใช้เครื่องมือ Rectangle Tool ในการวาดรูปทรง
สเ่ี หล่ยี ม จะมีแถบตัวเลือกใหท้ ำการกำหนดคา่ ตา่ ง ๆ
9.2 การใช้เคร่อื งมือ Rounded Rectangle Tool
เมื่อต้องการวาดรูปสี่เหลี่ยมมุมโค้ง โดยเลือกใช้เครื่องมือ Rounded Rectangle tool ใน
การวาดรูปส่ีเหล่ยี มมมุ โคง้ จะมแี ถบตวั เลอื กใหท้ ำการกำหนดรศั มีความโค้งมนของมุมคา่ ต่าง ๆ
9.3 การใช้เคร่ืองมือ Ellipse Tool
การวาดวงกลม/วงรี โดยเลือกใช้เครื่องมือ Ellipse Tool ในการวาดวงกลม/วงรี จะมีแถบ
ตัวเลือกให้ทำการกำหนดค่าต่าง ๆ
9.4 การใชเ้ ครอ่ื งมือ Polygon Tool
การวาดรูปหลายเหลี่ยมหรือรูปดาว โดยเลือกใช้เครื่องมือ Polygon Tool ในการวาดรูป
หลายเหล่ยี มหรือรปู ดาว จะมแี ถบตัวเลือกให้ทำการกำหนดค่าตา่ ง ๆ สามารถทำได้ดงั นี้
9.5 การใชเ้ ครื่องมอื Line Tool
การวาดเส้นตรงหรือลูกศร โดยเลือกใช้เครื่องมือ Line Tool ในการวาดวาดเส้นตรงหรือ
ลูกศร จะมีแถบตัวเลือกใหท้ ำการกำหนดค่าตา่ ง ๆ
9.6 การใช้เครอ่ื งมอื Custom Shape Tool
ใช้สำหรบั จัดเกบ็ รูปทรงสำเร็จรูปต่าง ๆ ท่โี ปรแกรมเตรียมไว้ให้ ซ่ึงสามารถเรยี กมาใช้ได้ทันที
โดยไม่ตอ้ งสร้างเอง

หน่วยที่ 6 วาดภาพลายเส้นแบบ Vector