Trang thông tin điện tử UBND xã Đại Cường, huyện Đại Lộc, tỉnh Quảng Nam

http://daicuong.gov.vn


Hướng dẫn thiết kế web bằng photoshop, tạo giao diện chuyên nghiệp

Thiết kế web bằng photoshop được xem là một giải pháp của các lập trình web “mới ra nghề” hiện nay. Chẳng cần phải hiểu biết quá nhiều về các kiến thức lập trình web như trước, bạn vẫn hoàn toàn có thể tự tay tạo ra cho mình một trang web chuyên nghiệp.

Thông qua công cụ chỉnh sửa ảnh photoshop, chỉ với những thao tác đơn giản, bạn sẽ nhanh chóng sở hữu một website độc quyền. Để nắm rõ hơn, bạn hãy tham khảo hướng dẫn thiết kế web bằng photoshop đơn giản mới nhất 2021 ngay dưới đây nhé!

Lợi ích của việc thiết kế web, giao diện web bằng photoshop

Photoshop được xem là một phần mềm chỉnh sửa ảnh nổi tiếng nhất hiện nay. Phần mềm này được sử dụng rộng rãi trên toàn thế giới và mang đến nhiều lợi ích cho người thiết kế web như:

  • Giúp nhà thiết kế lên ý tưởng độc đáo và hấp dẫn: Photoshop có đa dạng các chức năng đặc biệt, điều này sẽ giúp người thiết kế có thể lên ý tưởng độc đáo và hấp dẫn cho website của mình. Đặc biệt, quá trình lên ý tưởng bằng photoshop cũng vô cùng dễ dàng.

  • Tạo ra nhiều giao diện website ấn tượng với mọi ngành nghề: Phần mềm photoshop cho phép chỉnh sửa ảnh và thiết kế ra nhiều giao diện website cực kỳ ấn tượng với mọi ngành nghề. Do đó, bạn có thể tha hồ thiết kế ra những website độc đáo phù hợp với ngành nghề mà mình đang hoạt động.

  • Photoshop mang lại hiệu ứng bắt mắt và ấn tượng: Photoshop là phần mềm mang lại nhiều hiệu ứng ấn tượng và bắt mắt. Điều này sẽ giúp các lập trình viên tạo ra những tấm hình đặc sắc hoặc những tấm Poster ấn tượng cho website. Ngoài ra, bạn sẽ nhanh chóng tạo ra các banner và slide cuốn hút cho website đang thiết kế.

  • Có thể sử dụng những tính năng đặc biệt chỉ mỗi photoshop mới có: Phần mềm photoshop cung cấp cho người dùng rất nhiều tính năng đặc biệt và hấp dẫn mà không phải bất kỳ phần mềm nào cũng có được. Bạn hoàn toàn có thể thiết kế web, giao diện web thu hút, tăng lượng truy cập vào website.

Tham khảo : Mẫu thiết kế website thời trang

Quy trình thiết kế web bằng photoshop qua từng bước

Việc thiết kế web bằng photoshop vô cùng đơn giản và nhanh chóng, không yêu cầu về kỹ năng lập trình hay hiểu biết sâu về CSS và HTML. Quy trình thiết kế web bằng photoshop sẽ được thực hiện theo thứ tự 14 bước đơn giản như sau:

Bước 1: Mockup

Trước khi bắt đầu vào quá trình thiết kế web bằng photoshop, bạn hãy lên kế hoạch cho mình. Kế hoạch sẽ bao gồm yêu cầu, giao diện lựa chọn và chức năng web. 

Tiến hành Mockup để thiết kế website

Sau đó, bạn hãy sắp xếp kế hoạch thành một layout. Lúc này, bạn sẽ tiến hành mockup. Bạn nên mockup bằng tone màu xám để xóa bỏ các màu sắc trên nền, không gây rối mắt.

Bước 2: Cài đặt canvas

Ở bước này, bạn hãy tạo layout có chiều rộng là 960 pixel và tài liệu mới với kích thước tương ứng 1200 x 1500.

Bạn hãy thực hiện nhấn tổ hợp phím Ctrl + A để chọn toàn bộ tài liệu.

Tiếp theo, chọn Select =>Transform Selection và giảm chiều rộng layout đã chọn xuống còn 960 pixel.

Giảm chiều rộng và thêm đường dẫn guide line

Ở phần này, bạn hãy thêm đường dẫn guide line.

Lúc này, bạn cần phải tạo thêm các padding ở giữa border và nội dung. Tại khu vực đang hoạt động, bạn hãy nhấn chọn Transform Selection. Tương tự, thay đổi kích thước xuống 920 pixel. 

Bạn cũng sẽ tiếp tục thêm đường guideline vào khu vực đã chọn.

Bước 3: Tạo Header

Đầu tiên, bạn hãy tạo một khu vực có chiều cao tương ứng 465 pixel.

Bạn cũng sẽ chọn Fill cho khu vực này bằng màu xám rồi sử dụng Layer Styles để thêm màu và gradient phù hợp. Trong suốt quá trình thiết kế, bạn nên thực hiện thao tác này để duy trì hệ thống phân cấp cho thị giác.

Bạn sẽ tiến hành thêm Gradient vào header. Sau đó, hãy kích đúp chuột vào thumb thu nhỏ, nhấn chọn Gradient Overlay. Bạn sẽ tiến hành tạo ra 2 Gradient màu bằng cách sử dụng các thiết lập tương tự, tham khảo như hình dưới.

Đổ màu cho khu vực đã chọn

Tiếp theo là bạn cần thêm điểm nổi bật cho header. Bạn hãy sử dụng tổ hợp phím Ctrl+Alt+Shift+N để tạo layer mới. Đồng thời, bạn hãy chọn một brush mềm với đường kính 600px và mã màu là #19535a.

Bạn nên chọn khu vực ở phía trên đầu với chiều cao tương ứng 110 pixel. Sau đó nhấn phím Delete để xóa đi phần đã chọn. Tiếp đến, bạn sẽ sử dụng tổ hợp phím Ctrl + T để có chiều dọc lại.

Bạn sẽ chuyển qua công cụ Move Tool bằng cách chọn layer, header và điểm nổi bật và nhấn phím V. Ở trên bảng Options Panel, bạn sẽ nhấn chọn nút Align Horizontal Centers.

Bạn hãy tạo một layer mới và vẻ một đường nổi bật bằng cách sử dụng công cụ Pencil Tool có mã màu #01bfd2.

Bạn hãy ẩn các cạnh bằng cách sử dụng gradient mask. Tiếp theo, bạn sẽ tiến hành chọn công cụ Gradient Tool để tạo gradient trong bảng Options Panel.

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

Ở bước này, bạn sẽ tạo checker pattern, sau đó, áp dụng chúng vào header. 

Bạn hãy chọn công cụ Pencil Tool rồi thiết lập kích thước brush thành 2 pixel. Sau đó, bạn sẽ thêm 2 chấm vào 2 góc đối diện. Tiếp đến, bạn sẽ bỏ background và chọn các dấu chấm này. Nhấn chọn lệnh Edit =>Define Pattern.

Bạn sẽ tạo tiếp một layer mới, hãy đặt chúng ở dưới phần layer nổi bật. Bạn sẽ chọn cho mình một khu vực muốn áp dụng pattern. Say đó, hãy nhấn Shift + F5 để hộp thoại Fill được mở ra. Hãy chọn pattern mà bạn vừa tạo và nhấn OK.

Bạn sẽ fill bằng pattern tại khu vực đó.

Hãy tiếp tục Blend pattern vào header. Đồng thời, bạn sẽ thêm một Layer Mask vào layer Pattern. Nhấn chọn brush mềm với mã màu là #ffffff. Đồng thời, Opacity của brush sẽ xuống còn 60% và sơn. 

Lúc này, bạn sẽ thấy Blend khá bắt mắt.

Blend sau khi hoàn tất khá bắt mắt

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

Bây giờ là lúc bạn sẽ thêm logo type. Lúc này, bạn cần thêm điểm nổi bật vào phía sau logo. Bạn sẽ chọn brush mềm với mã màu tương ứng là #19535a và thực hiện thêm một điểm chấm.

Tiếp đến, bạn sẽ thêm Type. Bạn cũng có thể chọn cho mình một kiểu font phù hợp nhất. Cuối cùng, bạn hãy thêm hiệu ứng Subtle cho logo đã tạo.

Tạo hiệu ứng và thêm logo cho web

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

Bạn sẽ tiến hành thêm các link đường dẫn ở bước tiếp theo này.

Bạn cần tạo nút đường dẫn trước bằng công cụ Rectangular Marquee Tool và fill bằng bất kỳ màu nào bạn cho là ấn tượng nhất. Sau đó, bạn hãy giảm Fill Opacity xuống ở mức 0.

Thiết lập để thêm đường dẫn

Tiếp đến, bạn sẽ thực hiện kích đúp chuột vào hình thumb thu nhỏ của layer rồi chọn Gradient Overlay để tiến hành thiết lập.

Bước 7: Content Slider

Bạn hãy tiến hành chọn một khu vực bất kỳ với kích thước 580 x 295 pixel.

Sau đó, bạn hãy Fill khu vực này bằng tone màu xám.

Fill khu vực đã chọn bằng màu xám

Chọn và thêm một hình ảnh mà bạn muốn sử dụng. Sau đó, tiến hành dán chúng vào layer mà bạn vừa tạo ra ở trên.

Bạn sẽ tạo thêm một layer mới, nhấn chọn công cụ Brush Tool với đường kính 400 pixel. Sau đó, hãy tiến hành mở bảng Brushes, giảm kích thước của các chấm tròn và tiến hành thiết lập đổ bóng.

Chỉnh kích thước chấm tròn và đổ bóng

Bạn cần thiết lập brush với mã màu #000000 rồi thêm các chấm tròn vào. Sau đó làm mềm các cạnh bằng Gaussian Blur. Cuối cùng hãy chọn và xóa nửa phần dưới của bóng đi sau đó:

  • Tiến hành thay đổi vị trí của bóng đã tạo ngay trên slide đó.

  • Bóng sẽ được co theo chiều dọc. Đồng thời, căn giữa thanh slider. Tiếp đến, bạn hãy chọn đồng thời cả 2 layer và trên bảng Options Panel, nhấn chọn Align Horizontal Centers.

  • Bóng sẽ được nhân đôi và xoay theo chiều dọc rồi đặt ở cạnh dưới cùng của thanh slider.

  • Sử dụng công cụ Rectangular Marquee Tool để tạo nút điều khiển thanh slide, sau đó, fill với mã màu #000000.

  • Bạn hãy giảm Opacity xuống khoảng 50%.

  • Tiếp đến, bạn hãy mở AutoShapes trên bảng Option Panel ra và chọn biểu tượng mũi tên để thêm biểu tượng vào nút. Bạn có thể tham khảo hình dưới.

  • Tiếp theo là bạn sẽ tiến hành tạo một thanh như hình dưới đây và fill với màu sắc #000000.

  • Vẫn tiếp tục giảm Opacity xuống khoảng 50%.

  • Ở phần này, bạn có thể thêm mô tả về dự án của mình.

Bước 8: Thêm các câu chào mừng cho web

Bạn hãy chọn tiếng việt và thêm các dòng chào mừng trên website. Kiểu chữ bạn vẫn có thể tùy chọn sao cho phù hợp nhất. Tùy vào trang web kinh doanh, bạn sẽ chào mừng với nội dung phù hợp.

Bước 9: Hoàn thiện Header

Lúc này, bạn cần thêm hiệu ứng đổ bóng để hoàn thành header. Bạn sẽ sử dụng công cụ brush để tạo một bóng.

Hoàn thiện header trang web

Lưu ý, khoảng cách ở giữa header và bóng sẽ là 1 pixel.

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

Bạn hãy thiết lập để tạo một màu xám nhạt thành gradient trắng như hình dưới

Sử dụng các thiết lập để tạo màu

Sau đó, bạn hãy tạo thêm một layer mới và đặt chúng 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.

Để biết được các mục tiêu hoạt động trên thanh slide, bạn nên áp dụng Inner Shadow trên từng nút.

Bước 12: Tạo Content Divider

Lúc này, bạn sẽ chọn công cụ Pencil Tool và tiến hành vẽ 1 đường kẻ. Nên chọn gam màu xám nhạt với mã màu tương ứng là #aaaaaa.

Tiếp tục sử dụng gradient mask để các cạnh được ẩn.

Vẽ đường kẻ và ẩn các cạnh bằng gradient mask

Bước 13: Thêm nội dung chính

Layout sẽ được chia thành 3 cột bằng nhau, trong đó có có padding ở giữa. Bạn cần phải tính toán khoảng cách ở các cột trước. Sau đó, bạn sẽ tạo 3 hộp bằng nhau với chiều rộng 25 pixel, tương tự là padding ở giữa.

Tạo các cột đều nhau và thêm nội dung

  • Bạn hãy thêm các guideline vào 3 hộp. Sau đó, hãy xóa các hộp đi là bạn sẽ có các cột bằng nhau.

  • Lúc này, bạn sẽ thêm nội dung và dịch vụ đặc trưng của mình. Có thể sử dụng biểu tượng Function. Các đối tượng cần phải đồng bộ về khoảng cách.

  • Nếu nội dung quá nhiều, bạn có thể tạo nút đọc thêm. Có thể tận dụng công cụ Rounded Rectangle Tool để vẽ các hình dạng khác nhau thêm phần ấn tượng.

  • Với nút Read More (đọc thêm), bạn sẽ áp dụng Gradient Overlay và Stroke.

  • Ngoài ra, ở bước này, bạn có thể tạo giao diện web với các tiện ích mạng xã hội như Facebook, Twitter, Tweets.

  • Nếu muốn thêm text vào ảnh thì có thể sử dụng công cụ Type Tool.

Bước 14: Tạo footer và hoàn thiện trang web

Đầu tiên, bạn sẽ tiến hành tạo một khu vực cho footer và fill toàn bộ khu vực đó bằng màu xám. Có thể áp dụng công cụ Color Overlay.

Sử dụng Color Overlay để thiết lập màu

Tiếp đến, bạn cần phải thêm linh cho danh mục và các thông tin về bản quyền.

Hoàn tất các bước thiết kế web bằng photoshop

Như vậy, với 14 bước trên là bạn đã hoàn thành giao diện web đơn giản bằng photoshop rồi đấy.

Tham khảo : Mẫu thiết kế website mỹ phẩm chuyên nghiệp

Kết luận

Việc thiết kế web bằng photoshop rất đơn giản. Kể cả những lập trình viên mới chập chững vào nghề vẫn có thể thực hiện được. Photoshop có rất nhiều tính năng, bạn có thể thoải mái sáng tạo và thiết kế để tạo ra một trang web độc đáo và ấn tượng nhất. Chúc bạn thành công nhé!

Thông tin liên hệ : 

CÔNG TY TNHH THƯƠNG MẠI E COM (E COM TRADING CO.,LTD)

Địa chỉ: Lầu 2, 60 Lê Trung Nghĩa, Phường 12, Quận Tân Bình, Hồ Chí Minh

Điện thoại: 028 6688 7999  0946 700 808

Email: support@thietkeweb.edu.vn

Website: https://thietkeweb.edu.vn/

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây