Menu Điều Hướng

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

shining-button

Hôm nay mình sẽ hướng dẫn các bạn tạo nút bấm (button) với hiệu ứng tỏa sáng, nếu bạn là dân thiết kế web thì không nên bỏ qua bài viết này.
Bước 1 : Vào menu File New, tạo một file ảnh mới kích thước 640 x 480px, và đổ màu đen cho layer này.
– Kế tiếp tạo một layer mới nằm trên layer vừa tạo và đặt tên nó là “background lighting”, chọn công cụ Brush với kích thước lớn như trong hình và chọn màu xám đậm , nhấp vào layer mới này như hình bên dưới để tạo ra 1 vùng sáng nhỏ.

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bước 2 : Chọn Round Rectangular Tool(U) và chỉnh thông số như hình sau :

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Vẽ một hình chữ nhật vào vị trí trung tâm

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

đặt tên layer này là shape, Các bạn thiết lập các thông số layer styles  trên layer này như sau :

Drop Shadow

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Inner Shadow

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Gradient Overlay

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

và kết quả là :

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bước 3 : Bây giờ bạn tạo vùng chọn cho layer shape bằng cách nhấn giữ phím Ctrl và nhấp chuột vào layer shape như hình bên dưới

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

– Tạo một layer mới và đặt tên là “Lighting”, trên layer này bạn chọn công cụ Brush với kiểu cọ mềm, và chọn màu trắng, nhấp chuột vào vùng chọn như hình bên trên, và chúng ta sẽ có kết quả như hình dưới

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Trên layer “lighting” chúng ta thiết lập thông số Blending Options như sau :

Drop Shadow

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bevel and Emboss

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Gradient Overlay

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

và kết quả thu được là :

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bạn có thể nhân đôi layer “lighting” để tạo thêm chiều sâu như hình bên dưới

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bước 4 : Nhân bẩn layer “lighting”  thêm một lần nữa, và trên layer này các bạn chọn Edit > Transform > Flip Vertical, bạn sẽ thấy có 1 vùng sáng nằm ở vị trí cuối của button khi thực hiện xong bước này. Tuy nhiên hiệu ứng tỏa sáng lại bị mờ ở phần đầu của button.

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Để có thể tạo lại hiệu ứng sáng nằm ở bên trên button như ban đầu thì bạn dùng công cụ Erase (E) và nhấp nhẹ vào vị trí như trong hình

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

và kết quả là :

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bước 5 : Trong bước này chúng ta chỉ việc gõ chữ vào trong button, các bạn có thể chọn font và kích thước tùy ý

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Và trên layer chữ này chúng ta sẽ thêm một số hiệu ứng trong Blending Options như sau :

Drop Shadow

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Bevel and Emboss

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Gradient Overlay

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Kết quả là :

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Để tạo thêm hiệu ứng, bạn có thể nhân đôi layer chữ này , kết quả sẽ như hình bên dưới

Tạo hiệu ứng nút bấm (button) tỏa sáng trong photoshop

Vậy là xong, Chúc các bạn thành công và có thêm 1 button đẹp cho website của mình.


thu thuat photoshop hoc photoshop photoshop tutorial button effect button dep cẩm nang photoshop day photoshop hiệu ứng nút bấm huong dan photoshop tạo button

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