作者:马宝
切图工(切图环节),这个被设计师鄙视又被工程师忽视的底层又底层的可怜小角色。
看似毫无技术含量,纯粹体力活,非常不招人待见;但在整个产品设计流程中又起到至关重要的作用,直接影响视觉还原度。
就好比:一个靠“脸”吃饭的产品,下定决心策划良久,请了最好的美容师设计相貌儿,找了最好的整形医院(最强实力团队支持) 等到 上了台面让主刀医生吭哧吭哧切了一通,嘴巴歪啦,鼻子没了……
不管你是设计师也好,前端工程师也罢,有一天,你不小心沦为切图仔,需要你大刀一挥的时候, 我想你的回答不应该是:“我不会切图或我不屑于切图了吧!?
接下来才是重点,如何不用插件高效优雅的切,(后面讲插件时候会讲到)
首先你要能够辨别一个设计中哪些元素是修饰性元素必须要切的,哪些是内容性元素可切可不切,哪些是表现形式用代码就可以写出来(不扩展了,自己普及基本常识,@小芳老师)?以WEB为例,在不影响WEB 性能的前提下,高效切图的原则是能不切图就不切图!
切片盛行的年代,以前我们是这么干的,现在很多专题页/直邮设计中用的还很多,出图生成HTML很快当时会切出多余图片非半透明,质量不高;
在IE6 的年代,那时候 CSS 还不能画圆角不能做动画,以按钮为例子;我们的前端需要很费力的左切一个圆角,右切一个圆角,中间加条过渡平铺起来 切片工具 》导出WEB所用格式
我通过PSD 切图的方法将重复做工做成的一套快捷动作,
选定元素》隔离(复制到新建psd)》 裁剪(去掉透明像素) 》导出 适用于 css sprite
如果你想导出元素 ,选择或者批量选定 》按一下 动作,程序自动帮你搞定接下来的活儿,简单两步无痛切图
做动作 看GIF q2.gif
用动作,简单步骤下载附件 双击导入 sprite-切图.atn sprite-切图.atn.zip ,选择 要导出的 psd 图层,按快捷键 F11 导出到桌面 sprite.png (导出下一张前记得重命名哦!)
确保你是 ps CC 14.2 以上版本的用户,
打开 PSD 文件后,选择“文件”>“生成”>“图像资源”。(旁边有的抽出资源… 点一下你会有新发现哦)
将适当的文件格式扩展(.jpg、.png 或 .gif)添加到您要从中生成图像资源的图层或图层组的名称中。例如,将图层组 CTA Button green 重命名为 CTA Button green.jpg 和 CTA Button green.png;PS 会自动生成 PNG 和JPG文件顺便把你文件名按图层 命名好了
例如:
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 200% Delicious.gif
Photoshop 从该图层生成以下资源:(加上英文 ","可以批量生成资源)
赶快试试吧,
本文来自网易实践者社区,经作者马宝授权发布