การใช้โปรแกรมกราฟิกพัฒนาเว็บเพจ
หน้าหลัก
หลักเกณฑ์การสื่อบทเรียนออนไลน์
คำอธิบายรายวิชา
จุดประสงค์การเรียน
บทเรียน
ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์
ความรู้เบื้องต้นเกี่ยวกับโปรแกรมสร้า
มุมมองภาพและการตกแต่งภาพด้วยเลเยอร์ (Layers)
การจัดการไฟล์ และการสร้างขอบเขตพื้นที
การสร้างตัวอักษรและข้อความ
การระบายสี และภาพกราฟิกสำหรับเว็บเพจ
การวาดภาพ (Drawing)
การใช้โปรแกรมกราฟิกแบบเวคเตอร์ (Vector)
การสร้างข้อความ การปรับรูปทรงภาพ และกา&
แบบทดสอบก่อนเรียนและหลังเรียน
ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์
ความรู้เบื้องต้นเกี่ยวกับโปรแกรมสร้า
มุมมองภาพและการตกแต่งภาพด้วยเลเยอร์ (Layers)
การจัดการไฟล์ และการสร้างขอบเขตพื้นที
การสร้างตัวอักษรและข้อความ
การระบายสี และภาพกราฟิกสำหรับเว็บเพจ
การวาดภาพ (Drawing)
การใช้โปรแกรมกราฟิกแบบเวคเตอร์ (Vector)
การสร้างข้อความ การปรับรูปทรงภาพ และกา&
บทที่ 7
การวาดภาพ
(Drawing)
เครื่องมืออีกกลุ่มหนึ่งที่สนับสนุนการทำงานด้านการวาดภาพ ซึ่งเราสามารถสร้างรูปทรงแบบเวคเตอร์แบบง่ายๆ ไปจนถึงการสร้างเส้นพาธเพื่อออกแบบงานกราฟิกที่สวยงามได้มากมาย
เครื่องมือวาดรูปทรง และสร้างเส้นแบบ
Vector
นอกจากการตัดต่อ ปรับแต่งสีสันภาพให้สวยงามได้แล้ว เรายังสามารถใช้ โฟโต้ช๊อป ในการวาดรูปทรงหรือภาพแบบลายเส้นที่มีความซับซ้อนได้ด้วยเครื่องมือในกลุ่มเชฟ ทูล (Shape Tool) และPen Tool โดยการทำงานของเครื่องมือเหล่านี้ครอบคลุมไปถึงการสร้าง ขอบเขตพื้นที่ (Selection) ให้รูปทรงได้อย่างเหมาะสมสวยงาม การสร้างเส้นพาธ เพื่อใช้ในการสร้างลายเส้น หรือใช้กำหนดพื้นที่ในการลงสี หรือการระบายสีได้ด้วย โดยเส้นเหล่านี้สามารถย่อขยายได้โดยไม่สูญเสียรายละเอียด โดยมีเครื่องมือมากมายที่เกี่ยวข้องดังนี้
7.1 กลุ่มเครื่องมือสร้างรูปทรงสำเร็จรูป
เป็นเครื่องมือที่ใช้วาดรูปทรงแบบเวคเตอร์ง่ายๆ เช่น สี่เหลี่ยม, สี่เหลี่ยมมุมมน, วงกลม หรือรูปทรงแบบอื่นๆ ที่โปรแกรมจัดไว้ให้ ซึ่งมีเครื่องมือแต่ละตัวดังนี้
ภาพที่ 7.1 แสดงภาพกลุ่มเครื่องมือสร้างรูปทรงสำเร็จรูป
7.1.1 รีแทงเกิล ทูล (Rectangle Too)
ใช้สำหรับสร้างรูปทรงแบบสี่เหลี่ยม
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)
ใช้สร้างรูปทรงสำเร็จรูปที่โปรแกรมจัดไว้ให้
รูปทรงมีพื้นหลัง
ออปชันบาร์ มีรายละเอียดดังนี้
รูปทรงไม่มีพื้นหลัง
เครื่องมือ Pen
เครื่องมือ Freeform Pen
ลักษณะเครื่องมือ
กำหนดรัศมีมุมทั้ง 4 ด้าน
การทับซ้อนเส้นพาธ
การใส่เอฟเฟ็กต์
สีรูปทรง
ภาพที่ 7.2 แสดงภาพออปชันบาร์
7.1.1 การใช้เครื่องมือ
รีแทงเกิล
(Rectangle)
1. คลิกที่เครื่องมือ รีแทงเกิล
2. กำหนดลักษณะการทำงานของเครื่องมือ ซึ่งมีรายละเอียดดังนี้
ภาพที่ 7.3 แสดงภาพการใช้เครื่องมือรีแทงเกิล
Unconstrained
วาดรูปทรงสี่เหลี่ยมแบบอิสระตามที่สร้าง
Square
วาดรูปทรงสี่เหลี่ยมจัตุรัส
Fixed Size
กำหนดขนาดสี่เหลี่ยมแบบแน่นอนโดยกำหนดที่ช่อง W (ความกว้าง)
และ H (ความสูง)
Proportional
กำหนดสัดส่วนแน่นอนโดยกำหนดช่องช่อง W (ความกว้าง)
และ H (ความสูง)
From Center
วาดรูปสี่เหลี่ยมโดยมีการขยายจากจุดกึ่งกลาง
Snap to Pixels
กำหนดให้ขอบรูปสี่เหลี่ยมอยู่ตรงแนวพิกเซล
3. คลิกเมาส์ด้านซ้ายค้างไว้แล้วลากบนพื้นที่การทำงานเพื่อวาดรูปสี่เหลี่ยมจะได้รูปภาพดังนี้
ภาพที่ 7.4 แสดงภาพลากบนพื้นที่การทำงานเพื่อวาดรูปสี่เหลี่ยม
7.1.2 การใช้เครื่องมือ ราวเด็ด รีแทงเกิล (Rounded Rectangle)
1. คลิกที่เครื่องมือ ราวเด็ด รีแทงเกิล
2. กำหนดลักษณะการทำงานของเครื่องมือ ซึ่งมีรายละเอียดเหมือนกับรีแทงเกิล
แต่เพิ่มช่องของ Radius ที่ออปชันบาร์ เพื่อกำหนดความโค้งมนของมุมรูป
4. คลิกเมาส์ซ้ายค้างไว้แล้วลากบนพื้นที่การทำงานเพื่อวาดรูปจะได้รูปภาพดังนี้
ภาพที่ 7.5 แสดงภาพเครื่องมือ ราวเด็ด รีแทงเกิล
7.1.3 การใช้เครื่องมือ เอลลิปเซ่
Ellipse
1. คลิกที่เครื่องมือ เอลลิปเซ่
2. กำหนดลักษณะการทำงานของเครื่องมือ ซึ่งมีรายละเอียดเหมือนกับ รีแทงเกล
แต่จะเพิ่ม เซอร์เคิล ((Circle) (Draw diameter or radius) เพื่อกำหนดให้แต่ละด้านของวงกลมเท่ากัน
3. คลิกเมาส์ด้านซ้ายค้างไว้แล้วลากบนพื้นที่การทำงานเพื่อวาดรูปจะได้รูปภาพดังนี้
ภาพที่ 7.6 แสดงภาพเครื่องมือ Ellipse
7.1.4 การใช้เครื่องมือ โพรีก้อน ทูล (Polygon Tool )
1. คลิกที่เครื่องมือ โพรีก้อน
2. กำหนดลักษณะการทำงานของเครื่องมือ ซึ่งมีรายละเอียดดังนี้
Sides
กำหนดจำนวนมุมให้กับรูปทรง
Radius
กำหนดรูปทรงให้มีขนาดแน่นอนโดยกำหนดเส้นรัศมี
Smooth Corners
กำหนดให้มุมมีความโค้งมน
Star
สร้างรูปดาว
Indent Sides By
กำหนดระยะการเว้าโค้งมน
Smooth Indents
กำหนดให้มุมที่เว้ามีความโค้งมน
3. คลิกเมาส์ด้านซ้ายค้างไว้แล้วลากบนพื้นที่การทำงานเพื่อวาดรูปทรงตามต้องการ
คลิก Smooth Corners
คลิก Star
ภาพที่ 7.7 แสดงภาพเครื่องมือ โพรีก้อน
7.1.5 การใช้เครื่องมือ ไลน์ ทูล (Line Tool)
1. คลิกที่เครื่องมือ ไลน์ ทูล
2. กำหนดลักษณะการทำงานของเครื่องมือ ซึ่งมีรายละเอียดดังนี้
Weight
กำหนดขนาดเส้น
Arrowheads
กำหนดหัวลูกศร
Start
สร้างหัวลูกศรที่ส่วนหัวเส้น
End
สร้างหัวลูกศรส่วนปลายเส้น
Width
กำหนดความกว้างหัวลูกศร
Length
กำหนดความยาวหัวลูกศร
Concavity
กำหนดความเว้าของฐานลูกศร
3. คลิกเมาส์ด้านซ้ายค้างไว้แล้วลากบนพื้นที่การทำงานเพื่อวาดรูปทรงเส้นตามต้องการดังนี้
คลิก Start
คลิก End
คลิก Start และ End
ภาพที่ 7.8 แสดงภาพเครื่องมือ ไลน์ ทูล
7.1.6 การใช้เครื่องมือ คัสสตัม เชฟ (Custom Shape)
1. คลิกที่เครื่องมือ คัสสตัม เชฟ
2. กำหนดลักษณะของเครื่องมือ ซึ่งมีรายละเอียดดังนี้
ภาพที่ 7.9 แสดงภาพเครื่องมือคัสสตัม เชฟ
ออปชันการวาดรูปทรงสำเร็จรูป
Unconstrained
วาดรูปทรงอย่างอิสระโดยไม่กำหนดสัดส่วน
Defined Proportions
วาดรูปทรงแบบกำหนดสัดส่วน
Defined Size
วาดรูปทรงแบบกำหนดสัดส่วนตายตัว จะมีขนาดเท่ากันทั้งหมด
Fixed Size
กำหนดขนาดรูปทรงโดยระบุค่าด้วยตนเอง
From Center
เลือกออปชันการวาดรูปทรงโดยให้ขยายขนาดจากจุดที่แดรกเมาส์
3. เลือกชุดรูปทรงสำเร็จรูป แล้วคลิกลากเมาส์ให้ได้ขนาดรูปที่ต้องการดังนี้
ภาพที่ 7.10 แสดงภาพเลือกชุดรูปทรงสำเร็จรูป แล้วคลิกลากเมาส์ให้ได้ขนาดรูปที่ต้องการ
7.2 การวาดรูปทรงแบบรวม-ลดพื้นที่
เราสามารถกำหนดค่าบนออปชันบาร์สำหรับการสร้างรูปทรงหลายๆ รูปให้มีลักษณะที่
โดดเด่นขึ้นได้ โดยอาศัยวิธีการซ้อนทับของเส้นพาธ ซึ่งจะช่วยให้ได้รูปทรงแบบใหม่ขึ้นมาใช้งาน
โดยมีออปชันที่สามารถใช้งานได้ดังนี้
การเลือกพื้นที่ใหม่
การรวมพื้นที่ซ้อนกันให้กลายเป็นชิ้นเดียวกัน
ตัดส่วนที่ซ้อนทับกันออกไป
ตัดรูปทรงและเก็บเฉพาะส่วนที่ซ้อนทับกันไว้
ตัดรูปทรงเฉพาะส่วนที่ซ้อนกันออกไป
สำหรับหลักการใช้งานออปชันสำหรับการรวมและลดพื้นที่การรวมและลดพื้นที่การสร้างรูปทรงด้วยเครื่องมือในกลุ่ม เชฟ ทูล (Shape Tool) นี้ มีหลักการง่ายดังนี้
4
1
2
3
ภาพที่ 7.11 แสดงภาพลดพื้นที่การรวมและลดพื้นที่การสร้างรูปทรง
1. ใช้เครื่องมือในกลุ่ม เชฟ ทูล วาดรูปทรงที่ต้องการขึ้นมา โดยจะต้องกำหนด
คุณสมบัติเป็นแบบ เชฟ เลเยอร์
2. กำหนดออปชันการรวมรูปทรงที่ต้องการ
3. แดรกเมาส์วาดรูปทรงทับลงไปที่ภาพเดิม ซึ่งถ้าหากเลือกคุณสมบัติของการวาดเป็น
Shape Layer จะเห็นผลลัพธ์ที่ได้ทันที แต่หากเลือกแบบเส้นพาธ จะเห็นเป็นเส้นพาธทับกันอยู่
4. ภาพที่ได้จากการวาดจะเก็บเฉพาะส่วนที่ทับกันไว้
7.3
การใช้เครื่องมือวาดเส้นพาธ (Path)
เป็นเครื่องมือที่ใช้สร้างเส้นพาธ หรือรูปทรงต่างๆ ซึ่งส่วนประกอบของเส้นจะมีจุดแองเคอร์(จุดย่อยที่อยู่ตามแนวเส้น) การเรียกเครื่องมือนี้ว่า เพนทูล ( Pen Tool) คลิกเมาส์ด้านขวาที่เครื่องมือ เพนทูล จะปรากฎเครื่องมือต่างๆ ดังนี้
ภาพที่ 7.11 แสดงภาพเครื่องมือที่ใช้สร้างเส้นพาธ
Pen
ใช้สร้างเส้นพาธ โดยการคลิกวางจุดแองเคอร์
Freeform Pen
ใช้สร้างเส้นพาธ แบบลากอิสระ
Add Anchor Point
ใช้เพิ่มจุดแองเคอร์
Delete Anchor Point
ใช้ลดจุดแองเคอร์
Convert Point
ใช้แปลงรูปแบบของเส้นและมุม
7.3.1 การสร้างเส้นพาธ (
Path) ด้วยเครื่องมือ เพนทูล (
Pen Tool)
1. คลิกเครื่องมือ เพนทูล
2. คลิกเมาส์ด้านซ้ายในตำแหน่งที่ต้องการสร้างเป็นเส้นพาธ หรือรูปทรงที่ต้องการ
จุดแองเคอร์
Path
ภาพที่ 7.12 แสดงภาพเครื่องมือ เพนทูล
7.3.2 การสร้างเส้นพาธ ด้วย
ฟรีฟอร์ม เพน ทูล (
Freeform Pen Tool)
1. คลิกเครื่องมือ ฟรีฟอร์ม เพน ทูล
2. คลิกเมาส์ซ้ายค้างไว้แล้วลากไปในตำแหน่งที่ต้องการสร้างเป็นเส้นพาธ หรือรูปทรงที่ต้องการดังนี้
ภาพที่ 7.13 แสดงภาพเครื่องมือ Freeform Pen
7.3.3 การเพิ่มจุดแองเคอร์ด้วย แอด อันเชอ พอย ทูล (Add Anchor Point Tool)
1. คลิกที่เครื่องมือ แอด อันเชอ พอย ทูล
2. คลิกเมาส์ซ้ายในตำแหน่งที่ต้องการเพิ่มจุดแองเคอร์ จากนั้นคลิกเมาส์ซ้ายค้างไว้ที่ตำแหน่งจุดแองเคอร์บิดไปในตำแหน่งที่ต้องการให้โค้ง
คลิกเมาส์แล้วบิดรูปทรง
ภาพที่ 7.14 แสดงภาพเครื่องมือ แอด อันเชอ พอย ทูล
7.3.4 การลบจุดแองเคอร์ด้วย ดีลีท อันเชอ พอย ทูล (Delete Anchor Point Tool)
คลิกที่นี่
ผลลัพธ์
ภาพที่ 7.15 แสดงภาพการลบจุดแองเคอร์ด้วย ดีลีท อันเชอ พอย ทูล
7.3.5 การแปลงรูปแบบของเส้นและมุมด้วย คอนเฝิท พอย ทูล (Convert Point)
1. คลิกที่เครื่องมือ คอนเฝิท พอย ทูล
2. คลิกเมาส์ด้านซ้ายในตำแหน่งที่ต้องการแปลงเส้น
คลิกที่นี่ แล้วบิดรูปทรง
ผลลัพธ์
ภาพที่ 7.16 แสดงภาพเครื่องมือ คอนเฝิท พอย ทูล
7.4 การเคลื่อนย้ายเส้นพาธ (Path)
ภาพที่ 7.17 แสดงภาพการเคลื่อนย้ายเส้นพาธ
7.4.1 พาธ ซีเลคชัน ทูล (Path Selection Tool)
การย้ายเส้นพาธทั้งหมด
7.4.2
ไดเลค ซีเลคชัน ทูล
(
Direct selection Tool)
ย้ายเส้นพาธ เฉพาะจุดแองเคอร์
7.4.1 การเคลื่อนย้ายเส้นพาธ ด้วย พาธ ซีเลคชัน ทูล (Path Selection Tool)
1. คลิกที่เครื่องมือ พาธ ซีเลคชัน ทูล
2. คลิกเมาส์ซ้ายที่รูปภาพ จะสามารถเคลื่อนย้ายภาพได้ทั้งหมด
ภาพที่ 7.18 แสดงภาพเครื่องมือ พาธ ซีเลคชัน ทูล
7.4.2 การเคลื่อนย้ายเส้นพาธ ด้วย ไดเลค ซีเลคชัน ทูล (
Direct selection Tool)
1. คลิกที่เครื่องมือ ไดเลค ซีเลคชัน ทูล
2. คลิกเมาส์ซ้าย ณ จุดแองเคอร์ค้างไว้แล้วลากไปในตำแหน่งที่ต้องการ
คลิกที่นี่
ผลลัพธ์
ภาพที่ 7.19 แสดงภาพเครื่องมือ ไดเลค ซีเลคชัน ทูล
7.5 เทคนิคพิเศษ การสร้างเส้น พาธต่างๆ ให้เป็นขอบเขตพื้นที่
การสร้างเส้นพาธจากการวาดรูปในกลุ่มเครื่องมือสร้างรูปทรงสำเร็จรูป หรือจากการวาดเครื่องมือวาดเส้นพาธ สามารถสร้าง ขอบเขตพื้นที่ เพื่อง่ายต่อการกำหนดสี การไล่โทนสี การกำหนดรูปแบบสไตล์ (Styles), เบนดิ่ง ออปชัน (Blending Options) ทำได้ง่ายสะดวกและสวยงามดังต่อไปนี้
1. กำหนดขนาดรูปภาพ 20 X 20 CM
2. เลือกเครื่องมือวาดรูปโดยกำหนด ออปชันบาร์ เป็นแบบไม่มีพื้นหลัง
ภาพที่ 7.20 แสดงภาพเลือกเครื่องมือวาดรูปโดยกำหนด ออปชันบาร์
3. เพิ่ม Layer ใหม่ (Layer 1)
4. วาดรูปตามขนาดต้องการให้พอดีกับพื้นที่ภาพ
3
4
ภาพที่ 7.21 แสดงภาพวาดรูป
5. ในออปชันบาร์ เลือกเพนทูล (Pen Tool)
6. นำเมาส์มาวางที่รูป แล้วคลิกเมาส์ขวา เลือก Make Selection
7. กำนดค่า เมค ซีเลคชัน (Make selection) เป็นค่า 0
8. จะปรากฎขอบเขตพื้นที่ตามภาพที่วาด
5
6
8
7
ภาพที่ 7.22 แสดงภาพขั้นตอนการสร้างภาพ
9. ระบายสีด้วยคำสั่ง กราเดียน ทูล (Gradient Tool) (
บทที่ 6 การไล่โทนสีแบบ Gradient Tool
) จะได้ภาพดังนี้
ภาพที่ 7.23 แสดงภาพระบายสีด้วยคำสั่ง กราเดียน ทูล
10 ไม่ต้องการเส้นขอบ ให้ตัดภาพด้วยคำสั่ง สลับด้าน ขอบเขตพื้นที่
(บทที่ 4 (การสลับด้าน ขอบเขตพื้นที่))
จะได้ภาพดังนี้
ภาพที่ 7.24 แสดงภาพคำสั่ง สลับด้านขอบเขตพื้นที่
สรุป
กลุ่มเครื่องมือวาดรูปทรง และการสร้างเส้นแบบ Vector เป็นการสร้างเส้นหรือสร้างลายเส้นตามรูปแบบที่โปรแกรมกำหนดให้มีดังนี้
1.
รีแทงเกิล ทูล(Rectangle Too) ใช้สำหรับสร้างรูปทรงแบบสี่เหลี่ยม
2.
ราวเด็ด รีแทรงเกิล ทูล (Rounded Rectangle Tool) ใช้สำหรับสร้างรูปทรงแบบสี่เหลี่ยมมุมมน
3.
แอลลิปเซ่ ทูล (Ellipse Tool) ใช้สำหรับวาดรูปทรงกลมหรือรี
4.
โพรีก้อน ทูล(Polygon Tool) ใช้สำหรับวาดรูปทรงหลายเหลี่ยม และสามารถดัดแปลงเครื่องมือให้สามารถวาดรูปทรงแบบอื่นได้ด้วย
5.
ไลน์ ทูล (Line Tool) ใช้สร้างเส้นตรงโดยกำหนดความหนา และสร้างหัวลูกศรได้ด้วย
6.
คัสสตัม เชฟ ทูล(Custom Shape Tool) ใช้สร้างรูปทรงสำเร็จรูปที่โปรแกรมจัดไว้ให้
หรือสร้างขึ้นเองจากการวาดรูปด้วย Pen Tool ซึ่งเป็นรูปสำเร็จรูปที่โปรแกรมจัดให้ สามารถนำมาประยุกต์ใช้ได้ตามต้องการ ดังตัวอย่าง
เทคนิคพิเศษ การสร้างเส้น
Path ต่างๆ ให้เป็น Selection