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

Trong hướng dẫn này, chúng tôi sẽ giải thích làm thế nào để tạo một thiết kế web một trang retro sử dụng Adobe Photoshop. Trong khi hầu hết các thiết kế được tạo ra trong Photoshop, chúng tôi cũng sẽ sử dụng Illustrator để tạo ra các hình dạng và các yếu tố khác nhau. Băt đâu nao!

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

Hệ thống lưới 960

Trong hướng dẫn này chúng ta sẽ sử dụng hệ thống lưới 960 . Tải xuống và giải nén tệp lưu trữ. Sau đó đi đến thư mục "Photoshop" (bên trong "các mẫu"). Ở đó bạn sẽ tìm thấy tất cả các tệp .PSD. Đối với thiết kế web này chúng tôi sẽ sử dụng lưới 12 cột.

Sau khi mở tệp .psd trong Photoshop, bạn sẽ thấy 12 thanh màu đỏ. Đó là lưới mà chúng ta sẽ sử dụng. Bạn có thể ẩn các thanh màu đỏ bằng cách nhấp vào biểu tượng con mắt của lớp "12 Col Grid".

Trong hướng dẫn này, tôi sẽ yêu cầu bạn tạo các hình dạng có kích thước nhất định. Mở bảng Thông tin (Window> Info) và khi bạn tạo một hình dạng, bạn sẽ thấy chiều rộng và chiều cao chính xác của nó trong bảng điều khiển này.

Các tập tin PSD chứa một số hướng dẫn cũng sẽ sẽ rất hữu ích. Để kích hoạt chúng, vào View> Show> Guides, hoặc sử dụng phím tắt Ctrl / Cmd +; Tôi thường giấu thanh màu đỏ và kích hoạt các hướng dẫn bất cứ khi nào tôi cần chúng. cong ty thiet ke website y te suc khoe

Lưới điện sẽ giúp chúng ta áp dụng nguyên tắc thiết kế căn lề, trong đó tuyên bố rằng mọi yếu tố của thiết kế phải được kết nối trực quan với nhau và không có gì nên được đặt ngẫu nhiên.

Bây giờ chúng ta đã đề cập đến các vấn đề cơ bản của việc sử dụng Hệ thống lưới 960, chúng ta có thể chuyển sang tạo bố cục web thực sự. Nếu bạn muốn tìm hiểu thêm về hệ thống lưới 960, bạn có thể đọc một hướng dẫn toàn diện hơn .

Bước 1 - Thiết lập tài liệu và tạo nền

Mở tập tin "960_grid_12_col .psd" trong Photoshop. Chúng ta cần thêm không gian để làm việc, vì vậy chúng ta sẽ phải tăng kích thước vải. Đi tới Hình ảnh> Kích thước Canvas (Ctrl / Cmd + Alt / Option + C). Đặt chiều rộng là 1200px và chiều cao là 1700px. Sau đó nhấp vào điểm neo giữa trên. Đó là điểm mà hình ảnh sẽ mở rộng từ. cty thiet ke web

Bây giờ chúng ta sẽ tạo ra một mô hình sẽ được áp dụng cho nền trang web. Tạo một tài liệu mới (Ctrl / Cmd + N) với kích thước 1px by 3px. Sau đó tạo một lớp mới (Ctrl / Cmd + Shift + N).

Phóng to và sử dụng Công cụ Rectangular Marquee Tool (M) để tạo một vùng chọn 1px by 1px ở đầu tài liệu của bạn. Đổ đầy vùng lựa chọn này bằng màu đen bằng công cụ Paint Bucket Tool (M).

Nhấn Ctrl / Cmd + D để bỏ chọn. Ẩn lớp "Nền" và đi tới Chỉnh sửa> Xác định Mẫu. Bây giờ bạn có thể đóng tài liệu này.
Quay lại tài liệu thiết kế web của bạn và ẩn lớp "12 Col Grid", nhưng luôn giữ nó ở đầu bảng điều khiển Lớp. Bằng cách này, bạn có thể kích hoạt nó và kiểm tra xem các phần tử của thiết kế web của bạn có liên kết với lưới điện. cty thiết kế web marketing đẹp chuẩn seo giá rẻ

Chuyển đến Layer> New Fill Layer> Solid Color và đặt màu # f2f1ed. Đặt tên lớp này là "nền chính". Chúng tôi sẽ áp dụng một bộ lọc tiếng ồn cho lớp này, nhưng chúng tôi không muốn rasterize nó. Thay vào đó chúng ta sẽ sử dụng một đối tượng thông minh, vì vậy chúng ta có thể chỉnh sửa các bộ lọc sau này nếu cần. Nó luôn luôn là một thực hành tốt để làm việc như không phá hủy càng tốt và giữ mọi thứ có thể chỉnh sửa.

Nhấp chuột phải vào lớp "Main background" 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. Nhấp đúp vào lớp này để mở cửa sổ Layer Style và áp dụng mẫu bạn đã tạo. Điều này sẽ cho chúng ta một kết cấu bìa cứng tinh tế mà chúng ta sẽ sử dụng trong toàn bộ thiết kế. cty thiết kế web trang trí

Bước 2 - Tạo nền phần đầu

Tạo một nhóm mới (Layer> New> Group) và đặt tên nó là "Header". Tạo một nhóm bên trong nó và đặt tên nó là "Header 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 1200px x 150px và màu # e9e5db. Đặt tên cho lớp này là "header bg" và đặt nó ở đầu tài liệu của bạn.

Nhấp chuột phải vào lớp "header bg" 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.

Tạo một mẫu đường kẻ thẳng đứng mới giống như bạn đã tạo một mẫu mới. Đối với mẫu này, đặt kích thước tài liệu là 3px x 1px. Sau khi lưu khuôn mẫu (Edit> Define Pattern), quay lại tài liệu thiết kế web của bạn, nhấp đôi vào layer "header bg" để mở cửa sổ Layer Style và áp dụng mẫu bạn đã tạo. cty thiết kế website bán Thời Trang

Không có nhiều sự tương phản giữa nền tiêu đề và nền chính, vì vậy chúng ta sẽ thêm một vài dấu tách và gradient để xác định từng phần tốt hơn.

Chọn Công cụ Line (U) và đặt Trọng lượng là 1px. Giữ phím Shift và tạo một đường ngang ở dưới cùng của tiêu đề của bạn bằng cách sử dụng màu # bcb9b1. Đặt tên cho lớp này là "1px line".

Nhân đôi lớp này (Ctrl / Cmd + J), chọn Công cụ Di chuyển (V) và nhấn phím mũi tên xuống trên bàn phím của bạn để di chuyển lớp này xuống 1px. Thay đổi màu của dòng mới thành # f8f7f5.
Sử dụng Công cụ Rectangular Marquee Tool (M) để tạo vùng lựa chọn ở cuối tiêu đề (1). Sau đó vào Layer> New Fill Layer> Gradient và sử dụng các cài đặt từ hình dưới đây (2). Đặt tên cho layer này là "bottom gradient" và đặt chế độ hòa trộn là Soft Light 20%.

Nhân đôi lớp gradient và di chuyển lớp mới ở đầu tiêu đề. Đặt tên lớp này là "gradient hàng đầu". Nhấp vào hình thu nhỏ để chỉnh sửa gradient và đánh dấu vào tùy chọn Reverse. Điều này sẽ cho chúng ta một gradient từ trên xuống dưới.

Bây giờ chúng ta sẽ thêm một mẫu mới bên dưới tiêu đề. Sử dụng Công cụ Hình Chữ nhật (U) để tạo hình chữ nhật cao 160px bên dưới tiêu đề (1). Đặt tên cho mẫu này là "pattern" và đặt Fill là 0%.

Nhấp đúp vào lớp này để mở cửa sổ Layer Style và áp dụng hiệu ứng Pattern Overlay (2). Mẫu mà tôi sử dụng là từ Tileables Lines Pack .  dạy seo hcm

Tại thời điểm này lớp này có một cạnh dưới sắc nét. Chúng tôi muốn rằng cạnh để được mềm hơn, vì vậy chúng tôi sẽ sử dụng một mặt nạ. Vào Layer> Layer Mask> Reveal All. Sau đó chọn công cụ Gradient Tool (G) với gradient màu đen đến suốt. Giữ phím Shift và kéo một gradient dọc ở dưới cùng của lớp này để che mặt ra cạnh dưới (3).
Chúng ta sẽ tạo thêm một gradient bên dưới tiêu đề. Sử dụng công cụ Rectangular Marquee Tool (M) để tạo vùng chọn như hình bên dưới (1). Chuyển đến Lớp> New Fill Layer> Gradient và sử dụng các cài đặt từ hình dưới đây (2).

Đặt tên cho layer này là "gradient top gradient" và thiết lập chế độ pha trộn của nó thành Soft Light 50% (3).

Bước 3 - Tạo biểu tượng

Đối với logo, chúng ta sẽ sử dụng hai phông chữ: Muncie và Damion. Chọn Công cụ Loại (T) và ghi tên trang web của bạn bằng cách sử dụng font Muncie với màu # 847e70 và kích thước 80px. Thêm bóng 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 (1). Điều này sẽ tạo ra một điểm nổi bật tinh tế cho văn bản và làm cho nó trông sắc nét hơn.

Sử dụng Công cụ Line (U) với màu tiền cảnh # 837d6f để tạo hai dòng ở đầu lớp văn bản của bạn và hai dòng khác ở cuối. Đặt tên cho các lớp này là "1px line" (2). Hãy xem các hình ảnh sau đây để tham khảo.

Chọn tất cả 4 lớp tuyến và sao chép chúng bằng cách kéo chúng qua nút "Tạo lớp mới" từ dưới cùng của bảng điều khiển Lớp. 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 50%. Sử dụng Công cụ Di chuyển (V) để di chuyển các đường này 1px bên dưới vùng tối hơn (3).

Nhóm tất cả các lớp đường với nhau (chọn chúng và nhấn Ctrl / Cmd + G). Đặt tên cho nhóm "dòng".

Sử dụng công cụ Type Tool (T) để viết chữ "Retro" ở giữa dòng dưới cùng. Sử dụng Phông chữ Damion với kích thước 21px và màu # 847e70. Áp dụng một bóng tối cho lớp này bằng cách sử dụng các cài đặt từ hình ảnh dưới đây.  ban tai khoan forum dien dan chat luong
Bây giờ chúng ta sẽ thêm logo Envato ở giữa hai dòng trên. Đầu tiên, tải về tệp .PSD "Powered by Envato API" và mở nó trong Photoshop. Nhấp đúp vào hình thu nhỏ của "Vector Smart Object" và tệp sẽ được mở ra trong Adobe Illustrator.

Chọn đối tượng lá và thay đổi màu gradient thành # 847d6f và # 5b574f. Sử dụng công cụ Direct Selection Tool (A) để chọn lá và copy nó (Ctrl / Cmd + C). Trở lại Photoshop và dán nó (Ctrl / Cmd + V) làm đối tượng thông minh.

Vào Edit> Free Transform (Ctrl / Cmd + T), giữ phím Shift và scale layer này xuống. Đặt tên cho lớp này là "envato logo" và di chuyển nó ở giữa hai hàng đầu. Sao chép kiểu lớp Thả bóng từ lớp văn bản "Retro" và dán vào phần này.
Chúng tôi muốn ẩn các dòng bên dưới biểu tượng Envato và lớp văn bản "Retro". Chúng ta có thể làm điều này bằng cách sử dụng một mặt nạ. Nhấp vào nhóm "dòng" để làm cho nó hoạt động. Sử dụng công cụ Rectangular Marquee Tool (M) để tạo ra hai lựa chọn, như bạn thấy trong hình dưới đây (lưu ý: giữ phím Shift sau khi bạn tạo vùng lựa chọn đầu tiên, do đó bạn có thể thêm phần thứ hai).

Vào Layer> Layer Mask> Ẩn Lựa chọn. Bây giờ các dòng bên dưới logo Envato và lớp văn bản nên được ẩn.

Bước 4: Tạo ribbon thanh điều hướng

Thanh điều hướng cho thiết kế web này sẽ là một dải ruy băng mà chúng tôi sẽ tạo ra bằng cách sử dụng các hình dạng, đối tượng thông minh, bộ lọc tiếng ồn và các kiểu lớp. Trước tiên, tạo một nhóm mới và đặt tên là "Danh mục chính". Sau đó tạo một nhóm khác bên trong nhóm đầu tiên và đặt tên là "ribbon".

Sử dụng Công cụ Hình Chữ nhật (U) để tạo một hình chữ nhật có kích thước 610px x 44px và màu # d8cfba. Đặt tên cho layer này là "rectangle", nhấp chuột phải vào nó và chọn Convert to Smart Object. Sau đó áp dụng bộ lọc Tiếng ồn (Lọc> Tiếng ồn> Thêm 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 ảnh bên dưới. Mẫu mà tôi sử dụng là từ Tileables Shapes Pack . Màu sắc nét mà tôi sử dụng là # b1aa99.

Sử dụng Pen Tool (P) để tạo hình dạng từ cuối ribbon. Hãy xem các hình ảnh sau để tham khảo (1).

Đặt tên cho layer này là "left end" và di chuyển nó bên dưới layer "rectangle". Xóa hình này 10px xuống từ cạnh trên cùng của hình chữ nhật và 10px sang bên phải từ cạnh trái của hình chữ nhật (2).

Nhấp chuột phải vào layer này và chọn Convert to Smart Object. Áp dụng bộ lọc tiếng ồn với 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 (3). Màu sắc nét mà tôi sử dụng là # 9d9684.

Nhân đôi layer "left end" (Ctrl / Cmd + J) và vào Edit> Transform> Flip Horizontal. Đặt tên cho layer mới là "right end" và di chuyển nó sang bên phải của hình chữ nhật. Sau đó thiết lập góc Inner Shadow của lớp này là 180 độ.

Sử dụng Pen Tool (P) với màu foreground # 6c6554 để tạo một tam giác kết nối hình chữ nhật với hình dạng kết thúc của ribbon (1). Trong hình dưới đây tôi đã làm hình tam giác màu đỏ để làm cho nó dễ nhìn thấy hơn.

Đặt tên cho layer này là "left triangle", 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 với các cài đặt từ hình ảnh dưới đây (2).

Nhân đôi layer này (Ctrl / Cmd + J) và vào Edit> Transform> Flip Horizontal. Đặt tên cho layer mới là "tam giác bên phải" và di chuyển nó sang bên phải của ribbon.

Bây giờ chúng ta sẽ thêm một số bóng tối và điểm nổi bật vào dải ruy băng. Sử dụng Công cụ Rectangular Marquee Tool (M) để tạo vùng lựa chọn có kích thước 10px x 44px ở phía bên trái của hình chữ nhật (1).

Chuyển đến Lớp> New Fill Layer> Gradient và sử dụng các cài đặt từ hình ảnh bên dưới. Đặt tên cho layer này là "left highlight" và đặt chế độ hòa trộn là Soft Light 70% (2).  sửa máy tính tận nơi

Tạo một lựa chọn mới với kích thước 5px x 44px (3). Đi tới Layer> New Fill Layer> Gradient và sử dụng gradient # b5ae9d-to-transparent (4). Đặt tên cho layer này là "left shadow".

Nhân đôi hai lớp này và di chuyển chúng sang phải của hình chữ nhật. Sau đó, thay đổi góc gradient của hai lớp này đến 180 độ (5).

Bây giờ chúng ta sẽ tạo ra một hiệu ứng ribbon khâu bằng cách sử dụng đường nét. Trước tiên, chúng ta sẽ cần phải tạo ra một mô hình mới. Tạo một tài liệu mới (Ctrl / Cmd + N) với kích thước 10px x 1px.

Phóng to và sử dụng Công cụ Rectangular Marquee Tool (M) để tạo vùng chọn có kích thước 6px x 1px, như bạn thấy trong hình dưới đây. Tạo một lớp mới và điền vào các lựa chọn với màu đen.

Nhấn Ctrl / Cmd + D để bỏ chọn. Ẩn lớp "Nền" và đi tới Chỉnh sửa> Xác định Mẫu. Lưu mẫu của bạn và đóng tài liệu này.

Quay lại tài liệu thiết kế web một chiều trong photoshop của bạn và tạo một nhóm mới bên trong nhóm "ribbon". Đặt tên này là "đường kẻ đứt".

Sử dụng công cụ Line Tool (U) để tạo một đường ngang 1px ở trên cùng của hình chữ nhật ribbon (1). Đặt Fill của layer này thành 0%. Sau đó áp dụng mẫu đường nét đứt mà bạn tạo ra trước đó (2).

Đặt tên cho lớp này là "1px dashed line", nhấp chuột phải vào nó và chọn Convert to Smart Object. Nhấp đúp vào lớp này để mở cửa sổ Layer Style và áp dụng hiệu ứng Overlay màu bằng cách sử dụng màu # b1aa99 (3).

Bây giờ chúng ta sẽ thêm một đường nét đứt sáng hơn để làm cho hiệu ứng khâu trông sắc nét hơn. Nhân đôi lớp này (Ctrl / Cmd + J) và thay đổi màu của nó thành # e4ddcd. Sử dụng Công cụ Di chuyển (V) để di chuyển đường kẻ số 1px bên dưới thanh đầu tiên (4).

Chọn hai đường nét đứt và nhân đôi chúng. Sau đó di chuyển các đường mới ở cuối hình chữ nhật (5).

Bước 5 - Tạo nền ribbon

Bây giờ chúng ta sẽ tạo ra một nền cho ribbon để làm cho nó trông giống như nó được quấn quanh một bức tường.

Tạo một nhóm mới, đặt tên là "ribbon bg" và đặt nó bên dưới nhóm "ribbon". Sử dụng công cụ Rectangle Tool (U) để tạo một hình chữ nhật màu đen bên dưới ribbon. Đảm bảo rằng hình chữ nhật này được đặt trong hai hình tam giác ribbon. Đặt tên cho layer này là "ribbon bg" và đặt chế độ hòa trộn là Soft Light 20%.

Sử dụng công cụ Rectangular Marquee Tool (M) để tạo vùng lựa chọn phía bên trái của nền ribbon (1).

Chuyển đến Lớp> New Fill Layer> Gradient và sử dụng các cài đặt từ hình ảnh dưới đây (2). Đặt chế độ pha trộn của lớp này thành Soft Light 40% (3).  đỗ mực máy in hcm

Sử dụng Công cụ Line (U) với màu # b0a793 để tạo một đường thẳng dọc 1px trên cạnh trái của nền ribbon. Nhân đôi layer dòng này (Ctrl / Cmd + J), di chuyển hình mới 1px sang phải và đổi màu của nó thành # dbd5c6 (4).

Thêm cùng một gradient và đường thẳng vào phía bên phải của nền ribbon. Hãy nhớ rằng bạn cần phải đặt góc dốc lên 180 độ và lật hai lớp theo chiều ngang (5).

Thêm mặt nạ vào nhóm "ribbon bg" (Layer> Layer Mask> Reveal All). Sau đó chọn một gradient đen-to-minh bạch tuyến tính (G) và mặt nạ trên và dưới cùng của nhóm này. Trong hình dưới đây bạn có thể thấy mặt nạ của tôi như thế nào (nếu bạn giữ phím Alt / Option và nhấp vào hình thu nhỏ của mặt nạ, bạn sẽ có thể nhìn thấy nó trên toàn bộ hình ảnh).

Từ khóa tìm kiếm: thiết kế web , tài liệu thiết kế web , thiết kế web của bạn , thanh điều hướng cho thiết kế web , thiết kế web một chiều trong photoshop , tạo bố cục thiết kế trang web một chiều trong , thiết kế website tphcm

Thiết kế web,tài liệu thiết kế web, thiết kế web của bạn,Thanh điều hướng cho thiết kế web, thiết kế web một chiều trong photoshop,Tạo bố cục thiết kế trang web một chiều trong Photoshop