Tạo menu ngang cho web với màu tối
Giới thiệu
Trong bài hướng dẫn này, bạn sẽ học cách tạo menu ngang cho website của mình một cách đơn giản và hiệu quả. Mình sẽ chỉ cho bạn từng bước để thực hiện trong Photoshop.
Download PSD…
Nếu bạn không có thời gian để thực hiện bài hướng dẫn nhưng lại muốn xem kết quả thì bạn có thể download tại đây.
Bắt đầu
1. Trước tiên, bạn phải tạo một bản vẽ Photoshop với kích thước 891×132.
2. Sau đó tạo Blending Options cho layer của mình bằng cách nhấn chuột phải và chọn Blending Options.
3. Bản vẽ của bạn sẽ như thế này đây
4. Bây giờ bạn tạo hình chữ nhật với nền trắng bằng công cụ Marquee.
5. Và lại tạo Blending Options cho layer này
6. Bản vẽ của bạn bây giờ sẽ thành thế này đây
7. Bạn có thể tạo thêm 1px trên cùng màu trắng bằng công cụ Marquee (zoom lên mới được nhe).
8. Tiếp đến bạn thay đổi style của layer sang Soft Light và opacity khoảng 43%
9. Sau đó là thêm chữ và sử dụng Blending Options cho lớp chữ
10. Giờ thì sẽ như thế này đây
11. Bây giờ mình sẽ tạo những đường ngăn cách menu. Sử dụng công cụ Marquee để chọn vùng rộng 2px
Tô trắng vùng này và sử dụng Blending Options
12. Giờ thì thành thế này đây. Bạn có thể chỉnh opacity xuống 20%.
13. Bây giờ thì copy layer này và đặt giữa các link
14. Đến bước này, bạn sẽ muốn phân biệt link nào đang được active. Bạn hãy tạo một layer mới và tô màu bất kỳ.
15. Chỉnh Blending Options cho layer vừa mới tạo
16. Giờ thì thấy kết quả rồi nè
Tiếp đến chúng ta sẽ tạo khung tìm kiếm
17. Bạn sẽ phải tạo một layer mới và tô màu đen.
18. Chỉnh Blending Options cho layer mới
19. Kết quả sẽ như thế này
20. Tiếp đến, bạn sẽ tạo nút Tìm kiếm. Sử dụng công cụ Rounded Rectangle với bán kính 5px.
21. Và chỉnh Blending Options cho nút
22. Kết quả đây
24. Bạn tạo một layer mới nằm trên nút và tô màu trắng. Chỉnh độ tương phản, chọn 1px và Edit -> Clear
25. Bây giờ bạn chuyển style của layer thành Soft Light và opacity là 47%
26. Giờ thì nó thế này đây
27. Thêm chữ nữa thì sẽ như thế này
Đẹp wá phải không?
Photoshop, Thiết kế web http://www.idotutorials.com/2008/09/03/professional-dark-header/
Ðược xem 3254 lần, 2 hôm nay
