设计效果图–》切图+制作静态html模板–》嵌套至CMS,这些是一般的网站制作步骤流程,不过切图虽然是最简单的那一步,但其中也会有很多技巧的,根据以往的经验我总结了以下几点:
总体上,把握一个原则,能用css写的,坚决不要用图片。想必大家都知道,首页如果放有很多图片的话,那么网站打开的速度就会很慢,因为图片多,需要下载的文件体积就增大,还有每一个图片下载都会对服务器有一个请求的,增大了浏览器与服务端的交互次数,如果能把纯色的部分用css来写,而不因为省事直接切图,就会极大提高网站的运行效率,我最早开始学习制作网站时,就想当然的认为怎么样能加快制作速度就怎么来,于是把一个导航条的背景直接切成图片,后来老板看到我写的html代码,告诉我不能这么干,用div定义好宽和高设置背景色和边框,一行代码就搞定。如果遇到有渐变色的背景,可以沿着与渐变色相同方向切一个像素的条纹,用css中background的repeat-x或repeat-y来自动填充。
对于有圆角的导航条图片,可以将两边的圆角部分单独切出来,中间如果有渐变色,也是只切一个像素的条纹,切出来的三个条纹可以合并到一张图片里(上、中、下),使网页中使用的时候用css中的positon属性来定位图片出现的位置。
其实呢,切割效果图的过程对于图片的保存格式也是很有讲究的,一般来讲,用图像工具(如photoshop)制作的色彩绚丽的按钮或图标一般都存成png格式,而用相机拍摄的风景或人物、物体图像多用jpg格式保存,gif一般用来存储含有简单动画效果的图像,另外需要注意一点的是,如果图片中使用了透明效果,要存储成png-8的格式,png的其他格式要么不支持透明,要么保存时文件要大很多,png-8是”性价比”最高的。
其实有很多命名图片都是有规则而无意义的,如,index_02_01、 index_01、index_02这些,不要觉得图片命名的重要性不大,一定要养成一个良好的习惯,把切好图片的命名也看重一些,最好做到见名知意。
在进行网站改版和网站维护的时候,如果要更换某些网站图片,就需要一个一个从浏览器中右键查看图片地址,记下每一个长长的没有规律的图片名称,这会让技术人员十分崩溃(也可能就是你自己),所以,在保存图片时就给它写上有意义的名字是很必要的。
以上是个人总结的在做网站时的一些切图技巧,希望对广大菜鸟级的朋友给点怎么样做网站的一些建议,或者是对于想从事网页设计的朋友的一些提示吧,欢迎朋友们来相互学习交流!