Thiết kế giao diện website bằng photoshop có ưu và nhược điểm gì so với phương pháp thiết kế bằng html và css?

Nguyen_Duc_Hoang1 · December 14, 2021, 9:48am

Theo các bác thiết kế giao diện website bằng photoshop có ưu và nhược điểm gì so với phương pháp thiết kế bằng html và css? E bối rối quá không biết lên đi theo hướng nào

htwap · March 25, 2016, 10:57pm

nếu e không nhầm thì Photoshop là ở bước Design, còn qua HTML CSS thì nó là bước Implement rồi.

Ta_Nh_t · March 26, 2016, 12:05am

Nếu bạn đi theo hướng design thì học photoshop web, còn coder(fornt-end) mình nghĩ chỉ cần html, css, với đôi khi biết cắt layout từ photoshop là ổn.
Thường thì bên design thiết kế sau đó chuyển qua bên coder(front-end) chuyển qua html, css.
Lên search keyword: PSD to HTML sẽ hướng dẫn cách chuyển.

Nguyen_Duc_Hoang1 · March 26, 2016, 2:27am

vâng e thấy họ thiết kế bằng DW sau đó chỉnh sửa thôi. CÒn code bàng HTML là kiểu truyền thống . E hoang mang quá

Shaorinmy · March 26, 2016, 3:51am

mình đang dùng adobe muse. Thiết kế web nó cũng từ PS với AI ấy. Xuất ra giao diện web có hiệu ứng luôn. Cũng đang phân vân giống bạn ko biết có nên tiếp tục thử sức với nó ko hay về thiết kế lại bằng html vs css

superthin · December 14, 2021, 10:02am

Hỏi câu hỏi này chứng tỏ chẳng hiểu gì về thiết kế web hết. Bạn nên nhớ HTML và Photoshop không phải là hai công cụ thay thế cho nhau trong việc làm web, không phải có cái này thì không có cái kia/ không nên dùng cái kia và ngược lại, kiểu như bữa cơm thì có rau không có nghĩa là không ăn thịt, hoặc có thịt thì bỏ rau ra.

Để giải thích theo kiểu so sánh bạn dễ hiểu. Mình so sánh thiết kế web (thực ra gọi là xây dựng website thì đúng hơn) với việc xây một ngôi nhà bạn sẽ hiểu.

Vì định dạng code mình không rành nên viết theo hướng bạn lấy mục 1 ở A so sánh với 1 ở B; và 2 ở A so với 2 ở B, lần lượt cho đến hết.

A. Xây dựng một căn nhà (mình chỉ tóm gọi mấy công đoạn chính thôi):

Tạo bản vẽ thiết kế (vẽ lập lăng)
Làm móng
Xây thô
Trang trí nội thất, ngoại thất.

B. Thiết kế website:

Làm sketch cho một website, còn gọi là wireframe
Chuyển wireframe vào Photoshop hoặc Illustrator hoặc phần mềm đồ hoạ khác để làm nên diện mạo trang web.
Xắt mảnh file đồ hoạ ở bước 2 dựa trên wireframe của bước 1
Dựng HTML + CSS + JavaScript lên cái khung được tạo ra ở bước 1 rồi nhét các mảnh ở bước 3 vào để ra một website hoàn chỉnh.

Đó là mình đang bàn về web tĩnh hoàn toàn, nghĩa là chỉ vào đọc chơi không hỗ trợ mấy thứ như comment, gửi bài này nọ vì lúc đó ngoài HTML + CSS + JavaScript thì còn có cái server-side script dùng để xử lý này nọ, phức tạp không bàn ở “thiết kế web”.

Kết luận: với website nhỏ, ít phức tạp về đồ hoạ thì người ta vẽ đồ hoạ thiết kế web “trong đầu” và họ dựng HTML, CSS, JavaScript rồi nhét các mảnh “đồ hoạ” vào luôn.

Nói chung là web sẽ đơn giản, trông xâu xấu thôi. Web có giao diện đẹp lung linh, phức tạp (như web về Studio áo cưới, nhà hàng, khách sạn, du lịch,… chẳng hạn) mà không dùng đến phần mềm xử lý đồ hoạ thì mình thấy người làm web đó có lẽ là… thiên tài.

Với Web phức tạp, người ta sẽ phải là một nhóm làm, chia các khâu trên ra để chuyên nghiệp hoá, chuyên môn hoá vì hiếm ai có ba đầu sáu tay để làm mọi thứ.

Nguyen_Duc_Hoang1 · March 26, 2016, 5:07am

Bạn hình như không hiểu câu hỏi của mình nhỉ. Mình đang hỏi là thiết kế web bằng phần mềm dreamweaver và photoshop theo cách tạo các layer sau đó xuất ra định dạng html hoặc dựa theo bản thiết kế và code html và css bình thường. Ưu nhược điểm của từng cách. Bạn giải thích xây móng với làm nhà gì ở đây vậy?

Nguyen_Duc_Hoang1 · March 26, 2016, 5:05am

@Shaorinmy Mình thấy họ cũng hay dùng cách này bạn ah. Sau đó chỉ chỉnh sửa lại code một chút thôi. Nếu thành thạo về photoshop thì ngon bác ah Kéo thả phân vùng cực dễ và nhanh

superthin · December 14, 2021, 10:07am

Bạn đọc lại câu hỏi ban đầu bạn đi, chữ Dreamweaver ở đâu ra? Mạch nghĩ của bạn những không viết ra, ai biết? Có lẽ mình dừng ở đây vì xem ra bạn đang không rõ bạn hỏi gì, tranh luận mất công. Với 4 bước như mình nêu, bạn muốn ưu điểm/ nhược điểm gì cũng được, nhưng mà bạn làm nhà xong mới đi làm móng thì có lẽ ưu điểm đó là bạn thích chứ mình không hình dung nổi.

Còn nếu bạn đã thêm DreamWeaver vào rồi thì mình cũng giải thích luôn: DreamWeaver là công cụ giúp bạn dễ dàng nhét các khối hình ảnh đồ hoạ được xắt ra từ Photoshop hơn, chứ nó không thể thay thế Photoshop được. Có rất nhiều người không dùng đến DreamWeaver họ vẫn làm được trang web, nhưng gần như không có ai làm web mà không dùng đến Photoshop hoặc phần mềm có chức năng tương tự Photoshop như GIMP, Corel PaintShop Pro, PhotoFiltre…

Việc ngẫu hứng bắt tay vào làm web không theo 4 bước mình kể thì mình không bàn, cái kiểu mà bật DreamWeaver lên rồi tạo ra các table (như ngày xưa), hoặc DIV (các những năm gần đây) rồi xong mới đi kiếm mấy mảnh đồ hoạ nhét vào hoặc mở ra một template có sẵn đâu đó (hay nhái theo một web đang có sẵn/ save nó về) và chỉnh chọc thì mình cũng không kể vào đây, vì cách làm ấy chơi chơi, tọc tạch thử nghiệm này nọ là chính chứ theo cách ấy làm cho khách hàng rất dễ bị không hoàn thành dự án hoặc ra một website mà tự nhìn vào thấy xấu hổ (nếu không thấy xấu hổ thì là nhận thức kém/ tham lam/ lừa đảo/ chỉ muốn kiếm tiền theo kiểu cứ làm bừa).

dqh · March 26, 2016, 5:36am

Nếu bạn muốn biết thiết kế web cần những gì thì nó bao gồm:

Một ý tưởng hay
Mô phỏng lên giấy hoặc note
Bố cục và màu sắc

Tiếp theo là công đoạn thực hiện nó ra sản phẩm:

Dựng mẫu dựa trên Photoshop (khách xem và dễ tùy biến)
Dùng Ilutrator để vẽ các chi tiết vector, logo cạnh xuất ra svg
Dùng Dreamwave để chuyển tất cả mẫu trên thành HTML, CSS và JS (nếu cần)
Kiểm tra và sửa lỗi.

Sau đó là tới công đoạn của backend rồi, mình không đề cập đến
Tuy nhiên các bước trên có thể thay đổi hoặc thay thế tùy vào mỗi Designer, không có gì là nguyên tắc và bắt buộc cả nó chỉ là các bước mà nhiều người áp dụng để làm việc hiệu quả

htwap · March 26, 2016, 6:04am

cái này chắc là a đang hiểu sai ý của a kia rồi ạ.
a ấy đang không khuyến khích “thiết kế web” trực tiếp bằng HTML CSS mà khuyên nên thiết kế photoshop rồi cắt HTML CSS đấy chứ ạ.

Hình như 2 “bạn” mà a nói đến lại là 1 người ạ

Cong_Nhuan_Nguyen · March 26, 2016, 3:24pm

Mình đang đụng vấn đề này, đang thực tập các bác ạ. sếp đưa cho file psd photoshop. nhiệm vụ là nhìn vào đó làm sao xuất ra file htm + hardcore dữ liệu bằng java script + 1 vài sự kiện click bằng jquery !!! hổ trợ tối thiểu độ phân giải 1024 x 768. Đấy vậy chắc bác chủ topic cũng hình dung được mức độ thực tế cho công việc ^^.Cái quan trọng là không được sử dụng bootstrap cơ. code toàn bộ bằng html + css thuần chủ topic ạ. Điểm mạnh của việc code thuần html + css là project lớn đôi khi cần phải tận dụng khả năng code thuần xử lí vài lỗi phức tạp. còn vụ làm web bằng photoshop thì thật sự mình không biết là làm như thế nào. có bác nào biết public cho anh em thêm kiến thức mới cũng hay ạ