Bước 1: Hãy khởi động Adobe Photoshop và tạo một bản ghi mới (778px x 600px) rồi đổ đầy nó bằng màu xám nhẹ ( #F1F1F1) .

Bước 2: Tạo một lớp mới. Hãy áp dụng công cụ tạo hình chữ nhật cho lớp mới. Chọn kích cỡ của vùng lựa chọn trên lớp mới là 728 x 600 pixel. Khoanh vùng chọn cố định theo công cụ tạo hình. Thay đổi kiểu trên thanh tùy chọn Normal đối với kích cỡ cố định. Áp dụng chiều cao và chiều rộng của vùng chọn theo từng yêu cầu.

Đổ đầy bằng màu trắng (#FFFFFF). Hãy đảm bảo rằng lớp mới của bạn được nằm ngang ở giữa Canvas. Nhìn giống như hình này.

Bước 3: Hãy áp dụng tuỳ chọn Blending- Outer Glow tới lớp màu trắng( nhấp chuột phải vào lớp màu trắng để ứng dụng tuỳ chọn blending). Các tính năng Blend Mode – Outer Glow cũng ứng dụng tuỳ chọn này cho lớp của bạn.

Nền của bố cục website được hoàn tất.

Bước 4: Hãy bắt đầu với phần đầu trang, nó là một phần quan trọng nhất của bố cục website bởi vì phần còn lại của website thì giống nhau. Hãy thêm lớp mới trên canvas của bạn bằng cách chọn ( ctrl+N- bạn tuỳ ý đặt tên ) . Hãy chọn kích thước 728x20 bằng việc sử dụng công cụ tạo hình hình chữ nhật tại phía trên của canvas và dùng thêm màu xanh lục để lựa chọn vùng này ( # 494F1C ) .

Bước 5: Hãy thêm lớp mới trên canvas của bạn bằng cách chọn ( ctrl+N- bạn tuỳ ý đặt tên) . Thêm hình ảnh có kích thước 728x 125. Lúc này nhìn nó giống như hình này.

Bước 6: Tương tự giống như bước 4. Thêm một lớp mới nữa rồi chọn kích thước 728x25 và đổ đầy bằng mã màu # B1C144.

Bước 7: Hãy tạo thêm logo cho phần đầu của website và thêm một lớp mới rồi tạo tuỳ chọn hình chữ nhật cỡ 285x 85. Bổ sung thêm màu trắng trên lớp mới tuỳ chọn của bạn. Giảm 50% độ mờ của lớp. Hãy ứng dụng outer glow cho lớp này ( tương tự giống bước 2). Thêm logo của bạn trên lớp màu trắng và bây giờ ta có một hình như dưới đây:

Bước 8: Hãy tạo submenu và thêm một lớp mới nữa . Tạo tuỳ chọn hình chữ nhật cỡ 175x 370 và bổ sung màu xám nhạt ( # F1F1F1 ). Đừng loại bỏ tuỳ chọn của bạn mà ứng dụng stroke để lựa chọn. Vào phần Edit> Stroke Apply Outside stroke để chọn mầu D1D1D1.

Bước 9: Lặp lại bước 8 bằng cách thay thế kích thước 530x 370. Điều chỉnh lớp mới của bạn theo yêu cầu và lúc này thì Canvas của bạn sẽ giống như hình dưới đây phải không ?

Bước 10: Bây giờ đến phần cuối của bố cục website. Hãy ứng dụng một lớp mới trên canvas. Tạo tuỳ chọn cỡ 728x25 và thêm màu xám nhẹ ( # F1F1F1 ).

Bước 11: Ứng dụng đoạn text trên bố cục trang web của bạn với bất cứ phông chữ nào mà bạn thích. Tôi đã sử dụng phông chữ century gothic cho phông chữ trên menu vì đoạn tin tôi đã dùng phông chữ Arial rồi. Bố cục website cuối cùng đã được hoàn tất như hình ở dưới đây:



Hãy thay đổi màu sắc, hình ảnh và kích cỡ như bạn muốn và bạn hãy thiết kế những bố cục website mới nữa nhé vì nó thực sự dễ dàng.