关于如何将网页效果图制作成网页

rokeyzki · 2015-12-25T08:27:03Z

问题作为 web 码农，长期写服务端的代码，出于工作需要，也大量接触前端的工作，但是基本是写 JavaScript ，用于实现页面的动态交互效果以及与后端的各种配合。个人一直很好奇，前端们是如何将设计师制作出来的网页设计稿（如 psd 效果图）转化为 HTML+CSS 代码的呢？讨论细节转化方式不包括直接将效果图通过 PS 等软件直接切图导出为网页格式，这种工作就像切图仔一样，代码难维护，也不容易转为 Responsive Design 以适配各种终端，想跟各位前端老师学学有没有更规范更优雅的制作方式，感谢大家不吝赐教有这方面工作经验的前端，谈一谈在进行页面制作时的大致流程在制作过程中，与设计师配合有哪些需要注意的地方学习这方面知识，有没有什么不错的资源推荐(书籍、视频均可)

This topic created in 3805 days ago, the information mentioned may be changed or developed.

问题

作为 web 码农，长期写服务端的代码，出于工作需要，也大量接触前端的工作，但是基本是写 JavaScript ，用于实现页面的动态交互效果以及与后端的各种配合。
个人一直很好奇，前端们是如何将设计师制作出来的网页设计稿（如 psd 效果图）转化为 HTML+CSS 代码的呢？

讨论细节

转化方式不包括直接将效果图通过 PS 等软件直接切图导出为网页格式，这种工作就像切图仔一样，代码难维护，也不容易转为 Responsive Design 以适配各种终端，想跟各位前端老师学学有没有更规范更优雅的制作方式，感谢大家不吝赐教
有这方面工作经验的前端，谈一谈在进行页面制作时的大致流程
在制作过程中，与设计师配合有哪些需要注意的地方
学习这方面知识，有没有什么不错的资源推荐(书籍、视频均可)

网页

制作

代码

切图仔

2 replies • 2015-12-25 17:15:32 +08:00

username10086

Dec 25, 2015

第一次听别人说 “切图仔”。
我觉得你要是做响应式布局的话，至少你要跟设计师讨论和交流主体框架，再让他设计（至少两套 UI ）。
就凭一个 web 网页设计图你就能自己切出 “ Responsive Design 以适配各种终端 "。
是不是响应式关键还是你们的风格定位，不单单是切图切出来的吧。

rokeyzki

Dec 25, 2015

@username10086

“转化方式不包括直接将效果图通过 PS 等软件直接切图导出为网页格式，这种工作就像切图仔一样”：我意思是单纯依靠软件来做划线切图导出 HTML ，这种工作就像切图仔一样。

“代码难维护，也不容易转为 Responsive Design 以适配各种终端”：我意思是，单纯依靠切图软件导出的文件，里面的代码根本不具维护性和可读性，无论从语义化的角度还是方便前端后期 Responsive Design 重构都不友好，我提这个的初衷是考虑如何让前端与设计之间的配合更加效率。

重点在于前端如何通过设计图写出方便维护、可模块化、甚至可复用的页面代码，重点在于制作的流程方式，而不是单单依靠切图，问题的重点不在于是不是响应式，更不是讨论风格定位。