网站制作的切图技巧

  一般的网站制作步骤大体上为:设计效果图–》切图+制作静态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等有规则但无意义的图片,也许你说图片命名本身的意义并不是很大,因为这个名字只有浏览器加载的时候才会用,但是,对于一个扩展性强的网站来说,在进行改版和维护的时候,如果要更换某些网站图片,就需要一个一个从浏览器中右键查看图片地址,记下每一个长长的没有规律的图片名称,这会让技术人员十分崩溃(也可能就是你自己),所以,在保存图片时就给它写上有意义的名字是很必要的。

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

  本文来自独立博客http://www.sunfei.net,转载或引用请注明来源。

时间: 2024-10-03 03:00:35

网站制作的切图技巧的相关文章

切图技巧分享—圆角背景色

原文:切图技巧分享-圆角背景色 一.设计稿 要实现下面这样一个效果,本文重点说的是下面"自动续费,可随时取消"这部分的实现. 我把问题简化一下,变成了 二.解决问题的思路 1.p标签加背景色 一般,很容易想到用p标签实现,代码如下: <style type="text/css"> .box { width: 154px; height: 90px; float: left; border: 1px solid #bfbfbf; border-radius

PS切片工具的切图技巧

我们在制作网站的时候如何把做好的效果图转成网页格式呢?这里就有很多方法,如果是比较复杂的网页就需要用手动来切图.如果不是很复杂的可以直接用PS自带的切片工具来切割.教程中介绍的是规则切图,实际应用中需要用手动来划分区块的大小.最终效果1.打开要分割的图片,点工具栏的切片工具.  2.将划分切片的水平划分为4,垂直划分为3,点好后出现12个等分的图片.

CSS+div网页制作PS切图攻略

认识Photoshop(PS)CSS切图必用工具 Adobe PHOTOSHOP平时我们又被称为PS.   div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图像编辑软件",并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像.图形.文字.视频.出版各方面都有涉及. 请看下面介绍: 平面设计 平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖.海报,这些具有丰富图像的平面印刷

photoshop高效切图方法技巧分享

给各位photoshop软件的使用者们来详细的解析分享一下高效切图方法的技巧. 技巧分享:   有人会发现一个问题,6S.6S plus的尺寸呢?因为他们的分辨率和6.6 plus尺寸一致的.   从上图可以看出不同分辨率对应不同的倍率,这样的话我们适配的时候就知道怎么切图了,@2x表示两倍图,@3x表示三倍图;以上的那些尺寸图,重点看这张图就可以同时适配iOS和Android的切图了. 工欲善其事,必先利其器 现在PhotoshopCC2015已经出了切图就更方便了,但是对于电脑的配置要求比较

关于APP切图和标注

  切图是一件比较单调枯燥的工作,但又需要比较强的耐心和细心,用户手中看到的产品界面,并非设计师的最终效果图,而是一个个单独的切图经由开发技术实现.切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图.精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果. 这个切图教程开始是写给我们实习的小美女的,但她现在又上学了,切图就分担成每个设计师的必备工作,切图技巧也因人而异,需要各位亲自己去发现总结适合自己的技巧.这里给大家介绍我自己的切图和标注小技巧,可以更快,更好的方便

专用Flash网站制作工具A4Desk技巧拾零

技巧 A4Desk作为一款傻瓜式的Flash网站制作工具,受到了许多用户的喜爱,下面笔者在使用过程中发现了一些小技巧,写出来供大家参考. 1. 快速更新网站文字 在Flash网站各子界面制作过程中,网站文字可以通过复制.粘贴.甚至直接导入文本的方式进行.这里介绍的方法是连A4Desk都不用打开,直接修改文本文件即可更新网站文字了.因为在制作Flash网站时,在软件安装目录下会自动生成一个import文件夹,该文件夹里的每一个文本文件的内容都和网站页面的内容相对应的,找到相应的文本文件即可进行修改

小议制作Flash网站及flash应用的技巧

技巧 flash网站技巧拾零 1. 快速更新网站文字 在Flash网站各子界面制作过程中,网站文字可以通过复制.粘贴.甚至直接导入文本的方式进行.这里介绍的方法是连A4Desk都不用打开,直接修改文本文件即可更新网站文字了.因为在制作Flash网站时,在软件安装目录下会自动生成一个import文件夹,该文件夹里的每一个文本文件的内容都和网站页面的内容相对应的,找到相应的文本文件即可进行修改了. 2. 快速修改菜单标签 在制作在Flash网站时,修改菜单标签是通过执行"Edit→Section N

前端技巧之如何切图

注:本篇文章基于HTML5/CSS3,较少考虑浏览器兼容性(兼容性查询可以见caniuse.com网站),需要读者注意. 前端开发≠切图,但前端开发需要会切图,切图是衔接PSD与HTML静态页面的桥梁.作为需要涉猎前端的后端工程师,在切图中需要掌握如下的知识: 如何评价切图切的好 切图质量的好坏评价可以从如下几个方面来判断: 业务角度:制作完的HTML网页还原度高,甚至做到像素级还原: 技术角度:图片体积小(减少网络传输).图片数量少(减少请求数量): 配合角度:便于后续制作HTML,特别是制作

制作网站原创内容的五大技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 昨天写了一篇文章"原创内容才是维持网站排名不竭的动力",分析了原创内容对于网站排名的重要性,告诉大家尽可能给网站创造大量的原创内容.其实道理大家都懂,关键是对很多站长来说,天天原创不是一般的难,可能今天写了一篇原创,但明天又不知道写什么了,好比吃了上顿没下顿,总觉得自己肚子墨水太少了.其实,所谓的原创标准是对搜索引擎而言的