Tạo Green Grunge Web Layout

Chỉ mất  61 bước và khoảng 1h bạn sẽ tạo ra một layout hoàn chỉnh cho web của mình đẹp hoàn hảo như hình bên dưới.

Nhưng trước khi thiết kế, bạn sẽ phải download brush Grunge tại đây.

Nào, chúng ta bắt đầu

Bước 1: Tạo trang mới với kích thước 1200 x 490px, tô màu #274618.

Bước 2: Tạo một layer mới, đặt tên là “orage bar“, Tạo một vùng chọn và tô màu chuyển sắc với mã màu: #de6d00 và #912b00 (di chuyển lên top của trang), bạn vẽ hình như bên dưới:

Bước 3: Tạo một group đặt tên là “brushes“, tạo một layer trong group này, đặt tên là “grunge brush overlay“, thiết lập màu foreground là màu trắng, sau đó chọn brush grunge vừa download về vẽ nó với màu trắng, đặt trên layer orange bar. Và thiết lập chế độ hòa trộn là Overlay cho brush. bạn có thể tham khảo hình bên dưới.

Bước 4: Lặp lại các bước 3 nhưng thiết lập màu của brush là #d46300, đặt tên layser là “grunge brush soft light“, sau đó dùng Rectangular Marquee Tool (M) để chọn vùng của brush trên thanh màu cam của bạn và delete nó. Và thiết lập chế độ hòa trộn của lớp là Soft Light.

Bước 5: Dùng Rectangular Marquee Tool (M) tạo một vùng chọn như hình, đặt tên là “black gradient“. Sau đó vào menu Layer > New Fill Layer > Gradient and use the settings from the following image. Thiết lập chế độ hòa trộn là Soft light và opacity là 54%.

Bước 6: Dùng Rectangular Marquee Tool (M) tạo một vùng chọn nằm trên top của trang giấy, đặt tên là “white gradient“. Sau đó vào menu Layer > New Fill Layer > Gradient and use the settings from the following image. Thiết lập chế độ hòa trộn của layer này Overlay.

Bước 7: Chọn công cụ Line Tool (U), thiết lập đường kẻ nằm ngang ở phía trên của hình chữ nhật màu da cam của bạn với chiều cao là 1px và màu # 140c06. Đặt tên cho layer là “1px black line“.

Bước 8: Sử dụng lại công cụ Line Tool (U) để tạo ra một đường ngang màu trắng với chiều cao là 1px, đặt bên dưới đường màu đen. Thiết lập chế độ pha trộn của layer này là Overlay, opacity 22%. Và đặt tên là “1px white line“.

Bước 9: Trở lại group brush, tạo một layer mới trong group này, thiết lập màu foreground là màu trắng, bạn chọn brush grunge vừa download hoặc brush nào tùy ý, vẽ trên thanh màu cam và thiết lập chế độ hòa trộn là Overlay.

Bước 10: Bây giờ chúng ta sẽ tạo nền background cho thanh naviigation bar.

Để cho dễ quản lý, bạn tạo group mới và đặt tên là “naviigation bar“. Trong group này bạn tạo thêm group mới đặt tên là “navigation bar brushes“.

Trong group “navigation bar brushes” bạn tạo một mới một layer, thiết lập màu foreground là màu trắng và dùng brush grunge (hoặc bất kỳ brush nào) vẽ lên thanh màu cam của bạn, chế độ hòa trộn là Overlay.

Bước 11: Tạo mới một layer, đặt tên là “navigation bar“, sử dụng Rectangular Marquee Tool (M) tạo ra một vùng chọn như tôi đã làm. Sau đó dùng Gradient Tool (G) đổ màu như hình bên dưới, nhớ là bạn phải kéo từ trên xuống dưới.
Bước 12: Dùng Eraser Tool (E), chọn brush với đầu cọ mềm và xóa từ trái qua phải của thành navigation bar.

Bước 13: Nào, bây giờ chúng ta sẽ thêm một hiệu ứng ánh sáng ở trên thanh navigation bar. Trước tiên, bạn dùng Rectangular Marquee Tool (M) để tạo ra một vùng chọn như tôi đã làm. Sau đó bạn tạo mới một layer và đặt tên là “hightlight”, chọn cọ màu trắng, mềm với đường kính khoảng 200px, sơn nó phía dưới khu vực mà bạn chọn., thiết lập chế độ hòa trộn là Overlay. Bạn có thể tham khảo thêm hình bên dưới để làm tốt hơn.

Bước 14: Lặp lại bước 13 và đặt tên layer là “hightlight 2” thiết lập Overlay với opacity là 60%.

Bước 15:  Dùng Line Tool (U) và tạo một đường ngang với chiều cao là 1px, đặt trên cùng của thanh navigation bar, để lại một khoảng trống giữa đường ngang này và thanh navigation bar cũng với khoảng cách là 1px Sau đó, dùng Eraser (E) xóa bên trái và bên phải. Cuối cùng, Double click vào layer để mở cửa sổ Layer Style và thiết lập các thông số như hình dưới. Đặt tên layer là “1px green line“.

Bước 16: Chọn công cụ Type Tool (T), thiết lập màu foreground là màu trắng và viết văn bản cho các mục menu navigation của bạn. Sau đó Double clickk vào layer này để mở cửa sổ Layer Style và thiết lập các thông số như hình:

Bước 17: Sử dụng Rectangular Marquee Tool (M) để tạo ra một vùng chọn như tôi đã làm. Sau đó tạo layer mới và kéo gradient từ trên xuống với mã màu #6fb600 và #479501.

Tiếp tục dùng Rectangular Marquee Tool (M) để tạo ra một vùng chọn như tôi đã làm. Sau đó tạo layer mới và kéo gradient từ trên xuống với mã màu #b9f100 và #65bc05.

Đặt layer này dưới lớp văn bản mà bạn đã tạo ở bước trước.

Bước 18: Tạo một nhóm mới và đặt tên là “header” Bây giờ chúng ta sẽ tạo ra một logo. Đầu tiên, chọn Type Tool (T) và viết từ “FIKED” sử dụng màu trắng. Phông chữ mà tôi đã sử dụng là “Impact“. Double-click vào lớp này để mở cửa sổ Layer Style và thiết lập thông số như hình.

Bước 19:  Nào bây giờ chúng ta sẽ đính vài ngôi sao trên logo của mình. Chọn công cụ Custom Shape Tool (U) và vẽ ngôi sao 5 cánh với mã màu #dedede, đặt tên là “star1“.

Tạo thêm hai ngôi sao nữa như tôi đã làm, sử dụng màu #c0c0c0 và #a8a8a8, đặt tên “star2” và “star3“.

Bước 20: Giữ phím Ctrl + click vào layer “star1” để chọn ngôi sao số 1, vào Select > Modify > Expand chọn 3px. Sau đó click vào ‘star2” vào menu Layer > Layer Mask > Hide Selection.

Bước 21: Ctrl + click trên “star2” để chọn ngôi sao 2, đi đến menu Select > Modify > Expand and expand gõ vào 3px. Sau đó click “star3” vào Layer > Layer Mask > Hide Selection.

Bước 22: Ctrl – click vào thumnail  của layer văn bản “Fiked” để chọn nó, sau đó vào menu  Select > Modify > Expand and expand gõ 5px. Sau đó click bấm vào mặt nạ của “star2” và tô màu đen. Bạn có thể tham khảo hình bên dưới.

Bước 23: Tạo bóng cho mỗi ngôi sau với các thiết lập như hình dưới, sau đó đổi màu trắng cho ngôi sao.

Bước 24: Chọn Type Tool (T), thiết lập màu nền trước là màu trắng và viết “Live EXTREME” bên dưới từ “FIKED“. Double-click vào lớp này và sử dụng các thiết lập với hình ảnh sau đây cho Drop Shadow.

Bước 25: Sử dụng Rectangular Marquee Tool (M) để tạo ra một lựa chọn như tôi đã làm.Vào Layer> New Fill Layer> Solid Color and set the color to white. Sau đó thiết lập chế độ hòa trộn của layer này sang Overlay và đặt nó bên dưới lớp “Fiked“.

Bước 26:  Tạo một layer mới và sử dụng Rectangular Marquee Tool (M) để tạo ra một lựa chọn như tôi đã làm. Sau đó kéo gradient từ trái sang phải với màu trắng, thiết lập chế độ hòa trộn là Overlay và đặt tên layer là “gradient“.

Bước 27:  Sử dụng Type Tool (T) để thêm văn bản trong header của bạn. Và sử dụng các thiết lập sau

Bước 28: Nhóm tất cả các lớp đã tạo ra cho đến nay (không có nền) và đặt tên nhóm là “header & navigation“. Và bây giờ chúng ta sẽ nới rộng kích thước cuả canvas. Bạn vào menu Go to Image > Canvas Size thiết lập kích thước như hình. Sau đó thiết lập màu background #274618.

Bước 29: Tạo mới một layer, đặt tên là “black grunge” và dùng cọ grunge mềm màu đen, sau đó thiết lập chế độ hòa trộn là Soft light.

Bước 30:  Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật lớn màu trắng, như tôi đã làm. Sau đó nhấp đúp chuột vào layer này để mở cửa sổ Layer Style và thiết lập các thông số cho stroke như hình. Và đặt tên là  “content bg“.

Bước 31:  Dùng  Rounded Rectangle Tool (U) để tạo ra một hình chữ nhật bo tròn nhỏ ở góc trên bên trái của hình chữ nhật màu trắng lớn của bạn. Sau đó kéo một gradient trên hình chữ nhật bo tròn từ trái sang bên phải, sử dụng màu sắc # 8ecf3b và # 639029. Đặt layer này dưới layer “content bg”, chỉ để lại một nửa của hình chữ nhật tròn có thể nhìn thấy. Sau đó đặt tên “rounded rectangle.”

Bước 32: Dùng Line Tool (U) vẽ một hình với chiều rộng là 4px, chiều cao bằng với chiều cao của hình chữ nhật lớn màu trắng. và thiết lập chế độ hòa trộn là Overlay. Đặt tên là “white line“.

Bước 33:  Bây giờ chúng ta sẽ tạo ra hai đường thẳng nét đứt. Đầu tiên, chọn công cụ Pencil Tool (B), mở bảng Brushes (F5) và thiết lập khoảng cách tới 236%. Sau đó thiết lập màu nền trước # 639029, giữ phím Shift và vẽ một đường thẳng đứng rải rác từ đỉnh của hình chữ nhật màu trắng của bạn lớn phía dưới. Đặt dòng này ở phía bên trái của hình chữ nhật màu trắng của bạn, nhân đôi layer  (Ctrl + J) và sau đó đặt các dòng mới ở phía bên phải.

Bước 34:  Chọn Rounded Rectangle Tool (U), thiết lập bán kính 20px và tạo ra một hình chữ nhật tròn ở phía dưới của hình chữ nhật lớn màu trắng,  sử dụng màu # 639029. Sau đó, sử dụng công cụ Rectangular Marquee Tool (M) để chọn phần trên của hình chữ nhật tròn này và xóa nó.

Bước 35:  Chọn công cụ Type (T), thiết lập màu foreground màu trắng và viết văn bản cho các mục menu navigation của bạn vào hình chữ nhật tròn màu xanh lá cây. Sau đó nhấp đúp chuột vào layer văn bản để mở cửa sổ Layer Style và sử dụng các thiết lập cho Drop Shadow như sau:

Bước 36:  Thêm hai đường thẳng nét đứt ở phía dưới của hình chữ nhật lớn màu trắng, sử dụng màu # 639029 và # 182b0e.

Bước 37:  Sử dụng Rectangular Marquee Tool (M) để tạo ra một lựa chọn như tôi đã làm. Sau đó kéo một gradient xuyên tâm từ trung tâm của lựa chọn của bạn cạnh bên trái, sử dụng màu # 366121 và # 1f3713. Đặt layer này dưới layer hình chữ nhật tròn màu xanh lá cây.

Bước 38:  Tạo một layer mới, đặt tên là “grunge brush“, chọn một brush grunge màu đen và sơn với nó trên footer. Sau đó nhấp đúp chuột vào layer này và sử dụng các thông số cho Drop shadow như hình dưới. Sử dụng chế độ hòa trộn Soft Light 66%.

Bước 39:  download orange bar image,  mở nó trong Photoshop và đặt thanh này trong chân của các bố trí của bạn và đặt tên layer này là “orange bar.” Sau đó, chọn công cụ Type (T) và viết bản quyền tác giả.

Bước 40:  Bây giờ chúng ta sẽ tạo ra một vị trí quảng cáo. 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 250px của 250px, sử dụng màu # cad7ba. Sau đó nhấp đúp chuột vào layer này và sử dụng các thiết lập thông số cho stroke như hình. Đặt tên layer này là “250 × 250.”

Bước 41:  Chọn công cụ Type (T) và viết “50×250 Advert spot” trên hình chữ nhật của bạn sử dụng màu # 494949.  Sau đó sử dụng công cụ Line Tool (U) với các thiết lập với hình ảnh sau đây để tạo ra hai mũi tên, như tôi đã làm.

Bước 42:  Dùng công cụ Rounded Rectangle Tool (U) với bán kính 5px để tạo ra một vùng chọn. Sau đó sử dụng thanh cọ mềm,màu đen để tạo ra cái bóng như tôi đã làm . Thiết lập chế độ hòa trộn của layer này là Soft Light 65% và đặt tên là “shadow“.

Bước 43:  Tạo một layer mới, đặt tên “Gradient”  và sử dụng Rectangular Marquee Tool (M) để tạo ra một lựa chọn như tôi đã làm. Sau đó kéo một màu đen để minh bạch gradient từ phía bên trái của lựa chọn của bạn sang phía bên phải. Thiết lập chế độ hòa trộn của layer này là Soft Light 50% và di chuyển nó bên dưới lớp 250 × 250.

Bước 44:  Bây giờ chúng ta sẽ tạo ra một thanh màu xanh lá cây bên cạnh hình chữ nhật màu trắng lớn. Đầu tiên, tạo một nhóm mới và đặt tên là “green bar“.

Để tạo ra thanh thanh như trong hình, bạn sử dụng công cụ Burn để tạo ra một cái bóng tinh tế và thanh của bạn trông giống như nó là 3D.  Sau đó sử dụng Rectangular Marquee Tool (M) để chọn vùng thanh màu xanh lá cây của bạn là hơn 250 điểm × 250 quảng cáo của bạn và xóa nó. Double-click vào lớp này và sử dụng các thiết lập với hình ảnh sau đây cho Drop Shadow.

Bước 45: Nhân đôi lớp thanh màu xanh lá cây và di chuyển layer mới bên cạnh bản gốc. Ctrl-click vào thumnail của layer mới này để chọn nó và tô màu đen. Sau đó thiết lập Opacity của lớp này đến 15%.

Bước 46: Tạo một layer mới, chọn cọ mềm với đường kính 1px và thiết lập màu foreground là # 98a15e. Chọn công cụ Pen (P) và tạo ra một đường ở giữa thanh màu xanh lá cây của bạn, như tôi đã làm. Sau đó nhấp chuột phải vào hình ảnh của bạn, chọn Stroke Path, sau đó chọn Brush, hãy chắc chắn rằng tùy chọn Simulate Pressure không được chọn và bấm OK. Sử dụng công cụ Burn để làm cho một số khu vực của đường này tối hơn.

Bước 47:  Ctrl-click vào thumnail bất kỳ của hai lớp mà bạn đã tạo ở bước trước để chọn dòng. Sau đó vào Layer> New Adjustment Layer> Brightness / Contrast và sử dụng các thiết lập từ các hình ảnh sau đây. Sau đó nhấn Ctrl + J để nhân đôi layer này.

Bước 48: Tạo một layer mới, Ctrl-click vào thumnail của lớp thanh màu xanh lá cây để chọn thanh và tô nó với brush grunge màu đen trên thanh màu xanh lá cây của bạn. Thiết lập chế độ hòa trộn của layer này Overlay.

Bước 49:  Sử dụng Công cụ Pen (P) để tạo ra một số cỏ ở dưới cùng của thanh màu xanh lá cây của bạn. Để tạo bóng sử dụng công cụ Burn.

Bước 50:  Thêm một số lá vào hình ảnh của bạn và đặt chúng ở trên thanh màu xanh lá cây.

Bước 51: Chọn công cụ Brush Tool (B), chọn một brush mềm với đường kính 2px và thiết lập màu foreground là # 606442. Sau đó sử dụng công cụ Pen (P) để tạo ra một số loại dây ở phía trên và ở dưới cùng của thanh màu xanh lá câ. Để làm điều này, bạn tạo ra đường dẫn với công cụ Pen (P), sau đó nhấp chuột phải vào hình ảnh của bạn, chọn Stroke Path, chọn “Brush” từ danh sách đó và nhấn OK. Sau đó sử dụng công cụ Burn để thêm một số bóng tối  cho những sợi dây ấy. Sử dụng Công cụ Eraser (E) để xóa một số phần của sợi dây thừng, để trông giống như nó đang quấn quanh thanh màu xanh lá cây.

Bước 52:  Tạo một group mới và đặt tên là “content“, trong group này tạo thêm môt layer mới.  Chọn công cụ Rounded Rectangle Tool (U),  cho radius là 5px và vẽ một hình chữ nhật trò sử dụng màu # cad7ba. Sau đó, chọn công cụ Line Tool (U), và vẽ hình chữ nhật như bên dưới.

Bước 53: Tạo một layer mới và sử dụng công cụ Rounded Rectangle Tool (U) để tạo ra một hình chữ nhật bo tròn ở dưới cùng của layout. Đây sẽ là khu vực cho các đoạn video mới nhất. Sau đó sử dụng công cụ Rectangle Tool (U) và công cụ Line (U) để tạo ra một số hình chữ nhật màu trắng và đường dây. Chọn công cụ Type (T) và viết “LATEST VIDEOS” ở phía bên phải của hình chữ nhật tròn của bạn.

Bước 54:  Sử dụng công cụ Rectangle Tool (U) để tạo ra hai hình chữ nhật màu trắng với kích thước 468 x 60px. Đặt một hình chữ nhật ở phía trên cùng của khu vực nội dung và một ở phía dưới. Sau đó, tạo viền cho nó với thông số stroke như hình và sử dụng công cụ Type (T) viết “468 × 60” ở góc dưới bên trái của mỗi hình chữ nhật.

Bước 55:  Tạo một hình chữ nhật bo tròn bên dưới vị trí quảng cáo đầu tiên, sử dụng màu # cad7ba. Sau đó, thêm một đường ngang màu trắng có cùng chiều rộng với hình chữ nhật bo tròn này và chiều cao là 6px.

Bước 56:  Tạo một hình chữ nhật nhỏ màu trắng bo tròn ở góc dưới bên phải của hình chữ nhật bo tròn màu xanh lá cây. Bạn download ngôi sao này tại đây, mở nó trong Photoshop, di chuyển nó vào tài liệu của bạn bằng cách sử dụng Move Tool (V) và lặp lại nó bốn lần. Sắp xếp tất cả những ngôi sao và viết từ “Rating” ở phía trước của hình chữ nhật tròn màu trắng, sử dụng màu # 92a080.

Bước 57:  Sử dụng Type Tool (T) để viết từ “Screenshots” ở góc trên bên phải của hình chữ nhật màu xanh lá cây. Sau đó, thêm ba hình ảnh vuông bên dưới văn bản với các kích thước 100 x 100px.

Bước 58:  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 320 x 260px, sử dụng màu # 768268. Sau đó, chọn công cụ Type (T) và viết “Video Spot” ở trung tâm của hình chữ nhật này, sử dụng màu # a0ae8e. Sau đó sử dụng công cụ Type (T) một lần nữa thêm văn bản dưới hình chữ nhật của bạn.

Bước 59:  Sử dụng công cụ Rectangle Tool (U) và công cụ Type (T) để tạo ra một thanh tìm kiếm và một kênh  đăng nhập ở góc trên bên trái của khu vực nội dun. Bạn có thể dựa vào những thông số sau để thiết lập cho nó

Bước 60:  Bây giờ chúng ta sẽ tạo ra ra khu vực sản phẩm (Products). Tạo một hình chữ nhật tròn màu trắng và viết từ “Product” vào nó, sử dụng màu # a0ae8e. Sử dụng công cụ Line Tool (U) để tạo ra một dòng trắng với chiều cao 4px bên dưới các hình chữ nhật tròn. Sau đó, thêm năm hình ảnh với kích thước 180 x 78px và thiết lập stroke cho nó như sau:

Bước 61:  Thêm 9 hình ảnh ô vuông bên dưới khu vực video của bạn. Sau đó, thiết lập Outer Glow như hình dưới. 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 100 x  16px ở dưới cùng của mỗi hình ảnh, sử dụng màu # dfdfdf.

Phù! xong rùi. Với 61 bước ấy bạn đã có thể tự tạo cho mình một layout tương tự với những màu mình thích. Hy vọng rằng, với hướng dẫn này sẽ mang lại cho bạn những bài học và kỹ năng photoshop thú vị.

Một lần nữa, chúc các bạn thành công!.

---

hoc photoshop photoshop tutorial web layout tutorial photoshop tuts psd create web layout tuts photoshop creat web green grunge web layout how to creat web layout create web layout with photoshop green

---

Tin Tức Liên Quan