File thiết kế trên các phần mềm chuyên dụng không thể tự động chuyển đổi thành website hay landing page hiển thị và cho phép tương tác trên trình duyệt. Khi đó, bạn cần biết cách chuyển PSD sang HTML khi thiết kế website. Công việc này cần áp dụng kha khá kiến thức lập trình, HTML, CSS … Nắm được khái quát các bước thực hiện và ý nghĩa của nó, bạn sẽ thấy thiết kế phức tạp đến đâu cũng có thể chuyển thành website.
Bước 1: Phân tích thiết kế trong file PSD
File thiết kế giao diện 1 website gồm: hình ảnh, chữ viết, các icon, … Trước khi thực sự bắt tay vào công việc cần kiến thức về web, bạn cần phân tích thiết kế trong file để xác định các thành phần trong trang web, hình dung hoạt động và định hướng các công việc tiếp theo.
Hãy bắt đầu bằng việc mở file PSD bằng Photoshop (nếu file thiết kế có định dạng khác thì sử dụng phần mềm mở khác tương ứng nhé!). Một vài nội dung cần xác định được sau quá trình này:
Màu sắc trong website:
Xác định màu nền background chính, màu liên kết, màu chữ, màu menu, …
Font chữ:
Kiểm tra mỗi ô thể hiện chữ trong thiết kế đang sử dụng font chữ nào. Đối với Photoshop, bạn chọn công cụ T (Text), click vào vùng chứa chữ trong thiết kế cho xuất hiện trỏ nhấp nháy để xác định chính xác tên font và cỡ chữ.
1 thiết kế sử dụng nhiều chữ với nhiều kích thước và font khác nhau. Ngoài ra còn có định dạng in đậm, in nghiêng hay gạch chân, … và điểm riêng biệt của phần text ở menu, button nhé.
Xác định được tên font là chưa đủ, quan trọng là font đó có thể hiển thị trên trình duyệt hay không? Công việc này khá quen thuộc với những bạn đã có kinh nghiệm và kiến thức HTML và lập trình.
Nếu chưa vững lắm, bạn tìm tên font trên Google fonts. Nếu trên Google fonts có sẵn font chữ cần sử dụng, có thể yên tâm lên web font sẽ không bị lỗi.
Nếu không tìm được mẫu font, bạn có thể tìm phương án thay thế hoặc tìm file otf ttf của font chữ cần dùng trên mạng, tải về, lưu trong thư mục font và cấu hình css dẫn đến file font cần dùng nhé 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ó sẵn các icon trong máy, bạn không cần tìm hoặc cắt. Nếu icon được thiết kế riêng, bạn có thể cắt nó thành 1 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. Đừng quên kiểm tra khoảng cách giữa các text, khoảng cách giữa các dòng (line-height) và yêu cầu căn đoạn, …
Xác định được cơ bản những yếu tố trên và viết thành checklist, bạn sẽ đảm bảo không bỏ sót thiết kế, website hoàn thiện sẽ gần với thiết kế ban đầu hơn.
Bước 2: Cấu trúc các thư mục cho website
Bạn 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.
Thông thường có 4 file/thư mục cần tạo:
- 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 trường phái thực hiện công việc này.
- Trường phái 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.
- Trường phái 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.
Mỗi người có 1 hướng và phong cách code khác nhau nên bạn lựa chọn và thực hiện sao cho hợp lý.
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.
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.
Bạn 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 ý.
Bước 6: Hoàn thiện
Bước cuối là cho mọi người xem kết quả để nhận góp ý và hoàn thiện.
Cách chuyển PSD sang HTML khi thiết kế website chi tiết từng mục, từng phần code ra sao, thực hiện thế nào thực sự phức tạp. Nhưng chỉ cần nắm được trình tự những bước trên đây là bạn sẽ gần như không bỏ sót thành phần nào trong thiết kế ban đầu. Chúc các bạn thành công và có những website, landing page ưng ý!
Tác giả: Quang - Ngày viết: 13/09/2020
Danh mục: Ngành Thiết Kế Web & Digital Marketing
ĐỂ LẠI CÂU HỎI NẾU BẠN CÓ THẮC MẮC