Menu Điều Hướng

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 :

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 Radius là 7px

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 !


thu thuat photoshop tao nut bam thiet ke web photoshop tips comment counter css counter website template

Tin Tức Liên Quan

Tạo icon RSS bóng bẩy
Tạo icon RSS bóng bẩy

Trong bài viết này chúng ta sẽ tạo một biểu tượng rss đầy màu sắc và cực kỳ bóng bẩy cho blog của bạn

Tạo chữ màu bạc tỏa sáng bằng photoshop
Tạo chữ màu bạc tỏa sáng bằng photoshop

Trong bài viết này bạn sẽ có thể tự tay làm một hiệu ứng chữ đẹp mắt cho website hay blog của bạn, với chữ màu bạc tỏa sáng cực kỳ đẹp mắt.

Tạo chữ phát sáng nhiều màu sắc
Tạo chữ phát sáng nhiều màu sắc

Với hướng dẫn này mình sẽ chỉ các bạn tạo hiệu ứng chữ phát sáng với nhiều màu sắc lấp lánh như hình dưới, chỉ với 5 bước đơn giản thui, nào bắt đầu bạn nhé

Mẹo ghép ảnh cực cool bằng Photoshop
Mẹo ghép ảnh cực cool bằng Photoshop

Bài hướng dẫn giúp bạn có được những bức ảnh ghép ấn tượng với thao tác đơn giản

Tự tay làm danh thiếp cực pro bằng Photoshop
Tự tay làm danh thiếp cực pro bằng Photoshop

Thủ thuật này sẽ giúp bạn thiết kế danh thiếp có giao diện chuyên nghiệp, hiện đại mà không cần phải có quá nhiều kiến thức về đồ họa mà chỉ bằng Photoshop và vài bước thao tác đơn giản

Tạo button đơn giản cho web bằng Photoshop
Tạo button đơn giản cho web bằng Photoshop

Trong bài viết này chúng ta sẽ tự tay làm một button đơn giản cho website hay blog của bạn chỉ với vài bước đơn giản

Mẹo tạo chữ kim loại 3D
Mẹo tạo chữ kim loại 3D

Chỉ với vài bước đơn giản mình sẽ giúp các bạn tạo logo chữ kim loại hiệu ứng 3D cho website của mình, rất chi là dễ dàng lun, cùng thực hiện theo nhé

Tạo Abstract Wormhole Background
Tạo Abstract Wormhole Background

Hôm nay, mình sẽ chỉ các bạn cách sử dụng brush và điều chỉnh các lớp trong photoshop cs5, bạn có thể bạo ra một hình nền trừu tượng

Hiệu ứng chữ băng
Hiệu ứng chữ băng

Hôm nay, hy vọng rằng những hướng dẫn sau đây sẽ truyền cảm hứng cho bạn để tạo thêm một số hiệu ứng ice cho thiết kế của bạn

Tư vấn thiết kế website giá rẻ

Chat FB
Tư vấn thiết kế website giá rẻ
Chat Zalo

Điện Thoại