Cách thiết kế giao diện web bằng photoshop là một trong những keyword được search nhiều nhất trên Google về chủ đề cách thiết kế giao diện web bằng photoshop. Trong bài viết này, cachthietkeweb.vn sẽ viết bài viết Hướng dẫn cách thiết kế giao diện web bằng photoshop mới nhất 2020.
Hướng dẫn cách thiết kế giao diện web bằng photoshop mới nhất 2020
hiện tại có rất nhiều phần mềm design website được người dùng tin tưởng download để sử dụng, cùng lúc với việc sử dụng software design website thì các hình ảnh, chúng ta cần phải giải quyết qua trên một tool chỉnh sửa ảnh không giống, công cụ này Taimienphi lựa chọn là Photoshop
Trong bài viết này, Taimienphi.vn sẽ tut độc giả cách thiết kế website bằng Photoshop, tạo một giao diện website chuyên nghiệp bằng phần mềm AdobePhotoshop. Sau khi thực hiện thật cẩn thận các bước hướng dẫn dưới đây, bạn sẽ xây dựng được một giao diện web rất đẹp mắt giống như ảnh dưới :
Trước khi thực hiện tạo một giao diện web chuyên nghiệp bằng Photoshop, bạn cần có một web template và đương nhiên là công cụ chỉnh sửa, design hàng đầu hiện giờ Adobe Photoshop.
THIẾ KẾ website BẰNG PHOTOSHOP, TẠO GIAO DIỆN website CHUYÊN NGHIỆP BẰNG ADOBE PHOTOSHOP
Bước 1: Mockup
Trước khi bắt đầu design, bạn cần lên kế hoạch cho các yêu cầu, giao diện và tính năng. Sau đó phải sắp xếp các ý tưởng thành một layout thêm vào để thực hiện. Mockup và wireframe khá có ích trong việc tạo các layout linh hoạt.
Trong phần hướng dẫn này mockup và wire frame được đặt cùng các tone màu xám. Bằng phương pháp này bạn có hình thức bỏ màu sắc trên nền, để hội tụ vào layout và k bị rối mắt bởi các màu sắc khác nhau. Và bạn có thể tự do và điều chỉnh và sắp đặt mọi thứ. Một mockup đủ sức hiển thị các chi tiết như bạn muốn.
Bước 2: xây dựng Canvas
Bước kế tiếp tạo một layout có chiều rộng 960 pixel. Tạo một tài liệu mới có kích thước 1200 x 1500.
Dưới đây là layout có chiều tộng 960 pixel, và bạn sẽ phải chọn khu vực để làm việc trên đó. nhấn tổ hợp phím Ctrl + A để chọn tất cả tài liệu.
lựa chọn Select =>Transform Selection. Co chiều rộng phần vừa mới chọn xuống 960 pixel. Đó là khu vực sử dụng việc của layout.
Thêm đường kéo guide line vào phần này.
kế tiếp bạn cần tạo một số padding giữa border và content mà bạn sẽ thêm sau đó. Trên khu vực vừa mới hoạt động, lựa chọn Transform Selection. cải thiện click thước chiều rộng khu vực đang lựa chọn xuống 920 pixel. Điều này có nghĩa là 2 padding 2 bên có tổng click thước padding là 40 pixel.
Thêm đường guide line vào khu vực vừa mới lựa chọn.
Bước 3: Tạo Header
Thực hiện theo các bước này để tạo header cho layout. Tạo một khu vực có chiều cao 465 pixel.
trước tiên Fill khu vực này bằng màu xám, sau đó sử dụng Layer Styles để thêm màu và gradient. Thực hiện thao tác này trong suốt công cuộc design để duy trì nền tảng phân cấp thị giác (visual hierarchy).
Thêm Gradient vào header. kích đúp chuột vào ảnh thumb thu nhỏ của layer, lựa chọn Gradient Overlay. Tạo 2 Gradient màu giống như ảnh dưới đây bằng mẹo dùng các xây dựng tương tự.
Lúc này màu sắc khu vực đang chọn giống như hình dưới đây:
Bước tiếp theo là thêm điểm nổi bật vào header. Tạo một layer mới bằng mẹo sử dụng tổ hợp phím Ctrl+Alt+Shift+N. lựa chọn một brush mềm có đường kính 600px và chọn mã màu #19535a cho brush. Chỉ cần click chuột vào giữa header 1 lần.
lựa chọn khu vực ở phía trên đầu có chiều cao 110 pixel.
bấm Delete đẻ xóa phần vừa mới chọn. Lúc này sẽ có dạng:
Co chiều dọc lại bằng cách click tổ hợp phím Ctrl + T.
Hãy chắc chắn rằng điểm nổi bật nằm ở trung tâm header. chọn layer, header và điểm nổi bật và bấm phím V để chuyển qua tool Move công cụ. Trên bảng Options Panel chọn nút Align Horizontal Centers.
Tạo một layer mới, sử dụng tool Pencil công cụ có mã màu #01bfd2 để vẽ một đường nổi bật.
Ẩn các cạnh bằng cách sử dụng gradient mask. lựa chọn tool Gradient công cụ, tạo gradient trong bảng Options Panel như ảnh dưới đây:
vận dụng gradient trên.
Bước 4: Tạo Texture Và Pattern
Bước tiếp theo ngày nay là tạo một checker pattern và ứng dụng checker pattern này vào header. lựa chọn công cụ Pencil tool, thiết thập click thước brush thành 2 pixel và thêm 2 chấm vào 2 góc đối diện nhau như hình dưới đây. Bỏ background và chọn các dấu chấm này. chọn Edit =>Define Pattern.
Tạo một layer mới và đặt layer này vào bên dưới layer nổi bật. lựa chọn khu vực mà bạn muốn áp dụng pattern. bấm tổ hợp phím Shift + F5 để mở hộp thoại Fill. chọn pattern mà bạn vừa tạo và chọn OK.
Khu vực đó sẽ được fill bằng pattern.
Blend pattern vào header. Thêm một Layer Mask vào layer Pattern. chọn brush mềm với mã màu #ffffff, Opacity của brush xuống 60% và sơn. ngoài ra bạn đủ nội lực điểu chỉnh Opacity cho phù hợp với yêu cầu của bạn.
Sau khi hoàn tất, bạn đủ sức thấy rằng Blend khá bắt mắt.
Bước 5: Thêm Biểu Logo Type (Kiểu Chữ)
quá trình hoàn tất background đã thực hiện được khá nhiều. Nhiệm vụ ngày nay của bạn là thêm logo type. Trước khi thực hiện điều này, thêm điểm nổi bật vào phía sau logo. lựa chọn brush mềm có mã màu #19535a và thêm một điểm chấm.
kế tiếp thêm Type. Font chữ sử dụng trong gợi ý đưới đây là Bebas. Nếu muốn sử dụng font chữ này bạn đủ sức down máy và setup, không những thế, có rất nhiều font chữ xinh tiếng Việt khác dành cho các bạn, đăng Font chữ đẹp về máy tính
Thêm hiệu ứng Subtle cho logo.
Bước 6: Đường kéo
Thêm các link đường dẫn.
Tạo nút đường dẫn. sử dụng tool Rectangular Marquee công cụ và fill bằng bất cứ màu sắc nào. Sau đó giảm Fill Opacity xuống 0.
kích đúp chuột vào hình thumb thu nhỏ của layer, chọn Gradient Overlay, và sử dụng các xây dựng như hình dưới đây:
Bước 7: nội dung Slider
chọn một khu vực có kích thước 580 x 295 pixel.
Fill khu vực bằng tone màu xám.
Thêm pic mà bạn muốn sử dụng, chèn vào layer mà bạn vừa tạo ở trên.
cho đến nay là bước thêm hiệu ứng đổ bóng (shadow) cho slider. Tạo một layer mới, lựa chọn công cụ Brush tool được thiết lập đường kính là 400 pixel. mở bảng Brushes và giảm kích thước các chấm tròn, sử dụng thiết lập giống như dưới đây.
xây dựng mã màu brush là #000000 và thêm các chấm tròn.
vận dụng Gaussian Blur để làm mềm các cạnh.
lựa chọn nửa phần dưới của bóng và xóa phần đó đi.
cải thiện vị trí của bóng ngay trên slider.
Co bóng theo chiều dọc. tiếp theo căn giữa trên thanh slider. lựa chọn cả 2 layer và trên bảng Options Panel, nhấn lựa chọn nút Align Horizontal Centers.
Nhân đôi bóng và xoay theo chiều dọc, đặt vào cạnh dưới cùng của thanh slider.
Tạo nút điều khiển thanh slider bằng cách dùng tool Rectangular Marqee công cụ và fill mã màu #000000.
Giảm nút Opacity xuống 50%.
mở AutoShapes trên bảng Option Panel và lựa chọn biểu tượng mũi tên như dưới đây. Thêm biểu tượng đó vào nút.
kế tiếp tạo một thanh như ảnh dưới đây và fill màu #000000.
Giảm Opacity xuống 50%.
Tại đây bạn đủ nội lực thêm miêu tả cho dự án của mình.
Bước 8: Thêm Các thể loại Chào Mừng Cho website
Thêm các loại chào mừng và diễn đạt website tại đây. Để gõ được tiếng Việt trong Photoshop có dấu rất không khó khăn, chỉ cần setup phần mềm support gõ tiếng việt và chọn các kiểu font tiếng việt có dấu là xong, nếu chưa hiểu, mời các bạn đọc qua phương pháp gõ tiếng Việt trong Photoshop để biết cách thực hiện.
Bước 9: Hoàn Tất Header
Đến đây gần như vừa mới sắp hoàn thành header. Để hoàn thiện header, bước cuối cùng là thêm hiệu ứng đổ bóng cho header. Tạo một bóng như tut ở phần trên bằng cách dùng công cụ brush.
Để khoảng phương pháp giữa header và bóng là 1 pixel.
Bước 10: vận dụng Gradient Cho Background
Tạo một màu xám nhạt thành gradient trắng sử dụng các xây dựng giống như dưới đây.
Tạo một layer mới đặt dưới header vào áp dụng gradient trên.
Bước 11: Thêm Nút Slider Xoay
Tạo nút điều khiển xoay.
vận dụng Inner Shadow trên từng nút để biết được các mục đã hoạt động trên thanh slider.
Bước 12: Tạo nội dung Divider
lựa chọn công cụ Pencil tool và vẽ 1 đường kẻ. lựa chọn màu xám nhạt (mã màu #aaaaaa).
dùng gradient mask để ẩn các cạnh.
Bước 13: Thêm Main content (Nội Dung Chính)
ngày nay Nhiệm vụ của bạn là thêm các phần content. Layout dưới đây được chia sử dụng 3 cột bằng nhau và có padding ở giữa. Để sử dụng được điều này bạn có thể tính toán và chia chân trời có sẵn thành 3 hộp bằng nhau có chiều rộng 25 pixel và có padding ở giữa.
Thêm đường guide line vào các hộp. Sau đó xóa các hộp này đi và phần còn lại là các cột bằng nhau.
Thêm một số dịch vụ đặc trưng. Thả các biểu tượng từ bộ biểu tượng Function. Duy trì khoảng mẹo giữa các thị trường đồng bộ.
kế tiếp tạo nút Read More (đọc thêm). lựa chọn công cụ Rounded Rectangle công cụ để vẽ các hình dạng không giống nhau. Hãy chắc chắn rằng đó là layer Shape.
áp dụng Gradient Overlay và Stroke cho nút Read More.
Nhân đôi nút này.
Bổ sung thêm các mục hoạt động Hiện nay. Trong gợi ý dưới đây là vẽ 3 hộp để thêm 3 hình ảnh và vận dụng 3 stroke.
Dán các pic vào các hộp.
Tạo bóng như ở các bước trên và đặt ở các hộp.
Thêm một số diễn đạt cho dự án.
cho đến nay là bước tạo một giao diện website chuyên nghiệp bằng Photoshop với các tiện ích mxh giống như Twitter Feed. kéo biểu tượng Twitter hình con chim vào.
Tạo một thông báo Twitter.
Tạo một nút More Tweets.
áp dụng các phong cách dưới đây:
Thêm text, cách chèn text hay chính là chèn chữ vào hình trong Photoshop được thông qua công cụ Type công cụ, khi chọn công cụ này cùng với việc chọn font chữ, click thước (size), các bạn khởi đầu tiến hành thêm text hay chèn chữ vào ảnh trong Photoshop
Bước 14: Tạo Footer Và Hoàn Tất công cuộc
Tạo một khu vực cho footer và fill khu vực đó bằng màu xám.
vận dụng Color Overlay.
Cuối cùng thêm link danh mục footer và thông tin bản quyền. Và giống như vậy là bạn đang hoàn tất tiến trình tạo một giao diện website bằng Photoshop.
hiệu quả cuối cùng sau khi thực hiện đa số và chuẩn xác các bước tạo một giao diện website chuyên nghiệp bằng Photoshop ở trên.
Trên Photoshop có rất nhiều chức năng giúp bạn chỉnh sửa pic mới mẻ, với chức năng chỉnh sửa hình ngược sáng, bức hình của bạn bị chụp trong điều kiện ngược ánh sáng sẽ trông rất tối, khi đó hình ảnh sẽ được khôi phục lại một phương pháp nhanh nhất, sử dụng cho bức hình trở nên sáng hơn, tham khả cách chỉnh sửa hình ngược sáng mà Taimienphi đã hướng dẫn nhé.
nguồn: thuthuat.taimienphi.vn
