ขั้นตอนการทำ
1. ทำการเปลี่ยนรูปแบบ Template ให้เข้ากับเว็บเรา หรือทำการแก้ไขให้เรียบร้อย ดังภาพ.
 |
2. หลังจากนั้นให้เรานำมาวางในตำแหน่งที่เราต้องการจะตัดส่วนต่างๆ ของภาพไปใช้ โดยให้สังเกตุจากภาพ ส่วนที่เป็นปุ่ม หรือส่วนสำคัญก็จะเว็นไว้เพื่อนำไปเรียกใช้ในภายหลังได้สะดวก ดังภาพ
 |
3. หลังจากที่เราสร้าง Guide เรียบร้อยแล้วให้เราส่งภาพที่สร้างไปยังโปรแกรม ImageReady ที่แถมติดมากับโปรแกรม Photoshop อยู่แล้วโดยกดที่ปุ่ม
จะอยู่ด้านล่าง
Tools ของตัวโปรแกรม หลังจากที่คลิกแล้วจะได้ผล ดังภาพ |
4. จาหนั้นให้ใช้เครื่องมือ Slice
เพื่อทำการตัดภาพ (แต่หลายคนคงจะคิดว่า แล้วมีตั้งหลายช่วงจะตัดยังไงหมด @-@) แน่นอนครับจะต้องมีเมนูช่วย
หลังจากที่เราเลือกเครื่องมือแล้ว ให้เราขึ้นไปเลือกเมนุ Slices
--> Create Slices From Guides โปรแกรมจะทำการตัดทุกเส้นที่เราได้ Guide
ไว้ จะได้ผล ดังภาพ |
5. คราวนี้ก็มาถึงขั้นตอนสุดท้าย ก็คือการ Save For Web เพื่อนำไปใช้ให้เราเลือกที่เมนู File --> Save Optomized As (Ctrl+Shipt+Art+S) จะมีหน้าต่างให้เรากำหนดเงื่อนไขการ Save ดังภาพ
* อาจจะ Save ไว้ที่ Folder ที่เราใช้ทดสอบก่อนก็ได้ครับแล้วค่อย Copy ไปใส่ Folder ที่ใช้งานจริง
 |
6. จากนั้นลองเรียกไฟล์ Html ที่เรา Save ขึ้นมาทดสอบดู ดังภาพ
 |
7. ถ้าเราจะใส่ Link ก็ใช้ Dreamweaver เปิดไฟล์ขึ้นมาแก้ไขเพิ่มเติมได้เลย ลองนำไปประยุกต์ใช้กับ Template ตัวอื่นๆ ดูนะครับ