一般的网站制作步骤大体上为：设计效果图–》切图+制作静态html模板–》嵌套至CMS，其中，切图虽然是很简单的一个步骤，但其中也有很多技巧，以下是我个人总结出来的几点。
总体上，把握一个原则，能用css写的，坚决不要用图片。经验告诉我们，首页图片很多的网站打开会很慢，一是因为图片多，需要下载的文件体积就增大，二是每一个图片下载都会对服务器有一个请求，增大了浏览器与服务端的交互次数，如果能把纯色的部分用css来写，而不因为省事直接切图，就会极大提高网站的运行效率，我最早开始学习制作网站时，就想当然的认为怎么样能加快制作速度就怎么来，于是把一个导航条的背景直接切成图片，后来老板看到我写的html代码，告诉我不能这么干，用div定义好宽和高设置背景色和边框，一行代码就搞定。如果遇到有渐变色的背景，可以沿着与渐变色相同方向切一个像素的条纹，用css中background的repeat-x或repeat-y来自动填充。
导航栏效果图
对于有圆角的导航条图片，可以将两边的圆角部分单独切出来，中间如果有渐变色，也是只切一个像素的条纹，切出来的三个条纹可以合并到一张图片里（上、中、下），使网页中使用的时候用css中的positon属性来定位图片出现的位置。
在切割效果图的过程中，对于图片的保存格式也有讲究，一般来说，用图像工具（如photoshop）制作的色彩绚丽的按钮或图标一般都存成png格式，而用相机拍摄的风景或人物、物体图像多用jpg格式保存，gif一般用来存储含有简单动画效果的图像，另外需要注意一点的是，如果图片中使用了透明效果，要存储成png-8的格式，png的其他格式要么不支持透明，要么保存时文件要大很多，png-8是”性价比”最高的。
图标一般用png格式
评论