Bạn đang xem: Thiết Kế Giao Diện Android Bằng Photoshop Tại DongnaiArt

cách thiết kế giao diện web bằng photoshop là một trong những từ khóa được search nhiều nhất về chủ đề cách thiết kế giao diện web bằng photoshop.

Bạn đang xem: Thiết kế giao diện android bằng photoshop

Trong bài viết này, Dongnaiart 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

THIẾ KẾ website BẰNG PHOTOSHOP, TẠO GIAO DIỆN web CHUYÊN NGHIỆP BẰNG ADOBE PHOTOSHOP

Bước 1: Mockup

Trước khi khởi đầu design, bạn cần lên kế hoạch cho các yêu cầu, giao diện và chức năng. Sau đó phải sắp đặt các ý tưởng thành một layout phù hợp để thực hiện. Mockup và wireframe khá hữu dụng 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 hướng dẫn này bạn có hình thức bỏ màu sắc trên nền, để tập trung vào layout và không bị rối mắt bởi các màu sắc không giống nhau. Và bạn có thể tự do và điều chỉnh và sắp xếp mọi thứ. Một mockup đủ sức hiển thị các chi tiết giống như bạn mong muốn.

Bước 2: thiết lập Canvas

Bước tiếp theo 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 lựa chọn khu vực để sử dụng việc trên đó. nhấn tổ hợp phím Ctrl + A để lựa chọn tất cả tài liệu.

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 làm việc của layout.

Thêm đường dẫn 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 đang hoạt động, chọn Transform Selection. thay đổi kích thước chiều rộng khu vực vừa mới chọn xuống 920 pixel. Điều này có nghĩa là 2 padding 2 bên có tổng kích thước padding là 40 pixel.

Thêm đường guide line vào khu vực vừa mới 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 hết 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 thiết kế để duy trì hệ thống phân cấp thị giác (visual hierarchy).

Thêm Gradient vào header. click đúp chuột vào hình thumb thu nhỏ của layer, lựa chọn Gradient Overlay. Tạo 2 Gradient màu giống như hình dưới đây bằng phương pháp dùng các thiết lập tương tự.

Lúc này màu sắc khu vực vừa mới chọn như hình dưới đây:

Bước kế tiếp là thêm điểm nổi bật vào header. Tạo một layer mới bằng cách 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à lựa chọn mã màu #19535a cho brush. Chỉ cần nhấn 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.

nhấn Delete đẻ xóa phần đã lựa chọn. Lúc này sẽ có dạng:

Co chiều dọc lại bằng mẹo nhấn tổ hợp phím Ctrl + T.

Hãy tất nhiên rằng điểm nổi bật nằm ở trung tâm header. lựa chọn layer, header và điểm nổi bật và nhấn phím V để chuyển qua công cụ Move tool. Trên bảng Options Panel chọn nút Align Horizontal Centers.

Tạo một layer mới, dùng tool Pencil tool có mã màu #01bfd2 để vẽ một đường nổi bật.

Ẩn các cạnh bằng hướng dẫn dùng gradient mask. chọn tool Gradient tool, tạo gradient trong bảng Options Panel giống như ảnh dưới đây:

ứng dụng gradient trên.

Bước 4: Tạo Texture Và Pattern

Bước tiếp theo hiện giờ là tạo một checker pattern và áp dụng checker pattern này vào header. lựa chọn tool 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 giống như hình dưới đây. Bỏ background và lựa 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. chọn khu vực mà bạn mong muốn vận dụng pattern. bấm tổ hợp phím Shift + F5 để xây dựng hộp thoại Fill. lựa chọn pattern mà bạn vừa tạo và lựa 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. lựa chọn brush mềm với mã màu #ffffff, Opacity của brush xuống 60% và sơn. không những thế bạn đủ nội lực điểu chỉnh Opacity cho thêm vào với yêu cầu của bạn.

Sau khi hoàn tất, bạn đủ nội lực thấy rằng Blend khá đẹp mắt.

Xem Thêm : Blog

Bước 5: Thêm Biểu Logo Type (Kiểu Chữ)

tiến trình hoàn tất background vừa mới thực hiện được khá nhiều. Nhiệm vụ bây giờ 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. 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ữ dùng trong ví dụ đưới đây là Bebas. Nếu mong muốn sử dụng font chữ này bạn đủ sức down máy và setup, tuy nhiên, có rất nhiều font chữ đẹp tiếng Việt khác dành cho các bạn, tải Font chữ đẹp về máy tính

Thêm hiệu ứng Subtle cho logo.

Bước 6: Đường dẫn

Thêm các liên kết đường dẫn.

Tạo nút đường kéo. sử dụng công cụ Rectangular Marquee tool 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 ảnh thumb thu nhỏ của layer, chọn Gradient Overlay, và dùng các thiết lập như ảnh dưới đây:

Bước 7: content Slider

chọn một khu vực có click thước 580 x 295 pixel.

Fill khu vực bằng tone màu xám.

Thêm pic mà bạn mong muốn sử dụng, chèn vào layer mà bạn vừa tạo ở trên.

hiện tại là bước thêm hiệu ứng đổ bóng (shadow) cho slider. Tạo một layer mới, lựa chọn tool Brush tool được thiết lập đường kính là 400 pixel. xây dựng bảng Brushes và giảm kích thước các chấm tròn, dùng thiết lập giống như dưới đây.

thiết lập mã màu brush là #000000 và thêm các chấm tròn.

áp 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.

thay đổi vị trí của bóng ngay trên slider.

Xem thêm: Relative Clause Là Gì – Mệnh Đề Quan Hệ Trong Tiếng Anh

Co bóng theo chiều dọc. tiếp theo căn giữa trên thanh slider. chọn cả 2 layer và trên bảng Options Panel, bấm 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 sử dụng công cụ 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à chọn biểu tượng mũi tên giống như dưới đây. Thêm biểu tượng đó vào nút.

tiếp theo tạo một thanh giống 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 loại Chào Mừng Cho trang web

Thêm các dòng 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 đơn giản, chỉ cần setup phần mềm hỗ trợ gõ tiếng việt và lựa 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 xem qua hướng dẫn gõ tiếng Việt trong Photoshop để biết hướng dẫn thực hiện.

Bước 9: Hoàn Tất Header

Đến đây hầu như đã 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 giống như tut ở phần trên bằng mẹo dùng công cụ brush.

Để khoảng hướng dẫn giữa header và bóng là 1 pixel.

Xem Thêm : Quy đổi từ mA sang A (Miliampe sang Ampe)

Bước 10: ứng dụng Gradient Cho Background

Tạo một màu xám nhạt thành gradient trắng 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 vận dụng gradient trên.

Bước 11: Thêm Nút Slider Xoay

Tạo nút điều khiển xoay.

ứng 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 content Divider

lựa chọn tool Pencil công cụ và vẽ 1 đường kẻ. 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 nội dung (Nội Dung Chính)

ngày nay Nhiệm vụ của bạn là thêm các phần nội dung. Layout dưới đây được chia làm 3 cột bằng nhau và có padding ở giữa. Để sử dụng được điều này bạn đủ sức tính toán và chia cánh cửa 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 hướng dẫn giữa các phân khúc đồng bộ.

tiếp theo tạo nút Read More (đọc thêm). lựa chọn tool Rounded Rectangle tool để vẽ các ảnh dạng khác nhau. Hãy tất nhiên rằng đó là layer Shape.

ứng 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 gần đây. Trong gợi ý dưới đây là vẽ 3 hộp để thêm 3 pic và ứng dụng 3 stroke.

Dán các hình ảnh 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.

hiện giờ là bước tạo một giao diện web 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 ả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, phương pháp chèn text hay chính là chèn chữ vào hình trong Photoshop được thông qua công cụ Type tool, khi lựa chọn công cụ này cùng với việc lựa chọn font chữ, click thước (size), các bạn bắt đầu tiến hành thêm text hay chèn chữ vào hình trong Photoshop

Bước 14: Tạo Footer Và Hoàn Tất quá trình

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 mục lục footer và thông tin bản quyền. Và như vậy là bạn vừa mới hoàn tất tiến trình tạo một giao diện web bằng Photoshop.

kết quả cuối cùng sau khi thực hiện đầy đủ và chính xác các bước tạo một giao diện website chuyên nghiệp bằng Photoshop ở trên.

• Phần mềm tải video cho ip
• Phần mềm hay cho windows phone
• Phần mềm tải video miễn phí
• Dich từ tieng anh sang tieng viet