Hướng dẫn thiết kế website bằng Photoshop (Phần 3): Tạo layout trang web chuyên nghiệp

Thiết kế giao diện đẹp, sạch sẽ và thiết thực là một phần thiết yếu của các nhà thiết kế Web. Trong hướng dẫn này, chúng ta sẽ tạo ra một layout web sạch sẽ và chuyên nghiệp bằng Photoshop.

Tài liệu 

  • Bộ biểu tượng Function - wefunction.com
  • Biểu tượng Twitter - iconeden.com
  • Phông Bebas - dafont.com

Bước 1: Sử dụng Mockup

Trước khi bắt đầu thiết kế, bạn cần lập kế hoạch các yêu cầu, giao diện và chức năng, sau đó biến chúng thành những ý tưởng layout. Mockup và khung dây rất hữu ích để tạo bố cục với rất nhiều tính linh hoạt.

Ở đây chúng ta sẽ sử dụng các tông màu xám, bằng cách này sẽ loại bỏ màu sắc từ cảnh và để tập trung vào việc bố trí layout tổng thể và tránh làm rối tung màu sắc. Điều đó cho phép nhanh chóng thay đổi và sắp xếp lại mọi thứ. Một mockup cung cấp nhiều chi tiết như bạn muốn.

Mẫu Mockup cho bố cục trang web

Bước 2: Thiết lập Canvas

Ở đây chúng ta đã có một bản thiết kế chi tiết (blue print) cho layout web, vậy hãy cùng nhau thiết kế lại. Tạo một tài liệu mới với kích thước 1200 x 1500 pixel.

Tạo tài liệu mới

Ở đây chúng ta cần layout 960 pixel do đó cần xác định khu vực làm việc bằng cách thêm đường dẫn. Nhấn Ctrl + A để chọn toàn bộ tài liệu.

Nhấn Ctrl + A để chọn toàn bộ tài liệu

Chuyển đến Select > Transform Selection, thu nhỏ vùng chọn xuống chiều rộng 960 pixel. Đó là khu vực làm việc của layout.

Thu nhỏ vùng chọn xuống chiều rộng 960 pixel

Thêm đường hướng dẫn vào vùng lựa chọn.

Thêm đường hướng dẫn cho vùng chọn

Tạo một số khoảng cách giữa biên giới và nội dung để thêm vào sau đó. Với vùng được lựa chọn, chọn Transform Selection một lần nữa, thay đổi kích thước vùng lựa chọn lên chiều rộng 920 pixel. Điều đó có nghĩa là 20 pixel mỗi bên, tổng cộng là 40 pixel.

Tạo khoảng cách giữa đường biên và nội dung

Thêm đường dẫn vào vùng lựa chọn.

Thêm đường dẫn cho vùng lựa chọn mới

Bước 3: Tạo tiêu đề

Hãy tạo tiêu đề cho layout, chọn chiều cao là 465 pixel.

Tạo tiêu đề với chiều cao 465 pixel

Phủ vùng lựa chọn này với màu xám và sau đó sử dụng Layer Styles để thêm màu sắc và gradient. Thực hiện theo phong cách này trong suốt quá trình thiết kế để duy trì hệ thống phân cấp thị giác.

Phủ vùng lựa chọn với màu xám

Thêm Gradient vào tiêu đề. Nhấp đúp vào hình thu nhỏ của lớp, chọn Gradient Overlay. Tạo 2 màu gradient sử dụng cài đặt như bên dưới.

Tạo 2 màu gradient như hình

Chúng ta được kết quả sau:

Hình ảnh sau khi gradient màu

Tiếp theo cần phải thêm một điểm nổi bật cho tiêu đề. Tạo một lớp mới bằng cách nhấn tổ hợp phím Ctrl + Alt + Shift + N. Chọn brush Soft với đường kính 600px và màu #19535a và chỉ cần nhấp một lần vào giữa tiêu đề để tạo điểm nổi bật.

Tạo điểm nổi bật cho tiêu đề

Chọn phần trên đầu có chiều cao 110 pixel.

Chọn phần trên đầu tiêu đề với chiều cao 110 pixel

Nhấn Delete để xóa phần đã chọn.

Xóa phần đã chọn

Thu hẹp nó theo chiều dọc bằng cách nhấn tổ hợp phím Ctrl + T.

Thu hẹp theo chiều dọc

Để đảm bảo phần nổi bật ở vị trí trung tâm tiêu đề, chọn các lớp tiêu đề và lớp nổi bật, sau đó nhấn "V" để chuyển sang Move Tool. Trên bảng Options Panel, chọn nút Align Horizontal Centers.

Điều chỉnh phần nổi bật ở giữa trung tâm tiêu đề

Tạo một lớp mới, vẽ một đường nổi bật 1 pixel bằng cách sử dụng công cụ Pencil Tool với màu #01bfd2.

Vẽ một đường nổi bật 1 px

Ẩn các cạnh bằng cách sử dụng một mặt nạ gradient. Chọn công cụ Gradient Tool, tạo gradient như bên dưới trong bảng Options.

Ẩn các cạnh bằng cách sử dụng mặt nạ gradient

Áp dụng các gradient trên.

Hình ảnh sau khi áp dụng các gradient trên

Bước 4: Tạo mẫu texture

Bây giờ tạo một mẫu kiểm tra đơn giản và áp dụng cho tiêu đề. Chọn công cụ Pencil Tool, sử dụng brush kích thước 2 pixel và thêm hai chấm vuông chạm nhau ở mỗi góc. Tắt nền và chọn các dấu chấm sau đó chọn Edit > Define Pattern.

Tạo mẫu kiểm tra đơn giản

Tạo một lớp mới và đặt nó dưới lớp nổi bật ở phần trên. Chọn khu vực muốn áp dụng mẫu, nhấn Shift + F5 để tải hộp thoại Fill. Chọn mẫu vừa tạo và nhấn OK.

Chọn lớp mới cho mẫu vừa tạo

Phủ vùng lựa chọn với mẫu vừa tạo.

Phủ lớp mới với mẫu vừa tạo

Pha trộn mẫu một cách hài hòa với tiêu đề. Thêm một Layer Mask vào lớp mẫu này. Chọn brush Soft lớn với màu #ffffff. Giảm Opacity xuống còn khoảng 60% và sơn. Nếu thấy quá mạnh, bạn có thể điều chỉnh độ mờ của lớp này.

Pha trộn mẫu một cách hài hòa với tiêu đề

Chúng ta có kết quả sau:

Hình ảnh sau khi pha trộn mẫu với tiêu đề

Bước 5: Thêm logo

Sau khi hoàn thành nền, bây giờ đến bước tạo logo. Trước khi thêm kiểu, hãy thêm một điểm nổi bật nằm phía sau logo. Chọn brush Soft với màu #19535a và thêm một chấm.

Tạo một điểm nổi bật sau logo

Gõ chữ, sử dụng phông chữ bạn thích, ở ví dụ này sử dụng phông chữ "Bebas".

Gõ chữ tạo logo

Áp dụng các hiệu ứng tinh tế cho logo.

Áp dụng hiệu ứng cho logo trong cửa sổ Drop Shadow

Thêm hiệu ứng cho logo trong phần Gradient Overlay

Bước 6: Thêm thanh điều hướng

Thêm các liên kết điều hướng.

Thêm các liên kết điều hướng

Tạo nút điều hướng. Sử dụng công cụ Rectangular Marquee Tool, phủ nó với bất kỳ màu nào và để Opacity Fill xuống mức 0.

Tạo nút điều hướng

Nhấp đúp vào hình thu nhỏ của lớp, chọn Gradient Overlay và áp dụng theo thiết lập này.

Thiết lập Gradient Overlay cho nút điều hướng

Bước 7: Thanh trượt nội dung

Chọn một vùng với kích thước 580 x 295 pixel.

Chọn một vùng kích thước 580 x 295 px

Phủ vùng chọn này với tông màu xám.

Phủ vùng chọn với tông màu xám

Tải ảnh lên lớp chúng ta vừa mới tạo ở trên.

Tải ảnh lên lớp vừa tạo

Bây giờ thêm hiệu ứng bóng vào thanh trượt. Tạo một lớp mới, chọn công cụ Brush Tool, thiết lập đường kính lên đến 400 pixel. Mở bảng Brushes, giảm độ Roundness với các cài đặt dưới đây.

Thiết lập độ Roundness

Sử dụng brush màu #000000 và thêm một dải màu đen.

Thêm một dải màu đen

Áp dụng Gaussian Blur để làm mềm các cạnh.

Sử dụng Gaussian Blur để làm mềm cạnh

Chọn phần dưới cùng của bóng và xóa nó.

Chọn phần dưới cùng và xóa nó

Định lại vị trí bóng ngay trên thanh trượt.

Định lại vị trí bóng ngay trên thanh trượt

Sau đó thu hẹp lại theo chiều dọc và căn giữa thanh trượt. Chọn cả hai lớp và trên bảng Options bấm vào nút Align Horizontal Centers.

Chọn nút Align Horizontal Centers

Sao chép lớp bóng này và xoay theo chiều dọc, đặt nó vào cạnh dưới cùng của thanh trượt.

Sao chép, xoay lớp bóng và đặt dưới cùng thanh trượt

Tạo nút điều khiển thanh trượt bằng công cụ Marquee Rectangular và phủ với màu #000000.

Tạo nút điều khiển thanh trượt

Giảm Opacity xuống 50%.

Giảm Opacity xuống 50% cho nút thanh trượt

Mở hình dạng tự động trong bảng Options Panel và chọn mũi tên như hình minh họa, sau đó thêm nó vào nút.

Chọn nút mũi tên

Tạo một khung với màu #000000.

Tạo một khung với màu #000000

Giảm Opacity xuống 50%.

Để Opacity với giá trị 50% cho khung này

Thêm thêm mô tả về dự án.

Thêm mô tả cho dự án

Bước 8: Thêm một số dòng chào mừng

Một lời chào mừng và một số mô tả về trang web.

Thêm lời chào mừng

Thêm lời mô tả cho trang web

Bước 9: Hoàn thiện tiêu đề

Chúng ta đã gần như hoàn thành tiêu đề. Bây giờ chỉ cần thêm một hiệu ứng bóng tinh tế để hoàn tất. Tạo một bóng như đã tạo ra trước đó bằng cách sử dụng công cụ Brush.

Tạo bóng sử dụng công cụ Brush

Để khoảng cách 1px giữa phần đầu và bóng.

Để khoảng cách 1px giữa phần đầu và bóng

Bước 10: Sử dụng Gradient cho nền

Tạo một màu gradient từ xám nhạt đến trắng.

Tạo màu gradient từ xám nhạt đến trắng

Tạo một lớp mới bên dưới tiêu đề và áp dụng màu gradient trên.

Tạo lớp mới bên dưới tiêu đề và áp dụng màu gradient trên

Bước 11: Thêm thanh trượt xoay

Tạo thanh trượt xoay

Tạo thanh trượt xoay

Áp dụng Inner Shadow cho một điểm để biết mục đang hoạt động trong thanh trượt.

Sử dụng Inner Shadow cho biết mục đang hoạt động

Bước 12: Tạo đường phân chia nội dung

Chọn công cụ Pencil Tool và vẽ một đường 1 pixel với màu xám nhạt (#aaaaaa).

Vẽ một đường 1 pixel với màu xám nhạt

Ẩn các cạnh mượt mà bằng cách sử dụng mặt nạ gradient.

Ẩn các cạnh bằng cách sử dụng mặt nạ gradient

Bước 13: Thêm nội dung chính

Đây là layout 3 cột nên chúng ta cần tạo ra 3 cột bằng nhau với một khoảng cách giữa chúng. Ở đây thực hiện một tính toán đơn giản và chia không gian có sẵn thành 3 phần bằng nhau và khoảng cách giữa chúng là 25 pixel.

Chia bố cụ thành 3 cột bằng nhau

Thêm các đường hướng dẫn vào các phần, sau đó gỡ bỏ các phần.

Thêm các đường dẫn cho ba phần

Thêm một số dịch vụ đặc trưng bằng cách thả vào các biểu tượng từ bộ biểu tượng Function. Duy trì khoảng cách giữa các vật thể đồng nhất.

Thêm các biểu tượng Function

Thêm nội dung cho các biểu tượng Function

Tạo một nút "Read More" đơn giản bằng cách chọn công cụ Rectangle Tool để vẽ hình dạng.

Tạo nút Read More

Áp dụng Gradient Overlay và Stroke cho nút này.

Áp dụng Gradient Overlay cho nút này

Áp dụng Stroke cho nút này

Sao chép nút này cho các phần khác.

Sao chép nút này cho các phần khác

Chúng ta sẽ thêm một số mục công việc gần đây bằng cách vẽ ba hộp giữ hình ảnh và áp dụng stroke 3 pixel.

Vẽ ba hộp giữa ảnh

Kéo hình ảnh vào các hộp.

Kéo hình ảnh vào các hộp

Kéo đủ ba hình ảnh vào hộp

Tạo bóng như đã làm trước đó và đặt nó dưới hộp.

Tạo bóng dưới hộp

Thêm một số mô tả dự án.

Thêm mô tả cho công việc

Hãy tạo nguồn cấp dữ liệu Twitter. Thả vào biểu tượng con chim Twitter.

Chèn biểu tượng con chim Twitter

Thêm một thông báo Twitter.

Thêm thông báo Twitter

Tạo một nút cho More Tweets.

Tạo nút More Tweets

Áp dụng các kiểu như hình ảnh bên dưới.

Thiết lập Gradient Overlay cho nút More Tweets

Thiết lập Stroke cho nút More Tweets

Thêm nội dung văn bản.

Thêm nội dung văn bản

Bước 14: Tạo chân trang và hoàn thiện

Chọn một vùng cho chân trang và phủ nó với màu xám.

Chọn vùng chân trang và phủ nó với màu xám

Áp dụng Color Overlay như bên dưới.

Thiết lập Color Overlay cho chân trang

Cuối cùng thêm một điều hướng chân và thông tin bản quyền.

Thêm điều hướng chân trang và bản quyền

Kết quả cuối cùng

Hình ảnh layout web cuối cùng

Download: file PSD

Xem thêm: 

  • Hướng dẫn thiết kế website bằng Photoshop (Phần 1): Tạo theme cho cửa hàng bán đồ thủ công
  • Hướng dẫn thiết kế website bằng Photoshop (Phần 2): Tạo Landing page cho trang web du lịch

Chúc các bạn thực hiện thành công!