สร้างสไลซ์

อัปเดตครั้งล่าสุดเมื่อ 2 พ.ย. 2026

เรียนรู้วิธีใช้เครื่องมือสไลซ์ เส้นบอกแนว หรือเลเยอร์เพื่อแบ่งรูปภาพออกเป็นพื้นที่ที่ส่งออกได้สำหรับการปรับแต่งเว็บให้เหมาะสมใน Adobe Photoshop บนเดสก์ท็อป

สไลซ์จะแบ่งรูปภาพออกเป็นส่วนย่อยๆ เพื่อให้ปรับแต่งแยกเป็นรายส่วนหรือกำหนดลิงก์ URL ที่ต่างกันได้ก่อนส่งออกสำหรับเว็บ

สร้างสไลซ์ด้วยเครื่องมือสไลซ์

เมื่อสร้างสไลซ์ผู้ใช้ Photoshop จะเติมพื้นที่ที่ไม่ได้ครอบคลุมด้วยสไลซ์อัตโนมัติโดยอัตโนมัติ สไลซ์ผู้ใช้จะมีเส้นขอบแบบทึบ ส่วนสไลซ์อัตโนมัติจะมีเส้นขอบแบบจุด

หากต้องการจัดแนวสไลซ์ให้ตรงกับเส้นบอกแนวหรือสไลซ์อื่น ให้เลือก มุมมอง > สแนปไปยัง ก่อนวาด

เลือกสไลซ์ เครื่องมือ

ในแถบตัวเลือก ให้เลือกสไตล์จากเมนูดรอปดาวน์:

  • ปกติ: วาดสไลซ์แบบอิสระ
  • อัตราส่วนคงที่: จำกัดสัดส่วน
  • ขนาดคงที่: ระบุขนาดพิกเซลที่แน่นอน

ลากผ่านบริเวณรูปภาพที่ต้องการสร้างสไลซ์

หมายเหตุ

เลือก Shift-ลาก เพื่อบังคับให้สไลซ์เป็นสี่เหลี่ยมจัตุรัส หรือ Alt-ลาก (Windows) หรือ Option-ลาก (macOS) เพื่อวาดจากจุดกึ่งกลาง

ทำซ้ำเพื่อสร้างสไลซ์เพิ่มเติม

สร้างสไลซ์จากเส้นบอกแนว

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

เลือก มุมมอง > Guides > เส้นบอกแนวใหม่ จากนั้นเลือกเส้นบอกแนว แนวตั้ง หรือ แนวนอน ที่กำหนดขอบเขตสไลซ์ตามต้องการ แล้วเลือก ตกลง

เลือกเครื่องมือสไลซ์

เลือก สไลซ์จากเส้นบอกแนว ในแถบตัวเลือก

สร้างสไลซ์จากเลเยอร์

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

หลีกเลี่ยงการใช้สไลซ์จากเลเยอร์สำหรับเลเยอร์ที่วางแผนจะสร้างภาพเคลื่อนไหวในพื้นที่ขนาดใหญ่ เนื่องจากขนาดของสไลซ์อาจใหญ่เกินกว่าจะใช้งานได้จริง

ในแผง Layers ให้เลือกเลเยอร์ที่มีเนื้อหาที่ต้องการสไลซ์

เลือก Layer > New Layer-Based Slice

หลังจากสร้างสไลซ์แล้ว สามารถเลือกสไลซ์ได้ด้วยเครื่องมือ เลือกสไลซ์ เพื่อย้าย ปรับขนาด หรือแก้ไขคุณสมบัติของสไลซ์สไลซ์ผู้ใช้ให้ความยืดหยุ่นมากที่สุดหากต้องการแสดงขอบเขตของสไลซ์ ให้เลือก View > Show > Slices

เลือก File > Export > Save for Web จากนั้นกำหนดตัวเลือกการส่งออกสำหรับแต่ละสไลซ์ แล้วบันทึกไฟล์Photoshop จะส่งออกสไลซ์แต่ละส่วนเป็นไฟล์รูปภาพแยกกัน และสร้าง HTML หรือ CSS ที่จำเป็นสำหรับการแสดงสไลซ์บนหน้าเว็บ