ภาพรวมของสไลซ์

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

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

การทำงานของสไลซ์

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

วิธีนี้มีข้อดีที่ใช้งานได้จริงหลายอย่าง:

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

ประเภทของสไลซ์ตามการสร้าง

Photoshop จัดประเภทสไลซ์ตามวิธีการสร้าง และแต่ละประเภทจะทำงานต่างกันเมื่อแก้ไขรูปภาพ

• สไลซ์ผู้ใช้: ส่วนที่กำหนดเองด้วยตนเองโดยใช้เครื่องมือสไลซ์ ควบคุมขนาด ตำแหน่ง และคุณสมบัติได้ทั้งหมด และสไลซ์จะคงอยู่ในตำแหน่งเดิมจนกว่าจะย้ายหรือแก้ไข
• สไลซ์ตามเลเยอร์: สไลซ์จะรวมพิกเซลทั้งหมดในเลเยอร์ ขอบเขตของสไลซ์จะอัปเดตโดยอัตโนมัติเมื่อย้ายหรือแก้ไขเลเยอร์ เหมาะสำหรับเนื้อหาที่เปลี่ยนแปลงบ่อย แต่ควบคุมตำแหน่งอย่างแม่นยำได้น้อยกว่าสไลซ์ผู้ใช้
• สไลซ์อัตโนมัติ: สไลซ์ที่เติมเต็มพื้นที่ที่เหลือในรูปภาพซึ่งไม่ได้ถูกครอบคลุมโดยสไลซ์ผู้ใช้หรือสไลซ์ตามเลเยอร์ Photoshop จะสร้างสไลซ์เหล่านี้โดยอัตโนมัติ และสร้างใหม่ทุกครั้งที่เพิ่ม ลบ หรือแก้ไขสไลซ์อื่นๆสไลซ์อัตโนมัติทั้งหมดในรูปภาพใช้การตั้งค่าการปรับแต่งเดียวกัน
• สไลซ์ย่อย: สไลซ์อัตโนมัติประเภทพิเศษที่ปรากฏขึ้นเมื่อสไลซ์ซ้อนทับกันสไลซ์ย่อยแสดงวิธีที่ Photoshop จะแบ่งพื้นที่ที่ซ้อนทับกันเมื่อบันทึกไฟล์ที่ปรับแต่งแล้วไม่สามารถเลือกหรือแก้ไขสไลซ์ย่อยแยกจากสไลซ์หลักที่อยู่ด้านล่างได้

ประเภทของสไลซ์ตามเนื้อหา

สไลซ์ยังแบ่งประเภทตามชนิดของเนื้อหาที่บรรจุอยู่ด้วย

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

เบาะแสทางภาพสำหรับสไลซ์

Photoshop ใช้เบาะแสทางภาพเพื่อช่วยแยกความแตกต่างระหว่างประเภทสไลซ์ขณะทำงาน

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

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