Làm thế nào để tạo một diện web sạch và đầy màu sắc? - Photoshop Tutorial
Trong hướng dẫn này, tôi sẽ chỉ cho bạn làm thế nào để tạo ra một bố trí công ty sạch trong Photoshop. Việc bố trí ban đầu được tạo ra bởi kuntiz từ ThemeForest và tôi muốn cảm ơn anh vì đã cho phép tôi để viết bài hướng dẫn này.
Vật liệu cần thiết:
Bước 1: Tạo một tài liệu mới
Tạo một tài liệu mới (Ctrl + N) trong Photoshop với kích thước 1200px bởi 750px. Sau đó chọn công cụ Gradient Tool (G) và vẽ một gradient # 792.700 # 000000 từ trên xuống dưới cùng của tài liệu.
Bước 2: Thêm một số màu sắc để nền của bạn
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í 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à "màu sắc".
Bước 3: Thêm một 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 chúng tôi. Mở trong Photoshop hình ảnh lá mà bạn đã tải về vào đầu của hướng dẫn 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ừ 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ừ 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 30% và đặt tên cho nó là "kết cấu"
Bước 4: Tạo một nền tối 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 pixel 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 lớp này đến 70% và đặt tên cho nó là "hình dạng màu đen."
Bước 5: Sử dụng các nhóm để tổ chức các layer của bạn
Giữ phím Ctrl và chọn tất cả các layer 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à "nền".
Bước 6: Tạo thêm các nhóm
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "nhà". Sau đó tạo một nhóm khác trong nhóm "nhà" và đặt tên nó là "logo".
Bước 7: Thêm một biểu tượng và một khẩu hiệu
Tạo một layer mới bên trong nhóm "logo". Sau đó, chọn Type Tool (T) và viết tên của bố cục 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ừ hình ảnh sau đây. Sau đó tạo một layer mới và viết một khẩu hiệu bằng cách sử dụng #eeeeee màu.
Bước 8: "Đăng ký" và "đăng nhập" nút
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à "Đăng ký | Đăng nhập." 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ừ hình ảnh sau đây. Thiết lập màu foreground là màu trắng và sử dụng Type Tool (T) để viết dòng chữ "Đăng ký | Đăng nhập" vào nút của bạn. Thiết lập Opacity của layer văn bản đến 75%.
Bước 9: Tạo một dòng màu xanh với chiều cao của 1 px
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 sự 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 layer này là 40% và đặt tên là "Line".
Bước 10: Thêm một gradient để thanh điều hướng
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 công cụ Gradient Tool (G) và vẽ một gradient # 35423e để minh bạch từ phía dưới lên trên cùng của sự lựa 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ừ 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 của các trang của bố trí của bạn
Chọn Type Tool (T) và viết tên của các trang của bố trí của bạn trong thanh điều hướng. Sau đó kích đúp vào layer văn bản để mở cửa sổ Layer Style và sử dụng các thiết lập từ hình ảnh tiếp theo. Các phông chữ mà tôi đã sử dụng được gọi là Greyscale cơ bản.
Bước 12: Tạo một tá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 cột đơn 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ừ hình ảnh sau đây. Đặt tên layer này là "dòng 1."
Bước 14:
Bản sao của "dòng 1" layer (Ctrl + J) và đặt tên cho layer mới là "dòng 2." Chọn Move Tool (V) và nhấn một lần mũi tên bên phải trên bàn phím để di chuyển này lớp 1 pixel bên phải. Sau đó bấm đúp chuột vào dòng "2" layer để mở cửa sổ Layer Style và sử dụng các thiết lập từ hình ảnh sau đây.
Bước 15: Chuyển đổi dòng "1" và "dòng 2" lớp vào một đối tượng thông minh
Giữ phím Ctrl và chọn dòng "1" và "dòng 2" lớp. Sau đó nhấp chuột phải vào một trong số họ và chọn Convert to Smart Object. Đặt tên cho đối tượng thông minh "tách".
Bước 16: Tạo một điểm nhấn màu xanh
Tạo một layer mới bên dưới layer "tách". Chọn Rectangular Marquee Tool (M), tạo ra một lựa chọn như một từ 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ừ 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ừ hình ảnh sau đây. Thiết lập Opacity của lớp này đến 60% và đặt tên cho nó là "nổi bật".
Bước 17: Tạo một mặt nạ cho layer "tách"
Click vào layer "tách" trong bảng Layers để chọn nó và sau đó vào Layer> Layer Mask> Reveal All. Chọn công cụ Gradient Tool (G) và vẽ một màu đen để minh bạch gradient từ đầu đến giữa phân cách của bạn.
Bước 18: Nhân đôi phân cách
Giữ phím Ctrl và click vào "tách" và "nổi bật" layer trong bảng Layers để chọn chúng. Sau đó chọn công cụ Move Tool (V), giữ phím Alt và 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 đã sao chép 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ả các dải phân cách
Chọn tất cả các "tách" và "nổi bật" layer trong Layer Palette và nhấn Ctrl + G để nhóm chúng. Tên nhóm "dải phân cách." `
Bước 20: Tạo một nút cho trang hoạt động
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ừ hình ảnh sau đây cho Gradient Overlay. Sau đó đặt tên nó "menu hoạt động" và thiết lập Opacity của nó đến 50%.
Bước 21: Tạo các thanh tìm kiếm
Tạo một nhóm mới (Layer> New> Group), đặt tên là "tìm kiếm" và đặt nó trên nhóm "chuyển hướng". 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 đã sử dụng màu # 104f59. Đặt tên layer này là "trường văn bản" 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 này ở 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ừ 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 chữ "tìm kiếm" trên nút của bạn
Chọn Type Tool (T) và viết từ "tìm kiếm" 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 các 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 # 123.036. Đặt tên layer này là "dòng" này, đặt nó bên dưới layer "nút" và di chuyển nó giữa các thanh tìm kiếm và các nút sử dụng 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à "Phòng trưng bày". Tạo nhóm khác bên này và đặt tên cho nó là "nền". 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ở bảng Thông tin - 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 lớp này đế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 "pixel hình chữ nhật màu xanh" hình ảnh, di chuyển nó vào tài liệu của bạn và đưa hình này trên hình chữ nhật màu xanh của bạn. Thiết lập Opacity của lớp này đế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 layer mặt nạ các "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 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 màu xanh nhỏ
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. Chọn công cụ Gradient Tool (G) và vẽ một gradient # 0f2b42 để # 2a607f từ dưới lên trên lựa chọn của bạn. Sau đó nhấn Ctrl + D để bỏ chọn. Đặt tên layer này là "BG1."
nút "Đăng ký": Bước 29
Tạo một nhóm mới (Layer> New> Group) và đặt tên là "đăng ký nút." 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ừ hình ảnh sau đây. Sau đó, chọn Type Tool (T) và viết dòng chữ "đăng ký" bằng cách sử dụng màu trắng.
Bước 30: "Tìm hiểu thêm" nút
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ừ "tìm hiểu thêm" trên nút của bạn. Sau đó tạo một layer mới, chọn công cụ Custom Shape (U) và tạo ra một mũi tên 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à "mũi tên trái". 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ừ 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 công cụ Custom Shape (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ừ hình ảnh sau đây. Thiết lập Opacity của lớp này đến 50%.
Bước 33: Tạo mũi tên khác ở phía bên phải của hình chữ nhật
Lặp lại hai bước trước để 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à "hình ảnh". Đặt một hình ảnh nhỏ trong nhóm này và đặt tên cho layer "hình ảnh". Double-click 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.
Bước 35: Thêm một bóng tối để hình ảnh của bạn
Vào Layer> Layer Style> Create Layer. Điều này sẽ tạo ra một lớp mới 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à "bóng tối".
Bước 36: Thêm một số văn bản
Tạo một nhóm mới (Layer> New> Group), chọn Type Tool (T) và thêm một số văn bản. Đặt tên cho nhóm này "văn bản".
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à "nội dung". Tạo nhóm khác bên này và đặt tên là "bóng tối". Chọn công cụ Rectangle Tool (U) và tạo ra một hình chữ nhật như tôi đã sử dụng màu trắng. Đặt tên layer này là "màu trắng hình dạng" và thiết lập Opacity của nó đến 90%.
Bước 38: Thêm một bóng hàng đầu
Ctrl-click vào vector mask của layer "hình dạng màu trắng" để chọn nó. Sau đó tạo một layer mới, chọn công cụ Gradient Tool (G) và vẽ một gradient # 8f8f8f để minh bạch như tôi đã làm. Thiết lập Opacity của lớp này đến 50% và đặt tên cho nó là "cái bóng hàng đầu." Sau đó chọn công cụ Move Tool (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 hai 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à "cái bóng 1. thẳng đứng" Nhân đôi layer này (Ctrl + J), đặt tên cho layer mới là "thẳng đứng bóng 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 trọng lượng của 1 px và màu # aebcc7. Đặt tên layer này là "dòng".
Bước 41: Thêm một số văn bản
Chọn Type Tool (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à "chân". Tạo một layer mới bên trong nhóm này, chọn Rectangular Marquee Tool (M) và tạo một vùng chọn như tôi đã làm. Sau đó, thiết lập màu foreground # 555.555, chọn một brush lớn, mềm và sơn với nó trên cạnh trên của vùng chọn. Thiết lập Opacity của lớp này đến 50% và đặt tên cho nó là "gradient."
Bước 43: Thêm một đường với chiều cao của 1 px đến chân
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 lớp này đến 15% và đặt tên cho nó là "dòng".
Bước 44: Thêm một số văn bản để chân của bạn
Chọn Type Tool (T) và thêm một số văn bản cho chân của bạn.
Kết quả cuối cùng
Nguồn: Tutorial9.net
EmoticonEmoticon