Home / Thủ Thuật / Photoshop / Tạo Navigation cho web với màu đỏ đen bằng Photoshop

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

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 !

About TapChi CNTT

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.