Thiết kế Nút bấm (Button) bóng bẩy bằng Photoshop

Chào các bạn, lâu nay bận rộn nên chưa làm được tut nào nên hôm nay mình mới sưu tầm dược một tut thấy hay hay nên mình post lên cho mọi người nè.

Bài này là hướng dẫn các bạn thiết kế một nút bấm (button web) bóng bẩy để trang điểm thêm cho website chúng ta. Hình ảnh từng bước làm thì nhiều nhưng thực chất rất đơn giản chỉ vài bước thôi. Mình post chi tiết là để các bạn mới làm quen với photoshop không bị "nản" khi lần mò công cụ trong quá trình thiết kế.

Hình mẫu:

B1. Trước hết các bạn tạo file mới (File/ New hoặc Ctrl + N) với kích thước tùy bạn, ở đây tôi chọn rộng 300 pixel và cao 100 pixel:


Các bạn lưu ý chọn chế độ hình nền là Transparent (Có nghĩa là màu nền của nút này trong suốt).

B2. Các bạn Click phải vào Sharp Tool và chọn như hình để vẽ nút bấm có bo 4 góc tròn:


B3. Trước khi vẽ nút bấm, ta tạo một lớp mới (Layer) bằng cách nhấn Layer trên menu chọn New/ Layer, hoặc nhấn biểu tượng như hình:


B4. Bây giờ chúng ta vẽ nút, giữ chuột và kéo ngang như hình dưới:


Xong, các bạn nhấn Ctrl + Enter để tạo vùng chọn và tô màu tạm thời bằng cách nhấn Alt + <- Backspace
Vì sao tôi nói tô màu tạm thời? Vì chúng ta sẽ tô màu chuyển sắc cho nút bấm chúng ta.

B5. Tô màu chuyển sắc như sau:
Lưu ý bạn điều quan trọng là mỗi layer chúng ta nên đặt tên để dễ dàng làm việc sau này, mặc định các layer được tạo ra có tên là Layer 1, Layer 2, …, các bạn đổi tên bằng cách nhấn đôi vào chữ Layer 1 và đặt tên mới.


Bạn Click phải chuột vào layer nút bấm (nut_bam), chọn Blending Option từ menu đổ ra


B6. Cửa sổ Blending Option hiện ra, bạn chọn vào Gradient Overlay (Nhớ nhấn vào giữa chữ Gradient Overlay nhé.)
Sau đó bạn click như hình để chọn màu:


Bạn nhấn đúp vào điểm màu và chọn màu tùy thích, nhớ để hai cửa sổ cách nhau để xem màu mình chọn vừa ý chưa nhé:


Sau khi chọn màu tôi được như vậy:


B7. Bây giờ ta tạo hiệu ứng gương cho nút:
- Bạn tạo layer mới với tên hieu_ung_tren:
- Trong khi lựa chọn vẫn nằm ở layer hieu_ung_tren, bạn giữ Ctrl và Click một lần vào layer nut_bam


B8. Tiếp theo, bạn chọn công cụ Eliptical Marquee:


Sau đó, giữ nút Alt trên bàn phím và kéo từ dưới lên tạo một vùng chọn như hình:



Sau đó kéo chuột như hình:


Các bạn kéo cả 2 bên gốc sẽ được như sau:


Muốn đẹp, các bạn giảm độ Opacity xuống tùy ý nhé:


B9. Tạo hiệu ứng dưới sử dụng Brush:
Bạn tạo layer mới tên là hieu_ung_duoi, sau đó chọn công cụ Brush như sau:
Nhấn phím tắt B để chọn Brush, sau đó:


Chọn màu của Foreground như mình chẳng hạn, màu nhạt thôi:


B10. Bạn giữ Ctrl + Click vào layer nut_bam, nhưng vẫn chọn layer hieu_ung_tren để làm việc nhé:


Sau đó bạn rê vào nút như hình:


Các bạn có thể tùy ý sáng tạo, sao cho ra đời một sản phẩm vừa ý.

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