Coder Social home page Coder Social logo

psd2ccs's Introduction

psd2ccs


用途:

  • 解析PSD文件
  • 导出图层png文件
  • 生成CocosStudio项目json文件

环境配置

  • python2.7
  • 第三方python库:PIL

项目结构

  1. output:脚本导出目录,包含导出的图片和json文件。
  2. psd_tools:用于解析psd的库,github上的源码并略作修改。
  3. psd2json:json导出脚本;psd2png:图片导出脚本。
  4. res:用于放置psd资源和对应配置文件。
  5. template:用于放置生成json所需的CocosStudio组件的模版数据(由psd解析出的组件目前只有Panel、ImageView、Label三种)。

使用说明

流程概括:

放入psd->配置配置项->执行脚本导出切图->存放切图->执行脚本导出json->导入CocosStudio项目中使用

详细使用方法:

  1. 将psd文件放入res目录下,复制一份配置文件(.conf)且命名跟psd名称保持一致,根据个人需求修改配置文件。
  2. 调用psd2png脚本导出图片:python psd2png.py psdname (参数为psd名称)。将导出的图片放入合适的CocosStudio项目资源位置,并在步骤1的配置文件中修改对应的搜索路径。
  3. 调用psd2json脚本生成json文件:python psd2json.py psdname (参数为psd名称)。将生成的json文件放入CocosStudio项目json位置。
  4. 将json配置到CocosStudio项目后即可打开项目看到生成的界面。
  5. 根据需要调整组件命名和界面相关设置(是否适应分辨率、背景颜色、相对/绝对布局)。

配置文件介绍: 目前配置有CocosStudio的项目资源根路径和资源搜索路径,目的是定位 CocosStudio目录并自动搜索界面所需资源配置到json文件中。资源的搜 索根据路径的配置从上到下依次进行,直到搜索到所需资源。

美术PS使用注意:

  • 对于可以看作一个整体的对象,注意合并图层为单个图层,且合并特效(比如外发光、阴影...)。
  • 图层命名以平时切图格式进行命名,因为脚本会直接使用图层名称作为切图名称(若用到多个相同资源,命名中加空格防止冲突)。
  • 因为CocosStudio不支持字体描边编辑,所以需额外告知。
  • 因为PS不支持九宫格和数字标签,需额外切图。
  • 列表之类的重复资源没必要全部显示出来。
  • 保证界面各个状态的资源都在,可以显示一种状态,隐藏其他状态。
  • 对于独立的界面,画布大小应与设计分辨率相同(1136*640)。
  • 对于可以看作一组的对象,尽量分组,太零散不容易整理。

尚需完善

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.