วิธีการบันทึกภาพสำหรับเว็บใน Photoshop

หนึ่งในฟังก์ชันสำคัญที่ Photoshop เสนอคือคุณลักษณะ Save for Web / Devices

ใช้มันทำไม? แม้ว่าคุณจะสามารถบันทึกไฟล์ของคุณได้ด้วยวิธีมาตรฐานเช่น File / Save As แต่คุณลักษณะ Save for Web / Devices ก็มีส่วนสำคัญอยู่สามประการ

เครื่องมือนี้ใช้งานได้ดีสำหรับการแสดงไอคอน Twitter, รูปโปรไฟล์ Facebook, ไฟล์ผลิตภัณฑ์, ภาพบล็อกและไฟล์ต้นฉบับสำหรับ favicons

  • 01 - เปิดไฟล์ที่มาของคุณ

    ไฟล์ / เปิด Photoshop ภาพหน้าจอโดยไบรอันไฮน์ส

    ในการเริ่มต้นคุณจะต้องไปที่ ไฟล์ / เปิด เพื่อเปิดไฟล์ของคุณ สามารถอยู่ในรูปแบบใดก็ได้ - jpg, gif, psd, png หรืออื่น ๆ ตราบเท่าที่ Photoshop สามารถเปิดได้คุณสามารถส่งออกสำหรับเว็บ

  • 02 - การบันทึกไฟล์สำหรับเว็บ

    บันทึกไฟล์ Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

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

    ไปที่ ไฟล์ / บันทึกสำหรับเว็บ / อุปกรณ์ แล้วคลิก ประมาณครึ่งหนึ่งของเมนูแบบเลื่อนลง

    กระบวนการนี้จะไม่เปลี่ยนแปลงไฟล์ต้นฉบับเลย คุณกำลังสร้างไฟล์ใหม่ เมื่อคุณเสร็จสิ้นการกวดวิชานี้และกลับไปที่ภาพต้นฉบับของคุณใน Photoshop คุณจะต้องบันทึกไฟล์ดังกล่าวหากคุณได้ทำการเปลี่ยนแปลงใด ๆ การตั้งชื่อภาพใหม่ของคุณแตกต่างจากภาพต้นฉบับ บ่อยครั้งที่การเพิ่ม _web ไปยังชื่อไฟล์จะทำงานได้ดี (ตัวอย่าง: filename_web.jpg)

  • 03 - ปรับมุมมองเปรียบเทียบเป็น 2-Up

    เคียงข้างกัน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

    คุณอาจต้องปรับมุมมองที่นี่ขึ้นอยู่กับการตั้งค่าของคุณ สิ่งที่คุณต้องการคือการเปรียบเทียบรูปภาพและรูปภาพด้านซ้ายและด้านขวาของคุณ ด้านซ้ายจะแสดงต้นฉบับทางด้านขวาจะแสดงคุณภาพของภาพตามการตั้งค่าปัจจุบัน

    หากมองตามด้านบนของหน้าต่างคุณจะเห็นตัวเลือกต่อไปนี้: Original, Optimized, 2-Up, 4-Up สำหรับวัตถุประสงค์ส่วนใหญ่ 2-Up คือสิ่งที่คุณต้องการ

  • 04 - กำหนดขนาดการดูเป็น 100%

    ปรับมุมมองเป็น 100% ใน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

    เพื่อให้แน่ใจว่าคุณกำลังดูอยู่ที่ 100% ให้เลือกตัวเลือกที่มุมล่างซ้ายของหน้าจอ

    โปรดจำไว้ว่าถ้าคุณดูภาพของคุณสูงกว่า 100% ภาพจะดูเป็นเม็ดเล็กหรืออาจอ่านไม่ได้ ทำงานกับภาพเสมอ 100%

  • 05 - เลือกขนาดไฟล์

    การเลือกขนาดไฟล์ใน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

    ขนาดของเว็บมักเป็นพิกเซล (px) เป็นสิ่งสำคัญเพื่อให้สัดส่วนถูกต้อง ข้างกล่องภาพเป็นภาพขนาดเล็กของการเชื่อมโยงโซ่ สิ่งที่ไม่สามารถปรับความกว้างได้เมื่อคุณปรับความสูง ตัวอย่างเช่นรูปภาพที่มีขนาด 600 x 400px ถ้าคุณลดความกว้างเป็น 300px ไฟล์จะปรับขนาดเป็น 200px โดยอัตโนมัติ หากไม่ได้ทำเครื่องหมายที่ภาพจะบิดเบี้ยว

    นอกจากนี้คุณยังมีตัวเลือกในการปรับขนาดภาพตามเปอร์เซ็นต์

  • 06 - เลือกชนิดไฟล์สำหรับส่งออก

    การเลือกชนิดแฟ้มสำหรับส่งออกใน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

    ในตัวเลือกนี้ประเภทของไฟล์ต้นฉบับจะไม่สำคัญ คุณสามารถเลือกไฟล์ที่คุณต้องการได้

    หมายเหตุ: เพื่อเริ่มต้นกระบวนการคุณจะต้องคลิกที่ภาพด้านขวา ต้องเลือกภาพที่จะประมวลผล

    ที่พบมากที่สุดคือ jpg สำหรับเว็บ - เป็นรูปแบบไฟล์ที่เล็กที่สุดซึ่งหมายความว่าจะดาวน์โหลดได้เร็วขึ้นสำหรับผู้เข้าชมไซต์ของคุณ หากคุณมีความโปร่งใสเลือก png-24 หากคุณไม่ทราบว่าความโปร่งใสหมายความว่าคุณควรเลือก jpg

  • 07 - เลือกคุณภาพของรูปภาพ

    เลือกคุณภาพรูปภาพใน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

    ตัวเลือก jpg ทั้งสามตัว (High, Medium, Low) มีการตั้งค่าคุณภาพที่ตั้งไว้ล่วงหน้าซึ่งสามารถปรับได้ด้วยตนเอง ถ้าคุณกำลังดูอยู่ที่ 100% คุณสามารถตัดสินใจได้ว่าคุณต้องการคุณภาพอะไร ในการปรับระดับการซูมให้ดูขั้นตอนที่ 5 ภาพจะมีลักษณะแบบออนไลน์เหมือนกับที่ปรากฏในหน้าต่างแสดงตัวอย่าง

    หากคุณเลือกสิ่งอื่นที่ไม่ใช่ jpg คุณสามารถข้ามขั้นตอนนี้ได้

  • 08 - บันทึกไฟล์ของคุณ

    บันทึกไฟล์ของคุณใน Photoshop CS5 ภาพหน้าจอโดยไบรอันไฮน์ส

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

    ขอแสดงความยินดี! ไฟล์ใหม่ของคุณพร้อมที่จะใช้ออนไลน์แล้ว