post image

Từ PSD sang HTML (phần 1/5)

Việc biến một giao diện được thiết kế trong Photoshop thành HTML là một phần rất quan trọng trong thiết kế web. Sau này nếu bạn muốn tự tạo giao diện cho trang web của mình cho dù nó động hay là web tĩnh, thì việc chuyển một thiết kế từ PSD sang HTML là việc đầu tiên bạn phải làm. Trong Series tutorial trước, tôi đã hướng dẫn bạn cách chuyển từ PSD sang HTML. Trong lần này, chúng ta sẽ sử dụng một giao diện tương đối phức tạp hơn.


Thời lượng:18:56
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 73.32MB
Download PSD và Source Code: Business Style PSD. PSD được làm lại bởi Lê Đình Cường do phiên bản cũ bị mất. Rất cảm ơn bạn.
Những phần khác:Phần 2, Phần 3, Phần 4, Phần 5

«

»

61 Comments

( Comment bài này )
  1. Mr TOản says:

    Anh ơi . Anh dùng phần mềm nào để viết file index.php và stype.css đấy nhỉ. EM không biết tìm đâu. Anh share đi. Thanks anh

  2. Mr TOản says:

    Cảm ơn anh. Bài viết của anh rất hay. thật sự rất hay.

  3. thanh phong says:

    Cảm ơn bạn cường đã làm lại file PSD.

  4. ol889 says:

    ai có file psd của bải này ko cho mình với ?

  5. Nguyễn Văn Toàn says:

    Chào ban Demon Warlock! Bạn có video toturial nào làm giống mấy cái tag ở right colum như trang izwebz không, tổ chức rất gọn và đẹp,bạn có thể cho mình cái demo không? cám ơn Demon, rất hay và dí dỏm

  6. Phuong says:

    thanks bài viết của a nha!

  7. liem says:

    Thân,
    Cám ơn bạn đã hướng dẫn tut PSD to web.Tuy nhiên Liêm xem trên Gôgle chrome và firefox thì tốt còn trenIE thì bị xáo trộn cảhình và primary lẩn footer.Xin hướng dẫn lổi ở đâu Thanks

  8. Hạnh says:

    chào anh!
    Ngoài phần series tutorial Từ PSD sang HTML thì anh còn có series tutorial được xây ựng trước đó phải không anh?
    Nếu có series tutorial đó thì anh có thể gữi cho em được không?
    Vì em mới học thiết kế web nên chưa thành thạo trong thao tác ở photoshop.
    Em xin cảm ơn anh!

  9. khang says:

    Khi xây dựng trang web bằng photoshop xong thì Cho em hỏi cách truy vấn Img và những đoạn text từ Mysql ra web cuả mình như thế nào.Anh có bài mẫu hay video cụ thể send cho em.Cám ơn

  10. phuc nguyen says:

    anh oi cho em xin pham mem ma anh thiet ke trong bai chuyen pds sang html va css do .thank you anh nhiu

  11. kaitoholme says:

    anh ơi cách dạy của anh là chi tiết nhất trong tất cả những video trên izweb.
    thankyou very much ….

  12. nguyễn duy Vinh says:

    Cho mình hỏi là tạo code HTML mình sử dụng phần mềm gì vậy???(Thông cảm nếu câu hỏi có ngớ ngẩn nhé)

  13. Serven says:

    Cám ơn vì anh đã chia sẻ những gì mọi người đều thắc mắt.
    Em muốn hỏi một câu.
    Em không làm được. lúc anh cắt hình. Bấm ctrl + click sau đó chỉ vào layer và bấm ctrl + c và Ctrl +N em làm không được
    Mong anh chỉ dùm em.
    Tại em thấy cách cắt đó hay và nhanh nữa.
    cám ơn anh

    • Thái Luy says:

      Bạn nhấn Ctrl + click vào layer thumbnail (Cái hình nhỏ nhỏ bên cạnh tên của layer ý). Sau đó mới Ctrl + C và Ctrl + N.
      Cám ơn anh DW, video rất hay.

  14. Shinigamj says:

    Cho mình hỏi,khi cắt nguyên cái logo xong…mà muốn ẩn hết :logo,chữ YOUR COMPANY ,Your slogan here….để lấy cái phông nền đen thì làm sao dzi……?_?

  15. Shinigamj says:

    Cho mình hỏi,khi cắt nguyên cái logo xong…mà muốn ẩn hết :logo,chữ YOUR COMPANY ,Your slogan here….để lấy cái phông nền đen thì làm sao dzi.

  16. tiến says:

    cảm ơn anh rất nhiều , bài viết bỏ ích lắm

  17. hitjoker1 says:

    Anh ơi cho em hỏi cái phần mềm soát lỗi HTML mà anh nói trong bài xuất từ file PSD sang HTML là gì ạh?

  18. hitjoker1 says:

    Anh ơi cho em hỏi phần mềm gì soát lỗi HTML mà trong bài từ file PSD xuất sang HTML anh nói đó? hi…hi em nghe không rõ

    • tiem says:

      Để kiểm soát lỗi html bạn dùng totalvalidator hoặc html validator , nó là plugin trong firefox đó bạn!

1 2
  1. BB
  2. BB
  3. BB

arrow

Lưu ý khi post comment:

  • Không "bóc tem" topic
  • Dùng lời lẽ có văn hoá và lịch sự
  • Xem trang FAQs trước khi hỏi
  • Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a>
  • Đặt code trong thẻ [php],[html],[javascript],[css]

Chọn kiểu gõ: Tự động TELEX VNI Tắt