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

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

      6.1 เครื่องมือการระบายสี

              เครื่องมือที่ใช้ระบายสีมีอยู่มากมาย ซึ่งแต่ละแบบมีความสามารถในการใช้งานที่แตกต่างกันขึ้นอยู่กับภาพที่สร้าง และควรเลือกเครื่องมือชนิดใดเพื่อให้เหมาะกับชิ้นงานนั้นๆ โดยแบ่งเครื่องมือระบายสีได้ 4 กลุ่มดังนี้

               6.1.1 กลุ่มเครื่องมือการไล่โทนสีและเทสี
กลุ่มเครื่องมือสำหรับการไล่สีและเทสีพื้นต่างๆในรูปดังนี้

                            

    1. กราเดี้ยน ทูล ( Gradient Tool ) คือ การไล่โทนสีให้ภาพนำไปสร้าง พื้นหลังให้รูปภาพต่างๆ หรือสร้างเอฟเฟ็กต์ในการออกแบบภาพการลงสีแบบไล่โทนสีด้วยเครื่องมือ Gradient Tool คือการเติมสีแบบไล่โทนสี สามารถกำหนดสีและทิศทางของแถบสีอย่างอิสระ รูปแบบวิธีการปรับแต่ง Option Bar ดังรูป

                        



            

            6.1.2 เพนท บัคเค็ท (Paint Bucket Tool) คือ การเทสีลงไปในขอบเขตที่กำหนดไว้

 และรูปแบบการเทสีพื้นผิว แบบ แพทเทิน (Pattern) สำเร็จในโปรแกรม 

               การเติมสีแบบ เพนท บัคเค็ท (Paint Bucket) คือ การเติมสีด้วย โดยใช้สีโฟกราว (Foreground) หรือสีแบบแพทเทิล (Pattern) มีขั้นตอนดังนี้

      1. คลิกเครื่องมือ Paint Bucket Tool
               2.ปรับเปลี่ยน Option Bar
               3. คลิกบริเวณที่ต้องการแล้วเทสีลงไป

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

                     

 

       6.1.2.1 บรัช ทูล (Brush Tool) คือ เครื่องมือสำหรับการระบายสี โดยสามารถกำหนด 

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

       6.1.2.2 เพนซิล ทูล (Pencil Tool) คือ เครื่องมือสำหรับการระบายสีเป็นรูปภาพ ผลของ

การใช้งานจะได้เส้นที่เป็นเส้นแข็ง และหยาบซึ่งเหมาะกับภาพบางประเภทเท่านั้น

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

      6.1.2.4 มิกเซอ บรัช ทูล (Mixer Brush Tool) คือ เครื่องระบายสี โดยสามารถเลือก

กำหนดรูปแบบได้มากมาย และได้เส้นที่มีสีอ่อนหรือนุ่มนวลกว่าโดยยกตัวอย่างการใช้เครื่องมือ

วาดภาพและระบายสี คือ Brush Tool และ Pencil Tool

     6.1.2.1 เครื่องมือ บรัช ทูล (Brush Tool) คือ เครื่องมือที่โดดเด่นที่สุดในกลุ่มเนื่องจากมีความสามารถในการทำงาน และประยุกต์ใช้กับการวาดภาพร่วมกับการปรับแต่งภาพถ่าย การระบายสีมีขั้นตอนดังนี้

      1. เลือกเครื่องมือ ออปชัน การปรับความเข้ม Brush Tool บรัช ทูล มีวิธีการปรับรูปแบบความเข้มการระบายสี เช่น

      2. Opacity คือ การกำหนดความเข้มสูงสุดของเครื่องมือในการแดรกเมาส์ระบายสีหนึ่งครั้ง เมื่อปล่อยเมาส์แล้วระบายสีซ้ำที่จุดเดิมอีกก็จะเข้มขึ้น

       3. Airbrush ผู้ใช้สามารถคลิกเลือกปุ่มนี้ เพื่อกำหนดความเข้มของสีที่ระบายลงไปจากการ
คลิกเมาส์ค้างไว้ที่จุดเดิมซึ่งมีหลักการเหมือนกับการพ่นสีด้วย Airbrush

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

         

                         

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

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

      6.2 กลุ่มเครื่องมือการลบ

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

                             

      1. อิราสเซอร์ ทูล (Eraser Tool) คือ การลบภาพในเลเยอร์ปกติภาพที่แดรกเมาส์
ผ่านจะหายไป

      2. แบรกกราว อิราส เซอร์ ทูล (Background Eraser Tool) คือ เครื่องมือสำหรับ
ลบภาพในเลเยอร์พื้นหลัง ภาพที่ใช้งานเครื่องมือนี้แล้วเลเยอร์พื้นหลังจะถูกลบไป และถูกปลี่ยนเป็นเลเยอร์ปกติจุดที่ถูกลบทิ้งจะเป็นพื้นหลังแบบโปร่งใส (Transparent) ทันที

      3. เมจิก อิราสเซอร์ ทูล (Magic Eraser Tool) คือ เครื่องมือที่คลิกช่วงสีที่ ต้องการลบภาพก่อน แล้วกดปุ่ม Delete เพื่อลบทิ้ง (แต่มีข้อจำกัด คือ ตัวเลือกนี้จะใช้งานไม่ได้ถ้าหากภาพมีการย่อหรือขยายด้วยคำสั่ง Image Size ขณะที่ปรับแต่งรูปภาพ)                                    

             6.2.1 การลบภาพด้วยเครื่องมือ อีราสเซอร์ ทูล (Eraser Tool)

      - กำหนดขนาดเครื่องมือ Tool
             - เลือกรูปแบบของหัวเครื่องมือแบบ หัวแปรง ดินสอ หรือสี่เหลี่ยม
             - กำหนดเปอร์เซ็นต์ความหนักเครื่องมือในการแดรกเมาส์
             - คลิกเลือกเมื่อต้องการเรียกภาพเดิมกลับเมื่อแดรกเมาส์ผ่าน
             - ความโปร่งใสของเครื่องมือ
             - อิราสเซอร์ ทูล ใช้ลบรูปภาพออกจากพื้นหลัง
             - คลิกเมาส์ซ้ายค้างไว้ ลบบริเวณที่ต้องการลบ

     6.2.2 การลบภาพด้วยเครื่องมือแบลกกราว อีราสเซอร์ ทูล (Background Eraser Tool) คือ
เครื่องมือสำหรับคลิกช่วงสีที่ต้องการลบ แล้วกดปุ่ม Delete เพื่อลบทิ้ง โดยการปรับค่าออปชันต่างๆ
มีดังนี้

             - กำหนดขนาดเครื่องมือ Tool

             - คลิกเลือกรูปแบบความต่อเนื่อง
             - ของสีที่ต้องการลบทิ้ง
             - กำหนดเปอร์เซ็นต์ความต่อเนื่องของสี
             - คลิกเลือกออปชันนี้เพื่อป้องกันไม่ให้
             - ลบสีที่กำหนดไว้บน Foreground
             - คลิกเลือกวิธีการกำหนดสีต้นแบบสำหรับการลบทิ้ง

           6.2.3 การลบภาพด้วยเครื่องมือ เมจิก อีราสเซอร์ ทูล (Magic Eraser Too) คือ
 เครื่องมือลบภาพที่ต้องคลิกช่วงสีที่ต้องการลบ แล้วกดปุ่ม Delete เพื่อลบทิ้งเครื่องมือนี้จะใช้งานไม่ได้ถ้าหากรูปภาพดังกล่าวนั้นมีการย่อหรือขยายด้วยคำสั่งอิมเมท ไซน์ ( Image Size ) ขณะที่ปรับแต่ง โดยการปรับค่าออปชันต่างๆ มีดังนี้

                6.3 การเติมสีและแพทเทิล (Pattern)  ให้ภาพด้วยคำสั่ง ฟิวส์ ( Fill) การเติมสีให้ภาพ ด้วยคำสั่ง ฟิวส์ ( Fill ) สามารถเทสีลงในภาพ ก่อนเทสีลงต้องเลือกขอบเขตพื้นที่ก่อนมีการเทสี ซึ่งมีขั้นตอนดังนี้

                1. กำหนดสีด้านบน โฟกราว คัลเลอร์ (Foreground Color)

                2. สร้างขอบเขตพื้นที่ภาพ (Selection) ให้ภาพ ณ จุดที่ต้องการลงสี
                3. คลิกเมนู Edit--> Fill หรือ Shift + F5 โดยการปรับค่าต่างๆ มีดังนี้

                     

      

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

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

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

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

         

       6.4.3 ความละเอียดของภาพ การกำหนดความละเอียดของภาพจะมีผลต่อขนาดของ
ภาพถ้ามีการกำหนดความละเอียดของภาพมาก จะทำให้การแสดงผลภาพบนเว็ปไซต์ช้ากว่าภาพที่มีความละเอียดต่ำ

               1.การบันทึกไฟล์ คือ การบันทึกไฟล์เพื่อปรับเปลี่ยนความละเอียดของภาพ มีขั้นตอนดังนี้


(1) คลิกเมนู File Save for web มีหน้าต่างดังรูป


(2) ลักษณะภาพที่ได้


(3) คลิกปุ่ม Save เพื่อบันทึกภาพ

                           

(4)เลือก Folder เก็บภาพและกำหนดการบันทึกภาพเฉพาะภาพเท่านั้น โดยเลือกรูปแบบ Image Only จากช่อง Format และคลิกปุ่ม Save

           6.4.4 ส่วนประกอบสำคัญของ Web Page คือการกำหนดรูปแบบของ Web Page ให้มีส่วนต่างๆ แยกออกจากกันอย่างชัดเจนเพื่อลดความซับซ้อนในการเรียกใช้งาน โดยโครงสร้างหลักที่นิยมใช้มีส่วนประกอบ ดังรูปนี้

                                                         

      6.4.5 การใช้เครื่องมิือสำหรับการออกแบบ Web Page โดยขั้นตอนการออกแบบ Web Page มีเครื่องมือที่เกี่ยวข้อง 2 ตัวคือ Slice Tool และ Select Slice Tool ซึ่งเป็นขั้นตอนสุดท้ายที่สำคัญหลักจากออกแบกราฟิก ดังนี้

            1. การใช้เครื่องมือ Slice Tool คือตัดภาพเป็นภาพเล็กๆ มีขั้นตอนดังนี้
(1) เปิดภาพที่นำไปใช้งานบน Web Page
(2) คลิกเลื่องเครื่องมือ Slice Tool แล้สวแดรกเมาส์คลุมภาพให้ได้ขนาดที่ต้องดการตัดภาพเป็นส่วนๆ จะปรากฎรอบๆ ภาพที่ถูกตัด
(3) แดรกเมาส์บนภาพที่เหลื่อโดยเส้นกรอบที่แดรกเมาส์ผ่านเกิดเป็นเส้นติดกันพอดี (ถ้ามีช่องว่างเล็กๆ จะนับเป็นไฟล์ลำดับถัดมา)
              6.4.6 การออกแบบปุ่มลิงค์ คือ การออกแบบปุ่มลิงค์เพื่อความสวยงามของ Web Page โดยการอาศัยรูปแบบสำเร็จรูปที่กำหนดจากพาเลต Style มีขั้นตอนดังนี้
1. สร้างไฟล์ใหม่ แล้วเลือกเครื่องมือ วาดรูปสี่เหลี่ยมมุมมน
2. เปิดพาเลต Style แล้วเลือกชุดสไตล์แบบ Web Page
3. คลิกเลือกรูปแบบปุ่มที่ต้องการ ลักษณะปุ่มที่ได้
4. พิมข้อแความ "การออกแบบกราฟิก" บนปุ่มแล้วบันทึกไฟล์