BÀI 2: THIẾT KẾ & TRÌNH BÀY NỘI DUNG MẪU WEB ĐƠN GIẢN

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 2: THIẾT KẾ & TRÌNH BÀY NỘI DUNG MẪU WEB ĐƠN GIẢN

2.1. Công cụ tạo và chỉnh sửa văn bản(phím tắt T)

Chọn công cụ Type trên thanh Toolbox và kích chọn vào điểm muốn trình bày văn bản trên giao diện web.

Các kiểu nhập text:

·       -  Horizontal Type tool: Nhập văn bản theo chiều ngang

·       - Vertical type tool: Nhập văn bản theo chiều dọc

·       - Option bar:

o   Chọn font: Arial, Time new Roman..

o   Kiều chữ: Regular, Bold...

o   Kích thước: 14px...

o   Hiệu ứng: None, Sharp...

o   Căn chỉnh : Dùng để căn chỉnh với đoạn văn bản

o   Màu sắc:

·        - Bảng Character:

2.2. Tô màu đồng nhất & tô màu chuyển cho đối tượng

2.2.1. Tô màu đồng nhất: thuộc tính Color Overlay

Chuột phải vào Layer gọi thẻ Blending option/ Color overlay, lựa chọn này sẽ tô màu đồng nhất cho đối tượng:

·         - Blending mode: chế độ hòa trộn, mặc định Normal

·       - Chọn màu

·       - Opacity: độ mờ đục của màu

·       - Check thuộc tính Preview

2.2.2. Tô màu chuyển cho đối tượng

Màu chuyển dựa trên sự thay đổi màu sắc giữa các màu. Từ đậm đến nhạt và ngược lại. Các menu box sử dụng màu chuyển sẽ tạo ra các style nổi bật so với nôi dung trang web.

Gọi thuộc tính Gradient Overlay trong thẻ Blending Option:

·         -   Gradient: Thiết lập màu chuyển

·      -  Style: Kiểu chuyển, với web dùng 2 kiểu chính là Linear, Reflected

·      - Angle: Góc chuyển

·      -  Scale: độ chuyển giữa các màu

·      - Align with Layer: Tất cả các layer được tạo đều được kế thừa lựa chọn

·      -  Reverse: Đảo ngược màu chuyển.

Vẽ một số menu sử dụng màu chuyển như sau:

1- Màu dưới:  #0b4005, màu trên: #34d20f & scale=100%

2-  Màu dưới: #0d4a06, màu trên: #27960c và scale=10%

2.2.3. Tạo hiệu ứng đổ bóng cho Layer

-  Tạo bóng ở phía sau phần ảnh của Layer:

Ví dụ menu sử dụng hiệu ứng đổ bóng:

 Hình :Đối tượng được tạo bóng với Angle=120, Distance=5, Size=5

Tùy chỉnh của hiệu ứng đổ bóng:

Chuột phải vào layer chọn Blending option:

•       Blen mode: mặc định là normal
•      Opacity: độ mờ đục của bóng
•      Angle: góc chiếu của bóng
•      Distance: khoảng cách giữa bóng và phần ảnh
•      Size: kích thước bong

- Tạo bóng phía trước của phần ảnh

·        Dùng để tạo hiệu ứng khi vẽ các box text

·        Tùy chỉnh tương tự như đổ bóng phía sau ảnh

·        Ví dụ :

2.2.4. Vẽ một số icon đơn giản cho bố trí thông tin

Bài tập:  Thiết kế giao diện web- Nasco.com.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/