跳至正文
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊
  • 新手入门
  • 功能分类
    • 页面搭建
    • 智能营销
    • 数据洞察
  • 产研文档
    • 开发者指南
    • 账户与套餐
    • 产品使用条款
    • 产品更新
  • 灵蹊内容社区
  • 返回灵蹊

新手入门

  • 灵蹊能帮你做什么
  • 上手清单
  • 指标说明
  • 数据安全与服务可靠性
  • 使用灵蹊涉及的技术对接工作

页面搭建

画布操作
  • 区块
  • 元素
  • 点击动作
  • 交互效果
  • 动效
  • 取色器
  • 画布快捷键
  • 模板保存
PSD导入
  • PSD导入
  • PSD预处理指南
  • HTML转PSD
营销组件
  • 弹窗
  • 表单
  • 客服组件
  • 悬浮菜单
  • 视频
  • 二维码
  • 多状态面板
  • 标签页(Tab)
  • 手风琴菜单(折叠菜单)
  • 自定义组件——代码组件
  • 自定义组件——通用元素
  • 页面与组件兼容性
页面设置
  • 页面信息
  • 页面字体
  • 自定义CSS
  • 自定义JS代码
  • 微信设置
页面发布与版本管理
  • 页面预览与发布
  • 使用一个URL展示移动与PC版
  • 页面历史版本
页面管理
  • 页面列表

智能营销

个性化定向创意
  • 构建受众分组
  • 了解定向创意
  • 设置定向创意
  • 展示优先级
A/B测试与多版本测试
  • 设置A/B测试
智能创意
  • 了解智能创意
  • 智能创意与A/B测试对比
  • 智能创意的设计策略
  • 设置智能创意
  • 智能创意启动后
智能触发器
  • 弹窗自动触发

数据洞察

  • 数据汇总
  • 表单线索报告
  • 页面分析报告
  • 热图报告
  • 个性化创意报告
  • 筛选器

开发者指南

域名解析配置
  • 通过服务端转发把页面发布在自有域名
页面组件对接
  • 表单线索Webhook接入文档
媒体转化回传
  • 百度转化回传
转化回传灵蹊
  • 转化上报灵蹊-JS布码
  • 转化上报灵蹊 – API回传
自定义代码开发
  • 自定义变量
  • 自定义组件开发
  • 非UTF-8字符集处理声明
微信集成
  • 对接自有微信后台
  • 微信原生支付
支付集成
  • 微信原生支付
  • 自建收银台页面

账户与套餐

  • 来源管理
  • 安全认证
  • 绑定自己的域名
  • 转化设置
我的应用
  • 灵蹊销售锦囊
  • 53客服授权
  • 易聊通回传
权限与共享
  • 空间与团队
  • 资源共享

产品使用条款

  • 页面发布规范
  • 首页
  • 帮助文档
  • 页面搭建
  • PSD导入
  • HTML转PSD

HTML转PSD

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

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

软件准备

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

HTML转为PSD - 移动页面

  1. 输入页面地址
  2. 在地址栏左侧的尺寸中,选择other
  3. 将宽度输入为375,高度为无限(不输入即可)
  4. scale为x2(Retina这类高清屏需要x2尺寸,否则输出会变模糊)
  1. 选择screenshot>save as (直接用快捷键command + s也行)
  2. 务必勾选generate text layers,(否则页面上的文本会被存为图片)
  3. 点击保存,psd就保存好了

HTML转为PSD - PC页面

  1. 输入页面地址
  2. 在地址栏左侧的尺寸中,选择other
  3. 将宽度输入为1440(推荐),高度为无限(不输入即可)
    选择1440的原因是因为它是PC最通用分辨率的中间尺寸,但如果页面背景有特别大的延展性(可以在大屏上拉一下看看,如果随着拉大背景有持续铺开的变化,就推荐用大尺寸导出)
  4. scale为x1
    由于PC页面上传PSD后不像移动端画布有宽度限制,而是有多大传多大,如果双倍导出再上传页面就会变得过大了。
  1. 选择screenshot>save as (直接用快捷键command + s也行)
  2. 务必勾选generate text layers,(否则页面上的文本会被存为图片)
  3. 点击保存,psd就保存好了

文字处理

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

如果不对文字进行转换就上传,即会看到文字都被替换成了Hello

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

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

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

现在psd就可以上传画布啦

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

不适用的情况

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

需要帮助?

如果你需要帮助,欢迎同我们沟通(๑•̀ㅂ•́)و✧

PSD导入 PSD预处理指南

Powered by BetterDocs

发表评论 取消回复

要发表评论,您必须先登录。

Table of Contents
  • 软件准备
  • HTML转为PSD - 移动页面
  • HTML转为PSD - PC页面
  • 文字处理
  • 不适用的情况
  • 需要帮助?