World Of Webmaster
Đăng nhập / Đăng ký
Account
Free for web
Check pagerank
Input check pager (Not http://)

Ext: blog.kai.vn
Check google pagerank
View HTML source
TOPIC
TUTORIAL Glossy button - Tạo button...
Bạn đang muốn tạo nút bấm có độ bóng cho website hoặc ứng dụng của mình? Dưới đây là một tut photoshop hướng dẫn từng bước tạo một nút bấm (button) phong cách web 2.0 bóng bẫy.
›› Glossy button - Tạo button web 2.0 với Photoshop
Post by : boing - Post time: 23/12/2009 - Edit time : 06/01/2010
View : 1922 - Comment : 0
Tags: photoshop  button  web 20  design   

 1. Tạo những phần cơ bản:
Tạo một file mới với những thiết lập được tô sáng màu vàng như hướng dẫn dưới đây, 

KAI BLOG - Tạo nút bấm với photoshop

Tạo một Layer mới với tên là "Button":

KAI Blog - Tạo nút bấm - Tạo layer mới với tên là Button

Trên layer Button vừa tạo, chọn công cụ Rounded rectangle Lựa chọn giá trị radius là 7px.

KAI Blog - Dùng công cụ retagle Rounded để vẽ button KAI Blog - Radius 7px

Vẽ một hình như dưới đây:

KAI Blog - Tut tạo button bằng photoshop

2. Nút bấm màu đỏ:

Right Click lên layer tên 'Button' và chọn Blending Option. Chọn các giá trị trong bảng Blending option như hướng dẫn dưới đây:

KAI Blog - Blending option


Drop Shadow

Inner Shadow

Bevel and Emboss

Gradiant Overlay

Button sau khi được điều chỉnh sẽ tương tự như sau:

3. Glossy And A Little Tweak

Tạo một layer mới với tên là 'Glass'

Lựa chọn công cụ Retangular marquee, chọn layer "Button". Giữ phím "Ctrl" và click lên layer "Button" (Trong cửa số layer).  Lựa chọn layer "Glass", giữ phím "Alt" với công cụ Retangular marquee. Vẽ (Cắt) qua lớp dưới một phần nhỏ như hình dưới đây:

KAI Blog - Nút bấm bằng Photoshop

Đổ màu cho select vừa chọn với màu FFFFFF, (Sử dụng Paint Bucket Tool) 

KAI Blog - Nút bấm bằng photoshop

Chọn giá trị Opacy cho layer Glass là 18%

KAI Blog - Opacity 5%

Bạn sẽ có một nút bấm tương tự dưới đây:

KAI Blog - Nút bấm cho website

4. Pattern Overlay:

Bước tiếp theo sẽ làm cho button trông sáng hơn, ở đây sử dụng lớp triplex5px được tạo ra trước đó. Bạn có thể tham khảo thêm làm thế nào để tạo mẫu patten. Tạo một layer tên là "Patten" ở giữa "Glass" và "Button" và xữ lý với Blening Option như sau:

KAI Blog - Tạo nút bấm cho website

Chọn Patten trong Blending Option và sử dụng lớp Triplex5px đã được tạo:

KAI Blog - Patten Overlay - Button web 2.0

Tiếp tục sử dụng công cụ Retangular marquee, giữ phìm "Ctrl" và click vào lớp  "Button" trong Panel Layer. Tô đầy layer "Patten" bằng Triplex5px và chọn giá trị opacity của layer này là 5%.

5. Inserting Text:

Sử dụng font chử và màu chử ưa thích, ở đây chọn màu chữ là #FFFFFF. 

KAI Blog - Text option

Tạo một layer mới với tên là  "Text" và gõ từ bạn muốn thể hiện lên, điều chỉnh thêm các thông số trong Blending Option như hình dưới đây.

KAI Blog - Glossy button - Text Overlay

Bạn đã có một button theo phong cách web 2.0:

Nguồn: hongkiat.com

Ý kiến cho bài này (0) [ Hide ]
Những bài viết liên quan:
Tạo nút bấm với Corel Draw - web button corel draw
Aero glass button : Tạo nút bấm vista bằng photoshop
Thay đổi giao diện trong website sử dụng javascript
Các nguyên lý cơ bản của Design - Học thiết kế
Tạo banner mừng Giáng sinh với Flash CS4
PHP - Lấy thông tin từ website khác
Tạo nút Menu cho web bằng Photoshop
Tutorial ›› Code | Webdesign tutorial | Experience |
Page : 806809
Online :
Visited : 370132
 
Liên h | Thêm vào Favorite | Gửi link qua e-mail | Thông tin website
Copright © 2009 KAI Blog
Code by BOINGOnline. Contact email : contact@kai.vn
Theme: default | classic |