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

«

»

67 Comments

( Comment bài này )
  1. Võ Hùng Phi says:

    Chào admin!
    Cho em hỏi trong photoshop làm sao chuyển file PSD sang file CSS được?
    Em xin cảm ơn.
    YM: hplonline88

  2. huong says:

    cam on thay nhieu

  3. Phạm Hồng Tân says:

    Em đã dùng và xem nhiều video hướng dẫn của Anh DW, em thấy các video của anh rất là hay, và kiến thức của anh làm các video này rất pro, cảm ơn anh đã bỏ công ra để chia sẽ kiến thức cho tui em, Ở Việt Nam thì rất ít trang web làm được như vậy, và em cũng có ý định viết các trang web, và em rất thích viết trang web làm bằng các video như của Anh DW, một lần nữa em rất cảm ơn anh và chúc anh luôn vui vẻ, mạnh khỏe để chia sẽ nhiều kiến thức về web cho chúng em và mọi người,

  4. coit says:

    a ơi e chỉ có thời gian 1 tuần để làm web.web pải đầy đủ: html,css,javascript,php và mysql (thầy giáo chúng e giao bài tập lớn).a có thể khuyên e nên làm sao trong 1 tuần có thể làm xong ko

    • nhtera says:

      Không biết bài tập lớn của bạn thế nào chứ cứ có đủ các thành phần là được thì đâu có khó khăn gì . Ví dụ làm trang blog mini cho đăng kí, đăng nhập, post bài vậy thôi
      Design giao diện ~> css + xHTML -> khoảng 1 ngày cho thoải mái , sau đó code javascript validate form + trang trí thêm hiệu ứng thì tùy. sau đó là giai đoạn DB và php. Hì chỉ có lòng quyết tâm và chăm chỉ là làm được bạn ah.
      Mà không thầy nào lại bắt làm 1 tuần đâu bạn chỉ có thầy giao mà không làm đến gần hạn mới chạy cuống đi làm thôi :D

  5. Các bài viết đều rất hay,bổ ích.Xin cảm ơn các anh :)

  6. Thắng says:

    Trước kia có down Source Code của Tut này về, nay up lại cho mọi người. Cảm ơn anh DW vì những tut thật là hữu ích.

    http://www.mediafire.com/?87rh24rawrbq1op
    http://www.mediafire.com/?5gfza5uj49oe8dn

  7. hien says:

    Qua tuyet ,ngoi hoc cai tutorial cua anh qua hay.

  8. cuong says:

    Anh cho em hỏi trong PTS có phần Save for web & Devices, anh có thể giải thích và hướng dẫn cho em biết được ko ạ.

    • Spikeky says:

      Cái này đơn giản mà bạn ! Nó dùng để save hình ảnh định dạng chuẩn cho Web
      Vd như : ” images.png ” or ” images.gif “

  9. cuong says:

    Cám ơn anh rất nhiều về tutorials này, chúc anh nhiều sức khỏe để xuất ra nhiều video còn hay hơn thế này nữa.

  10. Hoàng Dung says:

    Cám ơn thầy DW đã bỏ rất nhiều công sức và tâm huyết cho những người mới học như em.^^
    Góp ý: em thấy thầy cắt PSD, những bg còn hơi lớn, nếu cắt nhỏ hơn thì trang web sẽ lại nhẹ hơn nữa.

  11. toctem says:

    Cám ơn DW nhìu nhìu các video hướng dẫn rất hấp dẫn dễ hiểu và lại còn hài hước nữa.
    Chúc trang web ngày càng thành công!

  12. Em download phần mềm VLC Player về xem là có hình và tiếng ngay. Đây là phần mềm miễn phí và sử dụng rất tốt.

  13. Hiệp Trịnh says:

    anh ơi em download video về chỉ có tiếng ko có hình là sao nhỉ?

  14. Trung Thông says:

    izwebz là một người bạn tuyệt vời của tôi, một ngừoi thầy tuyệt hảo, cảm ơn admin cả ngàn lần.

  15. Đã update lại link trên bài viết. Rất cảm ơn bạn. Nhìn gần giống phiên bản cũ :D

  16. Hoàng says:

    Ai có PSD và Source Code của bài này thì cho xin với. làm ơn gửi vào mail giúp với. Thanks.

  17. naruto says:

    Vẫn còn một cách khác , mọi người đừng buồn mà, không có cái tốt nhất bạn có thể dùng cái bạn đang có theo cách tốt nhất , mình nghĩ là ổn mà
    http://www.izwebz.com/wp-content/uploads/2009/08/demo/business/php/tutorials.php
    vẫn còn đây bạn ạ,

  18. duocvang9999 says:

    éc híc híc T_T . hứa với nhỏ bạn cùng lớp là cho nó cái PSD này rồi, mà em cũng đang cần nữa. Nhưng cám ơn anh nhiều lắm!

  19. Ẹc, Xem ai có download từ trước thì share lại nhỉ? hôm nọ anh restore lại máy cũng mất tiêu cái file PSD rồi. Thế mới cùi.

  20. duocvang9999 says:

    Anh DW cho em xin cai PSD và Source Code của bài này với. link này: Business Style PSD và Source Code Anh đưa lên bị lỗi rồi. Em đang rất cần, mong anh giúp đỡ. Em cám ơn anh nhiều!

  21. duocvang9999 says:

    Bác DW cho em xin cai PSD và Source Codecủa trang này! link trên bị die rồi bác ah! thanks!

  22. Raito says:

    http://www.izwebz.com/wp-content/uploads/2009/08/demo/business/business.rar


    Hình như link này bị die anh ạ, cho em xin cái mirror được không anh. Rất cám ơn anh! :D

  23. khanhlien says:

    cám ơn Demon warlock nhiều mong anh có nhiều video hay hơn nữa chúc anh thành công

  24. TieuLong says:

    Tuyệt quá vô tình biết đến izwebz. giúp em học được rất nhiều điều bổ ích. cám ơn các anh nhiều lắm đặc biệt là anh Demon warlock.

  25. Forevernone says:

    Rất cám ơn bài giảng của anh.
    Thật vui vì đc biết đến trang web này:)

  26. Câu hỏi của em rất hay. Thực ra khi anh viết là PSD sang xHTML hoặc PSD sang HTML thì cũng không có gì khác nhau bởi vì anh sử dụng xHTML hết.

    Nhưng có sự khác biệt giữa HTML và xHTML. Nói ngắn gọn thì xHTML quy luật của nó nghiêm khắc hơn khi viết code HTML. Em có thể tìm thêm thông tin về xHTML trên trang web nhé.

  27. Xuanlanbui says:

    Tình cờ em vào trang web này và tìm đc “1 người thầy”, cám ơn anh admin rất nhiều. Những tut của anh rất dễ hiểu và dễ nhớ.
    Em có 1 thắc mắc nhờ anh giải đáp dùm, trong đây em thấy có phần xuât PSD sang XHTML và phần xuât PSD sang HTML. Em không hiều giữa 2 phần này nó khác nhau như thế nào, nhờ anh Admin giải thích dùm em? Thanks anh nhiều

  28. lehongphat says:

    Cam on bam. tut rất hay.

  29. nguyen thanh trung says:

    minh dong y voi Soncoi .ban hay lam 1 video tao layout bang photoshop cho anh em thuong thuc di.da lam phai lam cho den cung chu :d

  30. Soncoi says:

    Em chào anh ạ. Em rất thích Design giao diện website bằng Photoshop nhưng em mới làm quen nên cũng chưa biết được nhiều.Anh có thể quay 1 Tut hướng dẫn layout website bằng Photoshop được không ạ. Em cảm ơn anh nhiều. Những Tut anh làm hay quá !!!

    • Phùng Bá Hữu says:

      em chào anh làm các video
      em muốn hỏi trình soạn thảo anh dùng là chương trình gì ạ. em nghe không rõ nên muốn hỏi lại. em thấy nó rất hay

      • Phùng Bá Hữu says:

        anh có thể chỉ cho em địa chỉ download không ạ em có dow mấy bản nhưng nó không giống bản anh dùng:((

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