网页设计中的切图

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

网页设计中的切图,布布扣,bubuko.com

时间: 2024-08-02 19:03:02

网页设计中的切图的相关文章

网页设计中ps切图注意问题

最近工作中老是用到ps切图,然后高手说我切图做的不好,在此去网上找了点材料汇集起来,作为参考: 网页设计的切图,最好先用PS做出效果图,然后进行切图.   一.切图的原则:  1.图切的大小越小越好. 2.图切的数量越少越好. 那对于一整张图来说,同时达到这两个原则是相互矛盾的,所以一个网页差不多切成20-30个图就可以了,这样网页的加载速度是不会受影响的.  二.切图的技巧:  1.一行一行的切图.  2.背景的切成小条.  3.不能分开的不分好了,选行的时候要注意怎么样合理.  4.切图的时

设计趋势:网页设计中的幽灵按钮

幽灵按钮——那些透明的.可点击的物体——忽然间就变得无处不在.以狂风暴雨之势席卷正网页设计领域.谁能想到,像按钮这么简单的事物,能够改变我们看待网页设计的方式? 参考:预测网页设计趋势 什么是幽灵按钮? 幽灵按钮有着最简单的扁平外形——正方形.矩形.圆形.菱形——没有填充色,只有一条淡淡的轮廓.除了外框和文字,它完完全全(或者说几乎完全)透明.(因此得名“幽灵”) 这些按钮通常比网页上传统的可点击按钮大,也被置于显要位置,例如屏幕的正中央. 各种类型的网站(包括移动APP)中都能发现幽灵按钮的身

网页设计中的彩色滤镜效果

网页设计中的彩色滤镜效果 在当今这个充斥着先进的特效和精妙风格的世界中,谁曾料到,像纯色和渐变这样简单的手法,竟能够催化出创造力,并极大提升网站的美学水准?现代网页设计师们,证明了优雅的插画.精致的图形和壮丽的照片,都能在彩色滤镜效果下很自然地得到强调.气氛焕然一新,网站开始变得光彩夺目.的确,它有助于解决某些问题. 首先,彩色滤镜能给网站耳目一新的外观,却不会增加负担 .其次,它通过搭配传递各种情绪的色彩,很好地丰富了设计.第三,作为一层低透明度的遮罩,它不会掩盖主背景的魅力,对于想要轻微淡化

网页设计中透明效果的使用技巧

在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内 容就能穿透显示出来.这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这 么做可能会影响页面的可读性.要是框和文本的透明度不对,更可能会影响到整体的设计. 下文是一些注意事项以及巧妙运用透明效果的成功案例. 用“透明效果”来制造对比 使 用透明效果最大的优点是可以形成对比.设计者可以在图

<转载>网页设计中的F式布局

地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,“控制”用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 推荐阅读:<极好的交互设计:19个创意网页欣赏><拒绝平庸:优秀WEB登录页面设计><超赞!网页设计中的数学运用> F式布局简介 F式布

一款APP从设计稿到切图过程全方位揭秘 Mark

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸

网页设计中 效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于“透明”的实用小技巧哟:) 在 网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿 透显示出来.这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能 会影响页面的可读性.要是框

图层叠加混合模式在网页设计中的应用

很多飞鱼的声纳的读者常会询问我类似于上图中的按钮的光效是怎么做出来的?其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模 式更改为图层叠加就可以了.但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在 网页设计中的应用,再通过不同的实例来深层次的了解图层叠加混合模式的基本效果,将其更自由的应用于我们的设计中.精心开发5年的UI前端框架! 案例一 图标设计中增加色彩的饱和度和明暗对比度 之所以会引出要讨论图层叠加混

不会配色?来看看网页设计中怎样使用柔和色调

网页中的柔和色调的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果. 当你听到“柔和”一词,想到的可能是淡粉色.淡蓝色.淡黄色,不过这种配色远不止这些颜色.柔和并不一定要感觉像新生儿一样.通过某些适当的方式,配合其他元素,这些色调也可以相当鲜明. 下面我们从优秀的案例网站出发,了解10种在网页设计中运用柔和色调的方法. 柔和的照片 照片上的柔和遮罩层,或是在恰当的光照环境中拍摄的照片,可以成为精妙绝伦的网站背景.照片的色调越淡雅,设计师就有越多的区域可以放置其他元