Latest News

วันพฤหัสบดีที่ 16 มกราคม พ.ศ. 2557

Tools Panel #.07 : ตัดภาพเป็นชิ้นเล็กชิ้นน้อยด้วย Slice Tool


Slice Tool จะเป็นการตัดภาพเป็นชิ้นเล็กๆ ไว้สำหรับทำงานออกแบบเว็บ ทุกภาพที่ถูกตัดแบ่งจะสามารถเชื่อมโยงลิงก์ได้ และโปรแกรมจะสร้างโค้ด HTML ให้ด้วยค่ะ เคยเห็นเมนูที่ดูเหมือนจะเป็นภาพเดียวกันใช่ไหมคะ แต่จะมีหลายลิงก์ให้เราคลิกเข้าไป Slice Tool ก็สามารถทำแบบนั้นได้ค่ะ (หรือเขาอาจจะใช้ Slice Tool ทำ ^^)

ส่วน Slice Selection Tool คือ เครื่องมือไว้สำหรับแก้ไขหรือปรับแต่ง Slice ค่ะ


วิธีการใช้งาน Slice Tool

คลิกค้างแดรกเมาส์สร้างเป็นกรอบสี่เหลี่ยมค่ะ พอปล่อยก็จะมีเส้น Slice ขึ้นมา Slice ที่เราสร้างจะเรียกว่า User-Slice (เส้นทึบ) ส่วน Slice ที่เกิดขึ้นหลังจากที่เราสร้าง Slice จะเรียกว่า Auto-Slice (เส้นประ)



การสร้าง Layer Based Slice ไปที่เมนูบาร์ Layer เลือก New Layer Based Slice




และ เรายังสามารถสร้าง Slice จาก Guides ค่ะ ก่อนอื่นก็ต้องสร้าง Guides แล้วเลือกเครื่องมือ Slice Tool คลิกที่ Slice From Guides 


การลบ Slice เลือกใช้เครื่องมือ Slice Selection Tool คลิกที่ Slice ที่ต้องการลบ เมื่อคลิก Slice 
Slice นั้นจะเป็นสีเหลืองแล้วกดปุ่ม Delete ค่ะ


การตั้งค่า Slice


Slice Type : สามารถเลือกได้ว่าจะมีภาพหรือไม่มีภาพ
Name : ชื่อ Slice
URL : ลิงก์ เมื่อคลิกที่ Slice นั้นจะไปยังลิงก์ที่ระบุ
Target : เป้าหมาย กำหนดว่าจะให้ลิงก์เปิดหน้าต่างใหม่ (ระบุ _blank) หรือเปิดในหน้าต่างเดิม (ระบุ _self)
Message Text : ข้อความที่จะให้ปรากฏบริเวณ Status Bar ของ Browser
Alt Tag : ข้อความที่จะให้ปรากฏ เมื่อเมาส์เลื่อนผ่าน
Dimensions : ตำแหน่งของสไลด์

การบันทึก Slice
ไปที่เมนูบาร์ File เลือก Save for Web... หรือใช้คีย์ลัด Alt+Shift+Ctrl+S แล้วคลิกปุ่ม Save ค่ะ


ตรง Format เลือก HTML and Images ถ้าไม่ต้องการตั้งค่าอะไรเพิ่มเติม คลิกปุ่ม OK ค่ะ



อ้างอิงข้อมูลเพิ่มเติมจาก
http://www.thaigraph.com/basicps/slice.html
http://www.thaicreate.com/graphic/photoshop-slices-image.html

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

หากบทความเกิดความผิดพลาดประการใดต้องขออภัยและช่วยชี้แนะด้วยนะคะ ^^

AnasThailand

Add us on Google+