01 จาก 08
กราฟิกแบบเว็บพร้อม
ในฐานะนักออกแบบกราฟิกคุณอาจได้รับคำขอให้ส่งภาพที่พร้อมใช้งานทางเว็บเช่นรูปภาพสำหรับโฆษณาบนเว็บไซต์หรือแบนเนอร์ เครื่องมือ "Save for Web" ของ Photoshop เป็นวิธีที่ง่ายและสะดวกในการจัดเตรียมไฟล์ JPEG ของคุณสำหรับเว็บโดยจะช่วยลดความแตกต่างระหว่างขนาดไฟล์และคุณภาพของภาพ
หมายเหตุ: สำหรับบทแนะนำนี้เรากำลังมองหาการบันทึก ภาพ JPEG เครื่องมือ Save for Web สร้างขึ้นเพื่อบันทึกไฟล์ GIF, PNG และ BMP
สิ่งที่ทำให้กราฟฟิก "Web-Ready?"
- ความละเอียด 72 dpi
- โหมดสีคือ RGB
- โดยทั่วไปลดลงในขนาดไฟล์สำหรับการโหลดหน้าเว็บได้เร็วขึ้น
02 จาก 08
เปิดรูปภาพ
เมื่อต้องการใช้เครื่องมือ "Save for Web" ให้เปิดภาพใน Photoshop; คลิก "File> Open" เรียกดูภาพในคอมพิวเตอร์ของคุณและคลิก "Open" สำหรับวัตถุประสงค์ของการกวดวิชานี้ภาพจะทำงานได้ดีแม้ภาพจะทำอะไรก็ตาม ปรับขนาดรูปภาพของคุณเป็นขนาดเล็กที่คุณอาจใช้ในเว็บไซต์ ในการดำเนินการนี้ให้คลิก "Image> Image Size" ป้อนความกว้างใหม่ในช่อง "Pixel Dimensions" (ลอง 400) แล้วคลิก "OK"
03 จาก 08
เปิด Save for Web Tool
สมมติว่าใครบางคนขอให้คุณส่งภาพนี้กว้าง 400 พิกเซลพร้อมที่จะโพสต์ไว้ในเว็บไซต์ คลิก "File> Save for Web" เพื่อเปิดกล่องโต้ตอบ Save for Web ใช้เวลาสักครู่เพื่อเรียกดูการตั้งค่าและเครื่องมือต่างๆในหน้าต่าง
04 จาก 08
ตั้งค่าการเปรียบเทียบ
ที่มุมบนซ้ายของหน้าต่าง Save for Web คือชุดของแท็บที่ชื่อว่า Original, Optimized, 2-Up and 4-Up เมื่อคลิกที่แท็บเหล่านี้คุณสามารถสลับระหว่างมุมมองภาพต้นฉบับภาพที่ดีที่สุดของคุณ (ด้วยการตั้งค่าบันทึกสำหรับเว็บที่ใช้กับรูปภาพนั้น) หรือการเปรียบเทียบรูปภาพ 2 หรือ 4 รูปของคุณ เลือก "2-Up" เพื่อเปรียบเทียบภาพต้นฉบับกับภาพที่เหมาะ ตอนนี้คุณจะเห็นสำเนาของภาพของคุณแบบเคียงข้างกัน
05 จาก 08
ตั้งค่าการแสดงตัวอย่างต้นฉบับ
คลิกที่รูปด้านซ้ายเพื่อเลือก เลือก "Original" จากเมนู Preset ทางด้านขวาของหน้าต่าง Save for Web (หากยังไม่ได้เลือก) การดำเนินการนี้จะทำให้ภาพตัวอย่างต้นฉบับของคุณไม่ได้รับการตัดต่อทางด้านซ้าย
06 จาก 08
ตั้งค่าการแสดงตัวอย่าง Optimized
คลิกที่รูปด้านขวาเพื่อเลือก เลือก "JPEG High" จากเมนู Preset ตอนนี้คุณสามารถเปรียบเทียบภาพที่ดีที่สุดของคุณทางด้านขวา (ซึ่งจะเป็นไฟล์สุดท้ายของคุณ) ด้วยภาพต้นฉบับทางด้านซ้าย
07 จาก 08
แก้ไขคุณภาพ JPEG
การตั้งค่าที่สำคัญที่สุดในคอลัมน์ด้านขวาคือ "คุณภาพ" ในขณะที่คุณลดคุณภาพภาพของคุณจะดู "muddier" แต่ขนาดไฟล์ของคุณจะลดลงและไฟล์เล็ก ๆ หมายถึงการโหลดหน้าเว็บได้เร็วขึ้น ลองเปลี่ยนคุณภาพเป็น "0" และสังเกตเห็นความแตกต่างของรูปภาพด้านซ้ายและด้านขวารวมถึงขนาดไฟล์ที่เล็กกว่าซึ่งอยู่ใต้รูปของคุณ Photoshop ยังให้เวลาในการโหลดโดยประมาณที่ด้านล่างของขนาดไฟล์ คุณสามารถเปลี่ยนความเร็วในการเชื่อมต่อสำหรับเวลาในการโหลดนี้โดยคลิกที่ลูกศรด้านบนตัวอย่างภาพที่ดีที่สุด เป้าหมายคือการหาสื่อที่มีความสุขระหว่างขนาดและคุณภาพของไฟล์ คุณภาพระหว่าง 40 ถึง 60 มักเป็นช่วงที่ดีขึ้นอยู่กับความต้องการของคุณ ลองใช้ระดับคุณภาพที่ตั้งไว้ล่วงหน้า (เช่น JPEG Medium) เพื่อประหยัดเวลา
08 ใน 08
บันทึกรูปภาพของคุณ
เมื่อคุณพอใจกับรูปถ่ายของคุณทางด้านขวาแล้วคลิกปุ่ม "บันทึก" หน้าต่าง "บันทึก Optimized As" จะเปิดขึ้น พิมพ์ ชื่อไฟล์ เรียกดูโฟลเดอร์ที่ต้องการในคอมพิวเตอร์ของคุณและคลิก "บันทึก" ตอนนี้คุณมีภาพที่พร้อมใช้งานบนเว็บแล้ว