Menu Điều Hướng

Tạo nút action cho web

Khi thiết kế website chúng ta hay có những nút để người dùng truy xuất dữ  liệu, để nó trở nên bắt mắt hơn, mình sẽ chỉ các bạn một vài thao tác nhỏ nhưng “có võ” web của bạn sẽ trở nên màu sắc hơn.

Tạo nút action button cho web

Nào, chúng ta cùng bắt đầu!

Bước 1: Tạo mới trang giấy kích thước 300 x 200 px. Cho màu backround: #181818, foreground: #343434. Bạn tô màu foreground hay background đều được.

Tạo nút action button cho web
Bước 2: Tạo mới layer, đặt tên là “hình cn”, Dùng Rounded rectagle tool vẽ một hình chữ nhật với kích thước tùy ý, tô màu #36FF00.

Tạo nút action button cho web

Tiếp theo, click phải lên layer này, chọn Blending options và thiết lập các thông số như sau:

Dropshdow:
Tạo nút action button cho web
Inner shadow:
Tạo nút action button cho web
Bevel and Emboss:
Tạo nút action button cho web
Gradient Overlay:
Tạo nút action button cho web
Stroke: 
Tạo nút action button cho web

Kết quả bạn được:
Tạo nút action button cho web

Bước 3: Tạo layer mới đặt tên “bright”, dùng Elliptical Marquee tool vẽ và tô màu như sau trắng như hình dưới

Tạo nút action button cho web
Sau đó, click chọn layer “hình cn” và đảo ngược vùng chọn Ctrl + Shift + T, click chọn layer “bright” và nhấn phím Delete, cho opacity của nó là 15%. Bạn được kết quả thế này.

Tạo nút action button cho web

Đến đây thì công việc tạo nút đã xong, ta chỉnh cần hoàn chỉnh với phần chữ nữa thui, đơn giản lém phải không nào.

Bạn gõ chữ “Click Me” với phong tùy thích và màu bất kỳ
Tạo nút action button cho web

Và sau đó thiết lập các thông số cho nó như sau:

Tạo nút action button cho web
Tạo nút action button cho web
Tạo nút action button cho web

Chúng ta đã hoàn tất nút action button rồi đấy, nhưng để tạo điểm nhấn cho nó, bạn có thể thêm hình “+” vào

Tạo nút action button cho web

Thử làm theo hướng dẫn, bạn sẽ tạo cho mình một nút action đẹp hoàn hảo đấy.

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


thu thuat photoshop button web hoc photoshop photoshop tutorial tutorial photoshop tuts photoshop creat button web how to create button web in photoshop create button web button action action 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