11-05-2021 17:05

Bạn biết đấy, các file thiết kế trên các phần mềm thiết kế chuyên dụng như PS, AI đâu thể tự động chuyển đổi thành website hay landing page. Vậy làm thế nào để biến những bản design đẹp mắt thanh các page có thể hiển thị và tương tác trên trình duyệt. Trong bài viết dưới đây hãy cùng ITPlus - Academy khám phá ngay 5 bước thần thánh giúp chuyển PSD sang HTML trong thiết kế website bạn nhé!

Bước 1: Phân tích thiết kế trong file PSD

Một file thiết kế giao diện web gồm rất nhiều các thành phần như hình ảnh, chữ viết, icon,... Vì vậy, trước khi thực hiện vào việc chuyển đổi bạn cần phân tích các thành phần này trong file psd. Hãy mở file psd trong Photoshop và xác định các nội dung sau:

• Màu sắc trong website: Màu nền background chính, màu liên kết, màu chữ, màu menu,…
• Font chữ: Kiểm tra font trong từng ô chữ ở thiết kế xem đó là font gì, có định dạng in đậm, in nghiêng hay gạch chân,... Tuy nhiên, font đó có thể hiển thị trên trình duyệt hay không? Để kiểm tra việc này, hãy tìm tên font trên Google fonts xem có sẵn font chữ đang sử dụng không để tránh bị lỗi trong quá trình chuyển đổi nhé! 
• Hình ảnh: Xác định các khu vực là hình ảnh trong thiết kế và cắt riêng thành từng file nhỏ.
• Icon: Nếu các icon là có sẵn trong máy bạn sẽ không cần tìm và cắt nhưng nếu nó được thiết kế riêng thì hãy cắt nó thành những tấm ảnh nhỏ và lưu lại.
• Kích thước của website: Xác định chiều dài, chiều rộng (width, height) của từng phần banner, menu trên (top menu), mục giới thiệu (about block) và nhiều thành phần hiển thị khác của website hay landing page.
• Spacing: Kiểm tra các khoảng trống (margin, padding) giữa từng thành phần cũng như khoảng cách giữa các text, các dòng (line-height) và yêu cầu căn đoạn,...

Bước 2: Cấu trúc các thư mục cho website

Bạn hãy sắp xếp các thành phần đã xác định trong bước 1 vào từng thư mục để đảm bảo không thừa/thiếu và dễ dàng gọi tên khi dựng HTML. Một số file và thư mục cần tạo như:

• 1 file: index.html
• 1 thư mục styles (có thể đặt tên là css) để chứa các file .css
• 1 thư mục images dùng để lưu hình ảnh liên quan đến website
• 1 thư mục fonts dùng lưu các font sử dụng trên web.

Ngoài ra, nếu website hoặc landing page có dùng mã code Javascripts, bạn nhớ tạo thêm 1 thư mục js để lưu các file .js sử dụng nhé. Một số file/thư mục phụ thêm khác có thể tạo thêm:

• File reset.css bên trong nội dung quy định quá trình reset hiển thị mặc định trên các trình duyệt.
• File fontawesome.css nếu bạn dùng font, icon tại fontawesome (nếu có)
• File style.css được dùng là nơi code giao diện HTML sau này.

Bước 3: Code HTML và CSS cho website

Có 2 cách để thực hiện công việc này:

• Cách 1: Code theo trình tự trên xuống dưới theo trình tự hiển thị và định dạng CSS 1 lần.
• Cách 2: Phân chia các thành phần của web thành các phần (block) và code từng block với HTML và CSS riêng. Với từng block này, bạn hoàn toàn có thể responsive nó cho tương thích với nhiều kích thước hiển thị khác nhau. Cứ như thế làm việc với từng block 1.

Bước 4: Chú ý 1 số yêu cầu

Xác định giao diện hiển thị ưu tiên: Website/Landing Page ưu tiên hiển thị trên điện thoại thông minh (smartphone) hay máy tính (desktop)? Bạn cần xác định trước để tối ưu code và trải nghiệm người dùng. Các trình duyệt tương thích: Trình duyệt được dự đoán sẽ được sử dụng hiển thị web cũng ảnh hưởng đến quá trình dựng code. Ví dụ: IE không hỗ trợ CSS Grid mà phải dùng thuộc tính float. Hãy chú ý cả vấn đề này để web không bị lỗi nhé!

Bước 5: Kiểm tra kết quả (Testing) và sửa lỗi

Test giao diện trên các trình duyệt, kích thước màn hình và các thiết bị khác nhau. Đơn giản nhất là bạn co, kéo màn hình duyệt web để xem giao diện có đẹp và chuyển đổi như ý không. Một cách khác là dùng chế độ giả lập trên trình duyệt Chrome để kiểm tra. Hãy nhớ test nhiều trình duyệt để đảm bảo phát hiện hết lỗi. Sau đó, tiếp tục sửa lại các lỗi và kiểm tra đến khi ưng ý.

Vậy là bạn đã có thể hoàn thiện website hay landing page của mình bằng cách chuyển từ PSD sang HTML rồi đấy. Chúc các bạn thành công!

-------------------------------------------------------------------------------------------------------

Hiện tại, ITPlus Academy có tổ chức các khóa học thiết kế chuyên nghiệp, bạn có thể tham khảo tại:

• Khóa học thiết kế đồ họa chuyên nghiệp

• Khóa học Photoshop

• Khóa học Illustrator

• Khóa học Quay, Dựng và Biên tập Video   

 Ban truyền thông ITPlus