Skip to main content

วิธีใช้ Photoshop Save for Web Tool

สอน Photoshop การบันทึก ให้เหมาะกับงานที่จะใช้ (jpg , png ,save for web) (เมษายน 2025)

สอน Photoshop การบันทึก ให้เหมาะกับงานที่จะใช้ (jpg , png ,save for web) (เมษายน 2025)
Anonim

ในฐานะนักออกแบบกราฟิกหรือนักออกแบบเว็บไซต์คุณอาจได้รับแจ้งให้ส่งภาพที่พร้อมใช้งานบนเว็บเช่นรูปภาพสำหรับเว็บไซต์หรือโฆษณาแบนเนอร์ เครื่องมือ Photoshop Save for Web เป็นวิธีที่ง่ายในการจัดเตรียมไฟล์ JPEG ของคุณสำหรับเว็บช่วยให้สามารถใช้งานได้ระหว่างขนาดไฟล์และคุณภาพของภาพ

สำหรับบทแนะนำนี้คุณจะบันทึกภาพ JPEG เครื่องมือ Save for Web สร้างขึ้นเพื่อบันทึกไฟล์ GIF, PNG และ BMP

ทำให้กราฟิกพร้อมใช้งานบนเว็บได้อย่างไร

กราฟิกที่พร้อมใช้งานบนเว็บส่วนใหญ่มีลักษณะร่วมกัน:

  • ความละเอียด 72 dpi
  • โหมดสีคือ RGB
  • ไฟล์มีขนาดลดลงสำหรับหน้าเว็บโหลดเร็วขึ้น
01 จาก 07

เปิดรูปภาพ

เมื่อต้องการใช้เครื่องมือ Save for Web ให้เปิดภาพใน Photoshop

คลิก ไฟล์> เปิดเรียกดูภาพในคอมพิวเตอร์ของคุณแล้วคลิก เปิด. เพื่อวัตถุประสงค์ในการปฏิบัติงานรูปภาพจะทำงานได้ดีแม้ว่ารูปแบบภาพจะทำก็ตาม

ปรับขนาดรูปภาพให้มีขนาดเล็กที่คุณสามารถใช้บนเว็บไซต์ได้ เมื่อต้องการทำเช่นนี้ให้คลิก ภาพ> ขนาดรูปภาพใหปอนความกว้างใหมในชอง Width และเลือกพิกเซล. ในกรณีนี้ให้ป้อน 400 พิกเซลและคลิก ตกลง.

02 จาก 07

เปิด Save for Web Tool

สมมติว่ามีคนขอให้คุณส่งภาพที่กว้าง 400 พิกเซลพร้อมที่จะโพสต์ในเว็บไซต์

คลิก ไฟล์ > บันทึกสำหรับเว็บ เพื่อเปิด บันทึกสำหรับเว็บ กล่องโต้ตอบ (ใน Photoshop รุ่นที่ใหม่กว่าเส้นทางคือ ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ.)

เรียกดูการตั้งค่าและเครื่องมือต่างๆในหน้าต่าง

03 จาก 07

ตั้งค่าการเปรียบเทียบ

ที่ด้านบนของ บันทึกสำหรับเว็บ หน้าต่างเป็นชุดของป้ายกำกับ เป็นต้นฉบับ, เพิ่มประสิทธิภาพ, 2-Up, และ 4-Up. เมื่อคลิกที่แท็บเหล่านี้คุณสามารถสลับระหว่างมุมมองภาพต้นฉบับภาพที่ดีที่สุดของคุณกับการตั้งค่า Save for Web ที่ใช้กับภาพหรือเปรียบเทียบรูปถ่ายของคุณสองหรือสี่รูป

เลือก 2-Up เพื่อเปรียบเทียบภาพถ่ายต้นฉบับกับภาพที่ได้จากการปรับให้เหมาะสมโดยการแสดงสำเนาของภาพด้านข้างโดยด้านข้าง

04 จาก 07

ตั้งค่าการแสดงตัวอย่างต้นฉบับ

คลิกที่รูปด้านซ้ายเพื่อเลือก เลือก เป็นต้นฉบับ จาก ตั้งล่วงหน้า เมนูทางด้านขวาของ บันทึกสำหรับเว็บ หน้าต่าง (ถ้ายังไม่ได้เลือก) ซึ่งจะแสดงภาพต้นฉบับของภาพต้นฉบับที่ยังไม่ได้ตัดต่อที่ด้านซ้าย

05 จาก 07

ตั้งค่าการแสดงตัวอย่าง Optimized

คลิกที่รูปด้านขวาเพื่อเลือก เลือก JPEG สูง จาก ตั้งล่วงหน้า เมนู. ขณะนี้คุณสามารถเปรียบเทียบภาพที่ดีที่สุดทางด้านขวาซึ่งจะเป็นไฟล์สุดท้ายของคุณโดยมีภาพต้นฉบับอยู่ทางด้านซ้าย

06 จาก 07

แก้ไขคุณภาพ JPEG

การตั้งค่าที่สำคัญที่สุดในคอลัมน์ด้านขวาคือ คุณภาพ ราคา. ในขณะที่คุณลดคุณภาพภาพของคุณดูซีดกว่า แต่ขนาดไฟล์ลดลงและไฟล์เล็กลงหมายถึงหน้าเว็บโหลดเร็วขึ้น

ลองเปลี่ยนคุณภาพเป็น 0 และสังเกตเห็นความแตกต่างของรูปภาพทางด้านซ้ายและด้านขวารวมทั้งขนาดไฟล์ที่เล็กกว่าซึ่งอยู่ใต้ภาพ

เป้าหมายคือการหาสื่อที่มีความสุขระหว่างขนาดและคุณภาพของไฟล์ คุณภาพระหว่าง 40 ถึง 60 มักเป็นช่วงที่ดีขึ้นอยู่กับความต้องการของคุณ ลองใช้ระดับคุณภาพที่ตั้งไว้ล่วงหน้า (JPEG Mediumตัวอย่างเช่น) เพื่อประหยัดเวลา

07 จาก 07

บันทึกรูปภาพของคุณ

เมื่อคุณพอใจกับรูปด้านขวาแล้วให้คลิกที่ บันทึก ปุ่ม. บันทึก Optimized As เปิดหน้าต่าง พิมพ์ชื่อไฟล์เรียกดูโฟลเดอร์ที่ต้องการในคอมพิวเตอร์ของคุณแล้วคลิก บันทึก. ตอนนี้คุณมีภาพที่พร้อมใช้งานบนเว็บแล้ว