วันนี้ผมจะมาแสดงวิธี การสร้างปุ่มสไตล์ Web 2.0 ด้วยการใช้ Adobe Photoshop CS2

1 เปิด Photoshop และทำการสร้างเอกสารใหม่สำหรับปุ่ม

2 สร้างปุ่มโดยใช้เครื่องมือRounded Rectangle tool บนแถบเครื่องมือ(toolbar)กำหนดรัศมีโดยรอบตามชอบคับ โดยผมลองที่  5 px


3 คลิกขวาที่ layer รูปสี่เหลี่ยมผืนผ้า เลือก Blending Options หรือถ้าใช้ Adobe Photoshop CS3 ให้ไปที่ Add a layer style เลือก Blending Options

4 ตั้งค่าพารามิเตอร์ Gradient Overlay ดังต่อไปสีที่หนึ่งและสอง : 434343, สีที่สาม -- 000000 ตามรูปคับ


5 ตั้งค่า Stroke ด้านล่าง เป็นสี 363636

6 ตั้งค่า Inner Glow effect เป็นสี ffffff และปรับตามภาพ

7 เมื่อถึงตรงนี้แล้วคุณก็จะได้รูปแบบตามนี้ครับ

8 สร้างสี่เหลี่ยมโดยใช้เครื่องมือ Rounded Rectangle จะใช้เป็นแสงสว่างให้ปุ่ม โดยตั้งชื่อเลเยอร์ว่า "glare"

9 คลิกขวาที่ “glare” เลเยอร์ แล้วเลือก Rasterize Layer


10 คลิก Edit ใน Quick Mask Mode บนแถบเครื่องมือ


11 เลือก Gradient Tool, สร้าง gradient ตามรูป:

12 หลังจากออกจาก Quick Mask Mode, คุณจะได้พื้นที่ selection. กดปุ่ม Delete บนแป้นพิมพ์.

13 เพิ่มเลเยอร์ Text "Entries RSS" และ RSS ไอค่อน ตั้งค่าพารามิเตอร์ Drop Shadow effect ตามรูป

ตอนนี้คุณก็จะได้ปุ่มตามรูปแล้วนะคับ

หลังจากเปลี่ยนค่าพารามิเตอร์ที่ต่างกันไป, เพิ่มหรือเปลี่ยนองค์ประกอบ, ผมก็จะได้ปุ่มต่างๆตามนี้ครับ :

ไม่ยากใช่ไหมคับ ลองทำกันดูนะคับ

Cradit: //iris-design.info/photoshop/web-20-style-buttons/