dot dot
วิธีลดขนาดของภาพ และการเซฟภาพ สำหรับใช้บนเว็บไซต์ article
 
หลาย ๆ ท่านอาจพบมีปัญหาในเรื่อง การใส่รูปภาพบนเว็บไซต์ เช่น ใส่ภาพบนเว็บแล้ว ขนาดของภาพใหญ่มาก ต้องการจะลดขนาดของภาพลง ให้เหมาะสมกับพื้นที่ หรือต้องการให้ภาพมีขนาดที่เบา เหมาะแก่การชมบนเว็บไซต์ วันนี้ผมมีคำแนะนำดี ๆ ที่จะช่วยให้ท่านสามารถ ลดขนาดของภาพได้ด้วยตัวเอง รวมถึงเทคนิคในการเซฟภาพ เพื่อใช้สำหรับประกอบเว็บไซต์ และเหมาะกับประเภทของรูปภาพมาฝากครับ
 
มาเริ่มกันเลยดีกว่านะครับ
 
        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 มาก หากนำไฟล์ชนิดนี้มาใช้กับเว็บไซต์คงจะไม่ดีนัก เพราะจะทำให้การแสดงผลบนหน้าเว็บไซต์ของเรา ใช้เวลาโหลดนานขึ้นครับ
 
 
 
การเลือกเซฟรูปภาพให้ถูกประเภทมีความสำคัญมากนะครับ เพราะถ้าเราเลือกถูกประเภท ไฟล์ที่ได้จะมีขนาดเล็ก และคุณภาพที่ได้จะเหมาะสมกับงานที่ทำครับ พบกันใหม่สัปดาห์หน้าครับ
 
***แม้ว่าทางทีมงาน ReadyPlanet จะไม่สามารถ Support โปรแกรม Photoshop ให้ท่านได้ แต่บทความนี้ เป็นความตั้งใจของทีมงานฝ่าย Web Design ที่เขียนขึ้นมาเพื่อให้ท่านได้เป็นแนวทางในการศึกษาเพิ่มเติม จากโปรแกรม Photoshop เพื่อใช้ในการออกแบบ และตกแต่งภาพบนเว็บไซต์ให้ออกมาสวยงามเท่านั้น***
 
24 Jan 2008
Watana Phadungphattanodom
Web Design Team
www.ReadyPlanet.com



Design Guru

เทคนิคการทำภาพลายน้ำ (Watermark) แบบง่ายๆ
เทคนิคการเปลี่ยนสีรูปภาพเฉพาะจุด
เทคนิคการทำฟองอากาศ
เทคนิคการทำรูปสีท่ามกลางรูปขาวดำ
เทคนิคการทำกรอบรูปเส้นประ
เทคนิคการทำพื้นหลังแบบ 3 มิติ
เทคนิคการทำ Barcode
เทคนิคการทำตัวอักษรทองคำ
เทคนิคการทำพระจันทร์เต็มดวง
เทคนิคการทำ Sticky Tape แบบเก๋ๆ สำหรับตกแต่งรูปภาพ
เทคนิคการทำลำแสงพระอาทิตย์
เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่าง ๆ (ตอนที่ 2 กรอบเก๋ ๆ แบบขาด ๆ )
เทคนิคการแต่งภาพสไตล์โลโม
การสร้างกรอบรูปขอบกระจาย ด้วยเทคนิค Quick Mask
สร้างกรอบรูปด้วย Brush Tool
เทคนิคการตกแต่งข้อความด้วยการใช้ Layer Mask article
เพิ่มความเก๋ไก๋ให้ข้อความ ด้วยกรอบแบบต่างๆ (ตอนที่ 1 กระดาษพับขอบ) article
สร้างกรอบรูปลายไม้ง่าย ๆ ด้วย Filter article
การสร้างตัวอักษรนูนบนลายไม้
การสร้าง selection ภาพ โดยใช้ channel
เทคนิคการนำรูปภาพมาใส่กรอบ
การทำกรอบภาพให้ดูสวยงามและมีมิติ article
เทคนิคการทำพื้นทรายแบบง่าย ๆ
เทคนิคเพิ่มลูกเล่นระยิบระยับให้ตัวอักษร article
สร้างข้อความโค้งตามวัตถุแบบง่ายๆ article
มาปรับภาพย้อนแสงให้ดูสวยงามกันเถอะ article
แปลงภาพถ่ายให้เป็นภาพวาดกันเถอะ article
วิธีการสร้างหยดน้ำมหัศจรรย์ article
การทำภาพเงาสะท้อนวัตถุ article
วิธีสร้างกรอบรูป และเงา เพื่อเพิ่มมิติให้ภาพ article
ตัดภาพพื้นหลัง ด้วยคฑาวิเศษ article
[Design Guru] "ไข่ทองคำ ของแจ๊ค" article
มาทำเมฆรูปร่างแปลก ๆ กันดีกว่า article
สร้างปุ่มสวยด้วยตนเอง article
สนุกกับเทคนิค การสร้างภาพในฝันด้วย Photoshop article
มาแต่งภาพสวย แบบซีเปียง่ายๆ ด้วย Photoshop กันเถอะ article
มาทำตัวอักษรแบบไล่โทนสี เอาไว้แต่งหัวข้อของบทความ กันครับ article



dot
ค้นหาบทความ

dot
dot
Oxygen Menu
dot
bulletOxygen Home
bulletต้นกำเนิด Oxygen
bulletข่าวจากสื่อต่าง ๆ
bulletAdWords Reseller News
bulletPhoto Gallery
bulletแนะนำ ติชม
dot
ReadyPlanet Update
dot
bulletReadyPlanet News
bulletFunction Update
bulletNew Templates
dot
Tips & Technics
dot
bulletReadyPlanet HowTo
bulletTips & Tricks
bulletDesign Guru
bulletR&D Talk
dot
Marketing Tools
dot
bulletNice To Know
bulletEditor Recommend
bulletแผนการทำโฆษณาบน Google
dot
ReadyPlanet Members
dot
bulletHighlight Member
bulletMember News
bulletWeb of The Week
bulletWeb of The Day
dot
Training & Seminar
dot
bulletTraining Courses
bulletแบบสำรวจความพอใจ
dot
IT News
dot
bulletCyber Story
bulletDo You Know ?
bulletCyber News
bulletArticle Of The Day
bulletCyber Joke
dot
Blog
dot
bulletSongyot Blog
bulletบุรินทร์ 's Blog
bulletเว็บซื้อขาย VelaMall.com
bulletเว็บสำเร็จรูป
bulletทัวร์ต่างประเทศ
dot
Free!!! Service
dot
bulletFree!!! Background
bulletวิเคราะห์เว็บไซต์ฟรี!!!


เว็บสำเร็จรูป


Copyright © 2010 All Rights Reserved.
Blog.readyplanet.com อัพเดทข่าวสาร เทรนด์การตลาดออนไลน์ ที่คุณไม่ควรพลาด!

บริษัท เรดดี้แพลนเน็ต จำกัด
89 อาคาร เอไอเอ แคปปิตอล เซ็นเตอร์ ชั้น 7 ห้อง 701-705 ถนนรัชดาภิเษก แขวงดินแดง เขตดินแดง กรุงเทพฯ 10400
Tel. 02-016-6789 (24 ชั่วโมง ทุกวัน) Fax: 02-016-6901 Email : info@readyplanet.com