การใช้โปรแกรมกราฟิกพัฒนาเว็บเพจ
หน้าหลัก
หลักเกณฑ์การสื่อบทเรียนออนไลน์
คำอธิบายรายวิชา
จุดประสงค์การเรียน
บทเรียน
ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์
ความรู้เบื้องต้นเกี่ยวกับโปรแกรมสร้า
มุมมองภาพและการตกแต่งภาพด้วยเลเยอร์ (Layers)
การจัดการไฟล์ และการสร้างขอบเขตพื้นที
การสร้างตัวอักษรและข้อความ
การระบายสี และภาพกราฟิกสำหรับเว็บเพจ
การวาดภาพ (Drawing)
การใช้โปรแกรมกราฟิกแบบเวคเตอร์ (Vector)
การสร้างข้อความ การปรับรูปทรงภาพ และกา&
แบบทดสอบก่อนเรียนและหลังเรียน
ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์
ความรู้เบื้องต้นเกี่ยวกับโปรแกรมสร้า
มุมมองภาพและการตกแต่งภาพด้วยเลเยอร์ (Layers)
การจัดการไฟล์ และการสร้างขอบเขตพื้นที
การสร้างตัวอักษรและข้อความ
การระบายสี และภาพกราฟิกสำหรับเว็บเพจ
การวาดภาพ (Drawing)
การใช้โปรแกรมกราฟิกแบบเวคเตอร์ (Vector)
การสร้างข้อความ การปรับรูปทรงภาพ และกา&
บทที่
9
การสร้างข้อความ การปรับรูปทรงภาพและการใช้พาเล็ต
Pathfinder
การใช้งานในปัจจุบันได้มีการนำเทคนิคทางด้านคอมพิวเตอร์ เช่น ข้อความกราฟิกมาช่วยในการออกแบบทำให้งานน่าสนใจ มีสีสันสะดุดตาต่อผู้พบเห็น ทำให้ได้เปรียบทางด้านการแข่งขันในการโฆษณาสินค้าต่างๆ การประชาสัมพันธ์ และ อื่นๆ
9.1 การสร้างข้อความด้วยเครื่องมือกลุ่ม ไท้ ทูล (Type Tool)
การนำตัวอักษรหรือข้อความมาประกอบกับภาพนั้นนอกจากจะใช้สื่อความหมาย หรือบอกรายละเอียดต่างๆแล้ว บางครั้งการนำตัวอักษรเข้ามาประกอบยังทำให้ภาพมีความน่าสนใจมากขึ้น
ประเภทของข้อความ
สำหรับประเภทของข้อความในโปรแกรม Illustrator จะแบ่งเป็น 3 แบบคือ แต่ละแบบจะมีคุณสมบัติพื้นฐานหลายอย่างที่แตกต่างกัน
9.1.1 พอย ไท้ (Point Type)
เป็นข้อความแบบง่ายๆ เหมาะสำหรับเนื้อหาที่มีความยาวไม่มากนัก เช่น ไม่กี่ตัวอักษร หรือไม่กี่บรรทัด และมีคุณสมบัติพื้นฐานคล้ายออบเจ็คที่เป็นรูปวาดทั่วไป คือ เมื่อใช้กรอบ Bounding box ย่อ/ขยายขนาด หรือหมุนก็จะทำให้รูปทรงของตัวอักษรเปลี่ยนแปลงตามไปด้วย
9.1.2 แอเรีย ไท้ (Area Type)
เป็นข้อความซึ่งเหมาะสำหรับเนื้อหาที่มีความยาวมากๆ เช่น หลายบรรทัดหรือหลายหน้า โดยการสร้างข้อความบรรจุไว้ภายในกรอบรูปทรงใดๆ ก็ได้ โดยสามารถเชื่อมโยงเนื้อหาจากกรอบหนึ่งไปยังอีกกรอบหนึ่ง และเมื่อมีการปรับรูปทรงของกรอบหนึ่งไปยังอีกกรอบหนึ่ง ก็จะมีผลให้รูปทรงตัวอักษรเปลี่ยนแปลงไป
9.1.3 ไท้ ออน อะ พาธ (Type on a Path)
เป็นข้อความที่เหมาะสำหรับใช้ประดับตกแต่ง โดยตัวอักษรจะเรียงตัวไปตามแนวของเส้น Path
9.1.1 การใช้เครื่องมือ ไท้ ทูล (Type Tool) ในการสร้างข้อความ
1. คลิกที่เครื่องมือ จากนั้นคลิกเมาส์ซ้ายบริเวณที่ต้องการพิมพ์
ข้อความ จากนั้นพิมพ์ข้อความที่ต้องการ
2. คลิกที่เมนู
Window
à
Type
à
Character
เพื่อแสดงพาเล็ต Character
กำหนดระยะห่างตัวอักษร
แบบคู่
เปลี่ยนขนาดตัวอักษร
ข้อความที่พิมพ์
2
เปลี่ยนลักษณะตัวอักษร
เปลี่ยนระยะห่างระหว่างบรรทัด
กำหนดระยะห่างตัวอักษร
ทั้งหมด
3
เปลี่ยนรูปแบบตัวอักษร
1
ภาพที่ 9.1 แสดงภาพการใช้เครื่องมือ ไท้ ทูล (Type Tool)
1. ปรับเปลี่ยนรูปแบบตามต้องการ
9.1.2 การใช้เครื่องมือ แอเรีย ไท้ทูล (Area Type Tool)
เป็นเครื่องมือที่ใช้สร้างตัวอักษรในพื้นที่ที่กำหนดหรือในวัตถุที่สร้างขึ้นซึ่งมีขั้นตอนดังนี้
1. สร้างวัตถุที่ต้องการพิมพ์ข้อความ
2. คลิกที่เครื่องมือ จากนั้นคลิกเมาส์ซ้ายภายในวัตถุที่ต้องการพิมพ์ข้อความ จากนั้นพิมพ์ข้อความที่ต้องการ
1
2
ภาพที่ 9.2 แสดงภาพการใช้เครื่องมือ แอเรีย ไท้ทูล
9.1.3 การใช้เครื่องมือ แพท ไท้ ทูล (Path Type Tool)
เป็นเครื่องมือที่ใช้สร้างตัวอักษรแนวนอนตามเส้น Path ที่สร้างขึ้นด้วยเครื่องมือ Pen ซึ่งมีขั้นตอนดังนี้
1. สร้างเส้น Path ที่ต้องการพิมพ์ข้อความด้วยเครื่องมือ Pen
2.
2
คลิกที่เครื่องมือ จากนั้นคลิกเมาส์ซ้ายบนเส้น Path จากนั้นพิมพ์ข้อความที่ต้องการ
1
ภาพที่ 9.3 แสดงภาพการใช้เครื่องมือ แพท ไท้ ทูล
9.1.4
การใช้เครื่องมือ
เวอติคอล ไท้ ทูล (Vertical Type Tool)
เป็นเครื่องมือที่ใช้สร้างตัวอักษรในแนวตั้ง ซึ่งมีขั้นตอนดังนี้
1. คลิกที่เครื่องมือ จากนั้นคลิกเมาส์ซ้ายบริเวณที่ต้องการพิมพ์ข้อความ จากนั้นพิมพ์ข้อความที่ต้องการ ดังตัวอย่างต่อไปนี้
ภาพที่ 9.4 แสดงภาพการใช้เครื่องมือ เวอติคอล ไท้ ทูล
9.1.5 การใช้เครื่องมือ เวอติคอล แอเรีย ไท้ ทูล (Vertical Area Type Tool)
เป็นเครื่องมือที่ใช้สร้างตัวอักษรในพื้นที่ที่กำหนดหรือในวัตถุที่สร้างขึ้นในแนวตั้งมีขั้นตอนดังนี้
1. สร้างวัตถุที่ต้องการพิมพ์ข้อความ
2.
1
คลิกที่เครื่องมือ Vertical Area Type Tool จากนั้น คลิกเมาส์ซ้ายภายในวัตถุที่ต้องการพิมพ์
2
ภาพที่ 9.5 แสดงภาพการใช้เครื่องมือ เวอติคอล แอเรีย ไท้ ทูล
9.1.6 การใช้เครื่องมือ เวอติคอล แพท ไท้ ทูล (Vertical Path Type Tool)
เป็นเครื่องมือที่ใช้สร้างตัวอักษรในพื้นที่ที่กำหนดหรือในวัตถุที่สร้างขึ้นในแนวตั้งมีขั้นตอนดังนี้
1. สร้างวัตถุที่ต้องการพิมพ์ข้อความ
2.
2
คลิกที่เครื่องมือ Vertical Path Type Tool จากนั้นคลิกเมาส์ซ้ายภายในวัตถุที่ต้องการพิมพ์
1
ภาพที่ 9.6 แสดงภาพเวอติคอล แพท ไท้ ทูล
9.1.7 การสร้างข้อความแบบหลายบรรทัดและการจัดการข้อความ
การสร้างข้อความแบบหลายบรรทัด
1. คลิกที่เครื่องมือ ไท้ ทูล จากนั้นคลิกเมาส์ซ้ายค้างไว้ตรงจุดเริ่มต้นที่ต้องการพิมพ์ข้อความ แล้วลากเมาส์ไปยังตำแหน่งสิ้นสุดของขอบเขตที่ต้องการพิมพ์ข้อความ
2. พิมพ์ข้อความที่ต้องการ โดยการพิมพ์ไปเรื่อยๆ เมื่อถึงขอบสิ้นสุดจะตัดขึ้นบรรทัดใหม่ให้อัตโนมัติ แต่ถ้าต้องการขึ้นย่อหน้าใหม่ให้กด Enter
ภาพที่ 9.7 แสดงภาพข้อความหลายบรรทัด
การจัดการข้อความ
1. คลิกเลือกข้อความที่ต้องการปรับเปลี่ยน
ภาพที่ 9.8 แสดงภาพการจัดการข้อความ
2. คลิกเมนู
Window
à
Type
à
Paragraph
เพื่อแสดงพาเล็ต พาลากราฟ ( Paragraph)
จัดข้อความชิดซ้ายแบบเต็มบรรทัด
จัดข้อความกึ่งกลาง
จัดข้อความขวา
จัดข้อความกึ่งกลางแบบเต็มบรรทัด
จัดข้อความแบบเต็มทุกบรรทัด
จัดข้อความแบบชิดขวาเต็มบรรทัด
จัดข้อความชิดซ้าย
เยื้องหน้าทุกบรรทัด
เยื้องหน้าบรรทัดแรก
เยื้องหลังทุกบรรทัด
ภาพที่ 9.9 แสดงภาพแสดงพาเล็ต พาลากราฟ
9.2 การปรับรูปทรงภาพ
1. คลิกที่เครื่องมือ ซีเลคชัน (Selection) จากนั้นคลิกที่วัตถุที่ต้องการ ซึ่งแต่ละมุม
สามารถปรับ รูปทรงได้ทุกด้านดังนี้
ปรับมุมบนหรือมุมล่าง
ปรับด้านซ้ายหรือขวา
ปรับด้านบนหรือล่าง
ภาพที่ 9.10 แสดงภาพการปรับรูปทรงภาพ
2. ถ้าต้องการย่อ/ขยายให้คลิกเมาส์ซ้ายค้างไว้ที่มุมใดๆ ของวัตถุ แล้วดึงเพื่อย่อ/ขยาย
3. ถ้าต้องการหมุนวัตถุให้คลิกที่เครื่องมือ Rotate จากนั้นคลิกเมาส์ซ้ายค้างไว้ที่บริเวณรูปภาพแล้วปรับหมุนตามต้องการ
ภาพที่ 9.11 แสดงภาพปรับหมุน
4. หรือนำเครื่องมือ ซีเลคชัน วางไว้
มุมใดมุมหนึ่ง
ก็สามารถหมุนวัตถุได้
เหมือนกันโดยมีวิธีการทำดังนี้
ภาพที่ 9.12 แสดงภาพหมุนวัตถุ
9.3 การใช้พาเล็ต Pathfinder
พาเล็ต พาธฟินเดอะ (Pathfinder) เป็นพาเล็ตที่ใช้จัดการลักษณะของวัตถุที่เรียงซ้อนกัน ซึ่งมีลักษณะการทำงานอยู่ 2 ส่วนคือ เชฟโหมด (Shape Modes) และ พาธฟินเดอะ ซึ่งมีขั้นตอนการทำงานดังนี้
9.3.1
การทำงานในส่วนของ
Shape Modes
คลิกเมนู
Window
à
Pathfinder
เพื่อแสดงพาเล็ต Pathfinder
ภาพที่ 9.13 แสดงภาพการทำงานในส่วนของ เชฟโหมด
1) เครื่องมือ แอด น เชพ แอเรีย (Add to Shape area)
1. คลิกเลือกวัตถุทั้งหมด
2. คลิกเครื่องมือ (Add to Shape area) เป็นการรวมวัตถุที่เรียงซ้อนกันเข้าด้วยกันโดยสีจะเปลี่ยนเป็นไปตามสีที่เลือกได้ดังรูป
1
2
ภาพที่ 9.14 แสดงภาพ Add to Shape area
2) เครื่องมือ ซับแทร็ค ฟอร์ม เชฟ แอเรีย (Subtract from shape area)
1. สร้างวัตถุเพิ่มตามต้องการ
2. เลือกวัตถุทั้งหมด คลิกเครื่องมือ เพื่อตัดส่วนที่วัตถุทับกันออก โดยวัตถุที่ถูกตัดจะยังคงสีเดิมดังรูป
2
ผลลัพธ์
1
ภาพที่ 9.15 แสดงภาพ ซับแทร็ค ฟอร์ม เชฟ แอเรีย
3) เครื่องมือ อินเทอะเซค เชฟ แอเรีย (Intersect shape area)
1. สร้างวัตถุเพิ่มตามต้องการ
2. เลือกวัตถุทั้งหมด คลิกเครื่องมือ เพื่อตัดส่วนที่วัตถุส่วนที่ไม่ทับกันออก โดยวัตถุที่ถูกตัดจะเปลี่ยนเป็นสีที่เลือกไว้ดังรูป
1
2
ภาพที่ 9.16 แสดงภาพ อินเทอะเซค เชฟ แอเรีย
4) เครื่องมือ เอ็ดซคล โอเวอร์แลปปิ้ง เชฟ แอเรีย ( Exclude overlapping shape area)
1. สร้างวัตถุเพิ่มตามต้องการ
2. เลือกวัตถุทั้งหมด คลิกเครื่องมือ เพื่อตัดส่วนวัตถุส่วนที่ทับกันออก โดยวัตถุที่ถูกตัดจะเปลี่ยนเป็นสีวัตถุที่ อยู่ด้านหน้าดังรูป
1
2
ภาพที่ 9.17 แสดงภาพ
9.4 การทำงานในส่วนของ พาธไฟล์เดอะ (
Pathfinders)
เป็นเครื่องมือที่ใช้จัดการกับวัตถุที่เรียงซ้อนกันเช่นกันกับเครื่องมือในกลุ่มของ Shape Mode แต่เมื่อตัดหรือรวมวัตถุแล้วจะเปลี่ยนวัตถุให้รวมกันเป็นรูปเดียวทันที รายละเอียดดังนี้
ภาพที่ 9.18 แสดงภาพ
v
ดีไวน์ (Divide)
ตัดส่วนที่ทับกันออกเป็นส่วน สามารถดึงภาพออก แต่ละชิ้นส่วนได้ดังรูป
1
2
ภาพที่ 9.19 แสดงภาพ
v
ทริม (Trim)
ตัดส่วนที่ทับกันออกโดยวัตถุด้านหลังยังคงเดิม และสามารถแยก
ชิ้นส่วนออกจากกันได้ดังรูป
1
2
ภาพที่ 9.20 แสดงภาพ
v
เมิจ (
Merge)
รวมวัตถุที่มีสีเหมือนกันเข้าด้วยกัน และตัดวัตถุออกจากกันเมื่อ
มีสีต่างกัน
1
2
ภาพที่ 9.21 แสดงภาพ
v
คร็อป (Crop)
เพื่อตัดวัตถุส่วนที่ไม่ทับกันออกและคงสีของวัตถุด้านล่าง
หรือส่วนที่ตัดออก
1
2
ภาพที่ 9.22 แสดงภาพ
v
เอาท ไลน์ (Outline)
ปรับวัตถุให้แสดงเฉพาะเส้นโดยลบพื้นออก เหลือเฉพาะเส้นขอบ
1
2
ภาพที่ 9.23 แสดงภาพ
v
ไมนัส แบ็ค (Minus Back)
ตัดส่วนด้านหน้าออก โดยใช้วัตถุที่อยู่ด้านหลังในการตัด
1
2
ภาพที่ 9.24 แสดงภาพ
9.4 การจัดลำดับการวางรูปภาพ
การจัดวางรูปภาพที่มีการวางซ้อนกันหลายๆ ภาพ ถ้าต้องการให้สวยงามต้องมีการจัดวางแบบมีลำดับภาพ เพื่อให้ได้องค์ประกอบภาพที่เหมาะสม มีวิธีการทำดังนี้
1.
บริง ทู ฟรัน (
Bring to Front)
นำรูปภาพไว้ข้างหน้าสุด คลิกรูปภาพที่ต้องการ (สีเขียว) à Arrange à แล้วคลิกขวาเลือก Bring to Front
ผลที่ได้
ภาพที่ 9.25 แสดงภาพ
2.
บริง ทู ฟอเวิด (
Bring Forward)
นำรูปภาพไว้ข้างหน้า คลิกรูปภาพที่ต้องการ (สีชมพู) à แล้ว คลิกขวาเลือก Bring Forward
ผลที่ได้
ภาพที่ 9.26 แสดงภาพ
3.
เซ็น เบรคเวิด (
Send Backward)
ย้ายรูปภาพไว้ข้างหลัง คลิกรูปภาพที่ต้องการ (สีเขียว) à Arrange à แล้วคลิกขวาเลือก Send Backward
ผลที่ได้
ภาพที่ 9.27 แสดงภาพ
4.
เซ็น ทู เบรค (
Send to back)
ย้ายรูปภาพไว้ข้างหลังสุด คลิกรูปภาพที่ต้องการ (สีเขียว) à Arrange à แล้วคลิกขวาเลือก Send to back