BÀI 3: VẼ CÁC BUTTION & MENU BOX VỚI SHAPER TOOL(U)

Sau đây là một khóa học nho nhỏ cho những ai đang hay dự định học Lập trình và thiết kế web. Nói sẽ là nền tảng kiến thức nhỏ cho các bạn. Ở đây mình chia sẻ những hiểu biết mình có về mảng thiết kế. Có nhiều cái mình sẽ giới hạn chứ không nói quá đầy đủ, bởi đam mê là phải tìm tòi chứ không phải muốn là được ngay. Nhanh và gọn là cũng là cần câu cơm khi bạn đã hiểu và nắm chắc nó!

1. Hướng dẫn học viên sử dụng thành thạo các kỹ thuật vẽ trong photoshop CS5.
2. Thiết kế giao diện website.

BÀI 3: VẼ CÁC BUTTION & MENU BOX VỚI SHAPER TOOL(U)

3.1.     Công cụ Rounded Rectang Tool 

   - Công cụ cho phép vẽ hình có cạnh vát được nhập bằng chỉ số Radius  trên thanh optionbar:   

Menu box với Radius: 10px, màu: #0a5d06

·- Kích chọn hình tam giác trên thanh option bar để chọn kích thước chính xác cho đối tượng bằng cách chọn thuộc tính Fixed Size:

3.2.    Công cụ Custom Shape Tools

Cho phép vẽ với các hình có sẵn với nhiều thể loại:

3.3.    Vẽ menu với hiệu ứng Bevel and Emboss

Thuộc tính Bevel & emboss tạo hiệu ứng vát cạnh và rập nổi, chạm khắc

• o   Outer bevel: Vát cạnh ra bên ngoài phần ảnh của lớp
• o   Inner bevel: vát cạnh vào bên trong phần ảnh của lớp
• o   Emboss: Rập nổi phần ảnh của lớp
• o   Pillow emboss: Khắc rãnh xung quanh phần ảnh của lớp
• o   Stroke emboss: Rập nổi phần nét của lớp

Các style này có thể kết hợp với 2 tùy chọn

• o   Contour: tạo hiệu ứng cho đường viền của lớp hiệu ứng
• o   Textture: Dùng các màu texture để tạo hiệu ứng
• o   Satin: tạo bóng phía trong phần ảnh của lớp

Menu sử dụng Style: Inner bevel,Technique: smooths, Direction: Up,Size=9

Menu sử dụng style: pillow emboss, technique: smooth, direction: up, size =18

Bài tập 1: Vẽ các kiểu menu Box

Bài tập 2: Vẽ các buttion

Bài tập 3: Thiết kế giao diện trang Vnexpress.vn

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

Tác giả: Đích Ken + Phan Trọng Biển
Nguồn: http://dichken.blogspot.com/