More something new about Max Polyakov at this page

GIMP — The GNU Image Manipulation Program
Гимп — бесплатный графический редактор

   


Экспорт дизайна интерфейсов в Qml из Gimp

Главная Уроки Экспорт дизайна интерфейсов в Qml из Gimp

На данный момент существует множество программ позволяющих конструировать и проектировать пользовательский интерфейс. При разработке многих приложений интерфейс - очень важная часть; от того, насколько он окажется удачным иногда зависит жизнь проекта. В особенности это касается разного рода игр, интерактивных сервисов, мобильных приложений. Причем, в зависимости от платформы, на которой будет работать конечное приложение, необходимо разрабатывать интерфейс по-своему. Например, при разработке под 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


2

В избранном у 2 человек:

Метки: , , , , .

Уроки: предыдущий следующий

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

-3

Пользователь #2857Сергей Диденко6 июня 2011 в 10:57Личное сообщение

этот урок в большей степени для тех, кто знает хотя бы 2 языка програмированния

0

Пользователь #3623Денис Макушкин6 июня 2011 в 15:16Личное сообщение

Итак,прочёл и намотал себе на ус,что надо будет попобывать. Если будут вопросы,то обращусь!

1

Пользователь #2781Эмиль Янгиров13 июня 2011 в 09:19Личное сообщение

Потрясный урок) очень интересно было читать и выполнять, так как я изучаю языки программированияB-)) Понятно обьснено спасибо)

Чтобы участвовать в обсуждении вы должны войти или зарегистрироваться.

  • >

Информация по уроку

Другие уроки автора

Как убрать прыщи с лица
Этот урок рассчитан на начинающих и поэтому все действия будут подробно описаны.

Кисти

GIMP Brush Cursor Handwriting Outlined GIMP Brush Кельтбраслет
Воспользуйтесь нашим сортировщиком кистей для подбора нужной кисти.

Оценка урока

«Экспорт дизайна интерфейсов в Qml из Gimp» получил оценку 4.60 на основе 5 голосов.

13876+0
Комментариев

вверх