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

08/10/2012

 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 :

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

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ừng bước thiết kế Glossy Web 2.0 Button  trong Photoshop

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

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

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

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

Chọn Radius7px

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

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

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

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

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

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

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

Inner Shadow

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

Bevel and Emboss

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

Gradiant Overlay

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

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

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

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

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

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

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.

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

Đổ 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

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

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

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

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

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

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.

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

Chọn Pattern Overlay

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

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

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

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

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

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

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

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 !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !