Skip to content
FPT Arena Multimedia
  • Giới thiệu
    • FPT Education
    • Về FPT Arena
      • Lịch sử FPT Arena
      • Báo chí nói về FPT Arena
      • Đối tác của FPT Arena
  • Chương trình học
    • Học kì 1
    • Học kì 2
    • Học kì 3
    • Học kì 4
  • Gương mặt
  • Tin tức
    • Sự kiện
    • Blog
    • Tuyển dụng
      • FPT
      • Đối tác
  • Gallery
    • Học Kỳ 1
    • Học Kỳ 2
    • Học Kỳ 3
    • Học Kỳ 4
  • Thông tin tuyển sinh
    • Quy chế tuyển sinh
    • Học Bổng
    • Câu hỏi thường gặp
    • Khảo sát
    • Đăng ký học
    • Liên thông
      • Anh
      • Canada
      • Malaysia
      • Việt Nam
  • Blog
    • Tin Multimedia
    • Đồ họa
    • Web Design
    • Digital Film Making
    • Game Design
    • 3D Animation
    • Brand Identity
    • Phần mềm

Home - Tin tức - Cắt PSD sang HTML như thế nào

Cắt PSD sang HTML như thế nào

06/05/2020 | 3082 views

PSD là tệp hình ảnh dưới dạng Layer và là định dạng mặc định để lưu dữ liệu của Photoshop. Khi thiết kế giao diện web, các nhà thiết kế thường thực hiện dưới dạng hình ảnh PSD. Tuy nhiên, để biến hình ảnh thiết kế đó thành giao diện web thực sự, coder sẽ phải cắt PSD sang HTML – yếu tố được sử dụng để xây dựng các thành phần có trong website. Vậy cắt PSD sang HTML như thế nào? Hãy cùng FPT Arena tìm hiểu nhé!

cat-psd-sang-html-nhu-the-nao
Cắt PSD sang HTML như thế nào

Mục lục

  1. Phân tích thiết kế
  2. Tạo cấu trúc thư mục
  3. Dựng HTML và CSS
  4. Mobile first và Desktop first
  5. Trình duyệt hỗ trợ
  6. Testing
  7. Nhận xét, góp ý

Phân tích thiết kế

Trước khi cắt PSD sang HTML, bạn cần phân tích bản thiết kế đó. Bao gồm:

  • Màu sắc: Chọn màu sắc chủ đạo và màu phụ của thiết kế (màu chữ, màu nền, màu liên kết,…)
  • Fonts: Chọn công cụ Text của Photoshop (phím tắt T) sau đó chọn đoạn text mà bạn muốn kiểm tra xem font gì, các đoạn chữ, kích thước tiêu đề, menu, button,… Sau khi biết được loại font, bạn dùng Google font để tải các file font dạng otf ttf woff về rồi cho vào thư mục Fonts & CSS dẫn đến các file font
  • Hình ảnh: Sử dụng AI hoặc Photoshop để cắt hình ảnh
  • Icons: Sử dụng Icons mà có font awesome
  • Spacing: Kiểm tra khoảng cách padding, margin của các thành phần; khoảng cách line-height, giữa các đoạn text, căn giữa, trái, phải để code cho chuẩn
  • Kích thước thiết kế: Kiểm tra chính xác kích thước của thiết kế
phan-tich-ban-thiet-ke-truoc-khi-cat-psd-sang-html
Phân tích bản thiết kế trước khi cắt PSD sang HTML

Xem thêm thông tin:

Khóa học thiết kế web chuyên nghiệp theo xu hướng mới

Tạo cấu trúc thư mục

Việc tiếp theo bạn cần làm để cắt PSD sang HTML đó là tạo cấu trúc thư mục. Các thư mục cần tạo là:

  • 01 thư mục CSS/Styles chứa các file .CSS
  • 01 file index.html
  • 01 thư mục Image
  • 01 thư mục Font chứa các font
  • 01 thư mục JS nếu bạn code thêm JavaScript
  • 01 file reset.css
  • 01 file fontawesome.css
  • 01 file style.css
mot-so-thu-muc-can-tao-de-khi-cat-psd-sang-html
Một số thư mục cần tạo để khi cắt PSD sang HTML

Dựng HTML và CSS

Việc tiếp theo mà bạn cần thực hiện đó chính là dựng HTML cho từng phần trong thiết kế. Bạn có thể code hết HTML cho tất cả rồi CSS một lần. Hoặc bạn thực hiện theo từng phần và đến phần nào thì dựng HTML và CSS đến đó.

dung-html-va-css
Dựng html và css

Dựa vào thiết kế để tạo trong file index.html 01 block là menu với các thẻ HTML và Class, đặt tên theo tiêu chuẩn Block Element Modified như sau:

<nav class=”menu”>

 <ul class=”menu__list”>

  <li class=”menu__item”><a href=”#” class=”menu__link”>About us</a>

  </li>

 </ul>

</nav>

Mobile first và Desktop first

Xác định giao diện trước khi thực hiện. Giao diện Desktop hay Mobile chính là đoạn code CSS khi bạn bắt đầu vào code. Trường hợp là Desktop, CSS chính là Desktop, sau đó, bạn dùng @media max-width cho các thiết bị nhỏ hơn như Mobile, Tablet. Trường hợp là Mobile, CSS bạn đang làm chính là dành cho nó. Khi đó, bạn dùng @media max-width cho các giao diện từ Mobile trở lên như Desktop, Tablet.

Trình duyệt hỗ trợ

Bạn nên cân nhắc kỹ lưỡng khi sử dụng trình duyệt hỗ trợ. Bạn không thể dùng CSS Flexbox hoặc CSS Grid nếu khách hàng của bạn yêu cầu dùng trình duyệt cũ như IE. Khi đó, bạn phải dùng các thuộc tính CSS khác như Display Inline Block, Float,…

ban-nen-can-nhac-ky-luong-khi-su-dung-trinh-duyet-ho-tro
Bạn nên cân nhắc kỹ lưỡng khi sử dụng trình duyệt hỗ trợ

Testing

Testing là việc rất quan trọng để cho ra một sản phẩm hoàn thiện nhất. Bạn có thể dùng Resize trình duyệt hoặc giả lập giao diện thiết bị của Google Chrome để test giao diện. Test giao diện để xem màn hình giao diện (Ui) đã đẹp mắt chưa? Trải nghiệm của người dùng (UX) có tốt không?

Tiếp theo, bạn copy trang web đó sang một trình duyệt khác như Edge, Firefox, Safari Opera Coccoc,… xem màn hình giao diện có hiển thị giống nhau không? Hãy chỉnh sửa lại nếu gặp lỗi với bất cứ trình duyệt nào.

Nhận xét, góp ý

Sau cùng, hãy đưa sản phẩm cho cấp trên để họ kiểm tra và góp ý cho bạn. Có thể họ sẽ giúp bạn phát hiện lỗi mà bạn không để ý, chẳng hạn như UI chưa đẹp mắt, button quá ngắn, cần cải thiện hiệu ứng,…

dua-san-pham-da-cat-psd-sang-html-cho-cap-tren-de-ho-kiem-tra-va-gop-y
Đưa sản phẩm đã cắt PSD sang HTML cho cấp trên để họ kiểm tra và góp ý

Bạn có thể tham khảo:

Codepen là gì? Tạo tài khoản CodePen miễn phí và sử dụng như thế nào?

Trên đây là chia sẻ của FPT Arena về chủ đề cắt PSD sang HTML. Hãy để lại comment bên dưới bài viết nếu bạn còn băn khoăn hoặc muốn thảo luận thêm với chúng tôi. FPT Arena không ngại chia sẻ với bạn về thiết kế đồ họa, học thiết kế web và kỹ thuật số, thiết kế game, dựng phim kỹ thuật số, phim hoạt hình 3D,… Hãy ghé thăm arena.fpt.edu.vn thường xuyên nhé!

Viện Đào Tạo Quốc Tế FPT

FPT Arena Multimedia – https://arena.fpt.edu.vn

 

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Thông tin nổi bật
  • TOP 5 TRƯỜNG THIẾT KẾ ĐỒ HỌA TỐT NHẤT VIỆT NAM 14-04-2020 | 418 views
  • KHÓA HỌC THIẾT KẾ ĐỒ HỌA CƠ BẢN 14-04-2020 | 518 views
  • HỌC THIẾT KẾ ĐỒ HỌA Ở ĐÂU TỐT 14-04-2020 | 998 views
  • HỌC PHOTOSHOP CĂN BẢN CHO NGƯỜI MỚI BẮT ĐẦU 14-04-2020 | 878 views
  • HỌC ILLUSTRATOR CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU 14-04-2020 | 918 views

Các tin liên quan

  • BỘ ĐỒ ÁN XUẤT SẮC TỪ NHỮNG MẢNH GHÉP ĐẶC BIỆT HỘI TỤ TẠI FPT ARENA 10/01/2023 | 346758 views
  • Mộc Hoa – đồ án ôm trọn nét đẹp đương đại hóa tranh dân gian tới gần hơn giới trẻ hiện đại 06/01/2023 | 391836 views
  • Lớp A2.2011E – Hoàn thành chặng đường chinh phục FPT Arena bằng đồ án kỳ 4 04/01/2023 | 415840 views
  • Cách làm thiệp sinh nhật trái tim từ những bông hoa 
    Hướng dẫn cách làm thiệp sinh nhật 3D đơn giản và dễ dàng 04/01/2023 | 413423 views
  • Nhỏ to chuyện cuối năm cùng FAN tại Talkshow “Vén màn TVC thành công” 04/01/2023 | 408037 views


Nhận tài liệu miễn phí ngành multimedia

    • Trang chủ
    • Việc làm
    • Gallery
    • Hướng dẫn
    • Đăng ký
    • Liên hệ

    DMCA.com Protection Status

    Copyright © 2023 by arena.fpt.edu.vn | All rights reserved.
    Useful link: học thiết kế đồ họa - học thiết kế web - thiết kế đồ họa game - học làm phim - thiết kế đồ họa - Google New FPT ARENA

    • Trang chủ
    • Việc làm
    • Gallery
    • Hướng dẫn
    • Đăng ký
    • Liên hệ
    Copyright 2023 © Arena.fpt.edu.vn
    • Giới thiệu
      • FPT Education
      • Về FPT Arena
        • Lịch sử FPT Arena
        • Báo chí nói về FPT Arena
        • Đối tác của FPT Arena
    • Chương trình học
      • Học kì 1
      • Học kì 2
      • Học kì 3
      • Học kì 4
    • Gương mặt
    • Tin tức
      • Sự kiện
      • Blog
      • Tuyển dụng
        • FPT
        • Đối tác
    • Gallery
      • Học Kỳ 1
      • Học Kỳ 2
      • Học Kỳ 3
      • Học Kỳ 4
    • Thông tin tuyển sinh
      • Quy chế tuyển sinh
      • Học Bổng
      • Câu hỏi thường gặp
      • Khảo sát
      • Đăng ký học
      • Liên thông
        • Anh
        • Canada
        • Malaysia
        • Việt Nam
    • Blog
      • Tin Multimedia
      • Đồ họa
      • Web Design
      • Digital Film Making
      • Game Design
      • 3D Animation
      • Brand Identity
      • Phần mềm
    dangky

     

    30 học bổng toàn phần đang chờ đón bạn tại FPT ARENA MULTIMEDIA



      ( * Thông tin của học viên sẽ được bảo mật theo quy định của FPT ARENA MULTIMEDIA)

      Hotline

      024 7300 8855

      028 7300 8866