 |
Trong bài hôm nay tôi sẽ hướng dẫn cho các bạn cách thiết kế layout web sử dụng photoshop.Các bước thực hiện như sau:
Bước 1:Tạo một file mới
Tạo một file mới (Ctrl + N) trong Photoshop với kích thước 1200px bởi 750px. Sau đó chọn Gradient Tool (G) và vẽ một gradient # 792700 đến # 000000 từ trên xuống dưới cùng của tài liệu của bạn.
Bước 2 : Thêm một số màu sắc cho nền trang web
Tạo một layer mới, chọn công cụ Brush Tool (B), chọn một bàn chải mềm với đường kính 300px và thêm một số màu sắc để bố trí vào layer của bạn. Tôi đã sử dụng màu đỏ, màu cam và màu xanh. Đặt tên layer này là "color.".
Bước 3: Thêm kết cấu nền
Bây giờ chúng ta sẽ tạo ra một kết cấu cho nền của web. Mở trong Photoshop hình ảnh lá mà bạn đã tải về và di chuyển nó vào tài liệu của bạn bằng cách sử dụng Move Tool (V). Nhấp chuột phải vào layer này và chọn Convert to Smart Object. Sau đó vào Filter> Artistic> Film Grain và sử dụng các thiết lập từ các hình ảnh sau đây. Sau đó vào Filter> Pixelate> Mosaic, và một lần nữa sử dụng các thiết lập từ các hình ảnh sau đây. Thiết lập chế độ hòa trộn cho layer này là sự khác biệt, opacity đến 30% và đặt tên cho nó là "kết cấu".
Bước 4: Tạo nền cho các nội dung
Tạo một layer mới, chọn Rounded Rectangle Tool (U), thiết lập Radius là 3 pixels và tạo ra một hình chữ nhật màu đen tròn. Sau đó bấm đú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 ảnh sau đây cho Drop Shadow. Thiết lập Opacity của layer này lên tới 70% và đặt tên cho nó là "black shape".
Bước 5:Nhóm các layer đã tạo thành nhóm
Giữ phím Ctrl và chọn tất cả các lớp mà bạn đã tạo ra cho đến bây giờ và sau đó nhóm chúng (Ctrl + G). Đặt tên nhóm là "background".
Bước 6: Tạo nhiều nhóm
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "Home".. Sau đó tạo một nhóm khác bên trong "Home" của nhóm và đặt tên cho nó là "logo.".
Bước 7:Thêm một biểu tượng và khẩu hiệu
Tạo một layer mới bên trong "logo" nhóm. Sau đó chọn công cụ Type (T) và viết tên của bạn bằng cách sử dụng màu # f4f4f4. Double-click vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây. Sau đó tạo một layer mới và viết khẩu hiệu bằng cách sử dụng #eeeeee màu.
Bước 8:Tạo nút sign up và Login
Bây giờ chúng ta sẽ tạo hai nút ở góc trên bên phải của bố trí của chúng tôi. Tạo một nhóm mới và đặt tên là "Sign up |. Login". Sau đó chọn Rounded Rectangle Tool (U) và tạo ra một hình chữ nhật tròn như tôi đã làm. Double-click vào layer của hình để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây. Đặt màu nền trước là màu trắng và sử dụng Type Tool (T) để viết dòng chữ "Sign up | Login" vào nút của bạn. Thiết lập Opacity của layer text đến 75%.
Bước 9: Tạo 1 đường màu xanh
Tạo một nhóm mới và đặt tên nó là "Navigation".. Tạo một layer mới, chọn Single Row Marquee Tool và nhấp một lần vào tài liệu của bạn để tạo ra một lựa chọn với chiều cao của 1px. Điền rằng lựa chọn với màu # 406f94 và xóa những gì là bên ngoài của hình chữ nhật màu đen dùng Rectangular Marquee Tool (M). Thiết lập Opacity của lớp này đến 40% và đặt tên cho nó là "Line.".
Bước 10 :Thêm 1 gradient để thanh navigation
Tạo một layer mới, chọn Rectangular Marquee Tool (M) và tạo một vùng chọn như tôi đã làm (lưu ý: bạn có thể sử dụng một số hướng dẫn để giúp bạn tạo ra các lựa chọn). Sau đó chọn Gradient Tool (G) và vẽ một gradient # 35423e sang trong suốt từ dưới lên trên của vùng chọn. Nhấn Ctrl + D để bỏ chọn. 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. Đặt tên layer này là "gradient" và để lại một khoảng cách 1 điểm ảnh giữa các dòng và các gradient.
Bước 11 : viết tên bố trí các trang của bạn
Chọn công cụ Type (T) và viết tên của bố trí các trang của bạn trong thanh điều hướng. Sau đó bấm đúp chuột vào layer text để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh tiếp theo. Các phông chữ mà tôi đã sử dụng được gọi là Greyscale Basic.
Bươc 12 :Tạo một dấu phân cách
Bây giờ chúng ta sẽ tạo ra một dấu phân cách. Tạo một layer mới, chọn Column Độc Marquee Tool và nhấp một lần vào bố trí của bạn. Sau đó, chọn Rectangular Marquee Tool (M), nhấn vào nút "Intersect với lựa chọn" từ thanh tùy chọn và tạo một vùng chọn như hình dưới. Điền vào lựa chọn với màu trắng và nhấn Ctrl + D để bỏ chọn.
Bước 13:
Double-click vào layer mà bạn đã tạo ở bước trước đó để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây. Đặt tên layer này là "line 1".
Bước 14:
Bản sao của "line1" layer (Ctrl + J) và đặt tên layer mới là "dòng 2.". Chọn Move Tool (V) và nhấn một lần vào mũi tên bên phải trên bàn phím để di chuyển layer này 1 điểm ảnh bên phải. Sau đó bấm đúp chuột vào layer "line 2" để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây.
Bước 15:Chuyển đổi các "dòng 1" và "2 dòng" lớp vào một đối tượng khác
Giữ phím Ctrl và chọn "line 1" và "line 2 " layer. Sau đó nhấp chuột phải vào một trong số đó và chọn Convert to Smart Object. Đặt tên cho đối tượng thông minh "separator.".
Bước 16:Tạo điểm nhấn màu xanh
Tạo một layer mới bên dưới "separator" layer. Chọn Rectangular Marquee Tool (M), tạo một vùng chọn như từ các hình ảnh sau đây và điền nó với màu # 35423e. Nhấp chuột phải vào layer này và chọn Convert to Smart Object. Vào Filter> Blur> Gaussian Blur và sử dụng các thiết lập từ các hình ảnh tiếp theo. Sau đó vào Filter> Noise> Add Noise và một lần nữa sử dụng các thiết lập từ các hình ảnh sau đây. Thiết lập Opacity của layer này xuống còn 60% và đặt tên cho nó là "highlight.".
Bước 17:Tạo mặt nạ cho layer separator
Click vào "separator" layer trong bảng Layers để chọn nó và sau đó vào Layer> Layer Mask> Reveal All. Chọn Gradient Tool (G) và vẽ một màu đen để minh bạch gradient từ trên đến giữa phân cách của bạn.
Bước 18:Nhân đôi separator
Giữ phím Ctrl và click vào "separator" và "highlight" layer trong bảng Layers để chọn chúng. Sau đó chọn công cụ Move (V), giữ phím Alt và phím Shift và sau đó nhấn vào tài liệu của bạn và kéo chuột. Bây giờ bạn đã nhân đôi các lớp được chọn. Sử dụng Move Tool (V) để di chuyển các lớp mới bên phải. Lặp lại bước này và tạo ra nhiều dải phân cách như bạn cần.
Bước 19: Nhóm tất cả separator
Chọn tất cả các "separator" và "highlight" layer trong Layer Palette và nhấn Ctrl + G để nhóm chúng. Đặt tên nhóm là "separators." .
Bước 20:Tạo nút cho trang web
Bây giờ chúng ta sẽ tạo ra một nền tảng cho các trang menu hoạt động để phân biệt nó với những người khác. Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật như tôi đã làm. Đặt layer này dưới layer văn bản có chứa tất cả các tên trang. Double-click vào layer này và sử dụng các thiết lập từ các hình ảnh sau đây cho Gradient Overlay. Sau đó đặt tên nó "active menu" và thiết lập Opacity của nó đến 50%.
Bước 21: tạo thanh tìm kiếm
Tạo một nhóm mới (Layer> New> Group), đặt tên là "Search" và đặt nó ở trên nhóm"navigation" . Chọn Rounded Rectangle Tool (U), thiết lập Radius là 3 px và tạo ra một hình chữ nhật tròn như tôi đã làm bằng cách sử dụng màu # 104f59. Đặt tên layer này là "text field" và thiết lập Opacity của nó đến 80%.
Bước 22:Tạo nút tìm kiếm
Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật như tôi đã làm. Đặt hình chữ nhật ở phía bên phải của thanh tìm kiếm. Double-click vào layer này và sử dụng các thiết lập từ các hình ảnh sau đây cho Gradient Overlay. Sau đó nhấp chuột phải vào layer này và chọn Create Clipping Mask.
Bước 23: Viết từ "Search" nút tìm kiếm
Chọn công cụ Type (T) và viết từ "Search" bằng cách sử dụng màu trắng. Thiết lập Opacity của lớp này đến 75%.
Bước 24:Tạo một đường thẳng đứng cho thanh tìm kiếm
Chọn công cụ Line Tool (U) và tạo ra một đường thẳng đứng bằng cách sử dụng màu # 123036. Đặt tên layer "Line" này, đặt nó dưới "button" layer và di chuyển nó giữa thanh tìm kiếm và sử dụng nút Move Tool (V).
Bước 25: Tạo một hình chữ nhật màu xanh
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "Showcase". Tạo nhóm khác bên này và đặt tên cho nó là "background". Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật bằng cách sử dụng màu # 219aad. Hình chữ nhật của tôi là 983 px, rộng 273 px Chiều cao (bạn có thể muốn mở Info Palette - Window> Info - trước khi bạn tạo ra các hình chữ nhật, vì vậy bạn có thể thấy chính xác kích thước của hình chữ nhật). Thiết lập Opacity của layer này xuống còn 55% và đặt tên cho nó là "bg4".
Bước 26: Thêm một kết cấu hình chữ nhật màu xanh.
Mở trong Photoshop "pixelated blue rectangle" hình ảnh, di chuyển nó vào tài liệu của bạn và đưa hình ảnh này trên hình chữ nhật màu xanh của bạn. Thiết lập Opacity của layer này xuống còn 55% và đặt tên cho nó là "bg3.
Bước 27: Thêm một gradient cho hình chữ nhật màu xanh.
Ctrl-click vào vector mask của "bg4" layer để chọn nó, sau đó tạo một layer mới, chọn công cụ Gradient Tool (G) và vẽ một gradient # 56b8e5 sang trong suốt từ dưới lên trên các lựa chọn của bạn. Sau đó nhấn Ctrl + D để bỏ chọn.
Bước 28 : Tạo một hình chữ nhật nhỏ màu xanh
Tạo một layer mới, chọn Rectangular Marquee Tool (M) và tạo ra một lựa chọn như tôi đã làm. Chọn Gradient Tool (G) và vẽ một gradient # 0f2b42 để # 2a607f từ đáy lên đỉnh lựa chọn của bạn. Sau đó nhấn Ctrl + D để bỏ chọn. Đặt tên layer này là "bg1.".
Bước 29: Tạo nút Sign Up
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "Sign Up.". Chọn Rounded Rectangle Tool (U), thiết lập Radius là 2 px và tạo ra một hình chữ nhật tròn như tôi đã làm. Double-click vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây. Sau đó chọn công cụ Type (T) và viết dòng chữ "đăng ký" bằng cách sử dụng màu trắng.
Bước 30:Tạo nút Learn more
Lặp lại các bước trước để tạo ra một nút khác, nhưng lần này viết các từ "Learn more" vào nút của bạn. Sau đó tạo một layer mới, chọn Custom Shape Tool (U) và tạo ra một mũi tên màu trắng như tôi đã làm.
Bước 31:Tạo một nút ở phía bên trái của hình chữ nhật.
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "left arrow.". Chọn công cụ Ellipse Tool (U) và tạo ra một vòng tròn bằng cách sử dụng màu # 406f94. Double-click vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây.
Bước 32:Tạo một mũi tên bên trong vòng tròn màu xanh.
Tạo một layer mới và sử dụng Custom Shape Tool (U) để tạo ra một mũi tên trắng. Double-click vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây. Thiết lập Opacity của layer này xuống còn 50%.
Bước 33: Tạo một mũi tên ở phía bên phải của hình chữ nhật.
Lặp lại hai bước trên để tạo ra mũi tên khác ở phía bên phải của hình chữ nhật màu xanh.
Bước 34:Tạo một hình ảnh đặc trưng
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "image.". Đặt một hình ảnh nhỏ trong nhóm này và đặt tên layer này là "image". Double-click vào layer này để mở cửa sổ Layer Style và sử dụng các thiết lập từ các hình ảnh sau đây.
Bước 35:Thêm một shadow để hình ảnh của bạn
Vào Layer> Layer Style> Create Layer. Điều này sẽ tạo ra một layer mới bên dưới một gốc với phong cách của layer gốc. Bây giờ, hãy vào Layer> Layer Mask> Reveal All, chọn Gradient Tool (G) và vẽ một màu đen để minh bạch gradient từ dưới lên giữa hình ảnh nhỏ của bạn. Đặt tên layer này là "shadow".
Bước 36:Thêm 1 số dòng text
Tạo một nhóm mới (Layer> New> Group), chọn công cụ Type (T) và thêm một số văn bản. Đặt tên cho nhóm này "text".
Bước 37:Tạo một hình chữ nhật màu trắng
Tạo một nhóm mới và đặt tên nó là "content".. Tạo một nhóm bên này và đặt tên là "shadow". Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật như tôi đã làm bằng cách sử dụng màu trắng. Đặt tên layer này là "white shape" và thiết lập Opacity của nó đến 90%.
Bước 38: Thêm một Top shadow
Ctrl-click vào layer mặt nạ của "white shape" layer để chọn nó. Sau đó tạo một layer mới, chọn công cụ Gradient Tool (G) và vẽ một # 8f8f8f gradient để minh bạch như tôi đã làm. Thiết lập Opacity của layer này xuống còn 50% và đặt tên cho nó là "top shadow". Sau đó chọn công cụ Move (V) và nhấn vào mũi tên xuống trên bàn phím của bạn hai lần.
Bước 39: Tạo 2 bóng dọc
Tạo một layer mới và sử dụng Rectangular Marquee Tool (M) để tạo vùng chọn như tôi đã làm. Sau đó sử dụng công cụ Gradient Tool (G) để vẽ một gradient # 8f8f8f để minh bạch như tôi đã làm. Thêm một mặt nạ cho layer này và sử dụng một bàn chải mềm lớn màu đen để che dấu trung tâm của bóng tối. Thiết lập Opacity của lớp này đến 30% và đặt tên cho nó là "vertical shadow 1.". Nhân đôi layer này (Ctrl + J), đặt tên layer mới là "vertical shadow 2" và di chuyển nó sang bên phải.
Bước 40 : Tạo một đường ngang
Chọn công cụ Line Tool (U) và tạo ra một ngang như với giá trị của 1 px và màu sắc # aebcc7. Đặt tên layer "line".
Bước 41: Thêm một số văn bản
Chọn công cụ Type (T) và viết các nội dung của bố cục. Bạn cũng có thể sử dụng hình ảnh và bất cứ điều gì khác mà bạn muốn.
Bước 42:Tạo ra một gradient cho footer
Tạo một nhóm mới và đặt tên là "footer.". Tạo một layer mới bên trong nhóm này, chọn Rectangular Marquee Tool (M) và tạo ra một lựa chọn như tôi đã làm. Sau đó thiết lập màu foreground là # 555555, chọn một brush lớn, mềm và sơn với nó qua cạnh trên của vùng chọn. Thiết lập Opacity của layer này xuống còn 50% và đặt tên cho nó là "gradient.".
Bước 43: Thêm một dòng với chiều cao của 1 px footer
Tạo một layer mới, chọn Single Row Marquee Tool và nhấp chuột vào tài liệu của bạn. Điền vào lựa chọn với màu trắng và nhấn Ctrl + D để bỏ chọn. Vào Layer> Layer Mask> Reveal All, chọn một bàn chải mềm lớn màu đen và mặt nạ lớp này như tôi đã làm. Hãy xem những hình ảnh sau đây để tham khảo. Thiết lập Opacity của layer này xuống còn 15% và đặt tên cho nó là "line".
Bước 44: Viết 1 số dòng văn bản cho footer
Chọn công cụ Type (T) và thêm một số văn bản cho footer của bạn.
Bài hướng dẫn đến đây là kết thúc. Chúc các bạn thiết kế ra các layout web đẹp.
Bài viết liên quan
Edit