การใช้โปรแกรมกราฟิกพัฒนาเว็บเพจ
หน้าหลัก
หลักเกณฑ์การสื่อบทเรียนออนไลน์
คำอธิบายรายวิชา
จุดประสงค์การเรียน
บทเรียน
ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์
ความรู้เบื้องต้นเกี่ยวกับโปรแกรมสร้า
มุมมองภาพและการตกแต่งภาพด้วยเลเยอร์ (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