เทคนิคการสร้างปุ่ม Capsule แบบที่ 2 จัดทำโดย : Mr.GuruZ พิมพ์
 :: WebThaiDD.COM - ขุมทรัพย์ทางปัญญาของคนไทย •))) ------------   เทคนิคการสร้างปุ่ม Capsule แบบที่ 2 นี้เราจะเห็นว่าปุ่มจะยุบลงไปในพื้นด้วย มาดูขั้นตอนการทำกันเลย

ภาพตัวอย่าง


ขั้นตอนการทำ

1. สร้างเอกสารที่เปล่าขึ้นมาโดยใช้ Background สีขาว

2. หลังจากนั้นให้เรา New Layer ขึ้นมา 1 Layer ครับ แล้วเติมสีขาวลงไป

3. หลังจากนั้นให้เราสร้าง Layer ขึ้นมาใหม่อีก 1 Layer เป็น Layer ที่ 2 แล้ววาดปุ่มลงไป สีปุ่ม #98AAB1

4. หลังจากนั้นให้เราสร้าง Layer ขึ้นมาอีกเป็น Layer 3 และโหลด Selecttion ของปุ่มที่เราสร้างขึ้นมาโดยกด Ctrl + Layer 2 แล้วใส่สีขาวโดยใช้เครื่องมือ Gradient Tool เลือกเทสีขาวในโหมด Transparent


5. หลังจากนั้นใส่ Filter --> Blur --> Gaussian Blur

6. หลังจากนั้นให้เราคลิดที่ Layer 1 กด Delete เพื่อลบข้อมูลส่วนที่เป็นปุ่มออก

7. หลังจากนั้นยกเลิอกเส้น Selection กด Ctrl+D ให้ใส่ Effect Bevel and Emboss ที่ Layer 1 จะได้ปุ่มขึ้นมาดังภาพ

8. ลองนำไปใช้ดูนะครับ ขอให้สนุกกับการทำเว็บ
คุณอาจสนใจ
การเปลี่ยน Format ตัวเลขเป็นข้อความ
Mr.GuruZ (36,691 - 02 ก.ค. 49)
การผสานและจัดกึ่งกลางเซล
หมูขุน (41,299 - 13 มิ.ย. 51)
การใช้คำสั่งวนลูป do..while
Mr.GuruZ (27,513 - 03 มิ.ย. 49)
การทำ Floating Menu
เว็บไทยดีดี (24,906 - 19 ม.ค. 51)
หน้าต่างเชื่อมต่อเน็ตโผล่ขึ้นมาเองแก้ไงนะ XP
เว็บไทยดีดี (15,242 - 26 ม.ค. 51)
รวมเว็บที่ใช้เล่น MSN บนเว็บ
เว็บไทยดีดี (15,865 - 01 ก.ย. 50)
การติดตั้ง PHP โดยใช้ Apache จำลองเป็น Server
Mr.GuruZ (60,527 - 01 ก.พ. 50)
สร้างลูกศรควบคุมเกม flash
langjuko (114,615 - 16 ก.ย. 51)