Tạo Bố Cục Thiết Kế Trang Website Một Chiều Trong Photoshop (P3) ✅

Hướng Dẫn Các bạn Tạo Bố Cục Thiết Kế Trang Website Một Chiều Trong Photoshop (P3) ✅

Bước 11 - Thêm các danh mục đầu tư

Tạo một nhóm mới và đặt tên nó là "danh mục đầu tư". Sao chép hình lục giác từ Illustrator và dán nó vào Photoshop như một đối tượng thông minh. Chúng tôi đang lặp lại hình lục giác để duy trì phong cách thị giác giống nhau trong suốt toàn bộ thiết kế.

Vào Edit> Free Transform (Ctrl / Cmd + T) và thiết lập thang điểm theo chiều ngang và chiều dọc là 50%. Thêm hiệu ứng Lớp phủ màu cho lớp này bằng cách sử dụng màu # f4eee7 và 1px bên trong hiệu ứng Stroke bằng màu # c3b9ab. Đặt tên cho lớp này là "border".

Nhân đôi lớp "border" (Ctrl / Cmd + J), nhấp chuột phải vào nó và chọn Clear Layer Style. Sau đó vào Edit> Free Transform (Ctrl / Cmd + T) và thiết lập thang ngang và dọc thành 42%. Đặt tên cho lớp này là "image_holder" và đảm bảo rằng nó nằm ở giữa lớp "border".

Mở hình ảnh mà bạn muốn làm nổi bật trong khu vực "Danh mục" và di chuyển nó qua lớp "image_holder". Đặt tên cho layer này là "image", nhấp chuột phải vào nó và chọn Create Clipping Mask. Hình ảnh của bạn bây giờ chỉ có thể được nhìn thấy trong hình dạng hình lục giác "image_holder".

Đặt tất cả ba lớp bên trong một nhóm và đặt tên là "mục # 1".

Nhân đôi nhóm "item # 1" 7 lần và sắp xếp các danh mục đầu tư của bạn ở dạng coronene .

Danh mục đầu tư thứ tư có màu đường viền khác để chỉ ra rằng nó được chọn. Đơn giản chỉ cần thay đổi lớp phủ màu # a7c5bd và màu sắc nét cho # 83a098 cho rằng "biên giới" lớp.

Bây giờ chúng ta sẽ thêm nội dung cho mục danh mục đầu tư tích cực (mục chúng tôi đã nêu ở trên). Tạo một nhóm mới và đặt tên là "mục hoạt động". Chọn công cụ Rectangle tròn (U), đặt Radius tới 4px và tạo một hình chữ nhật tròn với kích thước 220px x 250px và màu # f5f2ea. Đặt tên cho lớp này là "border" và thêm 1px bên trong Stroke vào nó bằng màu # c3b9ab. cong ty thiet ke web hcm

Chọn công cụ Hình chữ nhật (U) và tạo một hình chữ nhật với kích thước 200px x 230px ở giữa hình chữ nhật được làm tròn.

Mở một hình ảnh mà bạn muốn làm nổi bật trong khu vực này, di chuyển nó qua lớp "image_holder". Đặt tên cho layer này là "image", nhấp chuột phải vào nó và chọn Create Clipping Mask. Bây giờ hình ảnh của bạn chỉ hiển thị bên trong hình chữ nhật bạn đã tạo.

Chọn Công cụ Loại (T) và ghi tên cho mục danh mục bằng cách sử dụng phông chữ Oswald với kích thước 24px và màu # 7b9d94. Di chuyển lớp văn bản này 20px sang phải từ cạnh bên trái của hình ảnh. Thêm hiệu ứng Drop Shadow vào tiêu đề này bằng cách sử dụng các cài đặt từ hình ảnh bên dưới.

Sử dụng Công cụ Line (U) để tạo một đường ngang có kích thước 370px x 1px và màu # c3b9ab. Di chuyển dòng này 10px bên dưới dòng tiêu đề. Nhân đôi lớp này (Ctrl / Cmd + J), thay đổi màu của dòng mới thành # faf9f8 và di chuyển nó xuống 1px. cong ty thiet ke website y te suc khoe

Chọn Công cụ Loại (T) và tạo một hộp văn bản với chiều rộng 370px. Thêm một đoạn văn bản bằng cách sử dụng phông chữ Open Sans Light với kích thước 15px và màu # 5c574f. Ngoài ra, hãy đi tới bảng Nhân vật và đặt chiều cao là 24px, như chúng ta đã làm cho đoạn "Dịch vụ".

Bước 12 - Tạo vùng "Giới thiệu"

Khu vực "Giới thiệu" sẽ chứa hai cột có ảnh, tên và mô tả của hai người. Chúng tôi sẽ tiếp tục sử dụng hình lục giác cho hình ảnh, để giữ cho thiết kế web phù hợp.

Tạo một nhóm mới và đặt tên là "Giới thiệu". Sao chép hình lục giác từ Illustrator và dán nó vào Photoshop như một đối tượng thông minh. Vào Edit> Free Transform (Ctrl / Cmd + T) và scale xuống layer này cho đến khi nó rộng tới hai cột lưới. Đặt tên cho lớp này là "border", nhấp đúp vào nó để mở cửa sổ Layer Style và sử dụng các cài đặt từ hình dưới đây. Đối với hiệu ứng Lớp phủ màu Tôi đã sử dụng màu # d0cbc0 và hiệu ứng Stroke đã sử dụng # 958f82.

Nhân đôi lớp "border" (Ctrl / Cmd + J), nhấp chuột phải vào layer mới và chọn Clear Layer Style. Sau đó dùng Free Transform (Ctrl / Cmd + T) để phóng to hình này. Đặt tên cho lớp này là "image_holder".

Mở trong Photoshop ảnh bạn muốn hiển thị trong khu vực này và di chuyển nó qua lớp "image_holder". Nhấp chuột phải vào lớp hình ảnh của bạn và chọn Create Clipping Mask.

Chọn Công cụ Loại (T) và thêm một số nội dung bên cạnh hình ảnh. Đối với tiêu đề tôi đã sử dụng phông chữ Oswald với kích thước 24px và màu # a39f94. Đối với khối văn bản tôi đã sử dụng phông chữ Open Sans Light với kích thước 15px và màu # 5c574f. Tôi cũng thiết lập để dẫn đến 24px. cty thiết kế website marketing đẹp chuẩn seo giá rẻ

Sử dụng công cụ Line Tool (U) để tạo một dấu phân tách ngang giữa tiêu đề và khối văn bản. Đối với dòng đầu tiên sử dụng màu # bebbb1 và đối với cột thứ hai sử dụng #ffffff.

Lặp lại bước này để thêm cột thứ hai cho khu vực "Giới thiệu".

Bước 13 - Tạo nền mẫu liên lạc

Khu vực "Liên hệ" sẽ có hai cột: một cho biểu mẫu liên hệ và một cho một nguồn cấp dữ liệu Twitter. Chúng ta sẽ áp dụng nguyên tắc thiết kế tương phản để phân biệt hai cột.

Hình thức liên lạc sẽ được mở rộng hơn là các cột thức ăn Twitter vì nó là quan trọng hơn và nó cần phải thu hút sự chú ý nhiều hơn nữa. Để hoàn thành mục tiêu này, chúng tôi cũng sẽ tạo ra một nền khác với mẫu liên hệ. Chúng ta hãy làm việc bây giờ.

Tạo một nhóm mới và đặt tên là "Liên hệ". Tạo một nhóm khác bên trong này và đặt tên cho nó là "contact bg". Chọn công cụ Rectangle tròn (U) và tạo một hình chữ nhật tròn có kích thước 620px x 360px và màu # d0cbc1. Đặt tên cho lớp này là "border", nhấp chuột phải vào nó và chọn Convert to Smart Object. công ty thiết kế website trang trí

Vào Filter> Noise> Add Noise và sử dụng các thiết lập từ hình dưới đây. Nhấp đúp vào lớp này để mở cửa sổ Layer Style và sử dụng các cài đặt từ hình dưới đây. Màu sắc nét mà tôi sử dụng là # 958f82.

Chọn công cụ Rectangle tròn (U) và đặt Radius đến 4px. Sau đó tạo một hình chữ nhật tròn có kích thước 610px x 350px và màu # f5f2ea. Di chuyển layer này ở giữa hình chữ nhật tròn tròn màu tối.

Đặt tên lớp này là "contact bg", nhấp chuột phải vào nó và chọn Convert to Smart Object. Thêm bộ lọc tiếng ồn bằng cách sử dụng các cài đặt từ hình ảnh dưới đây. Nhấp đúp vào lớp này để mở cửa sổ Layer Style và sử dụng các cài đặt từ hình dưới đây. Màu sắc mà tôi sử dụng cho hiệu ứng Stroke là # f9f8f5.

Bước 14 - Tạo biểu mẫu liên hệ

Sử dụng Công cụ Hình Chữ nhật (U) với màu # faf9f8 để tạo ba trường nhập và một vùng văn bản cho biểu mẫu liên hệ. Chiều rộng của các hình chữ nhật này phải là 350px. Chúng ta cần một khoảng trống ở phía bên phải của khu vực này để thêm một đoạn ngắn văn bản và thêm chi tiết liên lạc. công ty thiết kế website bán Thời Trang

Đối với mỗi hình chữ nhật này áp dụng các kiểu lớp sau đây. Màu sắc mà tôi sử dụng cho hiệu ứng Stroke là # d1cec7.

Thêm một số văn bản giữ chỗ bên trong mỗi trường nhập. Tôi đã sử dụng phông chữ Open Sans Light với kích thước 13px và màu # 847f76. Sau đó, thêm nút "Gửi" với màu # aea89c và đường viền # 8a857a. Sao chép các cài đặt khác từ nút trước đó mà bạn đã tạo cho thiết kế web này.
Chọn Công cụ Loại (T) và tạo một hộp văn bản bên cạnh biểu mẫu liên hệ với chiều rộng 190px. Sau đó, thêm một khối văn bản ngắn bên trong hộp này. Tôi đã sử dụng phông chữ Mở Sans Light, với kích thước 15px, màu # 5c574f và đặt chiều cao là 24px.

Chọn Công cụ Line (U) và tạo một đường ngang có kích thước 190px x 1px và màu # c8c4bb. Đặt tên cho lớp này là "1px line". đỗ mực máy in tại nhà

Nhân đôi lớp này (Ctrl / Cmd + J) và di chuyển dòng mới xuống 2px. Sau đó sao chép cả hai dòng này và di chuyển hai lớp mới xuống 1px. Thay đổi màu sắc của dòng mới thành # fcfaf6. Nhóm tất cả các lớp này lại với nhau và đặt tên cho nhóm là "các dòng".

Sao chép biểu tượng bàn tay từ các biểu tượng retro mà bạn đã tải xuống và dán nó vào Photoshop như một đối tượng thông minh. Sử dụng Chuyển đổi Tự do (Ctrl / Cmd + T) để di chuyển nó xuống và lật nó theo chiều ngang, vì vậy nó trỏ đến biểu mẫu liên hệ. Bằng cách này, chúng tôi sẽ hướng mắt người dùng về mẫu liên hệ.

Di chuyển biểu tượng bàn tay ở giữa đường. Sau đó sử dụng công cụ Rectangular Marquee Tool (M) để chọn vùng mà các đường thẳng cắt nhau với biểu tượng. Đảm bảo rằng nhóm "lines" đang hoạt động và vào Layer> Layer Mask> Reveal All.

Nhấp đúp vào lớp này để mở cửa sổ Layer Style và sử dụng các cài đặt từ hình dưới đây. Đối với hiệu ứng Lớp phủ Màu Tôi đã sử dụng màu # 837e70. cong ty day seo

Sử dụng Công cụ Loại (T) để thêm một khối văn bản bên dưới các dòng với nhiều thông tin liên lạc hơn, chẳng hạn như email, điện thoại và tên người dùng Skype. Đối với khối văn bản này, tôi sử dụng phông chữ Oswald Italic và Semibold Italic với kích thước 14px, màu # 5c574f và một đường ngắt giữa mỗi dòng văn bản.

Bước 15 - Thêm nguồn cấp dữ liệu Twitter

Tạo một nhóm mới và đặt tên là "Twitter". Sau đó, sử dụng Công cụ Loại (T) để thêm tiêu đề với phông chữ Oswald, kích thước 24px và màu # a39f94.

Chọn Công cụ Line (U) và thêm hai đường ngang bên dưới tiêu đề. Đối với dòng đầu tiên sử dụng màu # bebbb1 và đối với cột thứ hai sử dụng #ffffff.

Sau đó, thêm một vài hộp văn bản đại diện cho tweets mới nhất. Sử dụng phông chữ Oswald Italic với kích thước 14px và màu # 5c574f. mua tài khoản forum diễn đàn tphcm

Tạo nút "Theo dõi chúng tôi" với màu điền # a7c5bd và màu đường viền # 83a098. Các cài đặt khác cho nút này tương tự như các nút bạn đã áp dụng cho các nút trước.

Bước 16 - Thêm tiêu đề vào mặt bên của thiết kế web

Vì đây là trang web một trang, tôi nghĩ tôi sẽ thêm tiêu đề bên cạnh mỗi phần để cung cấp cho người dùng thông tin phản hồi về phần nào hiện tại được hiển thị, ngoài phản hồi của thanh điều hướng.

Tạo một nhóm mới và đặt tên nó là "Tiêu đề". Sau đó, chọn công cụ Line Tool (U) và tạo một đường thẳng đứng từ trên cùng của khu vực "Services" đến cuối vùng "Contact". Di chuyển dòng này 20px sang trái từ cạnh bên trái của trang web. Đặt tên cho lớp này là "1px line".

Nhân đôi lớp này (Ctrl / Cmd + J) và di chuyển dòng mới 1px sang bên trái. Sau đó thiết lập màu của nó thành #fbfbfa. sua chua may tinh gia re

Chọn Công cụ Loại (T) và ghi tên của từng phần của trang web bên cạnh nó. Hãy xem các hình ảnh sau đây để tham khảo. Tôi đã sử dụng font Muncie với kích thước 36px và màu # b5b2ac. Áp dụng hiệu ứng Drop Shadow cho các lớp văn bản bằng cách sử dụng các cài đặt từ hình ảnh bên dưới.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã áp dụng bốn nguyên tắc thiết kế cơ bản: tương phản, lặp lại, liên kết và gần nhau để tạo ra một thiết kế web retro sạch sẽ. Tôi hy vọng bạn thích ir. Nhấp vào hình ảnh sau để xem phiên bản đầy đủ của thiết kế.

Từ khóa tìm kiếm: thiết kế web phù hợp , thiết kế web này , thiết kế web retro sạch sẽ , tạo bố cục thiết kế trang web một chiều trong photoshop , thiết kế website tphcm

Thiết kế web phù hợp,thiết kế web này, thiết kế web retro sạch sẽ,Tạo bố cục thiết kế trang web một chiều trong Photoshop