เทคนิควิธีการ ซ้อน Table ให้เป็นไอค่อน

webmaster

วันนี้ธนาเอาเกล็ดเล็กๆ น้อยๆ หนึ่งในเนื้อหาใน Webdesign Training ที่กำลังเปิดสอนที่ cgd.ac.th ในการออกแบบเวป และเร็วๆ นี้ 24-25 สองวันเต็มๆ ที่ comart สาขา เดอะมอลล์รามด้วย อีกไม่กี่ใว้แล้วด้วย จะมาเผยเคล็ดลับในการออกแบบ เวปของไทยกราฟให้ ท่านผู้เรียนรู้ได้ศึกษา เพื่อสามารถเอาไปประกอบการออกแบบเวปได้ดั่งใจ



ขั้นตอนที่1 เมื่อท่านได้ออกแบบไอค่อนใน Photoshop แล้ว ให้ท่านทำการขยาย (Ctrl +) ให้ใหญ่ประมาณ 600% เท่าท่านจะเห็นเส้นเรียงตัวกันลงมา ให้ท่านนับดูว่ามีกี่ชั้น

ขั้นตอนที่2. หลังจากนั้นให้ท่านทำการสร้าง pixels icon โดยมาที่ File --> New เพื่อสร้างไฟล์ใหม่ขึ้นมา โดยกำหนด Width=2 pixels ,Height=2 pixels แล้วให้เลือก Contents=Transparent (พื้นหลังแบบโปร่ง)

ขั้นตอนที่3. หลังจากให้ทำการเปิดโปรแกรม Dreamweaver ขึ้นมาแล้วทำการใส่ Table ตามจำนวนชั้นไอค่อนที่เรานับใน Photoshop และให้ความกว้างเท่ากับไอค่อนที่เราทำใน photoshop จะได้ดั่งตัวอย่าง.

ขั้นตอนที่4. หลังจากนั้นให้ทำการใส่สี Table ให้เหมือนสีไอค่อนที่เราทำใน Photoshop โดยอาศัย Copy โคสสีที่ได้จาก Photoshopโดยใช้อุปกรณ์ Eyedropper tool แล้วนำเอาโคสสีที่ได้นั้น copy มาใส่ลงใน bg table ใน Dreamweaver จนครบทุก Table ดังตัวอย่าง.

ขั้นตอนที่5. ให้ทำการใส่ pixels images ที่เราทำใน photoshop ลงในตารางที่เป็นเส้น แล้วปรับความสูงของ pixels images =1 table จะหดลงเป็นเส้นบางๆ ดังภาพ.

ขั้นตอนที่6. ให้ทำการพิมพ์ตัวอักษรลงไปแล้วให้ table ที่พิมพ์ตัวอักษรลงไปให้ Cellpad=3 (ระยะห่างจากขอบด้านใน table) แล้วทำการ peview ใน browser ดูจะเห็นได้ว่ามีลักษณะเหมือนไอค่อนทุกอย่าง เปรียบเทียบภาพบนเป็นไอค่อนที่ทำจาก photoshop ภาพล่างเป็นการซ้อน table ให้เป็นไอค่อนซึ่งจะทำให้ดูคมชัดยิ่งขึ้น

robin^^^

ใช้ได้ดีเลย

Comkibim

ขอบคุณมากค่ะ

Dorimu.tenyo

ขอบคุณค่ะ{:3_73:}