4830 fans
1036 reader
122 followers

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

Publish by: Demon Warlock
In category: CSS/HTML
92 comments

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

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á.

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ứ ạ?
light108179

à mail của e: [email protected]
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

Izwebz store

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.