tag:blogger.com,1999:blog-74277250013364479382023-07-17T21:54:51.275-07:00บทที่4การออกแบบเเละพัฒนาเว็บไซต์http://www.blogger.com/profile/09284739676133932227noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-7427725001336447938.post-55788472761224750482019-02-25T04:36:00.001-08:002019-02-25T04:36:32.840-08:00การปรับแต่งภาพ<h3 align="left" id="sites-page-title-header" style="background-color: white; color: #b0b366; font-family: Impact, fantasy; font-size: 2.5em; margin: 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;" xmlns="http://www.w3.org/1999/xhtml">
<div style="color: #444444; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; font-weight: 400;">
เว็บไซต์ที่ผู้ใช้ต้องการเข้าใช้งานและดึงดูดความสนใจได้จำเป็นต้องมีรูปภาพเพื่อนำเสนอหรือเปล่าก็เนื้อหาที่มีอยู่ในเว็บไซต์และทำให้ผู้ที่เข้าเยี่ยมชมเว็บไซต์เข้าใจเนื้อหามากขึ้นดังรูปที่ 4.4</div>
<div style="color: #444444; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; font-weight: 400;">
</div>
</h3>
<div class="sites-canvas-main" id="sites-canvas-main" style="background-color: white; background-image: none !important; color: #444444; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; min-height: 150px; overflow: hidden; padding-bottom: 5px; padding-top: 15px;">
<img height="282" src="http://q.lnwfile.com/qx9qh4.jpg" width="320" /></div>
<div class="sites-canvas-main" id="sites-canvas-main" style="background-color: white; background-image: none !important; color: #444444; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; min-height: 150px; overflow: hidden; padding-bottom: 5px; padding-top: 15px;">
<div style="font-size: 13.3333px;">
<div>
ดังนั้นการปรับแต่งภาพเพื่อนำภาพไปใส่ในหน้าเว็บเพจจึงมีความสำคัญเป็นอย่างมากและให้ความสำคัญกับการนำพาไปใส่ในหน้าเว็บเพจจึงมีการปรับแต่งภาพเพื่อให้ภาพมีความสวยงามมากขึ้นซึ่งมีการปรับแต่พื้นฐานดังต่อไปนี้</div>
<div>
<br /></div>
<div>
4.2.1การปรับแสงสว่างและความคมชัดให้แก่ภาพด้วยBrightness/Contrast</div>
<div>
การปรับแสงสว่างและความคมชัดให้กับภาพด้วยBrightness/Contrast มีขั้นตอนดังกล่าวนี้</div>
<div>
<span style="background-color: transparent; line-height: 1.5;"> 1 เปิดภาพที่ต้องการปรับแต่สว่างและความคมชัดให้กับภาพขึ้นมาโดยวิธีใดก็ได้</span></div>
<div>
2.ชิกเลือก Image >Adjustment >Brightness/Contrast</div>
<div>
3 ปรากฏหน้าต่างของ>Brightness/Contrast</div>
</div>
<div style="font-size: 13.3333px;">
<div>
<span style="background-color: transparent; line-height: 1.5;"> (1)การปรับแต่งค่าความสว่างความคมชัดในช่องBrightnessเมื่อเลื่อนด้านขวาคือการเพิ่มค่าของความสว่างและเลื่อนไปทางด้านซ้ายเพื่อลดความสว่างลง</span></div>
<div>
(2)การปรับแต่งค่าความสว่างและความคมชัดในช่องcontrastเมื่อเลื่อนด้านขวาคือการเพิ่มค่าความคมชัดและเลื่อนไปทางด้านซ้ายเพื่อลดความคมชัดลง</div>
<div>
<br /></div>
<div>
4ผลลัพธ์ที่ได้จากการปรับแต่งความสว่างและความคมชัดด้วยBrightness/Contrast</div>
</div>
<div style="font-size: 13.3333px;">
<div style="font-size: 13.3333px; line-height: 21.3333px;">
</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.2.2การปรับความสมดุลสีของภาพด้วยcolor Balance</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
ภาพที่นำมาใช้ในการออกแบบหรือนำมาประกอบเนื้อหาภายในหน้าเว็บอาจไม่มีความสมดุลจองสี การปรับความสมดุลสีให้กับภาพด้วยcolor Balance สามารถปรับแต่งค่าสีให้มีความสมดุลและสามารถปรับค่าสีตามความต้องการได้ ซึ่งมีขั้นตอนการปรับความสมดุลสีของภาพด้วย color Balance ดังต่อไปนี้ </div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
1.เปิดภาพที่ต้องการปรับความสมดุลของภาพโดยการคลิกที่เมนูFile>Openหรือ Ctrl+O</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
2.คลิกเลือกเมนู Image>Adjustments>color Balance หรือกดคีย์ Ctrl+B</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
3.ลากเพื่อค้าฝนหาสีที่ต้องการ</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.ปรับค่าตามความต้องการจากนั้นคลิกที่ปุ่มOk</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
5.ผลลัพธ์ที่ได้จากการปรับค่าความสมดุลสีมให้กับภาพ</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.2.3 การตกแต่งภาพด้วย Curves</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
ภาพที่มีแสงสว่างและความคมชัดน้อยทำให้สีของภาพจางและมัว การตกแต่งภาพด้วยCurvesเป็นอีกหนึ่งวิธีที่สามารถปรับแสงสว่างและความคมชัดได้ซึ่งมีวิธีการทำดังต่อไปนี้</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
1.เปิดภาพที่ต้องการปรับแต่งด้วยCurvesโดยการคลิกที่เมนูFile>openหรือctrl+O</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
2.คลิกเลือกเมนูImage>Adjustment>Curvesหรือกดคีย์ลัดCtrl+M</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
3.ปรับแสงสว่างและความคมชัดโดนการคลิดงกลากเส้นขึ้น-ลงหรือลากไปทางด้านซ้าย-ขวาดังรูป</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.ผลลัพธ์ที่ได้จากการปรับแต่งภาพด้วยCurves</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.2.4เพิ่มEffectมห้กับภาพด้วยLighting Effect</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
การเพิ่มEffect<span style="background-color: transparent; line-height: 1.5;">ด้วยLight Effect คือการเพิ่มลดและกำหนดทิศทางขอแสงมห้กับภาพเพื่อให้ภาพมีความน่าสนใจและมีมิติ ซึ่งมีขั้นตอนการเพิ่มEffect ดังต่อไปนี้</span></div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
1.เปิดภาพที่ต้องการใส่Effectโดนการคลิกที่เมนูFile>OpenหรือCtrl+O</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
2.คลิกเลือกเมนูFilter>Render>Lighting Effects</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
3.การปรับค่าของเเสงต่างๆสามารถปรับได้ที่รูปวงกลมโดยการดึงจุดวงกลมเล็กๆหรือปรับค่าพาเนล จากนั้นคลิกปุ่มOk</div>
<div style="font-size: 13.3333px; line-height: 21.3333px;">
4.ผลลัพธ์ของการปรับเเสงEffect</div>
<div>
<br /></div>
</div>
</div>
การออกแบบเเละพัฒนาเว็บไซต์http://www.blogger.com/profile/09284739676133932227noreply@blogger.com