На данный момент существует множество программ позволяющих конструировать и проектировать пользовательский интерфейс. При разработке многих приложений интерфейс - очень важная часть; от того, насколько он окажется удачным иногда зависит жизнь проекта. В особенности это касается разного рода игр, интерактивных сервисов, мобильных приложений. Причем, в зависимости от платформы, на которой будет работать конечное приложение, необходимо разрабатывать интерфейс по-своему. Например, при разработке под iPhone или любой другой телефон с сенсорным управлением, нужно учитывать, что размер элементов должен быть достаточным для нажатия на них. При создании иконок их нужно делать «квадратными», т.е. можно нарисовать иконку в виде воздушного шарика, а можно в виде этого же шарика, но только в рамочке. Горячая область (т.е. куда можно ткнуть пальцем) будет одинаковой в обоих случаях, но восприниматься будет лучше именно та самая «квадратная». Это одно из правил создания интерфейсов. Таких правил много и дизайнеры интерфейсов о них знают. Но боюсь, немногие из них знают о том, что теперь дизайн интерфейсов можно делать и в GIMP, а затем экспортировать в QML для последующего использования в разработке с применением библиотеки Qt.

Для тех, кто не в курсе:

• Qt — кроссплатформенная библиотека для разработки самых разных программ.
• QML — метаобъектный декларативный язык для разработки пользовательских интерфейсов. Он в основном используется для создания интерактивных мобильных приложений, требующих быструю анимацию.

В данном уроке я не буду рассматривать само рисование интерфейсов, ибо не силен в рисовании, но рассмотрю технические нюансы, которые могут возникнуть при экспортировании изображения.

Итак, в Windows нам понадобятся:

1. gimp-qmlexporter — это скрипт для экспорта в QML. Заполучить его можно из хранилища http://qt.gitorious.org/qt-labs/gimp-qmlexporter/trees/master по ссылке http://qt.gitorious.org/qt-labs/gimp-qmlexporter/blobs/raw/master/qmlexporter.py
2. Python 2.6.6 — интерпретатор языка Питон http://www.python.org/download/releases/2.6.6
3. PyGTK All in One сборка для работы Питона с библиотекой GTK http://ftp.gnome.org/pub/GNOME/binaries/win32/pygtk/2.22/pygtk-all-in-one-2.22.5.win32-py2.6.msi
4. Ну и для пробы можно скачать готовый проектик интерфейса http://qt.gitorious.org/qt-labs/gimp-qmlexporter/blobs/raw/master/example.xcf

Первым делом устанавливаем Питон, затем сборку PyGTK, после этого кладем скрипт qmlexporter.py в c:\Documents and Settings\имяпользователя\.gimp-2.7\plug-ins\
Я использовал экспериментальную ветку Gimp 2.7.1. Те, у кого 2.6 должны поместить в каталог c:\Documents and Settings\имяпользователя\.gimp-2.6\plug-ins\

В Linux нужно также будет установить python, биндинг py-gtk. Скрипт qmlexporter.py поместить в ~/.gimp-2.6/plug-ins/
Еще необходимо дать на скриптик права.

В общем как-то так:

cd ~/.gimp-2.6/plug-ins/
wget http://qt.gitorious.org/qt-labs/gimp-qmlexporter/blobs/raw/master/qmlexporter.py
chmod u+rx qmlexporter.py
cd ~/tmp
wget http://qt.gitorious.org/qt-labs/gimp-qmlexporter/blobs/raw/master/example.xcf
gimp example.xcf

Для старта Gimp все готово. Запускаем его. Открываем наш свежескачанный example.xcf. Идем в меню Файл — Export to QML. Пункт размещен под выходом.

Откроется окно, там можно выбрать имя для Qml (Qml Element name) куда сохранять QML(Save Qml to this directory) и конвертировать текст в картинки или нет. Не рекомендуется конвертировать текст в картинки, особенно, если на то нет явной необходимости (специфический шрифт на таргетинге и т.п.).

Вообще плагинчик модный — сохраняет позицию слоёв, их прозрачность, размер. В тексте тоже сохраняет параметры форматирования. Извините, отвлёкся.

В общем далее мы импортируем qml-файл в проект и работаем с ним. Можно его править и в дизайнере и в редакторе, тут уж кому как больше нравится.

Видео экспортирования можно тут поглядеть http://www.youtube.com/watch?v=AzYKHbRWI2o

3 комментария