เทคนิคการสร้างปุ่ม 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. ลองนำไปใช้ดูนะครับ ขอให้สนุกกับการทำเว็บ
คุณอาจสนใจ
ลบข้อความที่แสดงเวอร์ชันของวินโดวส์ออกจากหน้าจอ
เว็บไทยดีดี (13,777 - 29 ก.ย. 50)
เจาะลึกการใช้ Symbolism Tool และ Data Driven Graphic กับงานพิมพ์ และงานเว็บ (ตอนจบ)
ธนิศา ไชยภูริพัฒน์ (32,462 - 19 ม.ค. 51)
ทำความรู้จักกับ java
Mr.POP (40,249 - 05 พ.ย. 49)
การ copy ข้อความใน textarea
nut (25,876 - 07 มี.ค. 51)
การใช้งานคำสั่ง Continue
Mr.GuruZ (25,035 - 03 มิ.ย. 49)
การสร้างสี Gradient และจัดเก็บลงใน Swatches
Mr.GuruZ (51,049 - 27 มิ.ย. 49)
การกำหนดระบุวินโดว์หรือเฟรมที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค
สายลม (33,229 - 29 มี.ค. 51)
เปลี่ยนขนาดไอคอนบนเดสก์ทอป Vista
เว็บไทยดีดี (14,871 - 22 ก.ย. 50)