• fans
  • 1036 reader
  • followers
Từ PSD sang HTML (phần 1/5)
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 18:56 phút
  • File size: 73.32 MB
  • Yêu cầu: Căn bản HTML & CSS và Photoshop
Có 8 bài viết trong series Từ PSD sang HTML (series 2009)Hiển thị

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.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Thanh Tâm Trân

    hay quá ..em cám ơn anh ^^

  • Hùng Saker

    Kiến thức bổ ích nhưng đúng là không phải cái gì cũng dễ đàng, mình đã phải xem đi xem lại clip này không biết bao nhiêu lần mới thấy hiểu được :) Thank Izwebz nhiều lắm.

  • Bay Thật Xa

    Mình mới sưu tầm thêm được một số cách chuyển từ PSD sang Html chia sẽ để các bạn tham khảo nek
    http://hocweb.com.vn/psd-thanh-html-giao-dien-six-studios/
    http://hocweb.com.vn/psd-thanh-html-css-giao-dien-naturetour/

  • Ngọc Duy

    Anh Warlock cho em hỏi: Trong video phần 3/5 từ PSD sang HTML, anh dùng lệnh gì để tự động sinh ra code CSS vậy? anh giúp em với. Cảm ơn anh rất nhiều!

  • fhgfh

    gfhfhfh

  • Pah

    hi anh, kiến thức a chia sẻ thật sự rất bổ ích, e có một vài câu hỏi muốn hỏi a, hiện tại e đang là thiết kế đồ họa, và thực tế môi trường tuyển dụng hiện nay tại VN đang có thêm một số yêu cầu về html, css, web. Theo a, một người làm thiết kế đồ họa có nên học hỏi thêm về kiến thức này, vì thật sự e yếu ở mảng lập trình,.Thứ 2 là có khó khăn nào trong việc dung nạp kiến thức web, html,css bên cạnh kiến thức đồ họa k ạ. Thanks a rất nhiều.

  • phuongthengocdtt

    Em thử test trang này trên ie, thì hỏng trang. thank’s!

  • Nguyễn Sơn

    Thân chào anh DW! Làm phiền anh chút. Em viết code css như anh nhưng drop menu trong phần mainNav bị lỗi hiển thị sai trên Firefox. và chỉ hiển thị đúng trên IE. Các li sub không tràn xuống theo display: block. mà chạy ngang thành 1 dòng luôn. Nhờ anh chỉ giúp. Thanks anh DW.

    • Sn0w

      bạn post code lên đây thử xem, thường thì firefox là dễ chịu với css nhất mà

  • nhinhi

    hay qua ,uoc gi minh biet nhieu nhu vay thi minh di xin viec lam that de dang roi

  • nhinhi

    hjhjhj rat hay cam on a

  • An Nguyen Thien

    thanks anh DW ! video rat hay

  • elnino

    Ở đoạn đầu làm việc với logo anh có nói là ẩn hết chữ với logo đi nhưng e chưa biết làm thế nào??e đưa ảnh vào pts rồi cắt ra nhưng không hiện layout ở bên cửa sổ để ẩn cái layout chữ vs logo đấy đc, em mới học pts nên còn gà mong a trả lời giúp e.

    • BK Pro

      bạn tắt cái bg logo đi là đk nền trong suốt

  • CoBe RungXanh

    Ra phần vô HTML dùng thẻ gắn vô di anh…đang đợiiiiiiiiii anhhhhhhhhh

  • hanly

    Anh Demon Warlock cho hỏi có cách nào để xuất 1 trang web làm từ wordpress sang web tỉnh bình thường được không???
    Thanks a

  • light108179

    A có thể cho e hỏi 1 chút, a dùng cái gì mà nó tự động gõ ra code của mình vậy, và video e nhìn ko đk rõ a dùng phần mềm gì cho phần 3/5 này vậy a, hình như cũng ko phải chạy trên web chứ ạ?

    • Ngọc Duy

      Bạn tìm ra cách tự sinh ra code CSS trong phần 3/5 trong video của anh Warlock chưa giúp mình với? cảm ơn bạn nhiều!

  • light108179

    à mail của e: light108179@gmail.com

  • cris

    hay! tks anh nhiều

  • Thành Vũ

    Anh bỏ nền cho cái logo như thế nào vậy? Trong video em ko thấy mong anh giúp đỡ! E cảm ơn anh nhiều!

    • light108179

      Bạn lưu photoshop bằng đuôi PNG là đk mà

  • http://www.facebook.com/killerIT Ngô Xuân Hà

    Chào anh Demon Warlock em đang học thiết kế web bằng visual web developer 2005, em có một thắc mắc là nếu dùng phần mềm này thì lúc xuất cắt file PSD sang HTML thì có gì khác so với sử dụng CSS không ạ, vì em không có học CSS. Và anh có thể nói rõ hơn về nguyên tắc cắt file PSD trong PTS không ạ?
    Cảm ơn anh!!!

  • linh dan

    Cảm ơn DW và izwebz! Bài hướng dẫn rất hay và bổ ích.

  • Q.Huy

    Rất hay và bổ ích. Cảm ơn anh nhiều!

  • Bảo Trung

    anh hướng dẫn rất tận tình và chi tiết. em cảm ơn anh rất nhiều

  • manh

    Cho e hỏi, sau khi nhấn enter để crop rồi nhấn tổ hợp phím gì để save nó?

    • ShinQ

      ctrl+alt+shift+s để nó copy và save lại

  • Nguyen Anh Ky

    Chào anh! E dang can hoc cach de chuyen tu psd sang html va nhung video nay that su rat bo ich voi e. E da down PSD và Source Code o lick tren, nhung khi down ve e ko thay co source code, a cho e xin link de down source code cua bai huong dan cua anh duoc chu. Thank anh nhieu!

  • http://khôngcó Ngô Đức Long

    anh ơi cho em hỏi công cụ trên firefox hỗ trợ viết css là ji với. Em viết bằng cái toàn viết xong rồi chạy chứ ko đc hiện thị luôn như của anh. Có link down luôn thì tốt cám ơn anh nhiều.

    • Đào Văn Vinh

      addon web developer bạn ạ!

      Link:

      https://addons.mozilla.org/en-US/firefox/addon/web-developer/
      
  • Triệu Khắc Hòa

    cám ơn anh DW và izwebz từ khi học trên đây em mới hiểu ra đc nhiều điều mà trong sách vở , giảng viên ko nhắc tới . Em hi vọng izwebz sẽ phát triển mạnh hơn nữa để anh em có thể vào học hỏi . thank !

  • http://openhit.co.cc LeeHuy

    hi ! mọi người.
    anh DW và mọi người cho em hỏi. Em đang thắc mắc, nếu em thiết kế giao diện website bằng Photoshop thì phần Content của em nếu nội dung bên trong Content dài quá, thì nó có bị tràn ra ngoài không vậy anh, hay là phần Content sẽ tự động co giãn ra theo bài viết của mình vậy ?

    Mong anh DW và mọi người giúp em . Thanks very much

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives