Thiết kế một mẫu giao diện website

Thiết kế một mẫu giao diện website - phần 1

Graphiclancer.com | Graphiclancer and Web design Studio | Huong dan thiet ke web layout

Xin chào, hôm nay mình sẽ cùng các bạn thiết kế một mẫu layout cho website cá nhân nhé. Trong bài viết này có những điểm sẽ hơi khác so với các quy chuẩn hay những điều trong sách. Vì vậy chúng ta cứ coi như là một trải nghiệm sáng tạo đi, biết đâu sau đó nó lại là nền tảng cho những ý tưởng khác thì sao?

Graphiclancer Studio

Chúng ta sẽ bắt đầu với phần mềm Adobe Photoshop (ở đây mình sử dụng phiên bản Adobe CS4). Một phần mềm khá thông dụng ở Việt Nam.

1. Tạo một file mới với thiết lập web có sẵn trong Photoshop nhưng ở đây mình đặt lại chiều rộng là 1260px.

2. Tôi cần hình ảnh bầu trời vì vậy sau khi search với từ khóa "sky wallpaper" tôi kiếm được một bức ảnh ưng ý. Màu trời xanh trong,vài đám mây gợn phía trên.

3. Tôi tạo một vùng chọn có kích thước rộng hết cỡ (1260px). Và copy vùng chọn này thành 1 layer mới (click chuột phải chọn Layer Via Copy ). Lưu ý đừng cắt nhé, vì có thể còn dùng đến lớp ảnh gốc này. (đây cũng là nguyên tắc thiết kế của tôi, không bao giờ cắt và xóa layers trên file gốc)

4. Đổi màu nền của lớp layer dưới cùng (thông thường là Background) giống màu của bầu trời. Tôi bấm chuột phải vào layer này trong bảng Layer (F7) và chọn Blending option. Trong bảng này tôi chọn Color Overlay và chấm công cụ chọn màu vào mẫu bầu trời tôi mới copy ở trên.

5. Ở đây có một phần phân cách giữa 2 lớp. Việc tới ta phải xóa đi sự phân cách này.

Tôi chọn lớp layer bầu trời và thêm vào cho nó lớp mặt nạ (Layer Mask).
Chọn công cụ Gradient Tool với độ chuyển từ trắng sang đen.
Kẻ một đường từ trên xuống dưới sao cho điểm kết thúc không vượt quá lớp bầu trời.