Hôm nay mình tiếp tục giới thiệu đến cho các bạn một menu được thiết kế rất đẹp mắt mà công việc thực hiện thì rất đơn giản và dễ dàng. Chỉ cần các công cụ tạo hình và phối màu gradient, chúng ta sẽ cho ra kết quả như thế này đây :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 1

Đầu tiên các bạn tạo một file mới với kích thước vào khoảng 540 x 440 pixels. Rồi vào Edit > Fill đổ màu đen ( #1b1b1b ) vào làm màu nền background.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 2 :

Các bạn tạo một layer mới, rồi chọn công cụ Rounded Rectangle Tool (U) Rounded Rectangle Tool , với radius5px. Sau đó vẽ một hình chữ nhật như hình sau, rồi nhấn Ctrl + Enter để có được vùng lựa chọn như hình bền dưới:

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Bây giờ chúng ta sẽ tiến hành đổ màu vào cho vùng lựa chọn này. Các bạn chọn công cụ Gradient Tool (G) Sau đó ấn định màu gradient sẽ là #bc0303#3f0000 theo vị trí từ trái sang phải, rồi chọn phần Radial Gradient Radial Gradient , sau đó dùng chuột kéo từ giữa đỉnh xuống phần giữa đáy. Lúc đó ta sẽ có hiệu ứng gradient như sau :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 3 :

Tiếp theo các bạn vào Layer > Layer Styles > Outer Glow và thiết lập thông số như hình sau :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Kết quả nhận được sẽ thế này:

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 4 :

Lựa chọn công cụ Text Tool rồi gõ vào dòng tiêu đề cho menu, các bạn có thể sử dụng font tùy thích, và với màu trắng như hình bên dưới :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 5 :

Tạo một layer mới và Chúng ta lại chọn công cụ rounded rectangle tool một lần nữa với radius10px, và lần này, chúng ta vẽ một hình nhỏ hơn như sau :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Đổ màu cho vùng lựa chọn này là màu đen xám (#111111).

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 6 :

Tại layer hình mà chúng ta vừa mới tạo ở bước 5, các bạn nhấn Ctrl + Click chuột trái vào layer này, lúc này màn hình sẽ xuất hiện một vùng lựa chọn. Kế tiếp, tạo một layer mới, rồi vào Select > Modify > Contract , với Contract By10px. Lúc này chúng ta sẽ có một vùng lựa chọn nhỏ hơn so với hình mà chúng ta tạo ở bước 5.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Tiếp tục đổ màu radial gradient ( Làm tương tự ở bước 2) cho vùng lựa chọn này với màu từ trái sang phải lần lượt là màu trắng (#ffffff) và màu trong suốt (transparent). Các bạn nhớ là lần này, chúng ta sẽ kéo chuột đi từ góc trên cùng phía bên trái, và tới góc phải dưới cùng.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Giảm opacity của layer này xuống còn 5%.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

 

Bước 7 :

Chọn công cụ gõ chữ (phím tắt là T) và chèn thêm vài dòng chữ mình họa cho tường link như sau :

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Bước 8 :

Bây giờ là lúc mà chúng ta sẽ chèn thêm một số đoạn ngăng cách giữa các text link. Các bạn chọn công cụ rectangular marquee tool (M) rồi vẽ một hình nằm ngang khoảng 1px, sau đó đổ màu ( #1e1e1e) vào đó. Làm xong, các bạn nhấn Ctrl + J để nhân bản cho nhiều cái khác. Các bạn nhớ chọn công cụ Zoom để phóng to cho dễ làm nhá.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

Bước 9 :

Bước cuối cùng là chúng ta tạo màu background cho những link được active hay hover. Cac bạn tạo một layer nằm dưới layer link active, rồi dùng công cụ Rectangular Marquee Tool (M) và vẽ một hình chữ nhật , rồi đổ màu (#171717) vào là xong.

Tạo Navigation cho web với màu đỏ đen bằng Photoshop

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

  • Photoshop
  • November 23, 2012
  • 0 comment
  • 290 lượt xem

Recent posts

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Người dùng có thể mất quyền truy cập tài khoản iCloud nếu “sa lưới” vào hình thức lừa đảo mới […]

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Bản vẽ thiết kế được cho là của iPhone 16 Pro cho thấy dòng iPhone thế hệ mới của Apple […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

© 2021 Tạp Chí CNTT. Mr Hoang