前端开发如何用H5替代photoshop做智能切片

前端开发 如何判断首次登录?|高校老师前端开发培训|web前端开发培训总结
切片是ui开发很基础的一项工作。通俗来讲,就是将一张大的设计图利用切片工具,根据自己所需切成一张张小图。也有更聪明的U工或设计师会用ps切片插件来切片,还有一些极客会为自己编写私有的ps切图插件,提高切图效率。让我们来分析下这些切图方式的优劣。同时为各位看官带来一种全新的切图方式,使用html5的canvas技术实现智能切片(目前专注h5和网页切片)。
先抛工具地址:
http://tangbindu.github.io/huapu
先睹为快:
http://ofsky1uvn.bkt.clouddn.com/friend.gif
photoshop切片主要为2种
ps切片工具
原理:使用ps切片工具,把页面分割成n个切片框,ps基于n个切片框输出n张小图片。
优点:上手容易、历史悠久
缺点:工作量大、手工拉切线容易有误差
过程:习惯性新建一张1000×1000的空白图。把设计需要切出的n张小图片全部拉入空白图中,摆好位置,估摸好图片的左上和右下脚,拉出n个切片框(眼都瞎了,还容易出错,有木有)或者拉出n*4条围住切片的辅助线(手指僵硬,有木有),选择切片工具,点击“基于参考线切片”按钮,最后都另存为web格式。
ps切片插件
原理:photoshop支持javascript编写插件,使用javascrip可访问ps的图层或图层组的信息和图像数据。然后将每个图层输出成单张的png图片。
优点:批量输出切片、图片名即图层名、批量设置尺寸和留白
缺点:需要安装插件、每个切片必须为独立图层或文件夹,且不能识别复合图层
过程:切片图均做成独立图层>选择切图图层>导出切片图层
cutterman切片
canvas智能切片
原理:以往我们把需要切的图片全部放在一个空白的ps画布上,并保持切片之间有一定的间隔值,然后用切片工具拉切片线,花圃切图利用切片之间的间距分离不同切片,如大于某一个间隔值的则是不同的切片。之后利用canvas技术进行像素分离,把图片分割成n张切片图。
优点:无插件依赖,快捷,轻量,极客喜欢
缺点:暂时不支持后退操作,需要制作一张切片聚合图,了解间隔值
注:暂时只支持chrome(程序员的惯性)。尽量聚合图保证图片在3000*3000以内。
切忌:暂时不支持后退操作,后续看大家的反馈,提供支持。
废话不多说,先上示例。
示例过程:
1,保存一张混合n张切片的png图
2,选择一个间隔值(非常重要,当然也可以用默认)
3,点击切图按钮
4,打包下载
http://ofsky1uvn.bkt.clouddn.com/friend.gif
工具主要功能:
1,图片分离
2,单张切片下载
3,打包切片下载
4,调整图片尺寸
5,批量设置留白
6,把切片全改偶数尺寸(h5移动端很有用)
7,批量调整图片尺寸
8,获取图片base64数据,hover在图片上,就能见到获取按钮。
9,支持部分快捷键(全选ctrl+a,取消选择ctrl+d)和ps一样
或许你还不够清楚原理,请用下面的测试图片,来测试这个工具,亲自试用下。请使用chrome浏览器
工具地址:http://tangbindu.github.io/huapu
切片过程:
1,把下面的图片另存为计算机中
2,把图片拉入我的工具里,支持拖拽。
3,鼠标点击图片,下面会出现一个小面板
4,选择间隔一个值(还不懂吗?多试几个不同值看看)
5,点击切图
6,成功
web前端开发字体包如何使用|web前端 安卓开发 简单|安卓前端开发任职要求
» 本文来自:前端开发者 » 《前端开发如何用H5替代photoshop做智能切片》
» 本文链接地址:https://www.rokub.com/4222.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!