การตัดแบ่งภาพอย่างรวดเร็วด้วย 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 ของรูปยังเหมือนเดิมก็เอาไปใช้งานได้ทันที ... ลองเอาไปทำดูนะค่ะ เว็บมาสเตอร์ขอไปนอนก่อนแล้ว ผลจากการถ่างตาเชียร์บอลเมื่อคืนเริ่มจะมาแล้ว ง่วงมาก ๆ สมองก็เริ่มจะเบลอ ๆ ขอไปนอนก่อนค่ะ
|
ไม่มีความคิดเห็น:
แสดงความคิดเห็น