Tutorial Cách thiết kế giao diện Website trong Photoshop

Trong hướng dẫn này, chúng ta sẽ tạo ra một cách bố trí web sáng tạo và chuyên nghiệp trong Photoshop một cách bài bản. Trong hướng dẩn, bạn có thể học các phương pháp hữu ích để tạo ra các thiết kế.

Xem trước kết quả cuối cùng


final-results.png

Tạo một Giao diện Web Chuyên nghiệp Hướng dẫn Photoshop

Tài nguyên

Bước 1: Mockup

Trước khi bắt đầu thiết kế, chúng ta cần lập kế hoạch cho các yêu cầu, giao diện và chức năng. Sau đó chúng ta cần phải phù hợp với những ý tưởng này thành một bố cục để thực hiện. Mockups và khung wire frames rất hữu ích để tạo bố cục với rất nhiều tính linh hoạt.

Nên sử dụng các tông màu sám để chú thích và bố cục. Chúng ta có thể tập trung vào việc bố trí như một toàn thể và tránh làm rối khi có nhiều màu sắc. Điều đó cho phép tự để nhanh chóng thay đổi và sắp xếp lại mọi thứ.

img1a.png

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

Tạo một tài liệu mới ở 1200 x 1500.

img1.png

Đây là bố cục rộng 960 pixel, vì vậy chúng ta cần xác định khu vực làm việc bằng cách thêm guidelines (đường hướng dẩn - mình sẽ gọi là đường dẩn cho nó nhanh nhé). Nhấn Ctrl + A để chọn toàn bộ tài liệu.

img2.png

Vào Select > Transform Selection. Thu nhỏ vùng chọn xuống rộng 960 pixel. Đó là khu vực làm việc của cách bố trí.

img3.png

Thêm đường dẩn vào vùng chọn.

img4.png

Chúng ta cần tạo một số khoảng đệm giữa biên giới và nội dung mà chúng ta sẽ thêm vào sau! Với vùng chọn này một lần nữa chọn Transform Selection. Thay đổi kích thước vùng chọn thành 920 pixel. Như vậy là chúng ta Padding 20 pixel cho mỗi bên tổng cộng 40 pixel padding.

img5.png

Tiếp tục thêm đường dẩn vào vùng chọn.

img6.png

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

Hãy tạo tiêu đề của bố cục! Chọn một chiều cao là 465 pixel.

img8.png

Fill vào vùng chọn màu xám và sau đó sử dụng Layer Styles để thêm màu sắc và gradient. Theo dõi điều này trong suốt quá trình thiết kế để duy trì hệ thống phân cấp thị giác.

img9.png

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

img10.png

Nó sẽ giống như thế này.

img11.png

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

img12.png

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

img13.png

Nhấn Delete để xóa phần đã chọn. Sẽ được kết quả như hình dưới đây.

img14.png

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

img15.png

Chúng ta cần phải chắc chắn rằng điểm nổi bật nằm ở trung tâm. Chọn các layer, tiêu đề và nổi bật và nhấn "V" để chuyển sang Công cụ Move. Trên bảng Tùy chọn, hãy chọn Căn chỉnh Trung tâm Ngang.

img16.png

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

img17.png

Ẩn các cạnh một cách trơn tru bằng cách sử dụng một Mask cho gradient. Chọn công cụ Gradient Tool, tạo gradient dưới đây trong bảng Options.
img18.png

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

img19.png

Bước 4: Tạo Patternure Pattern

Bây giờ tạo ra một mẫu kiểm tra đơn giản và áp dụng cho tiêu đề. Chọn Công cụ Pencel, đặt kích thước bàn chải lên 2 pixel và thêm hai chấm chạm vào mỗi góc khác. Tắt nền và chọn các dấu chấm. Chọn Edit> Define Pattern.

img20.png

Tạo một layer mới và đặt nó dưới layer highlight. Chọn khu vực mà chúng ta muốn áp dụng mẫu. Nhấn Shift + F5 để tải hộp thoại Điền vào. Chọn mẫu vừa tạo. Và OK.

img21.png

Lựa chọn được điền vào mẫu. Hãy xem xét kỹ hơn.

img23.png

Pha trộn mẫu một cách trơn tru vào phần đầu. Thêm một Layer Mask vào layer pattern. Chọn một bàn chải mềm và sơn với một bàn chải mềm lớn. Chọn #ffffff cho màu bàn chải. Giảm độ mờ Opacity xuống khoảng 60% và sơn. Nếu bạn thấy nó quá mạnh thì điều chỉnh Opacity của Layer.

img24.png

Pha trộn độc đáo.

img25.png

Bước 5: Thêm Mẫu Logo

Nền đã hoàn thành khá nhiều. Bây giờ thêm kiểu 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 bàn chải mềm với màu #19535a. Thêm địa điểm.

img27.png

Thêm chữ. Phông chữ mà tôi sử dụng là "Bebas".

img28.png

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

img29.png

img30.png

Bước 6: Điều hướng

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

img31.png


img32.png

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

img33.png

Nhấp đúp vào hình thu nhỏ của layer, chọn Gradient Overlay. Sử dụng các cài đặt này.

img34.png

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

Chọn là 580 x 295 pixel.

img35.png

Fill vào vùng chọn màu xám.

img36.png

Mang theo hình ảnh bạn muốn sử dụng. Clip nó vào layer mà chúng ta vừa tạo ra ở trên.

img37.png

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

img38.png

Đặt màu brush màu # 000000 và thêm dấu chấm.

img39.png

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

img40.png

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

img41.png

Đặt lại bóng ngay trên thanh trượt.

img42.png

Tôi thu hẹp lại theo chiều dọc. Tiếp theo căn giữa nó với thanh trượt. Chọn cả hai lớp và trên bảng tùy chọn bấm vào nút Căn chỉnh Trung tâm.

img43.png

Nhân đôi bóng và xoay theo chiều dọc. Đặt nó vào cạnh dưới cùng của thanh trượt.

img44.png

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

img45.png

Giảm các nút Opacity xuống 50%

img46.png

Mở hình dạng tự động từ Options Panel và chọn mũi tên này. Thêm nó vào các nút.

img47.png

Thêm một dải. Fill vào màu #000000.

img48.png

Giảm Opacity xuống 50%.

img49.png

Ở đây chúng ta có thể thêm mô tả về dự án.

img50.png

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

Một chào mừng và một số mô tả về trang web ở đây.

img51.png

img52.png

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

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

img53.png

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

img54.png

Bước 10: Áp dụng Gradient cho nền

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

img55.png

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

img56.png

img57.png

Bước 11: Thêm thanh trượt điều khiển

Tạo điều khiển xoay.

img58.png

Áp dụng Inner Shadow vào một điều khiển để cho biết mục đang hoạt động hiện tại trong thanh trượt.

img59.png

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

Chọn công cụ Pencil Tool và vẽ 1 pixel line. Chọn màu xám nhạt (#aaaaaa).

img60.png

Ẩn các cạnh một cách trơn tru bằng cách sử dụng mặt nạ gradient.

img61.png

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

Đó là thời gian để có được vào phần nội dung thực tế. Đây là bố cục 3 cột. Chúng ta cần tạo ra 3 cột bằng nhau với một khoảng đệm giữa chúng. Tôi đã làm một tính toán đơn giản và chia không gian có sẵn thành 3 hộp với chiều rộng bằng 25 pads giữa chúng.

img62.png

Thêm các dòng hướng dẫn vào các hộp. Sau đó gỡ bỏ các hộp. Và đây là những cột.

img63.png

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

img65.png

img66.png

Hãy tạo một nút "Readmore" đơn giản. Chọn công cụ Rectangle tròn để vẽ hình dạng.

img67.png

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

img68.png

img69.png

Nhân đôi nút.

img71.png

Chúng tôi sẽ thêm một số mục công việc gần đây. Tôi đã vẽ ba hộp giữ hình ảnh và áp dụng 3px cho Stroke.

img72.png

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

img73.png

img74.png

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

img75.png

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

img76.png

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

img77.png

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

img78.png

Tạo một nút cho Thêm Tweets.

img79.png

Áp dụng các Styles.

img80.png

img81.png

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

img82.png

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

Thực hiện lựa chọn cho chân trang và điền nó với một giá trị màu xám.

img83.png

Áp dụng Color Overlay.

img84.png

Cuối cùng thêm điều hướng chân và thông tin bản quyền. Và điều đó kết thúc phiên. Hãy nhìn vào hình ảnh cuối cùng.

img85.png

Kết quả cuối cùng

final-results1.png

Hình ảnh tiêu đề được cung cấp bởi DepositPhoto

Nguồn: photoshoptutorials​
 

Đính kèm

  • Web-Design.jpg
    Web-Design.jpg
    134.5 KB · Lượt xem: 0
Back
Bên trên