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