网页效果图设计新思路

在网页设计的过程中， 效果图一般总是通过photoshop做出来， 多则几十过百的图层以及各种PS效果的确是把网页的样式效果做出来了， 并且也容易分块切图或者直接在其中取到某些图片素材。

但在当前响应式网站的设计并且内容都使用流式布局的时候， 要对每种情况都对应着去做一张PS效果图， 工程量巨大， 并且显得不太现实。 另外当你需要修改网页中某个元素的大小或背景的时候， 手动对一张张PS效果图作修改简直是一个噩梦。

这引发了对设计流程以及使用工具的新思考。 能否在贴近并尽量覆盖各种真实使用环境的情况下， 又易于修改？ 答案是抛弃原有的在PS效果图制作方法， 转而使用HTML以及CSS等构建真实的基础网页效果， 最终以截图的形式获得效果图展示给客户。 客户对某个地方提出修改意见是， 你回去执行改动也会变得很轻松， 或许只需要在CSS中修改一两行代码， 若是使用less的话， 有时只需改一个变量值， 就能达到想要的效果。 而这些， 在传统Photoshop效果图的修改中， 不可想象。

或许你会抨击这不就将样式设计与前端代码构建职能混淆了吗？ 其实HTML,CSS等只是制作效果图的工具， 网站效果轮廓前后当然是差不多， 但这并不是最终的前端代码， 仅用作基本的效果展示。 最终网站前端实现的代码还会跟后台输出浏览器兼容等有关， 可以说它们完全是两码事。

这给网页设计者更高的要求， 脱离Photoshop去学习基本的前端语言。 新时代下， 网页设计不再可能像平面设计那样的专职于图形图像， 还要结合Web技术， 来使设计更贴近真实， 也减少不必要的重复劳动。 可能在固定布局的设计中， Photoshop依然是最好的工具， 但流式布局响应式设计的浪潮涌来， 能突破传统结合Web技术来做设计， 才能走在前端， 赢在未来。