学步园

Photoshop在从8.0到cs 4的发展中对脚本的支持越来完善，而致力于为移动平台打造更流畅、更易于开发的Qt新框架——QtQuick也日渐成熟。而QtQuick的核心之一就是QML语言。至此，gemfield本文题目中的两个名词全都出现了。下面gemfield详细说说。

关于QML的一些基本元素在CivilNet社区的相关版块中已经有很多信息了，此处就不再赘述。

基于javascript的QML在目前的框架下仍然是基于QGraphicsView的，其实在Qt5.0中将铁定的更新目前4.x平台使用的图形栈，到时QML将基于QML Scene，这样将对图形的流畅性有很大的提升。

就目前的QML应用来说，一个标准的QtQuick程序使用QML的方式是通过declarative模块来实现的。其实依旧是基于传统的QWidget的图形栈，但是是建立在其派生的QGraphicsView上的，所以更适合移动设备，如手机。具体来说：

1、在qml设计器里设计界面，兼并在qml的代码里添加一些交互性的事件；
2、由QDeclarativeView派生一个viewer的子类，实现一些平台相关的操作；
3、通过viewer的setMainQmlFile方法调用setSource来加载qml文件;
4、界面显示最终效果。

其实，qml是真正解释执行的，连虚拟机机制都不是。一个明显的区别是，在Qt的工程中更改完qml文件，然后编译的时候，工程并不会自动重新编译。这和cpp或者h文件是明显不同的。这也进一步阐述了这样一个事实：qml是在程序运行时才被加载进去的。

QML的人类学意义在于：在使Qt程序ui界面设计更加独立于逻辑设计的同时，使得ui界面这一资源为代码编写人员和ui设计人员共享的资源，减少了资源的浪费。而下面gemfield说到的这些内容，使得为Qt设计界面和为web设计界面非常类似——从photoshop导出QML。

首先photoshop的版本为cs4或以上，在cs3及8.0上，gemfield分别做过测试，一些方法是不支持的。然后按照gemfield下面的步骤描述：
1、从Qt的gitorious网址：http://qt.gitorious.org/qt-labs/photoshop-qmlexporter/trees/master处下载 Export QML..jsx脚本，当然，你也能下载到一个psd的示例；
2、将这个脚本放在photoshop的安装目录的“预置”目录下的“脚本”目录下；
3、启动photoshop，在“文件”——“脚本”菜单中，将出现“Export QML”选项；
4、打开你的psd文件，然后就可以选择“Export QML”导出为QML了。这个时候将弹出一个对话框，选择一些属性，如：

***************************************************************************************************
*如果选择了 “Rasterize text”复选框，则文字图层将会变成png图片；
*如果选择了“Group layers”复选框，则这一组图层将合并为一个png图片；
*如果选择了“Export hidden”复选框，则在qml中照样不可见；
*如果不选择“Export QML”复选框，意味着gemfield在Qt creator中编辑了qml文件，不想覆盖qml，只是重新导出psd中的图片元素而已。
***************************************************************************************************

在从photoshop到qml的转换过程是遵照如下的原则进行的：

1、图层的名字会变成qml中元素的名字，空格和#会被替换为下划线；
2、图层的样式等视觉风格会被转换为qml中的png图片元素；
3、图层的位置、大小、z轴顺序、透明度都会在qml中保留下来；
4、文字会被转换为png图片或者文字元素（由你选择）；
5、隐藏图层会被输出，并且visibility属性被设置为hidden；
6、Png图片会被拷贝到qml的图片路径的子目录下；

在完成了这些转换后，你就可以继续编辑qml文件，以使它更完善了。对于Adobe illustrator来说，可以先导出为photoshop的格式，然后再进行gemfield本文上述的转换。Gemfield要说明的是，在自由软件世界中的GIMP也同样支持同样的功能，具体的使用可以从CivilNet社区中获得。

本文属于gemfield的CivilNet Blog(http://civilnet.cn/gemfield)【Qt乐园】版块；bug提交至gemfield@civilnet.cn；资料发布及讨论区：http://civilnet.cn/qt；转载此文时，请保证包括【备注】在内的文章的完整性。

、************************************************************************************、

其中有一个报错：

http://labs.qt.nokia.com/2010/10/19/exporting-qml-from-photoshop-and-gimp/

原因： 含有智能对象、矢量图、等特殊格式的图层------将图层转换成普通的图片图层

问题解决：  使用qml脚本导出的时候，尽量不要用photoshop的图层分组表示方法，合并不必要的图层；

                   使用脚本导出的主要目的是，快速导出，控件图标跟图标定位--------如果需要项目应用还是要重构QML脚本的；

2012年3月30日9:47:14   如果用什么的方法还是比较麻烦的。 用复制组--->到新的psd文件，由于原psd的文件过于大，转换不过来

在比较的小的psd导出一个QML组件，最后根据QML组件并结合C++代码重写 用户界面；这样比较简便跟快捷