Bài 1: Thiết kế khung Web layout

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 1: THIẾT KẾ KHUNG WEB LAYOUT

1.1.    Kích thước các khung trong Web

Đối tượng	Kích thước	Ghi chú
Chiều rộng Web	1024 px	Chiều cao tùy thuộc nội dung
Chiều rộng nội dung chính	960px; 800px
Chiều cao Banner	200px; 220px
Chiều cao Menu chính	32px; 35px
Chiều rộng Box	200px;220px	Chiều cao tùy thuộc nội dung
Chiều cao Menu Box	30px;32px
Khoảng cách giữa các cột, box	10px;15px
Kích thước chữ	12px;14px

1.2.    Các công cụ sử dụng trong vẽ khung

• Tạo một file ảnh mới: Vào menu File/New (hoặc Ctrl +N) mở bảng New để tạo một file ảnh mới:

Trong đó:

o   Name:  Điền tên file ảnh

o   Preset: Chọn kiểu kích thước(ở đây ta chọn custom)

o   Width: nhập chiều rộng - 1024px

o   Height: nhập chiều cao 1100px

o   Resolution: độ phân giải mặc định 72 px/inch

o   Background Contents: chọn kiểu nền file ảnh, ở đây ta chọn White

• ·        Rectang Tool: Trên thanh Toolbox chọn bộ công cụ Shape tool(phím tắt U), sau đó chọn công cụ Rectang Tool:

Cho phép tự tạo một layer mới có chứa shape layer với khung là hình chữ nhật, giữ Shift để được hình vuông(để chuyển layer chứa shape layer về dạng  không chứa ta ấn liên tiếp Ctr + G, Ctr + E).

Lựa chọn option bar của Rectang tool trước khi vẽ như sau:

1.     Chọn vẽ với Shape layer

2.     Lựa chọn khung hình chữ nhật

3.     Vẽ đối tượng tự do

4.     Chọn màu đối tượng là màu trắng: #fffff.

• ·        Tạo đường viền: Chuột phải vào layer đang vẽ khung trên bảng Layer, chọn thẻ Blending Option, chọn thuộc tính Stroke.

Mục đích của ta là vẽ một khung hình chữ nhật để biểu diễn các thành phần của website, vậy nên ta sẽ vẽ ra một hinh chữ nhật có nền màu trắng và đường viền có độ rộng là 1 px.

Trên bảng Blending Option và thuộc tính Stroke:

1. Size: độ rộng đường viền: 1px.
2. Position: Inside (Chọn đường viền nằm trên biên của vùng chọn).
3. Color: chọn màu xám nhạt(#aaaaa)
4. Check thuộc tính preview để xem kết quả.

• ·        Thuộc tính Transform & Free Transform: Cho phép điều chỉnh vị trí của đối tượng bằng việc nhập vào tọa độ x,y trên thanh Option bar. Để gọi lệnh Transform bằng cách chọn đối tượng & ấn Ctrl + T.

Chọn điểm bất kì trên 9 điểm đánh dấu đối tượng, nhập tọa độ x & y của điểm đó, đối tượng sẽ được đặt tại vị trí như ý muốn.

• ·        Thước kẻ: Vào menu View/ Rulers để mở hộp thước đo. 

Dùng để kéo các dòng kẻ để căn chỉnh vị trí tương đối giữa các đối tượng.

Để đặt đơn vị của công cụ Rulers là pixel vào menu Edit/Preferences chọn Units & Rulers:

Tại mục Units chọn đơn vị cho Rulers & Type là Pixels

Bài tập: Thiết kế layout website dưới dạng khung như sau

Mô tả giao diện Web 01 :

·        Tất cả được vẽ dưới dạng khung hình chữ nhật với

o   Kích thước đường viền:  1px.

o   Màu đường viền: xám nhạt # aaaa.

o   Màu khung: màu trắng # ffffff.

·        - Kích thước Web: 1024 x 1200 px.

·        - Kích thước phần nội dung: 800 x 1200px.

·        - Logo: khoảng trống phần logo150 x 100 px.

·        - Box tìm kiếm: 100 x 32px.

·        - Menu chính: 800 x 32px.

·        - Banner: 800x220.

·        - Box trái, Box phải: 200x400px.

·        - Box giữa: Kích thước còn lại tính theo chiều rộng .

·        - Menu Box trái  phải: 200 x 32px.

·        - Khoảng cách giữa các box: 10px.

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/