ขั้นตอนการทำ
1. สร้างเอกสารขึ้นมาโดยให้มีขนาดใหญ่กว่าปุ่มที่เราต้องการ (เช่นเราต้องการปุ่มขนาด 125 x 30 px อาจจะสร้างขนาด 150 x 50 px เพื่อเวลาที่เราทำงานจะได้ไม่ตกขอบ ดังนั้นผมจะสร้างเอกสารขึ้นมาขนาด 150 x 50 px ดังภาพ
2. จากนั้นให้เราใช้เครื่องมือ
วาดปุ่มสี่เหลี่ยมตามขนาดที่เราต้องการ ดังภาพ* ใช้เครื่องมือ info เข้ามาช่วยเช็คขนาดก็ได้ ดังภาพ
ใช้เครื่องมือขณะวาดพร้อมเช็คขนาดจาก info ไปในตัว
3. จากนั้นเทสีโดยใช้เครื่องมือที่เราคุ้นเคย
หรือใช้ Key ลัดช่วย Alt + Back Space , Ctrl + Back Space
ดังภาพ* อย่าลืม New Layer ขึ้นมาใหม่ก่อนที่เราจะใส่สีด้วยนะครับ และอย่าเพิ่งยกเลิก Selection เพื่อที่เราจะใช้เทขอบในขั้นตอนต่อไป
สีที่เราทำการเท #FF6600 
4. เข้าไปที่เมนู Edit --> Stroke ให้เลือกสีที่เข้มกว่าพื้น ดังภาพ
สีที่เราใช้เทขอบ #BD4C01 
5. จากนั้นให้เราใช้เครื่องมือ
วาดส่วนของพื้นที่เป็นแก้ว ดังภาพ
6. เตรียมสีเพื่อใช้ในการทำ Gradient ดังภาพ
7. จากนั้นนำสีที่เราเตรียมมาเทใส่ในพื้นที่ๆ เราได้เตรียมไว้ ดังภาพ
หลังจากที่เทสีด้วย Gradient แล้วอย่าเพิ่งยกเลิกเส้น
8. ใส่ Filter --> Blur --> Gaussian Blur ใส่ค่าลงไปประมาณ 1 แล้วยกเลิก Selection จะได้ผลดังภาพ
มาถึงขั้นตอนนี้ได้ผลตรงดังตัวอย่างหรือไม่ จากนั้นตบแต่งใสตัวอักษรให้สวยงาม
เราก็จะได้ปุ่มมาใช้ดังภาพ
9. ไม่ยากเลยใช่ไหมครับ แต่ยาวไปหน่อย ^^! ลองนำไปตบแต่งเว็บกันดูนะครับ