Khi bạn bắt tay vào thiết kế một trang web bạn phải xem xét kỹ kích thước của nó. Nếu bạn tạo một file hình với kích thước 1024 x 768, thì tôi nghĩ nó không thích hợp cho lắm vì nếu máy của bạn có độ phân giải là 1024 x 768 thì trang web hiển thị tốt nhưng đối với những máy có độ phân giải 800 x 600 thì sao...? chắc chắn là bạn phải dùng thanh cuộn để mà kéo qua kéo lại mới xem được nội dung trang web. Mà phần nhiều các pc(ở nước ta ) bây giờ đều sử dụng độ phân giải 800 x 600.
Do vậy, theo tôi nghĩ kích thước tốt nhất để hiển thị trang web là 780 x 580. Có thể bạn nghĩ tại sao không phải là 800 x 600.? Tại sao lại nhỏ như vậy? Không nhỏ đâu bạn ạ, tuy các màn hình đều sử dụng độ phân giải 800 x 600 nhưng màn hình này sẽ hiển thị khác màn hình kia, có thể lớn hơn hoặc có thể nhỏ hơn... Vì vậy kích thước này là thích hợp,Tuy tôi nói chiều cao là 580, nhưng thực ra đối với layout lại như tôi sắp trình bày đây thì chiều cao không quan trọng , bời vì bạn sẽ cắt hình ra sau khi hoàn thành à áp dụng các tính năng như kéo dãn hình, set background... của trình thiết kế web d9e63 bạn hiển thị layout loại này...
Các bạn đã hiểu cơ bản về kích thước của một trang web, bây giờ chúng ta sẽ bắt đầu.
Tạo một file hình mới nền trắng, kích thước 780 x 580 pixels.
Tạo một layer mới, đặt tên là header. Sau đó chọn công cụ
Rectangular Marquee Tool (M) vẽ một vùng chọn như hình để làm Header cho trang web.
Vẫn giữ vùng chọn, vào
Select -> Modify -> Smooth. Để bo tròn 4 góc của vùng chọn, trong ô
Sample Radius bạn gõ vào
2 px, OK. Ta được vùng chọn như sau.
Fill màu cho vùng chọn, bạn có thể fill bất cứ màu gì cũng được. Sau đó
Cttl + D để bỏ chọn.
Nhấp chuột phải vào layer header chọn
Blending Option...
Hộp thoại Layer Style hiện ra, bạn chọn vào ô
Drop Shadow và set các giá trị như sau:
- Opacity: 50%,
- Distance: 2 px,
- Size: 2 px.
Chọn tiếp
Stroke và thiết lập thông số sau:
Click vào
Gradent Overlay và thiết lập các thông số như sau:
Ok, Ta được hình sau:
Ctrl click vào layer header để lấy vùng chọn, sau đó và
Select -> Modify -> Contract... 10 px.Tiếp theo, bạn tạo một layer mới nằm trên layer header và đặt tên cho nó là inner header. Chọn layer inner header và fill màu
#032A5F cho vùng chọn. Sau đó
Ctrl + D để bỏ chọn.
Click chuột phải vào layer inner header chọn
Blending Option... Hộp thọai layer hiện ra.
Chọn
Inner Shadow và set:
- Blend Mode: Normar,
- Color: While,
- Angle: 130,
- Distance: 2 px.
- Choke: 10 %,
- Size: 2 px.
Ok, ta được hình sau:
Bây giờ ta thêm tí màu mè cho header của ta thêm hấp dẫn.
Ctrl click vào layer inner header để lấy vùng chọn, sau đó chọn công cụ
Elliptiacal Marquee Tool (M).
Trên thanh Option chọn
Subtract from selection.
Sau đó vẽ một elip như hình:
Ta được vùng chọn sau:
Tạo một layer mới nằm trên trên layer inner header và đặt tên là cloudy. Bấm
D để trả màu mặc định cho PTS,
X để đổi màu foreground với background.
Chọn công cụ
Gradient Tool. Trên thanh option chọn
Linear Gradient,
Foreground to Transparent.
Giữ phím shift và kéo một đường từ trên xuống. Sau đó bỏ chọn vạ Opacity của layer cloudy xuống còn khỏang
65%.Bạn thấy mép của layer hơi rạng rạng phải không ? , để cho mềm hơn bạn chọn công cụ
Rectangular Marquee Tool (M), cũng ở trên layer cloudy bạn chọn như sau:
Vào
Filter -> Blur -> Gaussian Blur... Radius: 2pxĐã xong header... bây giờ thì các bạn đặt thêm logo hay tên web của bạn vào...
Kết quả của tui nè...
Click here -->
HeaderTiếp theo, ta tạo thanh Navigasion bar.
Chọn công cụ
Rectangular Marquee Tool (M) và kéo tạo vùng chọn sau:
Sau đó vào
Modify -> Smooth... Sample Radius: 2 px.
Tạo một layer mới, đặt tên là nav bar, Fill màu cho vùng chọn, fill màu gì cũng được. Sau đó bỏ chọn.
Click chuột phải lên layer header chọn
Copy Layer Style, sau đó click chuột phải lên layer nav bar, chọn
Paste Layer Style. Ta được hình sau:
Bạn cũng có thể copy layer header vau đó
Ctrl + T để căn chỉnh...
Bạn thêm vào bar các link liên kết... để hoàn chỉnh nó.
Kết quả bar của tôi đây:
Click here -->
NAV BarTạo thân website.
Chọn công cụ
Rectangular Marquee Tool (M) và vẽ một hình chữ nhật :
Select -> Modify -> Smooth... Sample Radius: 2 px.Tạo một layer mới đặt tên là body, và fill màu bạn muốn, sau đó bỏ chọn.
Click chuột phải lên layer header chon copy Layer Style, sau đó click chuột phải lên layer body chọn Paste Layer Style.
(Bạn cũng có thể copy layer header sau để
Ctrl + T để căn chỉnh)
Ctrl click vào layer body để lấy vùng chọn,
Select -> Modify -> Contract... 10 px.
Select -> Transform Selection. Sau đó kéo vùng chọn lên một chút như hình:
Tiếp tục, tạo một layer mới đặt tên là inner body và fill màu
#032A5F. bỏ chọn
Copy layer style của layer inner header và paste vào layer inner body.
Xong, vậy là chúng ta đã thiết kế xong một layout của trang web... Còn phần cách ráp vào web như thế nào cho hợp lý thì các bạn đọc bài Build up layout của Lão Bá Tước.
Kết quả cuối cùng:
CLick here Demo của layout này nè:
Click here