一般的网站制作步调年夜体上为：设计效果图–》切图+制作静态html模板–》嵌套至CMS，其中，切图虽然是很简单的一个步调，但其中也有很多技能，以下是我小我总结出来的几点。

总体上，掌控一个原则，能用css写的，果断不要用图片。经验奉告我们，首页图片很多的网站打开会很慢，一是因为图片多，需要下载的文件体积就增年夜，二是每一个图片下载城市对办事器有一个请求，增年夜了阅读器与办事真个交互次数，如果能把纯色的部分用css来写，而不因为省事直接切图，就会极年夜提高网站的运行效率，我最早起头学习制作网站时，就想当然的认为怎么样能加快制作速度就怎么来，于是把一个导航条的布景直接切成图片，后来老板看到我写的html代码，奉告我不克不及这么干，用div定义好宽和高设置布风景和边框，一行代码就弄定。如果遇到有渐变色的布景，可以沿着与渐变色相同标的目的切一个像素的条纹，用css中background的repeat-x或repeat-y来自动填充。

导航栏效果图

对有圆角的导航条图片，可以将双方的圆角部分伶仃切出来，中间如果有渐变色，也是只切一个像素的条纹，切出来的三个条纹可以归并到一张图片里（上、中、下），使网页中使用的时候用css中的positon属性来定位图片呈现的位置。

在切割效果图的过程中，对图片的保存格局也有讲究，一般来讲，用图像东西（如photoshop）制作的色彩绚丽的按钮或图标一般都存成png格局，而用相机拍摄的风光某人物、物体图像多用jpg格局保存，gif一般用来存储含有简单动画效果的图像，别的需要注意一点的是，如果图片中使用了透明效果，要存储成png-8的格局，png的其他格局要么不支持透明，要么保存时文件要年夜很多，png-8是"性价比"最高的。

图标一般用png格局

对用作布景或陪衬效果的颜色较多的图片，保存图片时尽可能从清晰度和图片年夜小中找到一个平衡，既包管图片尽可能小又不失真，这点就要凭小我经验了，因为每小我的标准不合，千万不克不及不压缩图片直接放上去，然后靠width和height来进行限制，这样做是自欺欺人，阅读器会先把年夜图片下载到本地，然后用样式强制将它压缩，显示不单不会更清楚，反而会失真，曾经我就遇到过有个网站首页都打开了，唯有一个局部是个空白的方形，过了好几秒才加载出来一张图片，好奇的下载了这张图片，竟然有2M多……这一点不可是首页切图，在网站的内容上传时最好也要养成杰出的习惯，特别是新闻的配图，现在的相机效果越来越好，拍出来的图片动不动好几兆，一定要对图片尺寸进行措置后再上传，一般措置图片的宽度为500-600像素之间，高度自动等比例便可。

切好图片的命名也要养成杰出的习惯，最好的命名习惯就是见名知意，我见大都网站的图片使用切图东西软件批量切割的，命名很不规范，比如index_01、index_02、index_02_01等有法则但无意义的图片，也许你说图片命名自己的意义其实不是很年夜，因为这个名字只有阅读器加载的时候才会用，可是，对一个扩大性强的网站来讲，在进行改版和维护的时候，如果要改换某些网站图片，就需要一个一个从阅读器中右键查看图片地址，记下每一个长长的没有规律的图片名称，这会让手艺人员十分化体（也可能就是你自己），所以，在保存图片时就给它写上有意义的名字是很需要的。

以上是小我总结的在网站切图时的一些技能，希望对广年夜菜鸟级的或想从事网站制作行业的朋友一些建议，欢迎学习交换！

本文来自自力博客.sunfei ，转载或引用请注明来历。