JSPM

clx-h5psd

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q24494F
  • License MIT

Converting PSD files into mobile page

Package Exports

  • clx-h5psd

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (clx-h5psd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NPM version Build Status Coverage Status

Converting PSD files into mobile page

PSD 转换成移动端页面的工具。

功能

  • 自动导出图层的 PNG 文件；
  • 导出 PNG 用 hash 命名，避免出现重复素材；
  • 自动判断背景图；
  • 可以使用自定义模板。（ 使用 jdists 编写）。

预制模板

  • tpl/page.html 标准模板
  • tpl/auto-bottom.html 自动计算需要居底的图层

效果

线上体验

  • 输出的网页 image

  • PSD 设计稿 image

使用

PSD 准备

  • 模式 RGB 颜色、8 位通道；
  • 合并和栅格化实际的图层；
  • 隐藏不需要导出的图层。
  • 使用特殊字体的文本需要栅格化；
  • 标签支持'<p>','<strong>','<b>','<i>','<a>','<button>'；需要在PSD图层增加对应标签标识。

安装

$ npm install clx-h5psd [-g]

命令行

Usage:

    h5psd <input list> [options]

Options:

    -v, --version                Output h5psd version.
    -o, --output                 Output directory (default input directory).
    -s, --images                 Images directory (default "images").
    -l, --layer                  Export "<name>.layer" file (default false).
    -n, --name                   Enable the "name" attribute (default false).
    -t, --template               Page jdists template file.

License

MIT © zswang