如何从Adobe XD导出更高清的图像?@10x或@100x

Adobe XD 是一款矢量设计软件,理论上在 Adobe XD 中设计的矢量内容放大导出都不会模糊,不管是 @10x 还是 @100x,而且 Adobe XD 是可以完全实现导出 @100x 的图片都不模糊的,但是总会有人说它设计的内容无论怎么导出都是模糊的。。。

首先说 Adobe XD 自带的导出工具,它最大可以实现 5.33... 倍的图片导出,导致导出模糊最常见的错误就是“采用以下大小进行设计”选项选择错误,“采用以下大小进行设计”是让你指定一个倍数,因为 Adobe XD 并不知道你是采用的几倍图设计的。

image.png

如果要导出一个宽高均为300*300的矩形,“采用以下大小”进行设计选择“1x”,“导出”选择“iOS”,“格式”推荐“PNG”,最终你将得到三张图片即提示的“所选资源将导出为 1x,2x,3x”,1x 的宽和高会是 300*300(这是你指定的), 2x 的宽和高会是 600*600(300*2=600), 3x 的宽和高会是 900*900(300*3=900)。


“采用以下大小”进行设计选择“2x”,其它设置相同导出后,最终你得到的三张图片 2x 的宽和高会是 300*300(这是你指定的), 1x 的宽和高会是 150*150(300/2=150), 3x 的宽和高会是 450*450(300/2*3=450)。

“采用以下大小”进行设计选择“3x”,其它设置相同导出后,最终你得到的三张图片 3x 的宽和高会是 300*300(这是你指定的),1x 的宽和高会是 100*100(300/3=100),2x 的宽和高会是 200*200(300/3*2=200)。image.png

“采用以下大小进行设计”选择的越大,导出的图片尺寸越小。当“导出”选择“Android”,“采用以下大小进行设计”选择“75% - ldpi”时最大可以得到 5.3 倍的图片。

需要注意的是位图放大会模糊,所以你要是在 Adobe XD 使用了较小的位图,导出之后放大位图部分肯定是会模糊的,可以使用 3 倍图的位图缩小到 1 倍图,导出的 3 倍图也会是清晰的。
如果你想导出更大的图片,可以使用插件,比如 XDtools 中的“高清预览图导出”功能,可以导出画板的单张 @2x、@3x、@5x 和 @10x 的预览图片。

image.png

也有单功能的指定倍数导出插件,比如“Custom Export”插件,可以自己输入倍数比如“100”可以导出 @100x 的图片,只要是矢量内容导出都不会模糊,但是 Adobe XD 对导出的图片大小有一定限制,可导出的单张图片最大尺寸为 50000*50000,即如果你要导出 @100x 的图片,选择的内容宽和高均不能超过 500,@10x 则不能超过 5000。image.png

所以,Adobe XD矢量内容,导出放大不会模糊,如果模糊那就是你设置错了,位图如果模糊是因为你的位图原图小。