切切切切个大西瓜

猪小花1号2018-09-11 13:40

作者:马宝


切图工(切图环节),这个被设计师鄙视又被工程师忽视的底层又底层的可怜小角色。

看似毫无技术含量,纯粹体力活,非常不招人待见;但在整个产品设计流程中又起到至关重要的作用,直接影响视觉还原度。

就好比:一个靠“脸”吃饭的产品,下定决心策划良久,请了最好的美容师设计相貌儿,找了最好的整形医院(最强实力团队支持) 等到 上了台面让主刀医生吭哧吭哧切了一通,嘴巴歪啦,鼻子没了……

不管你是设计师也好,前端工程师也罢,有一天,你不小心沦为切图仔,需要你大刀一挥的时候, 我想你的回答不应该是:“我不会切图或我不屑于切图了吧!?

接下来才是重点,如何不用插件高效优雅的切,(后面讲插件时候会讲到)

首先你要能够辨别一个设计中哪些元素是修饰性元素必须要切的,哪些是内容性元素可切可不切,哪些是表现形式用代码就可以写出来(不扩展了,自己普及基本常识,@小芳老师)?以WEB为例,在不影响WEB 性能的前提下,高效切图的原则是能不切图就不切图!

A. 切片工具

切片盛行的年代,以前我们是这么干的,现在很多专题页/直邮设计中用的还很多,出图生成HTML很快当时会切出多余图片非半透明,质量不高;

在IE6 的年代,那时候 CSS 还不能画圆角不能做动画,以按钮为例子;我们的前端需要很费力的左切一个圆角,右切一个圆角,中间加条过渡平铺起来 切片工具 》导出WEB所用格式

B. 动作批量切图法-我的方法

我通过PSD 切图的方法将重复做工做成的一套快捷动作,

选定元素》隔离(复制到新建psd)》 裁剪(去掉透明像素) 》导出  适用于 css sprite

如果你想导出元素 ,选择或者批量选定 》按一下 动作,程序自动帮你搞定接下来的活儿,简单两步无痛切图

  1. 做动作 看GIF q2.gif

  2. 用动作,简单步骤下载附件 双击导入 sprite-切图.atn sprite-切图.atn.zip ,选择 要导出的 psd 图层,按快捷键 F11 导出到桌面 sprite.png (导出下一张前记得重命名哦!)

C. 自动生成&抽出-强烈推荐再“优雅不过了”

确保你是 ps CC 14.2 以上版本的用户,

  1. 打开 PSD 文件后,选择“文件”>“生成”>“图像资源”。(旁边有的抽出资源… 点一下你会有新发现哦)

  2. 将适当的文件格式扩展(.jpg、.png 或 .gif)添加到您要从中生成图像资源的图层或图层组的名称中。例如,将图层组 CTA Button green 重命名为 CTA Button green.jpg 和 CTA Button green.png;PS 会自动生成 PNG 和JPG文件顺便把你文件名按图层 命名好了

  1. 高级玩法 构建复杂图层名称;为资源生成命名图层时,您可以使用参数指定多个资源名称。详见 ps 图片生成器

例如:
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 200% Delicious.gif

Photoshop 从该图层生成以下资源:(加上英文 ","可以批量生成资源)

  • Delicious.jpg(缩放 120% 的 8 品质 JPG 图像)
  • Delicious.png(缩放 42% 的 24 位 PNG 图像)
  • Delicious_2.jpg(100x100 像素绝对大小的 90% 品质 JPG 图像)
  • Delicious.gif(缩放 200% 的 GIF 图像 同理可证 @2X 和@3X 的资源图)

D. 半自动切图工具 推荐

http://www.cutandslice.me/

赶快试试吧,


本文来自网易实践者社区,经作者马宝授权发布