话说网页设计的PS切图

网页设计的PS切图是把设计图分割成小的网页用的合理的图片。结合CSS样式制作图片到html的过程。

一般我们从网页设计师那得到的都是.PSD文件，里面有几十或者上百个图层（一般会根据内容分好文件夹），有文字有图片，有的只在特殊情况下显示的（比如鼠标划过），这时候就需要根据自己的需要导出不同的图。

切图的时候也会有许多考虑，比如把哪些内容压缩成一张图片，什么时候用透明背景（PNG），什么时候用CSS Sprite（把琐碎的小图比如按钮、logo复制到一张透明背景的图上然后保存为一张图，再用background position去提取。）文字是切成图片，还是复制到HTML里。（一般情况下都不会把文字切成图，除非用到比较特殊的字体或者变形。）等等吗。然后即使是用photoshop保存为web格式导出的图，有时候尺寸也是很大的（特别是PNG），这时要使用一些专业压缩工具进行二次压缩。

当然有些有前端经验的设计师会把切好的图片发给你，这样就可以直接开始写HTML和CSS了，但是我建议还是尽量自己切，掌握熟练的切图技巧也是一个前端应该有的技能。 需要根据需要切出相应图片 然后用Dreamweaver将图片按照网页的要求拼接出来。 图片越小，浏览器加载的速度就快。 像整个背景可以切1px 设置下 with和 hight 就好了 总的来说 图片越小越好 不怕多切。

　　切好图片的命名也要养成良好的习惯，最好的命名习惯就是见名知意，我见多数网站的图片使用切图工具软件批量切割的，命名很不规范，比如 index_01、index_02、index_02_01等有规则但无意义的图片，也许你说图片命名本身的意义并不是很大，因为这个名字只有浏览器加载的时候才会用，但是，对于一个扩展性强的网站来说，在进行改版和维护的时候，如果要更换某些网站图片，就需要一个一个从浏览器中右键查看图片地址，记下每一个长长的没有规律的图片名称，这会让技术人员十分崩溃(也可能就是你自己)，所以，在保存图片时就给它写上有意义的名字是很必要的。

　　以上是个人总结的在网站切图时的一些技巧，希望对广大菜鸟级的或者想从事网站制作行业的朋友一些建议，欢迎学习交流!