Code thuần và Cắt file psd ra html , css

#1

Hi mọi người , mình cũng chỉ làm một Beginner trên con đường phát triển website . Mình đã từng học html và css để phục vụ cho phần font-end rồi . Bây giờ mình đang học php và mysql… nhưng khi mình học cái php và mysql thì mình lại quên mất một phần của html và css trí nhớ mình kém Không biết mọi người có phương pháp nào không…
Còn một việc nữa , mình có hỏi ông bạn về việc thiết kế font-end cho website , ông đó bảo là dùng .psd cắt ra thành html , css cho nó lên tay … Không biết là những người thiết kế website họ có hay dùng .psd để cắt không , hay họ code thuần hết tất cả ạ??
Thanks mọi người đã đọc :smiley:

#2

Chắc bạn hiểu sai ý nghĩa của việc cắt PSD ở đây rồi.

Ban đầu designer sẽ cung cấp cho frontend dev 1 file PSD hoặc thằng điên nào làm ăn tắc trách thi nó chỉ cho mình file PNG/JPG thôi :laughing:

Nhiệm vụ của bạn là nhìn vào cái bản design đó, hình dung ra trong đầu là với cái design này chúng ta cần phải phân chia khối của cái trang như thế nào, để có thể biểu diễn cái bản design đó dưới dạng HTML (bằng các thẻ div,…)

Tiếp đến là dùng Photoshop để đo đạc các thành phần trong bản design tương ứng với các khối cấu trúc mà mình đã hình dung ra.

Khúc nào chỉ có màu mè hoặc text bình thường thì có thể code thuần bằng HTML và làm cho nó đẹp hơn bằng CSS.

Khúc nào cần dùng hình ảnh thì phải cắt hình ảnh bỏ vào, ví dụ như mấy cái icon chẳng hạn.

Làm công việc này nhiều thì bạn sẽ phát triển 2 kĩ năng chính:

  • Kĩ năng làm việc với HTML/CSS
  • Kĩ năng phân tích bản design để dựng nên kiến trúc khối phù hợp với đặc thù của HTML

Và đây là 2 kĩ năng quan trọng nhất đối với 1 frontend developer. Chớ ko phải là kĩ năng đi search template và sửa màu, thay hình.

6 Likes
#3

Cắt PSD thành HTML,CSS nghĩa là code giao diện web bằng HTML/CSS dựa trên PSD.

Cắt không phải là dùng dao kéo, hay dụng cụ để cắt…:))

Con ngựa đá đá con ngựa đá :v

3 Likes
#4

Vậy cái file PSD có công dụng là đo các thành phần trong bản design còn việc code cái bố cục cho website là phải tự mình code thuần ra phải không anh :smiley:

#5

Cảm ơn anh đã giúp em ! :smiley:

#6

Có thể nói là như vậy :smiley:

#7

Cảm ơn anh đã giải đáp thắc mắc cho em :smiley:

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?