Tạp Chí CNTT

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 :

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.

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) , với radius là 5px. 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:

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 và #3f0000 theo vị trí từ trái sang phải, rồi chọn phần 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 :

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 :

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

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 :

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 radius là 10px, và lần này, chúng ta vẽ một hình nhỏ hơn như sau :

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

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 By là 10px. 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.

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.

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

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 :

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á.

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.

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