sketch怎么把psd导出为HTML,如何巧妙将sketch文档完美转换成PSD

如果在项目开始时注意一下几点，不管怎样都能顺利的将sketch转换

前面都是废话，干货在第六点，假如转换失败再回来从头看也可以

一、使用统一字体

做UI需要统一使用苹方体/思源，但这个字体包必须要和pc机统一

【将自己使用的字体统一打包一个文件夹，往后交接文档需要用到】

转换格式最核心的问题就是字体，只要字体解决一切都不成问题。

不需要更改的字体将它轮廓化？曲线？你明白我意思就行

sketch快捷键：shift + command + O(字母O)

【字体还是没办法解决，就通过sketch插件来统一更换】

安装方法

推荐在 Sketch Runner的安装插件中搜索 "Automate"。

下载并解压 master.zip，然后双击 "automate-sketch.sketchplugin" 文件。

兼容旧版 Sketch 插件从此处下载。前两组数字为 Sketch 版本，后一组数字为插件发布日期。

部分功能介绍

(具有上百的功能，官网有详细的列表)

菜单

备注

Remove Redundant Groups

删除多余的嵌套组。

Remove Empty Groups

删除空组。

Remove Hidden Layers

删除隐藏图层。

Replace Fonts

替换字体。

Replace Missing Fonts

替换缺失字体。

使用Automate插件运行‘Replace Fonts’替换字体

比较麻烦是需要手动输入‘需要更换字体的名称’

这是针对缺失字体的文档或者文档在对方电脑显示字体错误的做法

二、不需要换行的字体统一使用Auto

【重要的事情，不重复三遍，一次就够】

能不调整就不调整，除了段落文本(调整宽度即可)

一旦作死调整，限制了宽高，可能会获得绝对的‘对齐’。

后果是不堪设想，并且转换到其他格式会产生漂移。

三、假如有嵌套组件，删除组件时要尽可能解除组件

组件复杂度低的时候，直接删除即可

虽然不能一键剥离，我们可以弯道超车

按着command键一次将所有图层选中

然后放开那个command，右键选择解决组件即可

重复回来运动几下，基本就能解除掉

有小部分组件的遗留，问题不大，不用纠结

要注意！！！

“脱离后可能会产生一点小问题”

主要集中在被调整过的组件，就是那些被拉伸过后的组件

(解组有可能会产生小问题，这点事佛系一些就好)

四、删除隐藏图层、没用的分组【*可选】

继续运行Automate插件 ：Remove Hidden Layers(移除隐藏图层)

如果一个项目拥有多个page，那么每个page都需要操作一次

【替换字体的操作则不用】

如果嵌套里许多组件，解除后则会很多图层，在ps里面十分不友好

操作后帮助不是很大

插件解除的是“一个组里只包含一个图层的组”

如果为了完美转换ps而不去用组件，就等于用手去走路

适量去嵌套组件，通俗易懂

没必要做成太多层次，显得过于复杂

下图可以看到 / ，每一个‘/’就是一个层次，过多的分级会令效率变低。

下图明显是过多分层了

注：可以去苹果开发者网站下载最新套件进行参考(里面有ps、xd、sketch的规范)

五、画板等比放大2倍、并拆分文件

(如果设计尺寸是375pt/360pt的)【可选】

这是sketch基本操作了，将画板选中按Scale放200%就好

转换psd，就需要将sketch页面拆分成每个文件10～20画板左右(自己把握)

ps画板过多会很卡

后续通过拆分画板新建文件、复制、粘贴、命名即可

【这一步终于开始转换格式了】

终于进入正题，但是别急！！！

我们首先要加载字体

这个网站可以在线处理图片，但对于中文的支持，直接打开会乱码

“即使文件没有用sketch处理也是可以转换，不过要考虑电脑配置问题，sketch一般一个文件包含了整个项目，所以对于ps这么多画版来处理，是非常麻烦的，画版过多，建议使用sktech预处理”

首先“从电脑打开 - 选择设计用到的字体 - 加载结束后 - 再次按从电脑打开”

这时打开的文件不会有格仔

打开后，直接选择另存为PSD即可

这个网站是“每小时前前30分钟”才能下载，所有要准备好，把握这30分钟

“为了为我们的开发获得资金，Sketch To PSD转换只能在每小时的前30分钟使用。

获得一个保费帐户(对于无限访问)，或等待28分钟。”

七、打开PSD查看文件

根据本人转了500+的页面情况来看，很少会出现这种问题

绝大部分都是字体问题

这么折腾了一下，算是完美解决。

所有的间距、颜色都没有偏差

或许有其他问题，或者真正改页面才知道

下载的文件会带有-sketch

有些强迫症需求更改的

选中文件 - 给x个项目重新命名 - 选中替换文本 - 输入‘-sketch’ - 替换成(不输入即可)

最后，虽然这么冷门的知识，大多数人都不会这么去做

但操作过后，你能明白到比教程本身更多的知识点，共勉

sketch和psd文档还可以直接用Adobe XD打开，但目前找不到XD回流到sketch和psd的方法

对于XD，目前观望为主，未来还是十分具有潜力的

——Thanks——