Trong bài này, tôi sẽ hướng dẫn bạn thật chi tiết cách tạo một layout cho website thương mại.
Điều quan trọng khi làm layout cho trang web thương mại là tính chuyên nghiệp của nó. Chuyên nghiệp ở đây cách kết hợp màu sắc, cách bố cục và cách trình bày. Một trang web thương mại thì mục đích quan trọng nhất của họ là cung cấp thông tin cho khách hàng của họ. Do vậy, những hiệu ứng 3D, hiệu ứng sấm chớp giật đùng đùng, bánh xe, tam giác ... có thể gạt bỏ ra và tất cả chúng ta nên chú trọng vào tính hiệu quả của nó.
Lý thuyết hơi nhiều rồi, bây giờ chúng ta bắt tay vào làm. Dưới đây là hình kết quả của tutorial này. Nếu bạn thấy thích thì bắt đầu, còn hông thích thì bạn có thể tìm tut khác về giao diện để đọc nhé!
http://www.bantayden.com/webgraphic/comple...yout/ketqua.jpgVậy là bạn thích phải không? okie! bắt đầu nào.
1. Mở một tài liệu mới với kích thước là 770 x 780 Pixel. Nền trắng.
2. Trên hộp công cụ trọn bảng chọn màu và đặt màu nền trước và nền sau như hình sau
3. Tiếp theo cũng trong hộp công cụ, bạn chọn công cụ Gradient (G) và trên thanh tuỳ biến công cụ nhấp chuột vào ô hiển thị để kéo bảng chọn Gradient ra và chọn mẫu đầu tiên là Foreground to Background.
4. Tạo một layer mới và đặt tên là Logo Background, dung Eliptical Marquee (M) và tạo một hình chữ nhật bằng với kích thước là 222 x 81 Px.
5. Kéo một đường theo hướng mũi tên để được hình sau.
6. Tượng tư như thế bạn tạo một hình chữ nhật thứ hai nhưng cao khoảng 10 Px và tô nó với màu da cam #253D63. Bạn luôn luôn phải nhớ là tạo một layer mới trước khi làm gì với nó và đặt tên cho layer đó để sau này đỡ nhầm.
7. Làm tương tự với thanh bên cạnh, với màu là màu #0B183E
Tuỳ chọn: Adobe Photoshop có một tính năng giúp bạn hệ thống lại Layer Palette cho nó gọn gang bằng chức năng Set. Chức năng này giống như cách tạo Folder trong Windows vậy, nó giúp bạn gộp các layer cùng một chức năng vào một set để dễ quản lý hơn. Theo tôi với những bài tập lớn cần vài chục layer cùng một lúc, thì tôi luôn tạo các Layer Set để hệ thống lại cho đỡ nhầm lẫn sau này. Tôi đã tạo một set và gom các layer Màu Vàng, Màu Xanh, Logo Background làm một.
8. Bây giờ chúng ta sẽ tạo những nút di chuyển. Bạn lại chọn công cụ Eliptical Marquee, tạo một layer mới và đặt tên là Button. Tạo một vùng lựa chọn với kích thước là 220 x 25 Px.
Lưu ý: Trong bài này nhiều lần tôi đề cập đến con số cụ thể Pixel. Để biết được chính xác thông số Pixel mà bạn sẽ tạo, bạn vào Window > Info để mở Info Palette ra.
Nếu info Palette của bạn không hiển thị đơn vị là Pixel, thì bạn nhấn vào mũi tên nhỏ ở góc trên bên phải và chọn Palette Option và trong bảng hiện ra chọn Pixel từ menu thả xuống.
9. Đặt màu nền trước là màu xám nhạt # DFE0E0 và nền sau là màu trắng. Chọn Gradient như ở bước ban đầu và kéo một đường từ trên xuống dưới.
10. Vào Layer > Layer Style > Stroke và thiết lập thống số như hình sau
11. Tạo một layer mới và dung Elliptical Marquee vẽ một vùng lựa chọn bằng một nửa kích thước chiều cao của nút và tô nó với màu trắng. Trên Layer Palette hạ mức Opacity của nó xuống còn 60%.
12. Dùng Pencil vẽ một đường như hình dưới với màu giống như màu Stroke.
13. Dùng Pentool hoặc công cụ nào bạn thích để tạo được hình tam giác này.
14. Gom hết những layer này vào một Set. Cách gom thì bạn chỉ cần kéo layer và thả nó vào set là được. Tiếp theo bạn nhấn chuột vào mũi tên để thu nhỏ set này lại, kéo và thả nó vào nút “Create New Layer” trên Layer Palette để nhân đôi nó lên, di chuyển nó sao cho được hình dưới.
15. Tiếp theo chúng ta sẽ tạo một cột ở bên dưới thanh Navi. Bạn chọn Rounded Rectangular Tool trên hộp công cụ. Và trên thanh tuỳ biến bạn đặt Radius là 2 Px.
16. Vẽ một hình chữ nhật với kích thước là 220 x 440 Px. Vào Layer > Layer Style > Stroke với thống số như bước 10.
17. Bây giờ chúng ta sẽ tạo các đường chấm chấm. Trong hộp công cụ bạn chọn Pencil
18. Bạn vào Window > Brush để hiển thị Brush Palette. Nhấp đúp chuột vào ô Brush tip Shape và thiết lập thông số như hình sau.
19. Tạo một layer mới và tạo các đường chấm như bạn thích
Việc còn lại khá là đơn giản, bạn chỉ việc them hình, them text và làm nốt những chỗ còn lại là xong.
Tài nguyên cho bài này:Font chữ: Tahoma, 11 Px, None.
Steelfish,
Button (Nhấp chuột phải > Save Target as)
Toàn bộ layout ở PSD format
Layout (Nhấp chuột phải > Save Target as)
Pass giải nén: vietphotoshop
Sat Jan 12, 2008 9:57 pm