Мы поговорим о нашем собственном программном продукте .
NET+WPF (называемом «inForm»), который я использую для создания так называемых «интерактивных презентаций» (они же «нелинейные презентации»), а также интерактивных информационных интерфейсов.
И сразу отвечу на заголовок статьи — можно нарисовать интерфейс в Фотошопе и простым способом запустить его на платформе Windows. В результате для получения работающего интерактивного информационного интерфейса вам понадобится всего 2 инструмента – приложение inForm и Photoshop. Чтобы выполнить задачу в Фотошопе, нужно уметь создавать слои, группировать их в группы и сохранять в отдельные файлы.
В общем, ничего особенного.
Статья носит исключительно информационный характер и, скорее всего, будет интересна энтузиастам, любящим Photoshop и интерфейсы.
Приложение inForm можно использовать бесплатно с некоторыми ограничениями по функциональности.
Итак, вот пример интерактивного приложения «Hello World».
Интерфейс будет вписываться в общую идеологию моего программного продукта: есть «домашний экран» с главным меню и слайдами, далее для каждого пункта меню отображается экран с информацией, либо подменю, из которого слайды полноэкранные.
открыть.
Все это похоже на обычные мобильные приложения или веб-сайты, только работает в полноэкранном режиме под Windows и предполагает использование сенсорного экрана.
Откройте Photoshop, создайте новый файл 1920x1080x96dpi и сразу в блоке управления слоями создайте структуру папок для «главного экрана»: 
Красным отмечены папки с системными названиями — под этими именами вам нужно будет сохранять файлы, чтобы получить элементы интерфейса.
Теперь давайте проявим немного креативности в Фотошопе и нарисуем реальный интерфейс будущего интерактивного приложения.
Вот что у меня получилось на основе случайного фонового изображения обоев из поиска Google: три кнопки слева, ползунок в центре и логотип справа, который также будет кнопкой возврата на «домашний экран».
Чтобы просмотреть полученный интерфейс в действии: — у кого его еще нет, скачайте и установите последнюю версию .
NET Framework 4.5: www.microsoft.com/en-us/download/details.aspxЭid=30653 — мое приложение inForm находится здесь: issimple.co/app/forhabr/inForm215withDemoUI.zip (6 МБ) — PSD-файл с интерфейсом: issimple.co/app/forhabr/fancy-round-ui.zip (10 МБ) Затем: — сохранять каждый слой слоев элементов интерфейса на прозрачном фоне со своим именем файла и расширением .
png (только фоновый файл bg должен быть .
jpg) — для автоматизации можно использовать скрипт сохранения слоя: issimple.co/app/forhabr/LayerSaver.jsx — скопируйте полученные файлы в папку data приложения информ, слайды в папку data/slides — запустить INFORM.EXE Если все выглядит так же, как в Фотошопе, то переходим к рисованию «экранов», которые будут появляться при нажатии на кнопки меню.
Добавляем новые группы к слоям на том же уровне, что и «главный экран» — экран 1, «тап 2», «тап 3».
Названия групп могут быть любыми — это просто для удобства.
Приложение inForm имеет несколько инструментов для создания подэкранов: это может быть стопка jpg-иконок одинакового размера, или значки + предварительный просмотр, или навигация по типу карты, или png-кнопки/контент произвольной формы.
Остановимся на последнем способе.
Например, для второго пункта меню «Треугольник» создаём три группы по кнопкам в каждой: 
Далее сохраните каждую группу на прозрачном фоне в файл типа «1btn.png» и перенесите в папку «data/2sub/».
Структуру содержимого приложения и групповых файлов в Photoshop довольно легко понять, просто взглянув на них.
Последний тип «экранов» — это полноэкранный контент в виде слайдов.
Каждый слайд может состоять из 3 слоев с дополнительной анимацией каждого на экране.
В приложении это выглядит так: 
Файлы сохраняются в формате «1.png», «1L2.png», «1L3.png», где первая цифра — номер слайда, а после «L» — дополнительный слой.
Скопируйте файлы в «data/2sub/».
Стрелки, крестики и другие элементы полноэкранной навигации можно заменить на любые другие, т.к.
это тоже файлы в папке «data/interface/».
После всех сохранений мы получаем окончательную структуру интерфейса в папке «data/»: 
Понятно, что все можно масштабировать по количеству категорий, кнопок и слайдов.
Также имеются всевозможные настройки и дополнения.
Но рассматривается самый простой вариант. Вот что мы имеем в итоге: А для чего все это - таким простым способом можно создавать интерактивные книги, прототипы интерфейсов, приложения для музейных киосков, презентации продуктов, компаний, приложения для Windows-планшетов (правда пока только Desktop-приложения), информационные системы для правительства.
агентства, образовательные учреждения и т. д. Теги: #интерфейсы #интерфейс #photoshop #GUI #wpf
-
Ленивая Обработка Массива
19 Oct, 24 -
Принц И Нищий
19 Oct, 24 -
Линейка Дистрибутивов Windows 7
19 Oct, 24 -
Синтез 3D-Звука :: Кланк
19 Oct, 24
