10.02.2011

Photoshop - Kỹ thuật tạo thanh Menu

Muốn thiết kế được một giao diện Website đẹp trước hết cần nên chú trọng đến bố cục, màu sắc. Và thanh menu cũng đóng một vai trò rất quan trọng, đó là một trong những điểm nhấn khi người khác nhìn vào Website của bạn.


Bước 1 : Tạo một file mới có kích thước 400 x 100, màu nền là màu trắng.
Sau đó chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật, tô màu #9a9a9a như hình dưới :


Bước 2 : Click chọn vào Layer chứa hình chữ nhật mới vẽ, click chuột phải và chọn Blending Options.Trong đó các bạn chọn Gradient Overlay và đổ màu như sau :




- Chọn cả Stroke (cũng trong hộp thoại Blending), ta chọn màu # 424242.






Bước 3 : Dùng công cụ Rectangular Marquee Tool (M) để vẽ một hình chữ nhật.
- Tiếp theo vào menu Select / Modify / Contract và đặt giá trị là , sau đó tạo 1 Layer mới, đổ cho nó một màu bát kỳ, ấn Ctrl +D để lọa bỏ vùng chọn và chuyển Fill của Layer mới này xuống còn 0%. Như hình dưới :



Bước 4 : Vẫn chọn Layer mới tạo, vào Stroke trong Blending Options :



Màu Gradient là từ "Trong Suốt" đến Màu Trắng. Bây giờ bạn sẽ có được "nút bấm" như hình dưới :



Bước 5 : Tạo thêm một Layer mới nữa, dùng công cụ Rectangular Marquee Tool (M) vẽ một hình chữ nhật có chiều cao là 1 px và chiều rộng nằm vừa bên trong "nút bấm" .
- Sau đó dùng Gradient Tool (G), chọn Radial Gradient đổ màu (từ "màu trắng" đến "trong suốt" cho nó).



Bước 6 : Tạo một Layer mới và tạo một vùng chọn như hình dưới, dùng Linear Gradient (có màu từ #dadada đến "Trong Suốt") để đổ màu cho nó :



Bước 7 : Cuối cùng dùng công cụ Text Tool (T) viết tên nút bấm lên đó.



Các bạn làm tương tự với các nút còn lại và ta được kết quả như hình trên cùng.

No comments:

Post a Comment