Coder Social home page Coder Social logo

supercutepsd's Introduction

写在前面

此PS脚本主要实现以下功能:

  • 快速切图(切图是很费时间,利用插件切图能很大程度提高效率)
  • 快速布局、生成CSS、HTML(自动计算切图宽度、高度生成理想的DOM结构)

下面分别对以上功能做一些说明和解释,方便大家在使用过程中,自己灵活扩展

快速入门

  • 打开demo中的psd文件

  • 选择 文件->脚本->浏览 选择 supercutePSD.jsx 文件,显示如下:

    其中需要选择,导出文件地址。css单位默认是px,然后点击运行即可;

  • 这样在文件夹下面就会生成相应的文件了,如下:

    imgs目录是切图

常见问题

切图方面

  • 一个ps文件中最好是一个页面的,不要有多个页面,这样切图会很慢,也容易出问题
  • 如果有一些图层要特殊处理,可以自己先在psd里面栅格化个别图层即可
  • 图层太多,可以先把文字和图组合栅格化之后再运行脚本

单位方面

  • 单位用px,项目会自动转rem方便直接用
  • css采用绝对定位方式布局,如不需要布局,请自己在jsx源码里面去修改,writeCss方法中。

其他

  • 插件来源是在2016年无意中发现,然后放到了github中,原作者已找不到。
  • 如需交流请联系(qq: 121644750

supercutepsd's People

Contributors

leiroc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

supercutepsd's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.