Từng bước thiết kế Glossy Web 2.0 Button trong Photoshop

Bạn đang tìm kiếm những button bóng bẩy dành cho web 2.0 của bạn? Thay vì tìm kiếm trên internet, sao bạn không tự tay làm và nâng cao kỹ năng Photoshop của mình. Nếu bạn mới tập tành làm quen với Photoshop thì bài viết này sẽ thật sự hữu ích và dành riêng cho bạn đó. Đây là kết quả mà chúng ta sẽ có được khi hoàn thành bài viết này :

Nào chúng ta cùng tiến hành từng bước sau đây :

Bước 1 : Đầu tiên chúng ta sẽ tạo ra một file hình mới với kích thước là 400×300 , độ phân giải là 72 pixel/inch. Các bạn có thể tham khảo hình bên dưới :

Tạo một layer mới và đặt tên là “Button“

Trên layer ‘ Button ‘ , bạn chọn công cụ Rounded rectangle tool (U)

Chọn Radius là 7px

Sau đó vẽ một hình chữ nhật như hình bên dưới

Bước 2 : Nhấp chuột phải vào layer ‘ Button ‘ sau đó chọn Blending Options

Sau đó thiết lập các thông số như sau :
Drop Shadow

Inner Shadow

Bevel and Emboss

Gradiant Overlay

Kết quả thu được sẽ như thế này :

Bước 3 : Tạo hiệu ứng Glossy
Tạo một layer mới và đặt tên là ” Glass “

Chọn công cụ Retangular marquee tool (M), Hãy đảm bảo là bạn đang chọn layer ‘ Button ‘. Nhấn giữ Ctrl sau đó click chuột vào layer ‘ Button ‘ để tạo vùng lựa chọn xung quanh button.
Tiếp tục nhấn giữ nút Alt cùng với công cụ Retangular marquee tool (M) bạn vẽ thêm một hình chữ nhật sao cho giống hình bên dưới.

Đổ màu #ffffff vào vùng lựa chọn mà ta vừa làm ra bằng công cụ Paint Bucket Tool

Giảm opcity xuống còn 18%

Lúc này button của chúng ta sẽ có hình dạng như sau :

Bước 4 : Pattern Overlay
Chúng ta sẽ tạo thêm cho button thêm vài hiệu ứng Pattern Overlay. Các bạn có thể chọn bất cứ mẫu pattern nào, mình sử dụng pattern như hình bên dưới. Các bạn có thể tham khảo bài viết Hướng dẫn tạo và sử dụng Patterns trong Photoshop để hoàn thiện bước này.

Chọn Pattern Overlay

Chọn lại layer ‘ Button ‘ và nhấn giữ Ctrl + nhấp chuột vào layer này (Để tạo vùng lựa chọn xung quanh button) . Sau đó sử dụng công cụ Paint Bucket tool để đổ pattern mà chúng ta đã chọn ở trên vào vùng lựa chọn trên layer ‘ Pattern ‘ và giảm opacity xuống còn 5%.

Bước 5: Chèn thêm chữ

Để button thêm thực thì chúng ta sẽ chèn thêm một đoạn chữ ngắn, các bạn có thể chọn bất kì font chữ nào với màu #ffffff

Sau đó áp dụng thuộc tính Drop Shadow vào layer chữ này

Kết quả cuối cùng mà chúng ta nhận được:

Thật đơn giản phải không các bạn. Nếu trong các bước có chỗ nào hơi rối và khó làm thì các bạn có thể để lại lời nhắn dưới dạng comment, mình sẽ giúp đỡ các bạn hoàn thành bài viết trên.

Chúc các bạn thành công !