HTML转PSD

由于工具应用限制，以下方式目前只适用于Mac平台。

如果我们希望迁移的页面没有PSD稿、或者已经经年累月发生了太多修改早已和设计稿不一致，我们可以借助HTML转PSD的工具来实现快速迁移。

软件准备

请搜索下载名为 PageLayers 的工具（该软件只适用于Mac平台），图标长这样👇

HTML转为PSD – 移动页面

1. 输入页面地址
2. 在地址栏左侧的尺寸中，选择other
3. 将宽度输入为375，高度为无限（不输入即可）
4. scale为x2（Retina这类高清屏需要x2尺寸，否则输出会变模糊）

5. 选择screenshot>save as （直接用快捷键command + s也行）
6. 务必勾选generate text layers，（否则页面上的文本会被存为图片）
7. 点击保存，psd就保存好了

HTML转为PSD – PC页面

1. 输入页面地址
2. 在地址栏左侧的尺寸中，选择other
3. 将宽度输入为1440（推荐），高度为无限（不输入即可）
   选择1440的原因是因为它是PC最通用分辨率的中间尺寸，但如果页面背景有特别大的延展性（可以在大屏上拉一下看看，如果随着拉大背景有持续铺开的变化，就推荐用大尺寸导出）
4. scale为x1
   由于PC页面上传PSD后不像移动端画布有宽度限制，而是有多大传多大，如果双倍导出再上传页面就会变得过大了。

5. 选择screenshot>save as （直接用快捷键command + s也行）
6. 务必勾选generate text layers，（否则页面上的文本会被存为图片）
7. 点击保存，psd就保存好了

文字处理

由于这款好用的软件是由有才的歪果仁开发的，所以对中文字体的兼容性不太好，如果你直接上传，会发现变成满屏hello的样子。

所以我们需要借助一个更厉害的在线PSD工具来进行文字自动转换👇

地址： https://www.photopea.com/

1. 访问photopea.com
2. 打开psd文件
3. 等待字体加载转换结束
4. 保存psd文件

现在psd就可以上传画布啦

不过仍要注意，即使经过文字转换，也还会有一定乱码存在，所以请仔细检查页面，做好修改 💪

不适用的情况

1. 动态页面及动画页面
   pagelayers在对应动态页面方面比较乏力，所以如果你的页面是动态化渲染的、或者存在较多的出场动画，在保存为psd时，可能会出现内容保存不全或图层反复叠加的一系列问题。
2. windows
   如果你有windows下的好工具，尤其能够保存可修改的文字图层，请在评论区分享呀！