Trong
hướng dẫn Photoshop này, bạn sẽ tìm hiểu làm thế nào để làm cho một trang web
PSD thiết kế đẹp đó là theo chủ đề và hoàn hảo cho một danh mục đầu tư web
mà tập trung vào hình ảnh. Đó là một hướng dẫn khá đơn giản nhằm mục đích minh
họa một số kỹ thuật tuyệt vời để thích ứng vào công việc thiết kế web hiện tại
của bạn.
Bước
1: Thiết lập các tài liệu:
Tạo
một layer mới trong Photoshop (Ctrl / Cmd + N) với kích thước 1200 x 910px.
Thiết
lập các tài liệu:
Bước
2: Kết hợp các Grid System 960
Chúng
tôi sẽ dựa vào bố trí của chúng tôi trên hệ thống lưới 960 - 16 cột. Bạn có thể tải về các mẫu PSD
miễn phí từ trang web này. Một khi bạn đã hoàn tất tải về các mẫu PSD, mở PSD
trong Photoshop và kéo nó vào nền của chúng tôi. Hãy nhớ để giữ cho lớp lưới
này là lớp trên cùng trong Layers Panel, vì điều này sẽ phục vụ như hướng dẫn
của chúng tôi để sắp xếp.
Bước
3: Thực hiện của nền Layout
Tạm
thời ẩn layer lưới của chúng tôi và tạo ra một layer mới bên dưới nó. Trong
Tools Panel, thiết lập màu Foreground của bạn đến một màu nâu-cam (# bc7821) và
màu nền cho một màu nâu sẫm (# 362a21).
Chọn
Gradient Tool (G) và thiết lập tùy chọn của bạn để Radial Gradient. Tạo ra một
gradient tại các trung tâm của khung hình.
Gradient
có vẻ hơi đơn giản, vì vậy chúng ta hãy thêm một số kết cấu với nó. Vào
Filter> Convert cho Smart Filter. Bằng cách này, chúng tôi có thể thay đổi
các bộ lọc áp dụng cho lớp này về sau.
Bây
giờ chúng ta hãy thêm một số tiếng ồn để màu này bằng cách chọn Filter>
Noise> Add Noise.
Hãy
bổ sung thêm ánh sáng cho các khu vực hàng đầu của nền của chúng tôi. Mở công cụ Brush Tool (B) và thiết lập các tùy chọn Master Diameter khoảng 700px;
cũng thiết lập màu Foreground thành màu trắng.
Tạo
một layer mới trên đầu trang của gradient của chúng tôi và nhấp chọn vào lưới
một lần để áp dụng các nét cọ.
Thay
đổi chế độ hòa trộn của layer này là Overlay và chỉnh Opacity của nó đến 34%.
Mở
Rust Texture đề nghị trong danh sách nguồn Tutorial (hoặc duyệt đến phần Thiết kế
Hướng dẫn, học thiết kế một cái gì đó tương tự) trong Photoshop. Kéo hình ảnh lên nền của chúng tôi và thay đổi kích thước bằng cách sử dụng lệnh Free Transform
(Ctrl / Cmd + T) để nó là nhỏ hơn so với nền nhẹ.
Sử
dụng một vòng tròn bình thường, bàn chải lông, hơi xóa hai bên và các khu vực
phía dưới bằng cách sử dụng công cụ Eraser Tool (E). Ngoài ra, bạn có thể sử
dụng một lớp mặt nạ nếu bạn không muốn thay đổi vĩnh viễn.
Thay
đổi chế độ hòa trộn kết cấu gỉ của Overlay và Opacity của nó đến 16%.
Tiếp
theo, mở trầy xước kim loại Texture trong Photoshop, và cũng kéo texture này
lên vải của chúng tôi và hơi xóa khỏi hai bên và phía dưới. Thiết lập chế độ
hòa trộn của layer này thành Multiply và điều chỉnh Opacity của nó đến 15%.
Bước
4: Thêm vào tên trang web
Bỏ
ẩn lớp lưới của chúng tôi. Chọn Horizontal Type Tool (T) và thiết lập các tùy
chọn Font để ITC Avant Garde CE (hoặc phông chữ ưa thích của bạn). Ngoài ra
thiết lập màu chữ sang màu nâu (# 523.117). Sau đó, gõ "JohnDoe
Photography" (hoặc bất kỳ tên trang web mà bạn muốn) tại trung tâm của bố
trí.
Nhân
đôi layer text và sau đó thiết lập màu sắc của lớp văn bản của nhân bản màu
trắng (#ffffff), thay đổi chế độ hòa trộn là Overlay và chỉnh Opacity của nó
đến 32%. Di chuyển nó xuống 1px sử dụng Move Tool (V) kết hợp với các phím mũi
tên xuống của bạn; điều này sẽ tạo ra một số loại hiệu ứng khắc.
Bước
5: Tạo Menu Navigation
Tạo
một layer mới. Sử dụng Horizontal Type Tool (T) (tùy chọn cài đặt hiển thị dưới
đây) để gõ ra văn bản hướng của bạn bên dưới tên trang web của bạn. Hãy chắc
chắn rằng nó được làm trung tâm trên vải.
Bây
giờ chúng ta thiết kế các trạng thái hover của từng khoản mục trên menu. Chọn
Rounded Rectangle Tool (U). Thiết lập tùy chọn của công cụ Shape Layers và
Radius là 30px. Vẽ một hình chữ nhật tròn trên một layer mới bên dưới các liên
kết chuyển hướng mục ("Home").
Tiếp
theo, áp dụng Color Overlay và Inner Shadow layer hình chữ nhật tròn của
(double-click vào hình thu nhỏ của nó trong Layers Panel để truy cập vào Layer
Style cửa sổ hộp thoại).
Đặt
màu cho một màu vàng (# f9a81f).
Inner
Shadow
Thiết
lập màu sắc của bóng tối bên trong màu đen (# 000000).
Ngoài
ra, thiết lập Opacity của layer hình chữ nhật của hình tròn khoảng 30% cho thấy
nền của chúng tôi thông qua nó một chút.
Hãy
làm cho hình chữ nhật tròn trông khắc hơn. Đặt một lựa chọn xung quanh hình chữ
nhật tròn bằng cách nhấn Ctrl / Cmd và sau đó nhấn vào hình chữ nhật được làm
tròn từ Layers Panel.
Trên
một layer mới, vào Edit> Stroke.
Thay
đổi chế độ hòa trộn của layer sang Overlay và chỉnh Opacity của nó đến 18%. Xoá
bỏ khỏi đột quỵ trái và đỉnh bằng cách sử dụng công cụ Eraser Tool (E) được
thiết lập với một nhỏ, mũi có lông vũ.
Bước
6: Thêm Slideshow Mục
Rẽ
lớp lưới của chúng tôi trở lại. Sử dụng Rectangular Marquee Tool (M), vẽ một
hình chữ nhật bên dưới lựa chọn hướng của chúng tôi và sau đó điền (Shift + F5)
lựa chọn với màu đen (# 000000). Hãy chắc chắn rằng hình chữ nhật là 14 cột
lưới rộng và tập trung vào cách bố trí của chúng tôi.
Thay
đổi này layer hình chữ nhật của Blend Mode sang Soft Light để cho một số các
chương trình nền thông qua nó.
Thời
gian để đặt một hình ảnh bên trong slideshow của chúng tôi. Mở một bức ảnh
(chẳng hạn như hình ảnh chứng khoán Sunset đề cập trong danh sách Tài Tutorial)
trong Photoshop và kéo nó vào cách bố trí của chúng tôi. Quy mô nó xuống một
cách thích hợp với Free Transform.
Ẩn
layer của hình ảnh tạm thời và sau đó vẽ một hình chữ nhật lựa chọn trong khu
vực slideshow với Rectangular Marquee Tool (M).
Hãy
để chúng tôi che bức ảnh bằng cách nhấn vào nút Add vector mask từ layer Panel,
mà nên tạo ra một mặt nạ với khu vực được lựa chọn của bạn. Bây giờ bạn có thể
thôi ẩn các bức ảnh lớp một lần nữa. Bạn nên lưu ý rằng, nếu được thực hiện một
cách chính xác, bất kỳ bộ phận của hình ảnh mà đặt bên ngoài khu vực đeo mặt nạ
sẽ được ẩn.
Bước
7: Thực hiện các Controls Slideshow
Tạo
một nhóm layer mới bên dưới lớp trình chiếu và đặt tên cho nó là "mũi
tên" (đối với tổ chức). Tạo một layer mới bên trong nhóm layer mới tạo
này.
Chọn
công cụ Ellipse Tool (U) và vẽ một vòng tròn ở phía bên trái của các slideshow.
Tiếp
theo, thêm một Outer Glow và Gradient Overlay trên đường tròn.
Outer
Glow
Thiết
lập màu sắc ánh sáng bên ngoài của màu đen (# 000000).
Gradient
Overlay
Có
độ dốc đi từ một màu nâu sẫm (# 271.303) để một màu nâu hơi ít đậm (# 3a2102).
Đây
là những gì kiểm soát slideshow trái của chúng tôi trông giống như bây giờ.
Chúng
tôi sẽ cần phải loại bỏ cái bóng không cần thiết của các vòng tròn. Để làm được
điều này, chúng ta cần phải san bằng hình này bằng cách vào Layer>
Rasterize> Shape. Sau khi nó phẳng, chọn khu vực bên dưới slideshow sử dụng
Rectangular Marquee Tool (M) và sau đó nhấn Delete để loại bỏ những vùng không
mong muốn bên dưới vùng chọn chữ nhật.
Bây
giờ chúng ta tạo ra các mũi tên cho các nút của chúng tôi. Trên một layer mới,
chọn Rounded Rectangle Tool (U), và sau đó thiết lập các tùy chọn của nó để nó
thiết lập cho Shape Layers và Radius tại 30px. Có một giá trị cao cho các tùy
chọn Radius làm cho mỗi đầu nhìn tròn.
Vẽ
một hình dạng đường chéo đại diện cho phần bên trái của mũi tên. Thay đổi màu
sắc của hình này với một màu cam tối và câm lặng (# b56d1b) bằng cách cho nó
một lớp phong cách Color Overlay.
Để
tạo phía dưới cùng của mũi tên, sao chép hình dạng này và đi đến vào Edit>
Transform Path> Flip Horizontal.
Chọn
hai lớp tạo nên các mũi tên trong Layers Panel và sau đó vào Edit>
Transform> Rotate; xoay mũi tên -90o vì vậy mà nó trỏ đến bên trái.
Hợp
nhất hai lớp bằng cách chọn chúng trong Layers Panel và sau đó nhấn Ctrl / Cmd
+ E. Duplicate layer sáp nhập.
Cung
cấp cho các lớp trùng lặp một màu đen (# 000000) layer style Color Overlay để
thay đổi màu sắc của nó, và cũng di chuyển nó 1px bên trái bằng cách sử dụng
Move Tool (V); điều này sẽ tạo ra một cái nhìn khác.
Bây
giờ chúng ta sẽ tạo ra các mũi tên bên phải. Chọn "mũi tên" nhóm lớp
của chúng tôi trong Layers Panel, lặp lại nhóm, và sau đó lật hướng của nó bằng
cách vào Edit> Transform> Flip Horizontal. Di chuyển điều khiển slideshow
nhân đôi về phía bên phải.
Bây
giờ chúng ta cần phải có một cái gì đó như thế này:
Bước
8: Tạo các ảnh nhỏ Thumbnails
Xoay
lớp lưới trở lại. Sử dụng Rectangular Marquee Tool (M), vẽ một vùng chọn cột 4
và nửa rộng dưới slideshow. Điền nó với màu đen (# 000000). Thay đổi chế độ hòa
trộn là Soft Light.
Mở
một bức ảnh (chẳng hạn như hình ảnh chứng khoán hướng dương), đặt nó trên vải
của chúng tôi, và sau đó thay đổi kích thước khoảng 80% kích thước ban đầu của
nó.
Ẩn
layer của hướng dương và tạm thời, sử dụng Rectangular Marquee Tool (M), vẽ một
vùng chọn nhỏ bên trong hình chữ nhật đầu tiên của chúng tôi. Bỏ ẩn các
Sunflower ảnh và nhấn vào biểu tượng Add layer mask trên Layers Panel. Điều này
sẽ làm cho nó để chỉ các khu vực được lựa chọn trong những chương trình hướng
dương.
Bây
giờ chúng ta tạo ra các nhãn cho hình ảnh thu nhỏ của chúng tôi. Sử dụng
Rectangular Marquee Tool (M), tạo ra một lựa chọn ở dưới cùng của bức ảnh và
điền nó với màu nâu sẫm của chúng tôi (# 261.103). Thay đổi Opacity của layer
này xuống 85% để cho các phần của hình ảnh đằng sau nó hiển thị.
Sử
dụng Horizontal Type Tool (T), thêm một nhãn cho nó (chẳng hạn như "THIÊN
NHIÊN"). Tôi sử dụng font chữ Helvetica với một màu sắc văn bản màu vàng
(# ffbf47).
Thêm
một số văn bản dưới đây thumbnail của chúng tôi; này sẽ phục vụ như một số loại
mô tả cho hình ảnh thu nhỏ đặc biệt này.
Lặp
lại quá trình tương tự để thêm 2 hình ảnh thu nhỏ hơn (bạn có thể sử dụng các
cậu bé Baby và hình ảnh cổ Bokeh gợi ý trong danh sách Tài Tutorial, hoặc sử
dụng một số hình ảnh của riêng bạn).
Bước
9: Làm cho Footer
Là
bước cuối cùng trong quá trình này, chúng ta sẽ tạo ra khu vực chân trang. Tạo
một layer mới. Chọn công cụ Pencil Tool (B) và thiết lập màu sắc của nó với một
màu nâu sẫm (# 2c1303). Vẽ một bộ phận rộng 14-cột dưới ba hình thu nhỏ mà sẽ
là chia của chúng tôi giữa các nội dung chính và các khu vực footer.
Mẹo:
Giữ phím Shift đảm bảo chúng tôi tạo ra một đường thẳng.
Nhân
đôi layer dòng bạn vừa tạo và thay đổi màu sắc của nó là màu trắng (#ffffff) sử
dụng một layer style Color Overlay. Di chuyển xuống 1px trùng lặp. Thay đổi chế
độ hòa trộn là Overlay và giảm Opacity của nó đến 18% để tạo ra một số loại
hiệu ứng khác.
Cuối
cùng, sử dụng Horizontal Type Tool (T) để thêm văn bản Footer của bạn (bạn có
thể bao gồm, ví dụ, một số thông tin về bản quyền).
Tóm
tắt hướng dẫn
Chúng
tôi đã tạo thành công một thiết kế trang web nhiếp ảnh mockup thanh lịch! Chúng
tôi sử dụng các kỹ thuật khác nhau và các phương pháp được phổ biến trong phát
triển bố cục trang web, bao gồm cả việc sử dụng các công cụ lựa chọn, công cụ
hình dạng, áp dụng kết cấu grunge và bộ lọc, tinh chỉnh chế độ hoà trộn của
lớp, và như vậy. Tôi hy vọng bạn tìm thấy hướng dẫn này hữu ích.
>>> XEM THÊM
|
0 nhận xét: