All Blog
การสร้างปุ่มสไตล์ Web 2.0

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


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

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

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

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

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

Web 2.0 Button - Initial stroke



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


Web 2.0 Button - Initial inner glow

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


Web 2.0 Button - Initial result

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

Web 2.0 <br>Button - Glare



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


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


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

Web<br> 2.0 Button - Glare mask



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


Web 2.0 Button - Glare result




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

Web 2.0 <br>Button - Text



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


Web 2.0<br> Button - Result




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


Web <br>2.0 Button - Example 1


Web <br>2.0 Button - Example 2


Web <br>2.0 Button - Example 3


Web <br>2.0 Button - Example 4




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



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




Create Date : 22 เมษายน 2553
Last Update : 22 เมษายน 2553 15:12:32 น.
Counter : 1516 Pageviews.

0 comments
ชื่อ : * blog นี้ comment ได้เฉพาะ VIP Friend
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ชีวานรินทร์
Location :
  

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 3 คน [?]