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

Tiếp tục phần 1 ở phần hai này chúng tôi sẽ hướng dẫn các bạn mục điều hướng và các mục khác..

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

Bước 6 - Thêm các mục điều hướng

Bây giờ chúng ta sẽ thêm các mục trình đơn điều hướng và một số biểu tượng retro bên cạnh mỗi mục. Chọn Công cụ Loại (T) và ghi tên cho các mục điều hướng của bạn bằng cách sử dụng phông Oswald có kích thước 16px và màu # 7f7866. Để chỉ trang hoạt động, thay đổi màu của mặt hàng đầu tiên sang màu nâu đậm (# 615c4f).

Tải xuống tập hợp các biểu tượng retro này và mở tệp .AI trong Adobe Illustrator. Chọn mỗi biểu tượng mà bạn muốn sử dụng và sao chép nó (Ctrl / Cmd + C). Sau đó vào Photoshop và dán từng biểu tượng (Ctrl / Cmd + V) như một đối tượng thông minh. Sử dụng Chuyển đổi Tự do (Ctrl / Cmd + T) để thay đổi kích thước của các lớp này.

Áp dụng hiệu ứng Lớp phủ màu cho mỗi biểu tượng bằng cách sử dụng màu giống như bạn đã sử dụng cho các lớp văn bản. Sau đó áp dụng hiệu ứng Drop Shadow trên tất cả các lớp văn bản và biểu tượng bằng cách sử dụng các cài đặt từ hình ảnh dưới đây. cty thiet ke website hcm

Bước 7 - Tạo dấu "Liên hệ với chúng tôi"

Thay vì thêm liên kết liên hệ trong thanh điều hướng, chúng tôi sẽ tạo ra một dấu hiệu retro cho nó. Chúng ta sẽ phá vỡ nguyên tắc thiết kế web gần gũi, trong đó tuyên bố rằng các mục liên quan nên được nhóm lại gần nhau và có những đặc điểm thị giác tương tự. Liên kết liên hệ là một phần của điều hướng, nhưng nó sẽ có một phong cách khác với các mục điều hướng khác để làm cho nó nổi bật. Hãy nhớ rằng bất cứ khi nào bạn muốn phá vỡ một nguyên tắc thiết kế bạn phải: a) biết nguyên tắc và b) có lý do để phá vỡ nó.

Tạo một nhóm mới và đặt tên là "Liên hệ". 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 có kích thước 130px x 180px và màu # c7c1b3. cong ty thiet ke website y te suc khoe

Đặ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. Áp dụng 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. Đối với hiệu ứng Stroke tôi đã sử dụng màu # a9a396. Mẫu mà tôi sử dụng là từ Tileables Lines Pack .

Chọn công cụ Hình chữ nhật tròn (U), đặt Radius tới 2px và tạo một hình chữ nhật tròn có kích thước 122px x 72px và màu # f3f0e8. Di chuyển hình chữ nhật này vào giữa hình trước.

Đặ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. Áp dụng 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. Đối với hiệu ứng Inner Shadow, tôi sử dụng màu # a9a396 và hiệu ứng Inner Glow đã sử dụng màu # f5f2e9.

Bây giờ chúng ta sẽ chia dấu hiệu thành hai phần, một cho mỗi lớp văn bản chúng ta sẽ thêm vào sau đó. Chọn Công cụ Hình Chữ nhật (U) và tạo một hình chữ nhật có kích thước 120px x 32px và màu # eae5d9. Đặt tên cho layer này là "top bg", nhấp chuột phải vào nó và chọn Convert to Smart Object. Di chuyển hình chữ nhật này ở đầu hình chữ nhật tròn nhỏ hơn. Sau đó kích chuột phải vào layer này và chọn Create Clipping Mask.

Thêm bộ lọc tiếng ồn vào lớp này bằng cách sử dụng các cài đặt từ hình ảnh dưới đây. Sau đó, thêm hiệu ứng Thả bóng bằng màu # c3beb1 và cài đặt từ hình ảnh sau. cong ty thiet ke website marketing dep chuan seo gia re

Bây giờ chúng ta sẽ tạo ra một hình chữ nhật tròn với một nét đột qu d. Kể từ Photoshop không cung cấp các chức năng cho việc tạo dòng tiêu tan chưa, chúng ta sẽ sử dụng Illustrator.

Mở một tài liệu mới trong Illustrator. Chọn công cụ Rectangle tròn và nhấp vào tài liệu của bạn để mở cửa sổ Hình chữ nhật tròn.

Đặt chiều rộng là 171px, chiều cao là 71px và Radius đến 2px. Loại bỏ các điền vào của hình dạng này và thêm một đột qu black màu đen 1pt. Mở bảng Stroke (Window> Stroke) và sử dụng các cài đặt từ hình dưới đây để tạo ra một nét đột qu d.

Chọn hình chữ nhật tròn và sao chép nó (Ctrl / Cmd + C). Trở lại tài liệu Photoshop và dán nó như một đối tượng thông minh (Ctrl / Cmd + V). Đặt tên cho layer này là "dashed line" và di chuyển nó ở giữa lớp "contact bg". Thêm hiệu ứng Lớp phủ màu cho lớp "dashed line" bằng màu # 958f82.

Chọn công cụ Type Tool (T) và ghi các từ "get a free quote" ở phần phía trên của dấu hiệu. Tôi đã sử dụng phông chữ LeckerliOne với kích thước 14px và màu # 948f84. Tôi đã chọn phông chữ này thay vì Damion (chúng tôi đã sử dụng trong biểu trưng) bởi vì nó dễ đọc hơn ở kích thước này.

Sử dụng Công cụ Loại (T) để thêm từ "Liên hệ với chúng tôi" ở khu vực phía dưới của biển. Tôi đã sử dụng phông chữ Oswald với kích thước 19px và màu # 948f84.

Áp dụng hiệu ứng Drop Shadow cho hai lớp văn bản này bằng cách sử dụng các cài đặt từ hình ảnh bên dưới. công ty thiết kế website trang trí

Sao chép một trong những biểu tượng tay từ các biểu tượng retro bạn đã tải xuống và dán nó vào Photoshop như một đối tượng thông minh. Đặt tên cho lớp này là "biểu tượng tay" và di chuyển nó ở giữa hai phần của biển.

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 # 969183.

Bây giờ chúng ta cần thêm một sợi dây để giữ dấu. Tạo nhóm mới, đặt tên là "dây thừng" và di chuyển nó ở cuối nhóm "Liên hệ". Sau đó dùng công cụ Ellipse Tool (U) để tạo móng. Chọn công cụ Line Tool (U), đặt Weight là 1px và tạo ra hai đường xiên, như bạn thấy trong hình dưới đây. Sử dụng màu # 7f7866 cho tất cả các hình dạng này.

Bước 8 - Tạo khu vực "Dịch vụ"

Đối với khu vực "Dịch vụ", chúng ta sẽ cần một hình lục giác mà chúng ta sẽ sử dụng làm nền cho ba cột nội dung. Chúng tôi sẽ tạo ra hình dạng này bằng cách sử dụng Adobe Illustrator.

Mở một tài liệu mới trong Illustrator và chọn Polygon Tool. Nhấp vào hình ảnh của bạn để mở cửa sổ Đa giác, nơi chúng ta có thể thiết lập các đặc tính của hình dạng. Đặt Radius đến 70px và Sides to 6. Nhấn OK để tạo hình dạng.

Đặt màu Điền của đa giác thành # 8E8E8E. Sau đó, thêm một Stroke 20px sử dụng cùng màu. Mở bảng Stroke (Window> Stroke) và đặt Corner to Round Join. Sau đó nhấp chuột phải vào hình này, chuyển tới Transform> Rotate, thiết lập Góc xuống 90 độ và nhấn OK.

Từ thanh tùy chọn phía trên hình ảnh của bạn, đặt chiều rộng của hình này là 140px và chiều cao của nó là 162px.

Sử dụng công cụ Selection Tool (V) để chọn hình lục giác và sao chép nó (Ctrl / Cmd + C). Trở lại tài liệu Photoshop của bạn và dán nó như một đối tượng thông minh (Ctrl / Cmd + V). Vào Edit> Free Transform (Ctrl / Cmd + T), giữ phím Shift và scale layer này cho đến khi chiều rộng của nó là 300px, hoặc bốn 960 cột lưới (bạn có thể thấy kích thước của hình dạng mà bạn đang chuyển đổi trong Bảng thông tin). cong ty thiet ke website ban Thoi Trang

Đặt Fill của layer này thành 0%. Sau đó kích đúp vào nó và áp dụng mẫu "Dot Grid 2" từ Tapeables Shapes Pack. Đặt tên cho layer này là "halftone pattern". Thêm lớp này bên trong một nhóm (Ctrl / Cmd + G) và đặt tên là " Thiết kế Web". Sau đó, tạo nhóm phụ huynh mới và đặt tên là "Dịch vụ".

Nhấp chuột phải vào "halftone pattern" layer và chọn Convert to Smart Object. Sau đó áp dụng hiệu ứng Lớp phủ màu cho lớp này bằng cách sử dụng màu # a7c5bd.

Sao chép lại hình lục giác từ Illustrator và dán nó vào tài liệu Photoshop của bạn như một đối tượng thông minh. Chuyển đến Chỉnh sửa> Chuyển đổi Tự do (Ctrl / Cmd + T) và đặt tỷ lệ ngang và dọc lên 175% từ thanh tùy chọn bên trên hình ảnh của bạn (1).

Đặt tên cho layer này là "border" và di chuyển nó đến giữa hình lục giác đầu tiên. Để căn chỉnh hai lớp đúng cách, hãy đảm bảo rằng bạn đã kích hoạt Smart Guides (Hướng dẫn Xem> Hướng dẫn Thông minh). Di chuyển lớp này qua hình lục giác đầu tiên và bạn sẽ thấy một số đường màu hồng cho biết hai lớp này được căn chỉnh như thế nào.

Thêm hiệu ứng Lớp phủ màu cho lớp "border" bằng màu # a7c5bd (2). dao tao seo uy tin

Chúng ta cần phải áp dụng một bộ lọc tiếng ồn cho lớp này. Tuy nhiên, hiệu ứng Lớp phủ màu sẽ đi qua bộ lọc tiếng ồn. Để giải quyết vấn đề này, chúng ta cần phải chuyển đổi lớp này thành một đối tượng thông minh. Nhấp chuột phải vào lớp "border" và chọn Convert to Smart Object. Sau đó vào Filter> Noise> Add Noise và sử dụng các thiết lập từ hình dưới đây (3).

Nhấn đúp chuột vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ hình dưới đây cho Outer Glow. Màu sắc mà tôi sử dụng là # 89b9ac (3).

Sao chép hình lục giác một lần nữa 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à thiết lập thang điểm theo chiều ngang và chiều dọc là 170%. Đặt tên cho layer này là "column bg" và di chuyển nó vào giữa hai hình lục giác khác.

Thêm hiệu ứng Lớp phủ màu cho lớp này bằng cách sử dụng màu # f5f2ea. Nhấp chuột phải vào nó và chọn Convert to Smart Object. Sau đó, áp dụng một 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. Đối với hiệu ứng Stroke sử dụng màu # 83a098.

Bước 9 - Thêm nội dung khu vực "Dịch vụ"

Chọn công cụ Type Tool (T) và viết tiêu đề "Thiết kế Web" bằng cách sử dụng font Muncie với kích thước 48px và màu # 7b9d94. Sau đó, thêm một hiệu ứng Drop Shadow trắng bằng cách sử dụng các cài đặt từ hình ảnh dưới đây.

Sử dụng Công cụ Loại (T) để tạo một hộp văn bản rộng 230px (bạn có thể thấy chiều rộng của hộp văn bản khi tạo nó trong bảng Thông tin). Thêm một đoạn văn bản trong hộp này bằng cách sử dụng phông chữ Open Sans Light với màu # 5c574f và kích thước 15px.

Để làm cho văn bản trở nên rõ ràng hơn, chúng tôi sẽ đặt chiều cao của dòng là 1.6em. Kích thước phông chữ của chúng tôi là 15px. Nếu chúng ta nhân 15 by 1.6 chúng ta nhận được 24. Đó là giá trị pixel của chiều cao dòng. Chuyển đến bảng Nhân vật và đặt chiều cao là 24px.

Bây giờ chúng ta sẽ thêm nút "View Portfolio" cho cột này. Sau đó, chúng tôi sẽ tạo ra khu vực "danh mục đầu tư" và chúng tôi muốn người sử dụng có thể lựa chọn một trong những dịch vụ được cung cấp và nhận được danh mục đầu tư cho dịch vụ ngay bên dưới khu vực này.

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 120px x 30px và màu # a7c5bd. Đặt tên cho lớp này "nút", nhấp chuột phải vào nó và chọn Convert to Smart Object.

Vào Filter> Noise> Add Noise và sử dụng các thiết lập từ hình dưới đây (1). Sau đó kích đúp vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ hình dưới đây (1).

Chọn công cụ Type Tool (T) và ghi "See Portfolio" bằng cách sử dụng font Oswald với kích thước 17px và màu # f9f9f9. Đặt lớp văn bản này ở giữa nút của bạn. Sau đó, thêm hiệu ứng Drop Shadow vào lớp này bằng cách sử dụng các cài đặt từ hình ảnh bên dưới (2). Màu sắc mà tôi sử dụng là # 83a098.

Thêm hai lớp bên trong một nhóm và đặt tên là "nút".

Sử dụng Công cụ Line (U) với màu # cbc5b7 để tạo hai đường ngang bên dưới tiêu đề của cột này. Đường trên cùng rộng 200px, đường thứ hai rộng 240px và khoảng cách 9px giữa chúng. Đặt tên các lớp này là "1px line".

Sao chép hai lớp tuyến và di chuyển các lớp mới xuống 1px. Thay đổi màu sắc của các dòng mới thành màu trắng và đặt độ mờ xuống 40%. thay muc may in uy tin

Nhóm tất cả các lớp tuyến này và đặt tên cho nhóm là "các dòng". Sử dụng công cụ Rectangular Marquee Tool (M) để tạo một vùng lựa chọn trên vùng mà các đường cắt nhau với văn bản. Đảm bảo rằng nhóm "đường kẻ" đang hoạt động và chuyển tới Lớp> Lớp Mask> Ẩn Lựa chọn.

Tạo thêm hai cột cho khu vực "Dịch vụ" giống như bạn đã tạo ra cột "Thiết kế Web". Tất cả các cài đặt đều giống nhau, ngoại trừ màu sắc mà bạn có thể nhận được từ hình ảnh sau.

Chúng tôi đã hoàn thành khu vực "Dịch vụ". Ở đây chúng tôi áp dụng các nguyên tắc thiết kế gần gũi và lặp đi lặp lại. Chúng tôi lặp lại hình dạng của mỗi cột và các phông để cho biết ba cột có liên quan và có chức năng và nội dung tương tự. trung tâm mua tài khoản vip diễn đàn

Lựa chọn phông chữ

Cho đến nay chúng tôi đã sử dụng năm phông chữ trong thiết kế này. Chúng ta có thể loại bỏ các phông chữ kịch bản, chỉ được sử dụng một lần cho các mục đích khác nhau và nói về ba loại khác: Muncie, Oswald và Open Sans.

Tôi đã chọn Muncie font bởi vì nó là một kiểu chữ được ngụy tạo đẹp mắt phù hợp với phong cách tôi muốn tạo ra. Chúng tôi sử dụng phông chữ này cho biểu tượng và tiêu đề khu vực "Dịch vụ". Phông chữ này không thể đọc được ở kích thước nhỏ (ví dụ thanh dẫn đường), vì vậy tôi đã thêm Oswald vào hỗn hợp. Hai phông chữ này hợp với nhau vì chúng có cùng một đặc điểm: chúng đều là các kiểu chữ ngưng.

Đối với các khối văn bản tôi đã chọn gia đình font mở rộng Sans vì nó có 10 kiểu khác nhau để chọn. Phiên bản Light của phông chữ này, chúng ta sẽ sử dụng nhiều nhất, tạo ra sự tương phản tốt đẹp với các phông chữ khác được sử dụng.

Bước 10 - Tạo khu vực "Danh mục đầu tư"

Khu "Danh mục" sẽ được liên kết với khu vực dịch vụ. Vì chúng tôi đang tạo trang web một trang, nên chúng tôi cần chức năng chọn danh mục danh mục đầu tư và nhận danh sách các danh mục đầu tư từ danh mục đó.

Chúng tôi sẽ sử dụng ba dịch vụ dưới dạng danh mục. Để cho biết loại nào được chọn, chúng tôi sẽ sử dụng cùng một màu sắc mà chúng tôi sử dụng cho khu vực "Dịch vụ".

Khi người dùng nhấp chuột nói, dịch vụ "Thương hiệu", phần danh mục bên dưới sẽ có nét đỏ, màu nổi bật và màu tiêu đề cũng sẽ màu đỏ và sẽ có một thanh màu đỏ kết nối cột "Branding" với hộp danh mục đầu tư . Ba chỉ thị trực quan này sẽ đủ để người dùng nhanh chóng hiểu cách hoạt động của danh mục đầu tư.

Hãy bắt đầu thiết kế web khu vực "Portfolio". Tạo một nhóm mới và đặt tên là "Portfolio". Tạo một nhóm khác trong nhóm này và đặt tên là "portfolio bg".

Chọn Công cụ Hình Chữ nhật (U) và tạo một hình chữ nhật có kích thước 960px x 310px và màu # 89b9ac. Đặt tên cho lớp này là "biên giới đầu tiên" và đặt opacity là 20%. Sau đó chọn Move Tool (V) và di chuyển hình chữ nhật này 60px bên dưới vùng "Services".

Tạo hình chữ nhật mới với kích thước 950px x 300px và màu # a7c5bd. Đặt tên cho lớp này là "đường biên thứ hai" và di chuyển nó ở giữa hình chữ nhật đầu tiên. 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 Inner Shadow and Stroke là # 83a098.

Tạo hình chữ nhật mới với kích thước 940px x 290px và màu # f5f2ea. Đặt tên cho lớp này là "portfolio bg". 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à # f9f8f5. sửa máy tính tận nhà

Khu vực "Danh mục" sẽ được lồng vào hai cột. Phía bên trái sẽ hiển thị một danh sách hình thu nhỏ. Khi người dùng nhấp vào hình thu nhỏ, cột bên phải sẽ hiển thị thêm thông tin về mục danh mục đó.

Bây giờ chúng ta sẽ tạo ra nền cho cột bên phải. 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 640px x 290px và màu # ece8df. Đặt tên cho layer "active item 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. Sau đó kích đúp vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ hình dưới đây. Màu Inner Glow mà tôi sử dụng là # 9d9180.

Tạo hai đường thẳng đứng với trọng lượng 1px qua cạnh bên trái của "bg" danh mục đầu tư tích cực. Đối với bóng tối, sử dụng màu # c3b9ab và để ánh sáng sử dụng màu # f9f8f5.

Sau đó 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 4px x 80px kết nối dưới cùng của cột "Thiết kế Web" với đường viền khu vực "Danh mục". Đặt màu của lớp này là # a7c5bd và đặt tên là "connector".

Từ khóa tìm kiếm: thiết kế web , nguyên tắc thiết kế web gần gũi , hãy bắt đầu thiết kế  web , 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, nguyên tắc thiết kế web gần gũi, Hãy bắt đầu thiết kế web, Tạo bố cục thiết kế trang web một chiều trong Photoshop