Hướng dẫn làm web button

20/09/2012

Với hướng dẫn này các bạn có thể áp dụng cho menu hoặc các nút kết nối, truy xuất dữ liệu…Chỉ với một vài bước đơn giản không ngờ bạn sẽ cho ra một button cực đỉnh với những ánh sáng, độ bóng bẩy bắt mắt. Nào, chúng ta bắt đầu….

Hướng dẫn tạo web button trong photoshop

Bước 1: Tạo một tài liệu mới với kích thước 120x50px. Tô màu background #838383, dùng Recdend Rectanguar tool, radius: 10px, vẽ một hình chữ nhật với màu #111111

Hướng dẫn tạo web button trong photoshop

Bước 2: Áp dụng các hiệu ứng cho nó như sau
Drop shadow:

Hướng dẫn tạo web button trong photoshopInner Glow:

Hướng dẫn làm web buttonBevel and Emboss:
Hướng dẫn tạo web button trong photoshopGradient Overlay:
Hướng dẫn tạo web button trong photoshopStroke:
Hướng dẫn tạo web button trong photoshopVà đây là kết quả
Hướng dẫn tạo web button trong photoshop

Bước 3: Dùng pen tool hoặc bất kỳ công cụ nào khác, vẽ  một hình chữ nhật với chiều cao 2px, chiều rộng gần bằng với button, tô màu trắng, và đặt gần cuối mép button.

Hướng dẫn tạo web button trong photoshop

Áp dụng cho nó hiệu ứng Inner shadow:

Hướng dẫn tạo web button trong photoshopOuter Glow: 
Hướng dẫn tạo web button trong photoshopKết quả đạt được
Hướng dẫn tạo web button trong photoshop

Tiếp tục, tại layer này bạn vào menu Layer > Layer mask> Reveal All sau đó dùng công cụ gradient kéo màu từ trắng sang đen.

Hướng dẫn tạo web button trong photoshop

Bạn sẽ được ánh sáng thế này
Hướng dẫn tạo web button trong photoshop

Bước 4: Dùng pen tool vẽ một hình như  bên dưới, tô màu đen, sau đó vào menu Filter > Blur > Gaussian blur cho nó thông số là 0.6

Hướng dẫn tạo web button trong photoshop

Tiếp tục, bạn nhấn Ctrl + click vào thumnail của shape 1 (bước 1), đảo ngược vùng chọn, sau đó click lên layer ở bước 4 và nhấn nút Delete. Bỏ vùng chọn với Ctrl + D, bạn sẽ được:

Hướng dẫn tạo web button trong photoshopTiếp theo, nhân đôi layer này, nhấn Ctrl + T và chọn Flip Horizontal và di chuyển sang phải

Hướng dẫn tạo web button trong photoshop

Bước 5: Đến đây chúng ta đã xong phần tạo nút, nhưng để cho hoàn thiện các bạn hãy thêm chữ  cho nó.

Hướng dẫn tạo web button trong photoshopÁp dụng Gradient Overlay:

Hướng dẫn tạo web button trong photoshop

Stroke: 
Hướng dẫn tạo web button trong photoshop

Đến đây phần text cũng đã xong

Hướng dẫn tạo web button trong photoshop

Bước 6: Để tạo bóng đổ cho nó, trước tiên bạn phải merge tất cả các layer lại, sau đó, nhân đôi layer (Ctrl + J), sau đó nhấn Ctrl + T và chọn Flip Vertical. Đi đến Layer > Layer mask > Reveal All và kéo Gradient cho  nó như ở bước 3.

Hướng dẫn tạo web button trong photoshop

Với hướng dẫn này, hy vọng sẽ bổ sung thêm cho các bạn những kỹ năng cần thiết về photoshop cho mình và áp dụng nó để trang web hoàn thiện, thu hút hơn.

Hãy thử làm theo hướng dẫn, bạn sẽ cảm thấy vô cùng thú vị. Chúc các bạn thành công!.

Chuyên Mục:

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

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