วันพุธที่ 20 กุมภาพันธ์ พ.ศ. 2562

บทที่4 การตกแต่งภาพสำหรับเว็บไซต์

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

4.1 รูปแบบชองไฟล์ภาพสำหรับเว็บไซต์
    การนำรูปภาพมาใช้ในหน้าเว็บเพจให้เกิดความสวยงามและดึงดูดความสนใจจากผู้ใช้งานในหน้าเว็บเพจอาจมีรูปวาดที่มีลักษณะ แตกต่างกันออกไปเช่นภาพนิ่งภาพเคลื่อนไหวภาพที่ผ่านการปรับแต่งเรียบร้อยแล้วและภาพโปร่งใสดังนั้นการเลือกใช้รูปภาพควรเลือกใช้อย่างเหมาะสมและตามความจำเป็นเพราะไฟล์ภาพรูปที่ใช้ในหน้าเว็บเพจอาจมีขนาดใหญ่ทำให้ผู้ใช้งานเขถึงรูปภาพนั้นๆได้ยากใช้เวลานานในการโหลดหน้าเว็บเพจและเกิดความไม่พอใจเมื่อเยี่ยมชมเว็บไซต์
        รูปแบบของไฟล์ภาพที่ใช้ในเว็บเพจมีดังต่อไปนี้
     
   4.1.1ไฟล์สกุลGIF 
                 ไฟล์สกุลGIFเป็นรูปแบบไฟล์ที่มีขนาดเล็กและมีคุณภาพต่ำเนื่องจากมีจำนวนสี น้อยสามารถเคลื่อนไหวและทำให้พื้นหลังเป็นตรงใส่ได้เปิดได้ทุกเว็บเบาเซอร์
      4.1.2ไฟล์สกุลPNG
                ไฟล์สกุลPNGเป็นรูปแบบไฟล์ภาพที่นิยมนำมาใช้ในการปรับแต่งภาพและนำมาประยุกต์ใช้ในการสร้างเว็บไซต์ต่างๆเพราะมีขนาดไม่ใหญ่เกินไปและสามารถนำไปเป็นพื้นหลังภาพโปร่งใสได้
      
4.1.3ไฟล์สกุลJPEG
               ไฟล์สกุลJPEGจีเป็นรูปแบบของไฟล์ภาพที่มีความละเอียดหรือคุณภาพสูงสามารถเรียกดูได้ทุกเว็บบราวเซอร์แต่ถ้าสกุลไฟล์เจพีอีกทีเป็นไฟล์ที่มีขนาดใหญ่และไม่สามารถทำพื้นหลังเป็นโปรไซมอนกับการนำเสนองานด้วยภาพ

4.2 การปรับแต่งภาพ
    เว็บไซต์ที่ผู้ใช้ต้องการเข้าใช้งานและดึงดูดความสนใจได้จำเป็นต้องมีรูปภาพเพื่อนำเสนอหรือเปล่าก็เนื้อหาที่มีอยู่ในเว็บไซต์และทำให้ผู้ที่เข้าเยี่ยมชมเว็บไซต์เข้าใจเนื้อหามากขึ้นดังรูปที่ 4.4
    
    ดังนั้นการปรับแต่งภาพเพื่อนำภาพไปใส่ในหน้าเว็บเพจจึงมีความสำคัญเป็นอย่างมากและให้ความสำคัญกับการนำพาไปใส่ในหน้าเว็บเพจจึงมีการปรับแต่งภาพเพื่อให้ภาพมีความสวยงามมากขึ้นซึ่งมีการปรับแต่พื้นฐานดังต่อไปนี้

    4.2.1การปรับแสงสว่างและความคมชัดให้แก่ภาพด้วยBrightness/Contrast
         การปรับแสงสว่างและความคมชัดให้กับภาพด้วยBrightness/Contrast มีขั้นตอนดังกล่าวนี้
        1 เปิดภาพที่ต้องการปรับแต่สว่างและความคมชัดให้กับภาพขึ้นมาโดยวิธีใดก็ได้
        2.ชิกเลือก Image >Adjustment >Brightness/Contrast
        3 ปรากฏหน้าต่างของ>Brightness/Contrast
            (1)การปรับแต่งค่าความสว่างความคมชัดในช่องBrightnessเมื่อเลื่อนด้านขวาคือการเพิ่มค่าของความสว่างและเลื่อนไปทางด้านซ้ายเพื่อลดความสว่างลง
            (2)การปรับแต่งค่าความสว่างและความคมชัดในช่องcontrastเมื่อเลื่อนด้านขวาคือการเพิ่มค่าความคมชัดและเลื่อนไปทางด้านซ้ายเพื่อลดความคมชัดลง

        4ผลลัพธ์ที่ได้จากการปรับแต่งความสว่างและความคมชัดด้วยBrightness/Contrast
    
    4.2.2การปรับความสมดุลสีของภาพด้วยcolor Balance
ภาพที่นำมาใช้ในการออกแบบหรือนำมาประกอบเนื้อหาภายในหน้าเว็บอาจไม่มีความสมดุลจองสี การปรับความสมดุลสีให้กับภาพด้วยcolor Balance สามารถปรับแต่งค่าสีให้มีความสมดุลและสามารถปรับค่าสีตามความต้องการได้ ซึ่งมีขั้นตอนการปรับความสมดุลสีของภาพด้วย color Balance ดังต่อไปนี้ 
        1.เปิดภาพที่ต้องการปรับความสมดุลของภาพโดยการคลิกที่เมนูFile>Openหรือ Ctrl+O
        2.คลิกเลือกเมนู Image>Adjustments>color Balance หรือกดคีย์ Ctrl+B
        3.ลากเพื่อค้าฝนหาสีที่ต้องการ
        4.ปรับค่าตามความต้องการจากนั้นคลิกที่ปุ่มOk
        5.ผลลัพธ์ที่ได้จากการปรับค่าความสมดุลสีมให้กับภาพ
    
    4.2.3 การตกแต่งภาพด้วย Curves
ภาพที่มีแสงสว่างและความคมชัดน้อยทำให้สีของภาพจางและมัว การตกแต่งภาพด้วยCurvesเป็นอีกหนึ่งวิธีที่สามารถปรับแสงสว่างและความคมชัดได้ซึ่งมีวิธีการทำดังต่อไปนี้
        1.เปิดภาพที่ต้องการปรับแต่งด้วยCurvesโดยการคลิกที่เมนูFile>openหรือctrl+O
        2.คลิกเลือกเมนูImage>Adjustment>Curvesหรือกดคีย์ลัดCtrl+M
        3.ปรับแสงสว่างและความคมชัดโดนการคลิดงกลากเส้นขึ้น-ลงหรือลากไปทางด้านซ้าย-ขวาดังรูป
        4.ผลลัพธ์ที่ได้จากการปรับแต่งภาพด้วยCurves
    
    4.2.4เพิ่มEffectมห้กับภาพด้วยLighting Effect
         การเพิ่มEffectด้วยLight Effect คือการเพิ่มลดและกำหนดทิศทางขอแสงมห้กับภาพเพื่อให้ภาพมีความน่าสนใจและมีมิติ ซึ่งมีขั้นตอนการเพิ่มEffect ดังต่อไปนี้
        1.เปิดภาพที่ต้องการใส่Effectโดนการคลิกที่เมนูFile>OpenหรือCtrl+O
        2.คลิกเลือกเมนูFilter>Render>Lighting Effects
        3.การปรับค่าของเเสงต่างๆสามารถปรับได้ที่รูปวงกลมโดยการดึงจุดวงกลมเล็กๆหรือปรับค่าพาเนล จากนั้นคลิกปุ่มOk
        4.ผลลัพธ์ของการปรับเเสงEffect

4.3การบันทึกและกำหนดคุณสมบัติไฟล์ภาพ
      เมื่อทำการปรับแต่งภาพหรือแก้ไขภาพเพื่อให้มีความสวยงามมากขึ้น จากนั้นต้องทำการบันทึกไฟล์ในรูปแบบต่างๆ เพื่อนนำภาพที่ได้ปรับแต่งไปใช้งานตามวัตถุประสงค์ โดยมีขั้นตอนดัต่อไปนี้
        1.คลิกที่เมนูFile+Save Asหรือกดคีย์Shift+Ctrl+S
        2.เลือกตำแหน่งที่ต้องการจัดเก็บไฟล์ภาพ
        3.ตั้งชื่อให้กับไฟล์ภาพ
        4.เลือกรูปแบบไฟล์
        5.คลิกปุ่มOk

4.1 รูปแบบชองไฟล์ภาพสำหรับเว็บไซต์

การนำรูปภาพมาใช้ในหน้าเว็บเพจให้เกิดความสวยงามและดึงดูดความสนใจจากผู้ใช้งานในหน้าเว็บเพจอาจมีรูปวาดที่มีลักษณะ แตกต่างกันออกไปเช่นภาพนิ่งภาพเคลื่อนไหวภาพที่ผ่านการปรับแต่งเรียบร้อยแล้วและภาพโปร่งใสดังนั้นการเลือกใช้รูปภาพควรเลือกใช้อย่างเหมาะสมและตามความจำเป็นเพราะไฟล์ภาพรูปที่ใช้ในหน้าเว็บเพจอาจมีขนาดใหญ่ทำให้ผู้ใช้งานเขถึงรูปภาพนั้นๆได้ยากใช้เวลานานในการโหลดหน้าเว็บเพจและเกิดความไม่พอใจเมื่อเยี่ยมชมเว็บไซต์
        รูปแบบของไฟล์ภาพที่ใช้ในเว็บเพจมีดังต่อไปนี้
     
   4.1.1ไฟล์สกุลGIF 
                 ไฟล์สกุลGIFเป็นรูปแบบไฟล์ที่มีขนาดเล็กและมีคุณภาพต่ำเนื่องจากมีจำนวนสี น้อยสามารถเคลื่อนไหวและทำให้พื้นหลังเป็นตรงใส่ได้เปิดได้ทุกเว็บเบาเซอร์
      4.1.2ไฟล์สกุลPNG
                ไฟล์สกุลPNGเป็นรูปแบบไฟล์ภาพที่นิยมนำมาใช้ในการปรับแต่งภาพและนำมาประยุกต์ใช้ในการสร้างเว็บไซต์ต่างๆเพราะมีขนาดไม่ใหญ่เกินไปและสามารถนำไปเป็นพื้นหลังภาพโปร่งใสได้
      
4.1.3ไฟล์สกุลJPEG
               ไฟล์สกุลJPEGจีเป็นรูปแบบของไฟล์ภาพที่มีความละเอียดหรือคุณภาพสูงสามารถเรียกดูได้ทุกเว็บบราวเซอร์แต่ถ้าสกุลไฟล์เจพีอีกทีเป็นไฟล์ที่มีขนาดใหญ่และไม่สามารถทำพื้นหลังเป็นโปรไซมอนกับการนำเสนองานด้วยภาพ

4.2 การปรับแต่งภาพ

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

    4.2.1การปรับแสงสว่างและความคมชัดให้แก่ภาพด้วยBrightness/Contrast
         การปรับแสงสว่างและความคมชัดให้กับภาพด้วยBrightness/Contrast มีขั้นตอนดังกล่าวนี้
        1 เปิดภาพที่ต้องการปรับแต่สว่างและความคมชัดให้กับภาพขึ้นมาโดยวิธีใดก็ได้
        2.ชิกเลือก Image >Adjustment >Brightness/Contrast
        3 ปรากฏหน้าต่างของ>Brightness/Contrast
            (1)การปรับแต่งค่าความสว่างความคมชัดในช่องBrightnessเมื่อเลื่อนด้านขวาคือการเพิ่มค่าของความสว่างและเลื่อนไปทางด้านซ้ายเพื่อลดความสว่างลง
            (2)การปรับแต่งค่าความสว่างและความคมชัดในช่องcontrastเมื่อเลื่อนด้านขวาคือการเพิ่มค่าความคมชัดและเลื่อนไปทางด้านซ้ายเพื่อลดความคมชัดลง

        4ผลลัพธ์ที่ได้จากการปรับแต่งความสว่างและความคมชัดด้วยBrightness/Contrast
    
    4.2.2การปรับความสมดุลสีของภาพด้วยcolor Balance
ภาพที่นำมาใช้ในการออกแบบหรือนำมาประกอบเนื้อหาภายในหน้าเว็บอาจไม่มีความสมดุลจองสี การปรับความสมดุลสีให้กับภาพด้วยcolor Balance สามารถปรับแต่งค่าสีให้มีความสมดุลและสามารถปรับค่าสีตามความต้องการได้ ซึ่งมีขั้นตอนการปรับความสมดุลสีของภาพด้วย color Balance ดังต่อไปนี้ 
        1.เปิดภาพที่ต้องการปรับความสมดุลของภาพโดยการคลิกที่เมนูFile>Openหรือ Ctrl+O
        2.คลิกเลือกเมนู Image>Adjustments>color Balance หรือกดคีย์ Ctrl+B
        3.ลากเพื่อค้าฝนหาสีที่ต้องการ
        4.ปรับค่าตามความต้องการจากนั้นคลิกที่ปุ่มOk
        5.ผลลัพธ์ที่ได้จากการปรับค่าความสมดุลสีมให้กับภาพ
    
    4.2.3 การตกแต่งภาพด้วย Curves
ภาพที่มีแสงสว่างและความคมชัดน้อยทำให้สีของภาพจางและมัว การตกแต่งภาพด้วยCurvesเป็นอีกหนึ่งวิธีที่สามารถปรับแสงสว่างและความคมชัดได้ซึ่งมีวิธีการทำดังต่อไปนี้
        1.เปิดภาพที่ต้องการปรับแต่งด้วยCurvesโดยการคลิกที่เมนูFile>openหรือctrl+O
        2.คลิกเลือกเมนูImage>Adjustment>Curvesหรือกดคีย์ลัดCtrl+M
        3.ปรับแสงสว่างและความคมชัดโดนการคลิดงกลากเส้นขึ้น-ลงหรือลากไปทางด้านซ้าย-ขวาดังรูป
        4.ผลลัพธ์ที่ได้จากการปรับแต่งภาพด้วยCurves
    
    4.2.4เพิ่มEffectมห้กับภาพด้วยLighting Effect
         การเพิ่มEffectด้วยLight Effect คือการเพิ่มลดและกำหนดทิศทางขอแสงมห้กับภาพเพื่อให้ภาพมีความน่าสนใจและมีมิติ ซึ่งมีขั้นตอนการเพิ่มEffect ดังต่อไปนี้
        1.เปิดภาพที่ต้องการใส่Effectโดนการคลิกที่เมนูFile>OpenหรือCtrl+O
        2.คลิกเลือกเมนูFilter>Render>Lighting Effects
        3.การปรับค่าของเเสงต่างๆสามารถปรับได้ที่รูปวงกลมโดยการดึงจุดวงกลมเล็กๆหรือปรับค่าพาเนล จากนั้นคลิกปุ่มOk
        4.ผลลัพธ์ของการปรับเเสงEffect

4.3การบันทึกและกำหนดคุณสมบัติไฟล์ภาพ

 เมื่อทำการปรับแต่งภาพหรือแก้ไขภาพเพื่อให้มีความสวยงามมากขึ้น จากนั้นต้องทำการบันทึกไฟล์ในรูปแบบต่างๆ เพื่อนนำภาพที่ได้ปรับแต่งไปใช้งานตามวัตถุประสงค์ โดยมีขั้นตอนดัต่อไปนี้
        1.คลิกที่เมนูFile+Save Asหรือกดคีย์Shift+Ctrl+S
        2.เลือกตำแหน่งที่ต้องการจัดเก็บไฟล์ภาพ
        3.ตั้งชื่อให้กับไฟล์ภาพ
        4.เลือกรูปแบบไฟล์
        5.คลิกปุ่มOk

บทที่4 การตกแต่งภาพสำหรับเว็บไซต์

นื้อหาสาระ     ก่อนการออกแบบเว็บไซต์จำเป็นต้องเตรียมเนื้อหาสำหรับการนำเสนอให้ได้เนื้อหาที่มีประสิทธิภาพพร้อมกับมีรูปภาพที่เหมาะสมกับเนื้อ...