Đăng nhập

[Thiết kế web] – Tạo menu đơn giản bằng Photoshop

  • 23/12/2014 - 1:04 PM
  • 1577 Views

[CNTech.vn] – Thiết kế menu bằng Photoshop thì muôn hình vạn dạng, có vô vàn ý tưởng, vô vàn kiểu dáng. Dưới đây là 1 kiểu menu ngang khá đơn giản và đẹp mắt.

thiet-ke-web-tao-menu-don-gian-bang-photoshop-1

Bước 1

Tạo 1 file mới với kích thước tùy ý bạn, ở đây tôi làm với size 1200×600px.

Tạo 1 layer mới nằm trên cùng. Đặt tên nó là menu.

Dùng công cụ Rounded Rectangle Tool (U), thiết lập giá trị Radius khoảng 12px và tạo 1 hình chữ nhật dài bo góc. Kích thước khoảng 960 × 80px:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-2

Rounded Rectangle Tool

Bước 2

Tôi dùng font chữ tôi yêu thích là Leangue Gothic, cỡ chữ 28pt, và tiến hành gõ text, ở đây tôi dùng giá trị màu #999999 cho text, và#FFFFFF là khi hover:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-3

Bước 3

Dùng Font Arial, cỡ chữ 12pt và thêm 1 vài từ mô tả rút gọn dưới menu, tương tự như trên, tôi dùng giá trị màu #684125 cho text, và#a16927 khi hover:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-4

Bước 4

Nhấn chuột phải vào layer menu và chọn Blending Opitions, thiết lập các tùy chọn sau:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-5

Drop Shadow

thiet-ke-web-tao-menu-don-gian-bang-photoshop-6

Gradient Overlay

thiet-ke-web-tao-menu-don-gian-bang-photoshop-7

Stroke

Bạn được kết quả:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-8

Bước 5

Tạo 1 layer mới nằm trên layer menu, dùng Pencil Tool , kích thước 1px, giữ Shift và tạo các đường phân cách:

thiet-ke-web-tao-menu-don-gian-bang-photoshop-9

thiet-ke-web-tao-menu-don-gian-bang-photoshop-10

Công việc cuối cùng là kiếm 1 hình nền nào đó bạn ưng ý và đưa vào tác phẩm, ở đây tôi dùng 1 tấm hình màu xanh và áp dụng 1 lớpInner Shadow.

thiet-ke-web-tao-menu-don-gian-bang-photoshop-11