怎么把图片做成png格式透明 手机png格式图片怎么制作( 三 )


PS教程:利用蒙版对复杂的边缘进行抠图

怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图

怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图

web设计手机端选择哪种Png?
说到手机 , 考虑流量的问题是必不可少的 , 所选png需要满足体积小和视觉效果良好 , 那么哪种png格式符合这2个要求呢?做个实验吧~
不同Png格式测试
测试平台:ios&android webkit浏览器
测试图片:彩种雪碧图1230*82
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图

测试内容:同一张雪碧图导出不同png格式的大小、透明度、杂边以及在retina显示屏和普通显示屏下的对比 。 需要学习软件的同学 , 大家可以百度搜索锦子会 , 去锦子会博客下载更多学习资源!如想要了解我的 , 请百度搜索罗锦 , 欢迎了解更多我的设计之路!
测试结果:
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图

从上图可见png32和png24体积太大了 , 十分消耗手机用户流量 , 不是我们选择的范围 , 那么可以锁定目标在『png8 alpha透明』和『png8 索引透明』中 , 2者对比 , 可以看出『png8 alpha』在手机端的支持是良好 , 可能有童鞋会认为 , 单凭一张图片也不能下结论~
而经过笔者使用多张雪碧图测试后使用Fireworks导出的『png8 alpha』 , 在手机端的支持是比较好的~不仅文件体积小 , 节省流量 , 而且半透明效果良好
于是 , 移动端采用『Png8 alpha透明』 , 相信『Png8 alpha透明』是未来的一种趋势~
PC端选择哪种Png
PC端使用哪种png , 其实这个话题很早就有结论了 , 这里简单介绍下 。
使用png8的方案:
使用photoshop打开雪碧图 , 分别导出一张png32和一张『png8 索引透明』的图片 , 高级浏览器使用png32位图片 , 针对IE6使用『png8 索引透明』 , 并设置『png8 索引透明』杂边与背景色颜色一致可达到视觉上透明
注:为啥使用png32而不使用『png8 alpha透明』?因为pc端的网速大多良好 , 建议使用表现更佳的png图片 , 显然png32是最合适的 , 当然你也可以使用『png8 alpha透明』 , 但是在高清显示器下的质量不如png32
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图
怎么把图片做成png格式透明 手机png格式图片怎么制作

文章插图

.bg{
background:url(global.png?v=20130530) no-repeat;
_background:url(global_png8.png?v=20130530) no-repeat;//IE6使用的背景图
}
使用IE滤镜的方案:
比较耗性能 , 而且存在不支持背景平铺 , 导致链接失效等缺点 , 不推荐该方案 , 不要为了IE而把自己搞得像IE~
.bg{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://eastit.cn/n/”img. png”, sizingMethod=”scale”);}
另外还有js和打补丁的办法 , 这里不做介绍 , 大家有兴趣可以百度下:IE6支持png24


特别声明:本站内容均来自网友提供或互联网,仅供参考,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。