OWATMATE.COM Slogan slogan slogan
Simple New simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simple simle
***Note: Right click here. And select for Edit header image ***
Search

Main Menu
Counter
Today  90 คน
 Months 91 คน 
 Year 30322 คน 
Total 5596406 คน
Start 2008-11-28

Link
My marquee text
Welcome to Website .........
 

วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์

 
หลาย ๆ ท่านอาจพบมีปัญหาในเรื่อง การใส่รูปภาพบนเว็บไซต์ เช่น ใส่ภาพบนเว็บแล้ว ขนาดของภาพใหญ่มาก ต้องการจะลดขนาดของภาพลง ให้เหมาะสมกับพื้นที่ หรือต้องการให้ภาพมีขนาดที่เบา เหมาะแก่การชมบนเว็บไซต์ วันนี้ผมมีคำแนะนำดี ๆ ที่จะช่วยให้ท่านสามารถ ลดขนาดของภาพได้ด้วยตัวเอง รวมถึงเทคนิคในการเซฟภาพ เพื่อใช้สำหรับประกอบเว็บไซต์ และเหมาะกับประเภทของรูปภาพมาฝากครับ
 
มาเริ่มกันเลยดีกว่านะครับ
 
        1. เปิดโปรแกรม Photoshop เลือกเปิดไฟล์ที่ต้องการ ทำการลดขนาดของภาพครับ โดยคลิกที่ File --> Open --> เลือกไฟล์ที่ต้องการ
 
 
 
 
        2. ทำการเลือกเปิดรูปภาพที่เราต้องการจะลดขนาด เพื่อนำมาใช้บนเว็บไซต์
 
 
 
 
        3. หลังจากที่ได้ทำการเปิดรูปภาพขึ้นมาแล้ว ให้ทำการเลือกที่เมนู Image --> Image Size...
 
 
 
 
        4. เราจะพบหน้าต่างใหม่ ซึ่งจะมีค่าความกว้าง และความสูงบอกอยู่ ซึ่งตรงนี้ก็คือขนาดของภาพที่เราเลือกอยู่นั่นเองครับ
 
 
 
 
        5. ทำการเปลี่ยนขนาดภาพให้ลดลงตามที่ต้องการครับ โดยการเปลี่ยนค่าที่ Pixel Dimensions ในส่วนของ Width (ความกว้าง) และ Height (ความสูง) ค่าที่เราใส่เข้าไปใหม่นี้ ไม่ว่าจะใส่ในค่าของความสูง หรือความกว้างก็ตาม ค่าของอีกตัวเลือกหนึ่งก็จะมีการแปรผันตามครับ ซึ่งผมแนะนำว่าควรให้ Resolution อยู่ที่ 72 pixels/inch สำหรับงานเว็บไซต์นะครับ หลังจากเปลี่ยนขนาดเสร็จแล้วก็เลือกที่ OK ครับ
 
 
 
 
                5.1 หากเราทำการนำเครื่องหมายถูกหน้าตัวเลือก Constrain Proportions ออก เราจะเห็นว่า สัญลักษณ์รูปโซ่ที่แสดงอยู่ข้างหลัง Width และ Height จะหายไป ตรงนี้เราสามารถที่จะใส่ค่าความสูง และความกว้างแบบอิสระให้แก่ภาพ โดยที่ค่าของอีกตัวเลือกหนึ่งจะไม่แปรผันตามครับ
 
 
 
        6. ต่อมาจะเป็นวิธีการ save สำหรับนำไปใช้บนเว็บไซต์ครับ โดยมาที่เมนู File --> Save for web... ครับ
 
 
 
        7. การเซฟภาพสำหรับใช้บนเว็บไซต์นั้น สามารถเลือกประเภทไฟล์ภาพได้หลายประเภท ขึ้นอยู่กับรูปแบบของภาพที่เราใช้ครับ ในการเซฟภาพ สำหรับภาพถ่าย หรือภาพที่มีรายละเอียดสูง ควรเลือกเป็นไฟล์ JPEG และเรายังสามารถที่จะเลือกปรับค่า Quality ตามที่เราต้องการได้ โดยในการปรับลดค่า Quality ลง ต้องดูที่ตัวภาพด้วยว่ารายละเอียดของภาพลดลงมากน้อยเพียงใด เพื่อให้ภาพมีน้ำหนักเบา แต่ยังคงเห็นภาพได้ชัดเจนครับ
 
 
 
        8. ภาพที่นิยมเซฟเป็นไฟล์ GIF ได้แก่ ภาพโลโก้ ภาพหัวข้อ ตัวอักษร หรือ ปุ่มต่าง ๆ เนื่องจากเราสามารถกำหนดให้พื้นหลังของภาพ หรือบริเวณรอบ ๆ ของภาพโปร่งใสครับ โดยเราสามารถลดจำนวนของสีลงได้ ภาพที่ทำการลดจำนวนของสีลงแล้ว จะมีขนาดของไฟล์ภาพที่เบาลง แต่การจะลดจำนวนสีลงได้นั้น ขึ้นอยู่กับตัวภาพด้วย ว่ามีการใช้สีที่มากน้อยเพียงใด เพื่อไม่ให้สีของภาพ หรือรายละเอียดของภาพผิดหรือเสียหายครับ
 
 
 
 
                8.1 หากเราทำการเลือกที่ Transparency จะเป็นการเลือกเพื่อให้พื้นหลังของภาพโปร่งใสครับ
 
 
 
                8.2 หากเราได้ทำการเลือกภาพเป็นแบบ Transparency แล้ว สิ่งต่อไปที่ควรจะปรับคือ Matte เนื่องจากในส่วนนี้จะเกี่ยวข้องกับเรื่องขอบของรูปภาพ ตัวเลือก ตัวเลือกที่ใช้บ่อยมี ดังนี้

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

  เทคนิคการแต่งภาพ

1.เทคนิคการทำพื้นหลังแบบ3 มิติ

2.เทคนิคการทำพระจันทร์เต็มดวง

3.Sticky Tape แบบเก๋ๆ

4.เทคนิคการทำลำแสงพระอาทิตย์
5.เทคนิคการทำฟองอากาศ
6.สร้างตัวอักษรไล่โทนสี
7.สร้างปุ่มสวยด้วยตนเอง
8.วิธีลดขนาดของภาพ
9.ตัดภาพพื้นหลัง ด้วยคฑาวิเศษ
10. ทำข้อความด้วยกรอบต่างๆ
11.เทคนิคการแต่งภาพสไตล์โลโม
12.เทคนิค สร้างกระดาษพับขอบ
13.เทคนิคการนำรูปภาพมาใส่กรอบ
14.สร้างกรอบรูปขอบกระจาย
15.ตกแต่งข้อความด้วยการใช้ Layer Mask
16.แปลงภาพถ่ายให้เป็นภาพวาดกันเถอะ
17.การทำภาพเงาสะท้อนวัตถุ
18.สร้างกรอบรูปด้วย BrushTool
19.สร้างข้อความโค้งตามวัตถุ
20.ทำกรอบภาพให้ดูสวยงามและมีมิติ
21.สร้างภาพให้ มีแสงเปล่งประกาย
22.สร้างกรอบรูป และเงา
23.กรอบรูปลายไม้ง่าย ๆ ด้วย Filter
24.ปรับแต่งรูปภาพผ่าน
25.การสร้างโลโก้ ด้วยตัวเอง

More


Copyright (c) 2006 by Your Name