การตัดแบ่งภาพอย่างรวดเร็วด้วย Slices from Guides

บทความนี้เป็นอีกบทความที่เกี่ยวเนื่องจากบทความที่แล้ว เป็นเรื่องของการตัดแบ่งภาพออกเป็นชิ้น ๆ โดยที่เราไม่จำเป็นต้องมาใช้ เครื่องมือ Slice (เพราบางครั้งตัดด้วย เครื่องมือ Slice อาจทำให้มีชิ้น Space ได้ โดยไม่ได้ตั้งใจ) ทำง่าย ๆ แถมเอาไปใช้งานได้ง่ายอีกด้วย วิธีการตัดแบ่งภาพอย่างรวดเร็วด้วย Slices from Guides ก็มีขั้นตอนการทำดังนี้

ขอยกตัวอย่างการตัดแบ่งเมนู (เอามาจากบทความที่แล้ว อิอิ) ขั้นตอนแรกเลยก็เปิดภาพที่เราต้องการจะตัดแบ่งเข้ามาในโปรแกรม Photoshop จากนั้นให้สังเกตด้านซ้ายและบนว่ามีไม้บรรทัดตามภาพหมายเลข 1 ถ้าไม่มีก็ให้ใช้คีย์ลัด Ctrl+R เพื่อเรียกใช้งานไม้บรรทัดขึ้นมา

จากนั้นให้นำเมาส์ไปคลิกบนไม้บรรทัดฝั่งซ้ายมือ จากนั้นกดเมาส์ค้างไว้แล้วเลื่อนเม้ามาบนภาพที่เราต้องการตัดแบ่ง จะสังเกตเห็นว่าสัญลักษณ์เมาส์เราจะเปลี่ยนไป และเมื่อเราคลิกปล่อยเมาส์บนพื้นที่ที่เราจะตัดแบ่งจะมีเส้นสีฟ้าดังภาพหมายเลข 2 ขึ้นมา เราเรียกเส้น ๆ นี้ว่าเส้น Guides เป็นเส้นสำหรับเอาไว้วางตำแหน่งเวลาเราออกแบบหรือจัดวางรูป (เหมือนเป็นเส้นอ้างอิงตำแหน่งต่าง ๆ ) เมื่อวางไปแล้ว เราสามารถเอาเมาส์ไปจับค้างที่เส้น แล้วเลื่อนตำแหน่งของมันได้ตามความต้องการ จะตัดแบ่งรูปอย่างไร ก็ให้สร้างเส้น Guides แบ่งไว้ ในที่นี้จะแบ่งเป็น 3 ส่วน ก็เอาเส้น Guides มาคั้นแบ่งไว้ตามภาพหมายเลข 2 (เส้น Guides เราจะสร้างกี่เส้นก็ไ้ด้ โดยการลากมาจากด้านข้างตามรายละเอียดข้างต้น และหากจะลบเส้นไหนไป ก็เลื่อนเส้น Guides กลับไปวางที่ไม้บรรทัด)

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

ถึงขั้นตอนนี้ ภาพของเราก็จะปรากฏในโปรแกรม ImageReady ลักษณะตามภาพด้านบน (มีเส้นสีทอง ๆ รอบภาพมาด้วย) วิธีการตัดแบ่งภาพออกเป็นชิ้น ก็ทำได้ง่าย ๆ โดยใช้คำสั่ง Slices –> Create Slices from Guides จากเมนูบาร์ด้านบนของโปรแกรม ImageReady ซึ่งจะได้ผลลัพธ์ตามภาพที่ 5

จะเห็นว่ามี 3 ชิ้น เมื่อเราเอาเมาส์คลิกที่ชิ้นไหน เราก็สามารถที่จะเซฟชิ้นนั้น โดยใช้คำสั่ง File –> Save Optimized As… แล้วเลือก Save as type เป็น Images Only ได้ ซึ่งค่าตั้งต้นจะเป็นไฟล์สกลุ .gif แต่เราจะทำให้ง่ายกว่านี้โดยการ Save ทีเดียวทั้งหมดเพื่อประหยัดเวลา และสะดวกในการนำไปใช้งาน โดยให้ทำการเลือกทุก Slice โดยการกด Shift หรือ Ctrl แล้วคลิกที่ภาพ หรือจะใช้ Ctrl+A ทีเดียวเลยก็ได้ จากนั้นให้ใช้คำสั่ง File –> Save Optimized As… แล้วเลือก Save as type เป็น HTML and Images ตั้งชื่อแล้ว Save ได้เลยค่ะ

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

สำหรับการนำไปใช้งาน เราก็แค่เพียงก๊อปปี้โำฟลเดอร์ images ไปไว้ใน site ที่เราสร้างเว็บ จากนั้น เปิดไฟล์ที่เป็น .html ขึ้นมาด้วยโปรแกรมดรีมฯ แล้วก็ก๊อปปี้โค้ดไปใช้ทั้งตาราง (การเซฟเป็นแบบ HTML and Images ไฟล์ html ที่ถูกสร้างขึ้น ในส่วนที่เป็นการแบ่ง slice จะสร้างเป็นตารางให้เราอัตโนมัติ) เพียงเท่านี้เราก็เอารูปไปใช้งานได้ง่าย ๆ โดยไม่ต้องไปเสียเวลาสร้างตารางใหม่และเสียเวลาเรียกรูปเข้ามาในโปรแกรมดรีมฯ ทีละภาพ ๆ อีกต่อไป ขอแค่เพียง Path ของรูปยังเหมือนเดิมก็เอาไปใช้งานได้ทันที … ลองเอาไปทำดูนะค่ะ เว็บมาสเตอร์ขอไปนอนก่อนแล้ว ผลจากการถ่างตาเชียร์บอลเมื่อคืนเริ่มจะมาแล้ว ง่วงมาก ๆ สมองก็เริ่มจะเบลอ ๆ ขอไปนอนก่อนค่ะ