หน่วยที่ 6 การระบายสี และภาพกราฟิกสำหรับเว็บเพจ

หนว่ ยที่ 6

การระบายสี และภาพกราฟกิ สำหรับเวบ็ เพจ

วิชาโปรแกรมกราฟิก รหัสวชิ า 20204-2007

06 หน่วยที่ 6 การระบายสี และภาพกราฟิกสำหรับเว็บเพจ

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 ตวั มีความสามารถในการใช้งานแตกตา่ งกันไป

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

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

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

แผนกวชิ าคอมพวิ เตอรธ์ รุ กิจ วทิ ยาลยั การอาชีพนครนายก 1

วชิ าโปรแกรมกราฟิก รหัสวิชา 20204-2007

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. เลือกรปู แบบและกำหนดค่าตามตอ้ งการแลว้ คลิกเมาสซ์ า้ ยค้างไวร้ ะบาย
บรเิ วณพื้นทก่ี ารทำงานเพื่อวาดภาพตามตอ้ งการ ดงั นี้

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

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

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

แผนกวิชาคอมพวิ เตอรธ์ ุรกจิ วิทยาลัยการอาชีพนครนายก 2

วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007

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

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

6.1.3.2 เครื่องมอื Art History Brush Tool คือ การเปลย่ี นภาพถา่ ยธรรมดา
ใหม้ รี ูปแบบเหมอื นกับงานศลิ ปะ เกิดจากการบิดจุดสีภาพใหห้ มนุ วน โดยการแดรกเมาส์ผ่านสว่ นต่างๆ ของภาพ
ทำใหผ้ ลลัพธ์เหมือนกับงานศลิ ปะ กำหนดค่าต่างๆ บน Option Bar ดงั ภาพ

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

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

สี

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

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

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 ต่างๆ

แผนกวชิ าคอมพิวเตอร์ธุรกิจ วิทยาลัยการอาชพี นครนายก 3

วิชาโปรแกรมกราฟกิ รหัสวชิ า 20204-2007

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

2. สรา้ งขอบเขตพ้ืนที่ภาพใหภ้ าพ ณ จุดท่ีตอ้ งการเติมสี

3. คลกิ เมนู Edit → Fill หรอื Shift + F5 กำหนดคา่ ต่างๆ ดังภาพ

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

2

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

Foreground Color (สชี มพ)ู

การกำหนดค่าการผสานและความโปร่งใสของภาพ ถ้ากำหนดค่ามากจะทำให้สีมีความเข้มสูง แต่ถ้า

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

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

แผนกวชิ าคอมพิวเตอรธ์ รุ กิจ วทิ ยาลัยการอาชพี นครนายก 4

วิชาโปรแกรมกราฟกิ รหัสวิชา 20204-2007

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

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

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

6.4.2 ขนาดของภาพ คือ ภาพจะมผี ลโดยตรงต่อผู้เข้ามาใช้งานเวบ็ ไซต์ถา้ มีภาพขนาดใหญ่ จะทำให้การ
โหลดภาพนานเกินไปทำใหผ้ เู้ ข้าชมเว็บไซต์รอนานซ่ึงอาจปิดเวบ็ ไซตน์ ั้นท้งั ๆ ยังไม่ได้เข้าชม ดงั นน้ั จงึ จำเปน็ ตอ้ งตัด
ภาพออกเป็นภาพเล็กๆ เรียงลำดับก่อนหลัง แล้วนำไปใช้งานจริงในโปรแกรมสำหรับสร้าง 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 ล้านสี และบันทึกไฟล์ภาพพืน้ หลังแบบพ้ืน
หลังทะลุได้

แผนกวชิ าคอมพวิ เตอร์ธรุ กิจ วทิ ยาลัยการอาชพี นครนายก 5

วชิ าโปรแกรมกราฟิก รหัสวชิ า 20204-2007

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

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

เปน็ สว่ นๆ จะปรากฏกรอบรอบๆ ภาพที่ถูกตัด

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

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

6.4.5.2 การปรบั แตง่ Slice ด้วยเคร่ืองมือ Slice Select Tool คือ หลังจากตัดภาพแล้ว

พบว่าเส้น Slice ที่สร้างไว้ยังไม่เรียบร้อย หรือสร้าง Slice ภาพมากเกินไป สามารถใช้เครื่องมือในการย่อหรือ

ขยายขอบเขตภาพได้ ข้ันตอนดังนี้

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

แก้ไข (สีเสน้ เปลยี่ นเปน็ สนี ้ำตาลสามารถคลิกปุ่ม สเ่ี หลี่ยมเพ่อื แก้ไข)

2. คลิกเมาส์ที่จุดสเ่ี หลยี่ มแดรกเมาสป์ รับแต่งเสน้ ขอบเขตเสน้ ได้

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

ภาพเส้น Slice จะหายไป

6.4.6 การออกแบบป่มุ ลิงค์ คอื การออกแบบปุ่มลิงคเ์ พอื่ ความสวยงามของ Web Page โดยการอาศยั

รูปแบบสำเร็จรูปทก่ี ำหนดจากพาเลต Style ขั้นตอนดังน้ี

1. สร้างไฟลใ์ หม่ แลว้ เลอื กเครอื่ งมอื วาดรปู สีเ่ หลย่ี มมุมมน

2. เปิดพาเลต Style แล้วเลือกชดุ สไตล์ แบบ Web Style

3. คลิกเลอื กรปู แบบป่มุ ทีต่ อ้ งการ → ลกั ษณะปุ่มท่ไี ด้

4. พิมพ์ข้อความ “การออกแบบกราฟิก” บนปุ่มแล้วบนั ทกึ ไฟล์

ถา้ ต้องการป่มุ สถานะแบบ Rollover ให้ทำตามขอ้ 3-4 อีกครง้ั แล้วบนั ทกึ ไฟล์

แผนกวชิ าคอมพิวเตอรธ์ รุ กจิ วทิ ยาลยั การอาชีพนครนายก 6

วิชาโปรแกรมกราฟิก รหัสวิชา 20204-2007

11 วำดรูปส่ีเหล่ียมมุมมน
เปิ ดพำเลต Style ลกั ษณะป่ มุ ท่ีได้

2 3

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

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

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

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

แผนกวชิ าคอมพิวเตอรธ์ รุ กิจ วิทยาลัยการอาชีพนครนายก 7

วิชาโปรแกรมกราฟิก รหัสวชิ า 20204-2007

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

แผนกวิชาคอมพิวเตอรธ์ รุ กิจ วทิ ยาลัยการอาชีพนครนายก 8

วิชาโปรแกรมกราฟกิ รหัสวิชา 20204-2007

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

แผนกวชิ าคอมพวิ เตอรธ์ รุ กจิ วทิ ยาลัยการอาชีพนครนายก 9