Thiết kế website

Thiết kế web photoshop như thế nào phần 1

27/05/2020

13588

Thiết kế web photoshop như thế nào phần 1. Trước khi thực hiện tạo một giao diện website chuyên nghiệp bằng Photoshop. Bạn cần có một website template và đương nhiên là công cụ chỉnh sửa. Thiết kế hàng đầu hiện nay Adobe Photoshop.

Tải về Adobe Photoshop: Download Photoshop

Tải file PSD Website Template về máy tính và sử dụng: Download Photoshop Website Template .

Bước 1: Thiết kế web photoshop Mockup

Bạn cần lên kế hoạch cho các yêu cầu, giao diện và chức năng. Sau đó phải sắp xếp các ý tưởng thành một layout phù hợp để thực hiện. Mockup và wireframe hữu ích trong việc tạo các layout linh hoạt.

Trong phần hướng dẫn này mockup và wire frame được đặt cùng các tone màu xám. Bằng cách này bạn có thể loại bỏ màu sắc trên nền. Để tập trung vào layout và không bị rối mắt bởi các màu sắc khác nhau. Và bạn có thể tự do và điều chỉnh và sắp xếp mọi thứ. Một mockup có thể hiển thị các chi tiết như bạn muốn.

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

Bước tiếp theo tạo một layout có chiều rộng là 960 pixel. Tạo một tài liệu mới có kích thước 1200×1500.

Dưới đây là layout có chiều tộng 960 pixel. Và bạn sẽ phải chọn khu vực để làm việc trên đó. Nhấn tổ hợp phím Ctrl + A để chọn toàn bộ tài liệu.

Chọn Select =>Transform Selection. Co chiều rộng phần đã chọn xuống 960 pixel. Đó là khu vực làm việc của layout.

Thêm đường dẫn guide line vào phần này.

Tiếp theo bạn cần tạo một số padding giữa border và nội dung mà bạn sẽ thêm sau đó. Trên khu vực đang hoạt động, chọn Transform Selection. Thay đổi kích thước chiều rộng khu vực đã chọn xuống 920 pixel. Điều này có nghĩa là 2 padding 2 bên có tổng kích thước padding 40 pixel.

Thêm đường guide line vào khu vực đã chọn.

Bước 3: Thiết kế web photoshop Tạo Header

Thực hiện theo các bước này tạo header cho layout. Tạo một khu vực có chiều cao là 465 pixel.

Đầu tiên Fill khu vực này bằng màu xám, sau đó sử dụng Layer Styles để thêm màu và gradient. Thực hiện thao tác này trong suốt quá trình thiết kế để duy trì hệ thống phân cấp thị giác (visual hierarchy).

Thêm Gradient vào header. Kích đúp chuột vào hình thumbnail thu nhỏ của layer, chọn Gradient Overlay. Tạo 2 Gradient màu như hình dưới đây bằng cách sử dụng các thiết lập tương tự.

Lúc này màu sắc khu vực đã chọn giống như hình dưới đây:

Bước tiếp theo là thêm điểm nổi bật vào header. Tạo một layer mới bằng cách sử dụng tổ hợp phím Ctrl+Alt+Shift+N. Chọn một brush mềm có đường kính là 600px và chọn mã màu #19535a cho brush. Chỉ cần click chuột vào giữa header 1 lần.

Chọn khu vực ở phía trên đầu có chiều cao 110 pixel.

Nhấn Delete đẻ xóa phần đã chọn. Lúc này sẽ có dạng:

Co chiều dọc lại bằng cách nhấn tổ hợp phím Ctrl + T.

Hãy chắc chắn rằng điểm nổi bật nằm ở trung tâm header. Chọn layer, header và điểm nổi bật và nhấn phím V để chuyển qua công cụ Move Tool. Trên bảng Options Panel bạn chọn nút Align Horizontal Centers.

Tạo một layer mới, sử dụng công cụ Pencil Tool có mã màu #01bfd2 để vẽ một đường nổi bật.

Ẩn các cạnh bằng cách sử dụng gradient mask. Chọn công cụ Gradient Tool, tạo gradient trong bảng Options Panel như hình dưới đây:

Áp dụng gradient trên.

Bước 4: Tạo Texture Và Pattern

Bước tiếp theo là tạo một checker pattern và áp dụng checker pattern này vào header. Chọn công cụ Pencil Tool, thiết thập kích thước brush thành 2 pixel và thêm 2 chấm vào 2 góc đối diện nhau như hình dưới đây. Bỏ background và chọn các dấu chấm này. Chọn Edit =>Define Pattern.

Tạo một layer mới và đặt layer vào bên dưới layer nổi bật. Chọn khu vực mà bạn muốn áp dụng pattern. Nhấn phím Shift + F5 để mở hộp thoại Fill. Chọn pattern mà bạn vừa tạo và chọn OK.

Khu vực đó sẽ được fill bằng pattern.

Blend pattern vào header. Thêm một Layer Mask vào layer Pattern. Chọn brush mềm với mã màu là #ffffff, Opacity của brush xuống còn 60%. Ngoài ra bạn có thể điểu chỉnh Opacity cho phù hợp với yêu cầu của bạn.

Sau khi hoàn tất, bạn có thể thấy rằng Blend khá bắt mắt.

Xem thêm: Cách thiết kế 1 website bằng photoshop phần 2

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.