Tạo Portfolio Web Layout

Với bài Tạo Green Grunge Web Layout chắc các bạn cũng đã biết cách tạo ra một layout hoàn chỉnh. Bây giờ mình sẽ chỉ thêm về cách thiết kế layout cho web bán hàng.

Bắt đầu nhé.!

Bước 1: Tạo trang mới với kích thước 1200 x 2400px. Tô màu #333333, sau đó vào menu Filter > Noise > Add Noise và thiết lập các thông số như bên dưới

Bước 2: Tạo một group mới và đặt tên là “header“. Chọn công cụ Rectangle Tool (U), vẽ một hình chữ với kích thước 1200 x 140px và tô màu color #30a0b8. Đặt tên cho layer này là “header bg“, sau đó thiết lập các thông số Noise như sau:

Bước 3: Tiếp tục sử dụng Rectangle Tool (U), vẽ một hình chữ nhật với kích thước 1200 x4px và tô màu  #33b9d6. Đặt tên cho layer này là “top bar“.Và đặt nó nằm phía trên của hình chữ nhật lớn hơn “header bg”.

Bước 4: Tạo pattern hình tam giác
Chúng ta sẽ tạo ra pattern hình tam giác để dùng trong header của mình. Tạo trang mới với kích thước 20 x 8px. Phóng to trang giấy, dùng Pen Tool (P) bạn hãy vẽ một hình tam giác như tôi đã vẽ, tô màu #000000. Sau đó định nghĩa nó là Pattern bằng cách click vào Add vector Mask và vào Edit > Define Pattern. Đóng trang giấy lại.

Bước 5: Áp pattern
Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật với kích thước 1200px bởi 10px. Đặt Fill của layer này là 0% (tùy chọn Fill là ngay bên dưới Opacity trong bảng Layers). Đặt tên layer này là “top pattern“, double click vào nó để mở cửa sổ Layer Style và sử dụng các thiết lập với hình ảnh sau đây cho Pattern Overlay.

Bước 6: Thay đổi màu sắc của lớp pattern
Bây giờ chúng ta cần phải thay đổi màu sắc của hình tam giác thiết lập thêm cho nó một số kiểu. Nhấp chuột phải vào layer “top pattern” và chọn Convert to Smart Object. Double-click vào lớp này để mở cửa sổ Layer Style và thiết lập các thông số cho nó dựa vào những hình dưới, và bạn nhớ là mã màu mới của nó là # 33b9d6 nhé.

Bước 7: Nhân đôi lớp pattern
Nhân đôi layer “top pattern” và đặt tên cho nó là “button pattern“, di chuyển lớp này xuống cùng của lớp “header”. Double click vào layer này và đổi màu sang #30a0b8.

Bước 8: Tạo texture cho header
Sử dụng Rectangular Marquee Tool (M) vẽ một hình chữ nhật trên header. Tạo một layer mới và tô màu #aaaaaa, đặt tên layer là “texture“.

Chúng ta chỉ áp texture cho khu vực header mà không bao hàm các vùng khác. Vì thế bạn nhấn giữ phím Ctrl và nhấp chuột vào layer “header bg” và “top pattern”. Sau đó vào menu Layer > Layer Mask > Reveal Selection.

Với layer “texture” đã chọn, vào Filter > Noise > Add Noise sử dụng các thiết lập như hình dưới. Sau đó vào Filter > Sketch > Water Paper thiết lập thông số như hình.Và thiết lập chế độ pha trộn cho nó là Soft Light.

Bước 9: Bổ sung logo cho layout
Để cho header thêm hoàn chỉnh thì logo là một trong những yếu tố ấy. Ở bài này mình chưa tiện hướng dẫn các bạn cách tạo logo sao cho đẹp nên chúng ta chỉ sử dụng text làm logo nhé.

Bạn dùng Type Tool (T). Trong hướng dẫn này mình sử dụng font chữ Univers Ultra Condensed, bạn hãy gõ tên logo của mình vào và canh vị trí như hình nhé, sử dụng màu #e3eef2 và thiết lập thông số Drop shadow cho nó như hình dưới.

Bước 10: Tạo thanh menu
Tạo group mới đặt tên là “navigation“. dùng Type tool (T) và viết các mục menu của mình. Sử dụng màu #ffffff, font Univers Light Condensed, size 18px và thiết lập thông số shadow như bên dưới.

Để làm điểm nhấn thêm cho các menu, bạn có thể download những icon gắn liền với nó tại đây.

Bước 11: Tạo phong cách active cho menu
Dùng Rounded Rectangle Tool (U), radius 2px tạo ra một hình chữ nhật với góc bo 2px ấy bên dưới một trong các menu của bạn, sử dụng màu #3895a8. Đặt tên layer này là “active“. Double click vào nó và thiết lập các thông số như hình

Bước 12: Tạo pattern sọc chéo
Tạo một tài liệu mới với 4 x 4px. Phóng to, chọn công cụ Rectangular Marquee Tool (M), giữ phím Shift và vẽ 4 hình vuông như bạn thấy trong hình dưới đây. Tạo layer mới và tô màu đen. Nhấn Ctrl + D để bỏ chọn. Sau đó ẩn layer “Background”, vào Edit> Define Pattern, đặt cho nó một cái tên và nhấn OK. Bây giờ bạn có thể đóng tài liệu này.

Bước 13: Tạo thanh trượt cho ảnh.
Tạo group mới đặt tên là “slider”. Dùng Rectangle Tool (U) vẽ một hình chữ nhật với kích thước 1000 x 350px và tô màu #9eafb2. Đặt tên cho layer này là “slider border“, double click lên layer để mở cửa sổ layer style và thiết lập các thông số như hình. Đặt hình chữ này này ở giữa trang giấy

Bước 14:
Tạo một hình chữ nhật khác với kích thước 980 x 330px và tô màu trắng. Đặt tên layer này là “image_holder” và đặt chính giữa hình chữ nhật lớn hơn. Đây là vùng sẽ hiển thị các slide ảnh

Để hiển thị ảnh trong vùng này, bạn mở nó trong photoshop, di chuyển nó vào trong web layout của bạn, đặt trên lớp “image _holder”. Đặt tên layer là “image”, right_click vào nó và chọn Create clipping mask. Bây giờ hình ảnh của bạn sẽ được hiển thị trên lớp “images_holder”.

Bước 15: Tạo các mũi tên trên slide ảnh
Tạo group mới, đặt tên là “right arrow“. Chọn công cụ Ellipse Tool (U) tạo một vòng tròn với kích thước 45 45px và tô màu #33b9d6. Đặt tên cho layer này là “circle“. Copy biểu tượng”»”, chọn Type tool và dán nó vào giữa hình tròn. Với biểu tượng mũi tên này mình đã dùng font Univers Condensed và màu #f4f4f4.

Nhân đôi layer này và đổi tên nó thành “left arrow“. Sau đó và Edit > Transform > Flip Horizontal và di chuyển nó đến bên trái của thanh trượt

Bước 16: Tạo tiêu đề cho hiển thị ảnh

Bây giờ chúng ta sẽ tạo ra một dải ruy băng cho tiêu đề của khu vực hiển thị hình ảnh ấy. Chúng ta sẽ sử dụng ruy băng tương tự sau này cho các khu vực khác của layout.

Tạo một nhóm mới và đặt tên nó là “headline“. Chọn công cụ Pen (P) vẽ một hình như bạn nhìn thấy trong hình dưới đây ở góc trên bên trái của thanh trượt hình ảnh và tô màu # ac1eda. Đặt tên layer này là “bg“, double click vào nó để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh dưới đây.

Bước 17: Thêm bóng cho ruy băng
Tạo một layer mới đăt tên là “shodows“, đặt trên layer “bg”. Nhấp chuột phải vào nó và chọn Create clipping mask. Bây giờ tất cả mọi thứ bạn vẽ trên layer này sẽ hiển thị trên layer “bg”.

Sử dụng Brush tool (B), màu đen, đầu cọ mềm với opacity là 60% để thêm một số bóng trên ruy băng. Thay đổi màu của cọ sang màu trắng và thêm một số điểm nổi bật cho ruy băng. Bạn có thể tham khảo ảnh dưới, thiết lập chế độ hòa trộn là soft light 70%.

Bước 18:
Dùng Type Tool (T) nhập từ “featured” trên thanh ruy băng. Sử dụng màu #ffffff, font Univers Ultra Condensed và thiết lập shodow cho nó như sau

Bước 19:
Chọn công cụ Line Tool (U), thiết lập h: 1px và tạo ra một đường kẻ màu đen nằm ngang có w: 10 px. Đặt dòng này ở góc trên bên trái của băng.

Nhân đôi dòng này và di chuyển nó sang phải. Nhân đôi dòng này và di chuyển vị trí mới để bên phải. Lặp lại quá trình này cho đến khi bạn đạt đến góc trên bên phải. Đặt tất cả những lớp bên trong một nhóm và đặt tên nó là “top“. Đặt nhóm này bên trong cái khác và đặt tên là “dashed lines“.

Nhân đôi group “top” và di chuyển nó xuống phía dưới của ruy băng, đặt tên cho group này là “botton“. Sau đó thiết lập chế độ pha trộn của nhóm “dashed lines” là Soft Light 50%.

Bước 20:
Chọn công cụ Rectangular Marquee Tool (M) và tạo ra một vùng chọn như bạn thấy trong hình dưới đây. Tạo một layer mới và sử dụng cọ mềm màu đen để thêm một bóng tối ở phía bên tay trái của băng. Nhấn Ctrl + D để bỏ chọn. Đặt tên layer này là “shadow” và thiết lập Opacity đến 50%.

Bước 21: Tạo background cho nội dung

Tạo một nhóm mới và đặt tên nó là “content bg“. Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật với kích thước 1000px x 1670px. Chiều cao phụ thuộc vào cách mà bạn sẽ sắp xếp tất cả các yếu tố của bố cục web sau đó. Nếu bạn cần một chiều cao khác cho background nội dung thì sau khi bạn thêm nội dung, bạn có thể quay trở lại và sửa đổi nó.

Nhấp chuột phải vào layer này và chọn Covert to Smart Object. Sau đó vào Filter> Noise> Add Noise và sử dụng các thiết lập từ các hình ảnh sau đây.

Bước 22:
Tạo mới trang giấy với kích thước 20 x 20px. Phóng to nó lên, dùng Pen tool (P) vẽ một hình tam giác như hình dưới. Ẩn layer background, vào Edit > Define Pattern, đặt cho nó một cái tên và nhấn OK.

Với lớp hình dạng tam giác vào Edit> Transform> Flip Vertical. Sử dụng Move Tool (V) để di chuyển layer này ở đến vị trí cuối cùng của tài liệu. Sau đó một lần nữa vào Edit> Define Pattern để tạo pattern mới. Đóng trang giấy này lại.

Bước 23: áp dụng pattern

Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật với kích thước 1000px 10px đặt lên trên cùng của backgroun nội dung. Đặt tên là “top triangles” thiết lập fill 0%. Double-click vào nó để mở cửa sổ style window và áp dụng pattern mà bạn đã tạo.

Nhân đôi layer này và di chuyển đến dưới cùng của background nội dung. Tên này “bottom triangles” và thay đổi pattern tam giác.

Bước 24: Tạo khu vực dịch vụ
Tạo một nhóm mới và đặt tên là “services“. Nhân đôi group “headlines” từ thanh trượt hình ảnh và di chuyển nó đến góc trái của background nội dung. Thay đổi màu sắc của ruy băng (layer “bg”) thành # da1e4a. Chọn công cụ Type (T) và chỉnh sửa các đoạn text để đọc “Service”.

Bước 25: Thêm mô tả cho dịch vụ
Tạo một nhóm mới và thiết lập tên là “web design”. Kích hoạt guides . Chọn công cụ Rectangle Tool (U) và vẽ một hình chữ nhật trường hợp với kích thước 320px 220px tô màu # f4f4f4. Đặt tên Layer này là một “boder”, nhấn đúp chuột vào nó và sử dụng các thiết lập như hình. Đối với stroke, tôi sử dụng màu # d4d4d4.

Bước 26: Tạo một hình chữ nhật với kích thước 200 x 300px và màu # ffffff. Đặt tên layer này là “image_holder” và đặt nó ở giữa layer “border“. Thiết lập stroke là 1px , # d4d4d4.

Bước 27:
Chọn công cụ Type (T) và thêm một số nội dung cho dịch vụ thiết kế này. Hãy nhìn vào hình ảnh sau đây để tham khảo.

Bước 28: Tạo nút “Read more”
Tạo một nhóm mới và đặt tên nó là “button“. Chọn công cụ Rounded Rectangle Tool (U), thiết lập Radius là 4px và tạo ra một hình chữ nhật tròn với kích thước 140px 30px và màu # ac1eda. Đặt tên layer này là “button”, double click vào nó để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây.

Chọn Type Tool (T) và viết dòng chữ “Read more» “trên nút của bạn. Sử dụng màu # ffffff với font Univers Light Condensed và size 16pt. Thêm shadow cho nó với hướng dẫn sau

Bước 29:
Nhân đôi group “web design” 3 lần cho 3 dịch vụ thiết kế khác. Kích hoạt guides và sắp xếp các nhóm như bạn thấy trong hình dưới đây. Chọn công cụ Type (T) và thay đổi tên của các dịch vụ thiết kế.

Bước 30:  Tạo group  mới và đặt tên nó là “portfolio”. Nhân đôi group “headline”. Thay đổi màu sắc của layer “bg” # aec81e và sử dụng Type Tool (T) để chỉnh sửa các văn bản của ruy băng thành “Portfolio” . Để lại một khoảng cách 60px giữa mép dưới của nút “read more” và  khu vực “portfolio”.

Bây giờ chúng ta sẽ tạo ra một số vùng để hiển thị hình ảnh cho danh mục Protfolio này. Tạo một nhóm mới và đặt tên là “# 1”. Kích hoạt guides. Chọn công cụ Rectangle Tool (U), giữ phím Shift và tạo ra một hình vuông với kích thước 140px 140px và màu # f4f4f4. Đặt tên layer này là “border”. Sau đó, sao chép phong cách lớp từ lớp “border” của vùng ‘service”(nhấp chuột phải vào nó và chọn Copy Layer Style) và dán nó vào lớp này.

Tạo một hình vuông khác với kích thước 1200 x1200px, tô màu #ffffff. Đặt tên là “image_holder” và đặt nó nằm giữa layer”border”. Thêm Stroke 1px, #d4d4d4.

Nhân đôi group “#1” 7 lần và sắp xếp chúng như hình dưới

Nhân đôi group “button” và đổi màu  #aec81e.  Di chuyển nó sang bên dưới phải của các ô hình ảnh và đổi tên text thành “view portfolio”.

Bước 31:  Tạo khu vực “About”

Để không mất thời gian vô ích thì chúng ta nhân đôi group ruy băng và vào Edit > Transform > Flip Horizontal , di chuyển nó sang bên  phải layout, sau đó đổi tên text thành “About“.

Để thêm các đoạn text ta dùng font Helvetica Regular với size 12pt và màu #515151.

Bước 32: Tạo khu vực “Blog”

Ta lại nhân đôi group ruy băng và đổi màu #da7b1e, thay đoạn text thành “Blog”. Đặt dải ruy băng này với một khoảng cách 60px từ mép dưới cùng của khu vực “Portfolio”.

Tạo khung hình chứa ảnh. Tạo một nhóm mới và đặt tên là “post#1”. Đối với layer “border”, sử dụng kích thước 220 x 220px, sau đó tạo lớp “image holder” kích thước 200 x 200px. Tạo thêm nút read more như hướng dẫn trên. Mình không chỉ cặn kẽ vì chúng ta đã làm những điều này trước đó rồi, bạn có thể tham khảo thêm những hình ảnh dưới đây để làm cho chính xác  bố cục của web nhéSau đó nhân đôi group “post#1” và đặt tên là “post#2”, di chuyển nó xuống group “post#1”

Bước 34: Tạo sidebar của blog

Tạo một nhóm mới và đặt tên nó là “categories”. Chọn Type Tool (T) và viết từ “Categories”. Tôi sử dụng font chữ Univers Ultra với màu # 515151 và kích thước 36pt.

Chọn công cụ Line Tool (U) và tạo ra một đường ngang với h:1px và màu # b9b9b9, như bạn thấy trong hình dưới đây.

Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật với kích thước 300px bởi 5px và đặt nó bên dưới dòng “1px”. Đặt tên layer này là “diagonal lines” và thiết lập Fill là 0%. Sau đó kích đúp vào nó và sử dụng các thiết lập từ các hình ảnh sau đây cho Pattern Overlay.

Chọn Type Tool (T) và thêm một danh sách các categories. Tôi sử dụng font Helvetica Regular với 12pt kích thước và màu # 515151.

Để tạo điểm nhấn, chọn công cụ Ellipse Tool (U), giữ phím Shift và tạo ra một vòng tròn với kích thước 5px 5p và màu # 515151. Nhân đôi layer này nhiều lần như bạn cần và sắp xếp chúng bằng cách sử dụng Move Tool (V). Nhóm tất cả các lớp và đặt tên là “bullet points” nhóm.

Bạn tiếp tục tạo danh sách các bài phổ biến popular post như cách mà bạn tạo danh sách categories

Bước 34: Bổ sung thêm dải phân cách giữa các phần nội dung
Tạo một nhóm mới và đặt tên nó là “separators”. Sau đó chọn công cụ Line Tool (U) và tạo ra một đường ngang với chiều rộng 940px và màu # dbdbdb. Đặt tên layer này là “1px line” và đặt nó giữa các khu vực “service” và “portfolio”.

Nhân đôi layer “1px line” và đưa dòng mới giữa khu vực “portfolio” và “blog” .

Bước 35: Thêm footer
Tạo một nhóm mới và đặt tên nó là “footer”. Chọn công cụ Type (T) và ghi tên bản quyền tác giả dưới cuối cùng của layout. Tôi sử dụng font Helvetica với kích thước 12px và màu # ebebeb.

Đến đây thì công việc thiết kế layout của chúng ta đã  hoàn thành. Với hướng dẫn này bạn dễ dàng tạo ra được một trang web bán hàng hay bất kỳ những gì mình thích. Thử bắt tay thực hiện xem nào….

Chúc các bạn thành công nhé, hẹn gặp lại các bạn vào những bài sau.

---

thu thuat photoshop photoshop tuts photoshop tutorial web layout tự học photoshop tuts psd portfolio web layout giao dien web web template create web layout port web layout

---

Tin Tức Liên Quan