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

新手入门

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

页面搭建

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

智能营销

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

数据洞察

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

开发者指南

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

账户与套餐

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

产品使用条款

  • 页面发布规范
  • 首页
  • 帮助文档
  • 页面搭建
  • PSD导入
  • PSD预处理指南

PSD预处理指南

这篇文章乍一看有点长,别怵。
你不一定遇到所有问题,而且处理也很简单。

灵蹊会不断优化,提升对常见PSD处理的兼容性。但较为复杂的设计稿和不太好的网络环境,可能会对我们的上传体验造成双重暴击。
对PSD文件进行预处理可以减小文件体积、简化文件复杂性,从而提升文件上传和转换的效率。

PSD的预处理

1. 背景处理(必须)


不推荐页面使用整页长图作为背景。原因:
1. 当页面较长时,背景图会是一张超长的图层,在PSD被解析上传时容易失败。
2. 即使长背景被成功解析到画布中,也会影响进一步的区块切分,以及后续建立在区块之后的内容动态化和数据统计。
3. 生成网页后,长背景会影响访客端加载页面的性能和体验。

因此我们推荐:

对于纯色或渐变色背景

1. 如果是长图层需要直接移除(不只是隐藏);如果是多段纯色或短画布则无需特别处理,可上屏后再删除(务必删除,否则影响区块切分)。
2. 灵蹊的区块设置中可以直接设置背景色

对于插图背景

1. 按照区块(即每一段内容分组,例如“产品优势”、“用户证言”、“常见问题”等)切断背景
选中背景图层,使用矩形套索框好需要分区的背景,使用CTRL+SHIFT+J,即可将选中的部分从原长背景中切出。
2. 在上传到画布中后,按背景边界进行区块切分,然后选择图片上的“设置为区块背景”将其转换即可。

2. 元素过多处理(推荐)

鼠绘导致的元素过多

当你的设计师大大是位牛叉画手,他会直接在画布中画插画,下图示例中的图层就是“每一笔”插画的零件。
如果这样上传到灵蹊画布中,尽管可以被正常解析,但你在编辑页面时很容易不小心碰坏,非常不爽。
这是我们需要请设计师大大协助,在画完插图时直接将它保存为智能对象,这样也保留了插画未来的可编辑性,上传时也能够被解析成一个元素方便你使用。

甚至,如果你对灵活修改的需求不大、更追求上线速度,甚至可以将不准备修改的图层更大程度地切块合并,仅保留具有功能的部分(如按钮、表单、悬浮条)或准备进行A/B测试或个性化定向的部分。
注:对于PC页面,切忌将背景与内容合并到一起,因为背景上传后可以在画布中直接“转换为区块背景”,能够更好地适配不同分辨率。


如果还需要未来编辑,就转化成智能对象。

如果定稿不再修改,或专门处理上传用的PSD稿,直接合并图层就完事了。

文字被转换为图片导致的元素过多

这种情况较少发生。
但可能会由于某些工具处理引起。
通常,灵蹊会将页面中的文字导入后保留在画布上,这样你未来可以随时修改内容。
如果文字在PSD中就已经是图片图层,上传后不仅无法修改、画质不清晰、还会造成每一段文字都衍生出了一个多余图层极大降低画布性能。

如果发生了如下情况,你需要联系设计大大重新提供一份稿件才行。

3. 图层蒙版处理(可选)

对于常见的图层蒙版应用,灵蹊会自动处理。比较推荐的方式是当上传后自动处理效果不符合预期时再进行处理。
但如果你的蒙版使用了一些高级设置(例如羽化效果),或者重新调整PSD并不方便时,也可以按照以下流程提前处理。

PS中的蒙版分为两类,矢量蒙版与剪贴蒙版。

矢量蒙版的处理:

这样的蒙版是矢量蒙版

可以用PS中自带的脚本快速批处理。
入口位于“文件”>“脚本”>"拼合所有蒙版"中

剪贴蒙版的处理:

这样的蒙版是剪贴蒙版

剪贴蒙版无法使用PS的脚本处理功能。
需要筛选属性为“已剪切”的图层,逐层选中后CTRL+E进行向下合并。(注意不要一次性多选这几项合并)
这个操作比较麻烦,如果只是简单的剪切灵蹊通常自动处理没什么问题,但如果剪切时还应用了其它图层效果,建议设计大大在制作时顺手直接合并一下或转换为智能对象(未来仍可编辑)

4. 图层效果处理(可选)

常见的图层效果例如投影、描边、填充灵蹊也会自动处理。
但对于高级的效果例如相片滤镜、浮雕、光泽等效果,推荐提前批量处理。

1. 在图层管理区域选择按属性筛选,选择“图层效果”
2. 选中全部带效果的图层,点击右键,选择“栅格化图层样式”

注:尽管PS脚本也提供了图层效果拼合(脚本功能的入口见上文“合并矢量蒙版”),但脚本处理比较慢(有时候还有处理效果误差),这里推荐的操作方式虽然需要点两下但非常爽脆。

当PSD文件太大时

灵蹊支持200MPSD上传,但过大的文件往往易受网络环境影响,可能会出现上传时间过久或者直接失败的情况。
通常在你做完上面说明的操作后,PSD应该已经在50M左右了。但如果仍然太大,还通过以下处理,将文件有效缩小。

删除隐藏图层

在上传后,灵蹊会自动删除隐藏图层,如果文件能够正常上传,无需特地处理隐藏图层问题。
但因为隐藏图层实际仍会占用文件大小,如果由于文件体积原因造成无法上传,可以考虑删除隐藏图层。

批量删除隐藏图层的方法为:
1. 在图层管理区域选择按属性筛选,选择“不可见”图层
2. 选中全部不可见图层,直接删除即可

压缩照片原片

在家装、摄影等场景中,常常会出现直接引入照片原片的情况。(即使只是用做一个小装饰画,照片原片文件大小也不会随它的外观缩小。)

这是一份使用了许多照片素材制作的PSD,在处理前与处理后的文件大小差异。

通常在导入原片后,设计师多多少少会进行一些蒙版或效果设计,大多时候已经能够被上文中合并蒙版或图层效果的操作直接覆盖了。
如果还是大,直接选中全部图层,并进行“栅格化”

不明原因导致的文件就是大

如果上述操作都做完,文件就是大,不明原因地大,可能是由于PS文件在操作过程中产生的缓存处理导致的。
解决方法很简单:
1. 选中全部图层
2. 点击右键,选择“复制到”,创建新文件
3. 将复制出来的新文件直接保存下来

注意不要用另存PSD的方式,否则冗余信息也会被带过去。只复制图层,你会发现文件神奇地瘦身了。

常见上传失败原因

PSD应为72分辨率、RGB8位模式

问题:
PSD为网页设计、摄影、印刷提供了不同的色彩解析模式,灵蹊对PSD文件的解析模式使用的是面向网页设计的72分辨率、RGB8位的模式。(如果没有特意修改,这通常也是photoshop默认的文件规格。)但如果由于某些原因你的网页并非在此模式下设计,则需要处理一下。

解决办法:
查看画布大小,新建文件,并设置为同等大小。
选中全部图层,点击右键,选择“复制图层”,将“目标位置”选择为新建的文件并确认。
保存为新文件,重新尝试上传。

文件太大,无法成功上传

参见上文中的文件瘦身方案。

文件中存在顶天立地的超长图层

参见上文中背景处理说明。

如果设计大大暂时没空

1. 应急在线PS: ps.gaoding.com
3. 联系你的灵蹊客户成功伙伴,使命必达

HTML转PSD

Powered by BetterDocs

Table of Contents
  • PSD的预处理
    • 1. 背景处理(必须)
      • 对于纯色或渐变色背景
      • 对于插图背景
    • 2. 元素过多处理(推荐)
      • 鼠绘导致的元素过多
      • 文字被转换为图片导致的元素过多
    • 3. 图层蒙版处理(可选)
      • 矢量蒙版的处理:
      • 剪贴蒙版的处理:
    • 4. 图层效果处理(可选)
  • 当PSD文件太大时
    • 删除隐藏图层
    • 压缩照片原片
    • 不明原因导致的文件就是大
  • 常见上传失败原因
    • PSD应为72分辨率、RGB8位模式
    • 文件太大,无法成功上传
    • 文件中存在顶天立地的超长图层
  • 如果设计大大暂时没空