设计牛人如何处理网站上的图片的

伟创科技 / 2013/6/20 7:31:46

[核心提示] 首先要说明一下，本文并不适合网站设计初学者阅读，因为洛阳网络公司【伟创】原则上不会在这里向大家传递任何技术手法，我们只是分享经验。

首先要说明一下，本文并不适合网站设计初学者阅读，因为洛阳网络公司【伟创】原则上不会在这里向大家传递任何技术手法，我们只是分享经验。本文不会告诉大家如何去设计网站图片才更加漂亮，而是要告诉大家网站上的图片要如何去处理。例如：如何尽量减少网站上的图片、图片的格式控制以及网站上图片如何命名。对于已经有一些技术基础的朋友，本文会告诉你一些网站建设公司内部的手法，有可能和学校里学到的不一样，却更加实用，让你更加接近网站设计高手的水平。
　　网站量身定制的开发步骤是：PS设计效果图、切图、DIV+CSS、程序。对于图片的应用，最为关键的就是在切图和DIV+CSS这两个步骤。首先要告诉大家一个原则：能不用图片的地方就不要用图片，能用小图片的地方绝对不用大图片。例如那些一整块区域都是同一个颜色的时候，我们就可以使用CSS定义的方式来设定颜色，如果是渐变的颜色，也可以考虑使用1像素图片重复的方式来填充。直接使用图片做背景不但会让网站服务器响应过多的请求，更加会让网站加载的速度变慢，灵活的运用background的repeat属性会让网站的性能得到大幅度提升。
　　以前有一个叫做ImageReady的软件，专门用来切图，现在最新版的PS CS5中已经完全集成了这个功能。不过在使用的时候，伟创建议尽量将网站固有的图片（即：后期不会让网站管理员在后台更换的图片）均保存为GIF格式，通常IR软件在导出的时候，都是优化过图片大小的。而后期网站上传的照片可以使用JPG格式，按钮等透明背景的图片则应使用PNG格式（PNG注意IE6的兼容性，如果色数较少也可以使用GIF格式），如果技术条件成熟的话，可以将网站后台上传的图片进行自动等比例压缩，以期在获得最佳显示尺寸的同时还有最佳的图片加载速度。
　　至于网站图片的命名就是一个经验问题了，如果有人给你传过来一份DIV+CSS文档，而其中的图片命名都是index_01这种格式，那么这个人就有可能是新手，缺乏一定的团队合作经验。洛阳网络公司伟创科技建议大家在写DIV+CSS的时候，图片命名规则尽量要一目了然，而且要有意义，例如：menu_bg.jpg表示菜单背景图片，使用这样的方式命名，和你搭档的伙伴肯定会感激你的。

除非特别声明，伟创科技所有均为伟创原创报道，转载请注明原文链接。
原文地址：http://www.lywhy.com/Design/View.asp?id=501 所属类别：整合设计

分享到： QQ空间新浪微博腾讯微博人人网