0.0°

让Sketch导出有透明渐变的PDF...

经验类型经验/观点
经验属性自译外文
经验版权署名

关注

7114 6 10 2017-02-24

用Sketch上手一年多了，各种高效工具及高保真的输出简直爱不释手，再也不用担心Axure爸爸动不动就死机的情况了……各种奇淫巧技的使用也逐渐的克服了从axure迁移时候的各种痛点，搭配神器Craft在输出效率上简直飞起。

然而在前天的一次交互输出中竟然发现了一个bug！为了方便上下游的对接，我选择了使用PDF格式的输出。使用PDF格式可以方便产品经理和视觉对文案直接复制，之前在Axure时代交互产出也是一直输出PDF。然而在交互稿发出后突然发现PDF上莫名多了几个黑色色块！仔细一看，原来是交互稿上做的透明渐变效果全部以填充的形式导出了，这种砸饭碗的事怎么能够容忍呢？？

Image title

为了解决这个问题也是找了好久，各种学习群、论坛留言都没有找到办法，最后在官方指导上看到了这个：

Image title

竟然不支持透明渐变的导出……直到后来在Medium上找到了这篇：6步解决PDF导出透明渐变。

废话太多了，下面是解决方法：

第1步.更改渐变

将渐变改为100%黑色到100%白色，而不是100黑到0%的黑色渐变。

Image title

第2步.创建蒙版

复制并粘贴刚才的形状，然后将颜色改为白色填充。

Image title

第3步.将选区转为位图

选择之前改变的渐变，选择图层（Layer）>将选区转为位图（Flatten Selection to Bitmap）。此时图层会一直显示刚才第2步做的白色的蒙层。

Image title

第4步.应用蒙层

Image title

选择白色蒙层和位图图层，点击图层（Layer）>用所选图形做蒙版（Mask with Selected Shape）。现在两个图层应该合并成了一个组。

Image title

第5步.改变图层样式

选中位图组，将混合模式改成叠加（Multiply）。

Image title

第6步.导出PDF

最后就剩下导出啦~

Image title

以上就完成了透明渐变的导出啦。

下面是原理分析，不感兴趣的同学可以直接略过啦~

我们可以看到，整体的解题思路是将图形转变成了位图。在官方文档说明中写了不支持所有的矢量格式文件。

Image title

所以简单的将图形做成透明渐变是行不通的，还需要改成位图后，利用混合模式来做成渐变效果。

虽然导出还是稍微有些步骤，但总算是有了解决办法，算是在我的承受范围之内，毕竟结合style、override等技巧效率节省太多了~

最后附上翻译原文：https://medium.com/@8obbyanderson/exporting-gradients-in-sketch-to-pdf-ffb588e95fe0#.9d9v5pcd4

欢迎关注我的公众号，多多交流指正

Image title

全部评论：6条

falynne要有自己的范
2017-09-14 18:47
如果是其他颜色的渐变呢
李素华
2017-08-17 10:48
@李素华: 又试了下如果不是100%黑的渐变过去的话，导出的PDF的黑色不是百分百还原，会有点浅
李素华
2017-08-17 10:34
我试了下直接把渐变层100%黑到1000%白调成叠加好像也行诶
elviscai
2017-03-09 23:34
@哈哈lalala: 没太明白……为啥不直接转成位图？
哈哈lalala
2017-03-09 22:08
@elviscai: 对我来说两个软件切换成本还是挺高的，做好以上6步后放在craft里以后直接拖拽就可以了，一劳永逸
elviscai
2017-03-02 09:57
两步解决这个问题： 1. 导出为 SVG 2. 用 Affinity Designer 将 SVG 导出为 PDF 感觉第二步 PS 或者 AI 也能做到。