HTML/Xhtml CSS教程 Dreamweaver Frontpage教程 Javascript/Ajax XML/XSLT CMS技巧 心得技巧
返回首页
当前位置: 主页 > 网页设计 > HTML/Xhtml >

网页图片处理教程:优化带锯齿PNG图片

时间:2013-03-25 03:09来源: 作者: 点击:
网页图片处理教程:优化带锯齿PNG图片,带锯齿PNG图片的优化。

记录一下,图片处理的一个小方法。
这个是sprite背景图,我把背景设为黑色以便于演示,其实际是透明的背景。
优化前,图片比较多的锯齿。根据毫毫的建议,解决方法如下。
画一个同等大小的矩形(20px*19px)选择区域,对准这个图形。

反选。

删掉多余的部分。相当于把边缘修整了一下。

最终把图片导出为Alpha透明的PNG8格式。好了,优化成功。别忘了先压缩下图片再使用哦。

顺带说一下之前做的一个流程图示。
这个水滴状圆形也比较纠结,还好,它所在的地方,背景都是白色的,所以,连同白色背景裁切,就不担心锯齿问题了。

因为这个背景图写法是定位到3像素的border上面,所以,对与border重叠的部分,设置为透明。这样做神不知鬼不觉,也不会影响视觉效果。哈哈。

爱设计教学网(www.2sheji.com)——为您所需,替您所想!
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容