我是一条刚入门的鱼?,今天学到了切图。
设计网页中各模块时,有许多地方需要加入图标来美化,这时候就需要在参考图抠出图标或者切图放进代码中。
我以为切图工作是ui设计师包揽的,但很多时候开发人员能够自主完成部分切图工作的话,项目进度应该可以大大提高吧。刚入门的小白身边可能就没有设计师助阵,只好自己上场啦,正所谓手艺多不怕饿死(●'◡'●)
切图工具推荐
(1)photoshop
这是老师给的资源Photoshop CS6,可以完成简单切图/切片工作,缺点是PSD源文件的切图只能一个图标一个图标来,所以更建议下载Photoshop CC以上的版本,据说里面有专门用来切图的插件,但是小鱼还没有找到资源下载(还是个小穷鬼,如果有资源的大鱼们请不吝赐教)
1.快捷键切图
标尺:菜单栏→视图→标尺/ctrl+R
巧用辅助线,点击标尺边缘拖动出辅助线,协助框选图标位置
ctrl+c:复制选区→ctrl+n:新建剪贴板→ctrl+v:粘贴选区→ctrl+s:保存
2.切片工具
直接框选需要的图标,可能会有像素偏差,需要放大微调
文件→存储为web所用格式→格式选为png-24→选择要存储到哪(它会新建一个images文件夹将选中的切片都存储好,且会自动分区切出其他部分,需自行筛选需要的)
(2)像素大厨PxCook
这也是老师推荐的资源PxCook,支持windows和macOS操作系统
下载地址:https://www.fancynode.com.cn/pxcook(小鱼不知道为什么一直打不开官网,难道要加速器么)
1.远程连接
需配合Photoshop使用,photoshop在编辑→远程连接中设置六位密码并启用,PxCook在菜刀中启用并输入六位密码,
2.切图工具
打开PxCook切图工具(?样式),分web开发(psd图)和两个操作系统的设计模式(png图),置顶,打开photoshop,放入文件,选好切图文件最后保存的路径就可以开始切图
选择所需图标所在的图层→选存储路径→切所在图层
iOS:切出1x,2x,3x的效果图
Android:会生成文件夹,切出1x,2x的效果图,还附带了个笑脸
3.测量尺寸(做标注图)
做网页练习作业的时候,这真是一件令小鱼头疼的事,这个软件真的解救了我。
直接拖入psd源文件创建项目,就可以直接选中图标就能显示尺寸了(1pt=2px),还可以测量图标之间间距,再也不用老眼昏花了。
(协作项目需要注册登录,小鱼不知道为什么一直连接不到官网/(ㄒoㄒ)/~~)
(听说还可以协助打代码,等小鱼学习一下再写些笔记出来O(∩_∩)O)
(3)蓝湖
老师说她工作的时候就常用蓝湖,可以创建项目小组,团队内能实现资源共享,设计师上传后,组内可根据权限看设计图的各种参数。
小鱼需要好好研究一段时间了,先不班门弄斧了
搜索下载网址:蓝湖 - 高效的产品设计协作平台 (lanhuapp.com)的时候,美丽的误会
大家最近都在什么平台看欧洲杯的赛事呢,我最近买了件新衣服同学们都说像某一支球队的衣服