วันนี้ผมจะมาแสดงวิธี การสร้างปุ่มสไตล์ 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: http://iris-design.info/photoshop/web-20-style-buttons/
ความคิดเห็น