Речь пойдёт о собственном .NET+WPF программном продукте (называется «inForm»), который использую для получения так называемых «интерактивных презентаций» (они же «не-линейные презентации»), а также интерактивных информационных интерфейсов.
И сразу же отвечу на заголовок статьи — в Фотошопе можно нарисовать интерфейс и его запустить нехитрым способом на платформе Windows. В итоге для получения рабочего интерактивного информационного интерфейса понадобятся всего 2 средства – приложение inForm и Фотошоп.
Для выполнения задачи в Фотошопе нужно знать как создавать слои, группировать их по группам и сохранять в отдельные файлы. В общем-то ничего особенного.
Статья имеет ознакомительных характер, и скорее будет интересна энтузиастам-любителям Фотошопа и интерфейсов. Приложение inForm можно использовать бесплатно с некоторыми ограничениями функционала.
Итак, пример интерактивного приложения «Привет, мир».
Интерфейс будет вписывать в общую идеологию моего программного продукта: есть «домашний экран» с главным меню и слайдами, затем по каждому пункту меню выводится экран с информацией, либо под-меню, из которого открываются полноэкранные слайды. Всё это похоже на обычные мобильные приложения или сайты, только работает в полноэкранном режиме под Windows и подразумевает использование тач-скрина.
Открываем фотошоп, создаём новый файл 1920х1080х96dpi и сразу в блоке управления слоями делаем папки структуры для «домашнего экрана»:
![](https://habrastorage.org/r/w780q1/files/e0a/e56/1ee/e0ae561ee4cb46c48afe8f48bc1d1d28.jpg)
Красным отмечены папки с системными названиями – под этими имена нужно будет сохранять файлы, чтобы получить элементы интерфейса.
Теперь берём в руки немного фотошопного креатива и рисуем собственно интерфейс будущего интерактивного приложения.
![](https://habrastorage.org/r/w780q1/files/16f/2c4/2be/16f2c42be42c405196ce5956a0ef380f.jpg)
Вот что у меня вышло на основе случайной картинки фоновых обоев из поиска Гугла: три кнопочки слева, слайдер по центру и логотип справа, который также будет кнопкой возвращения на «домашний экран».
Чтобы просмотреть полученный интерфейс в действие:
— у кого ещё нет, то качаем и ставим последний .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” приложения inForm, слайды – в папку “data/slides”
— запускаем INFORM.EXE
Если всё выглядит также, как в Фотошопе, то переходим далее к отрисовке «экранов», которые будут появляться по нажатию на кнопки меню. Добавляем в слои новые группы на том же уровне, что и «главный экран» — экран 1, Экран 2, Экран 3. Название групп может быть любое – это просто для удобства.
В приложение inForm для дизайна под-экранов есть несколько средств: это может быть стэк jpg иконок одинакового размера, либо иконки + предварительный просмотр, либо навигация типа карты, либо png кнопки/контент произвольной формы. Остановимся на последнем способе.
![](https://habrastorage.org/r/w780q1/files/2c5/223/b2c/2c5223b2c3364d6e87084a8dbdd9c702.jpg)
Например для второго пункта меню «Треугольник» создаём три группы с кнопками в каждой:
![](https://habrastorage.org/r/w780q1/files/de6/d44/d7a/de6d44d7a07e4eefb17b1d07506ef294.jpg)
Далее сохраняем каждую группу на прозрачном фоне как файл типа «1btn.png» и переносим в папку «data/2sub/». Структуру файлов содержимого приложения и групп в Фотошопе довольно легко понять, просто взглянув на них.
Последний тип «экранов» — полноэкранный контент по типу слайдов. Каждый слайд может состоять из 3-х слоёв с дополнительной анимацией каждого на экране.
![](https://habrastorage.org/r/w780q1/files/a94/eeb/c66/a94eebc6665147a38585cfe6ac470664.jpg)
На приложение это выглядит так:
![](https://habrastorage.org/r/w780q1/files/809/e55/6cf/809e556cf8e94b31aafe431c51ba24b2.jpg)
Файлы сохраняются по формату «1.png», «1L2.png», «1L3.png», где первая цифра – номер слайда, а после «L» — дополнительный слой. Копировать файлы в «data/2sub/».
Стрелки, крестики и прочие элементы полноэкранной навигации можно заменить на любые другие, т.к. это тоже файлы в папке «data/interface/».
После всех сохранение получаем итоговую структуру интерфейса в папке «data/»:
![](https://habrastorage.org/r/w780q1/files/858/8d2/fa3/8588d2fa387447609c8e062e725eabc6.jpg)
Понятное дело, что всё можно масштабировать в плане количества категорий, кнопок, слайдов. Также есть всевозможные настройки, дополнения. Но рассматривается простейший вариант.
Вот что получается в итоге:
И собственно к чему это всё — таким нехитрым способом можно создавать интерактивные книжки, прототипы интерфейсов, приложения для музейных киосков, презентации продукции, компаний, приложения для Windows планшетов (правда пока что только Desktop приложения), информационные системы для гос-учреждений, образовательных заведений и т.д.
И сразу же отвечу на заголовок статьи — в Фотошопе можно нарисовать интерфейс и его запустить нехитрым способом на платформе Windows. В итоге для получения рабочего интерактивного информационного интерфейса понадобятся всего 2 средства – приложение inForm и Фотошоп.
Для выполнения задачи в Фотошопе нужно знать как создавать слои, группировать их по группам и сохранять в отдельные файлы. В общем-то ничего особенного.
Статья имеет ознакомительных характер, и скорее будет интересна энтузиастам-любителям Фотошопа и интерфейсов. Приложение inForm можно использовать бесплатно с некоторыми ограничениями функционала.
Итак, пример интерактивного приложения «Привет, мир».
Интерфейс будет вписывать в общую идеологию моего программного продукта: есть «домашний экран» с главным меню и слайдами, затем по каждому пункту меню выводится экран с информацией, либо под-меню, из которого открываются полноэкранные слайды. Всё это похоже на обычные мобильные приложения или сайты, только работает в полноэкранном режиме под Windows и подразумевает использование тач-скрина.
Открываем фотошоп, создаём новый файл 1920х1080х96dpi и сразу в блоке управления слоями делаем папки структуры для «домашнего экрана»:
![](https://habrastorage.org/files/e0a/e56/1ee/e0ae561ee4cb46c48afe8f48bc1d1d28.jpg)
Красным отмечены папки с системными названиями – под этими имена нужно будет сохранять файлы, чтобы получить элементы интерфейса.
Теперь берём в руки немного фотошопного креатива и рисуем собственно интерфейс будущего интерактивного приложения.
![](https://habrastorage.org/files/16f/2c4/2be/16f2c42be42c405196ce5956a0ef380f.jpg)
Вот что у меня вышло на основе случайной картинки фоновых обоев из поиска Гугла: три кнопочки слева, слайдер по центру и логотип справа, который также будет кнопкой возвращения на «домашний экран».
Чтобы просмотреть полученный интерфейс в действие:
— у кого ещё нет, то качаем и ставим последний .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” приложения inForm, слайды – в папку “data/slides”
— запускаем INFORM.EXE
Если всё выглядит также, как в Фотошопе, то переходим далее к отрисовке «экранов», которые будут появляться по нажатию на кнопки меню. Добавляем в слои новые группы на том же уровне, что и «главный экран» — экран 1, Экран 2, Экран 3. Название групп может быть любое – это просто для удобства.
В приложение inForm для дизайна под-экранов есть несколько средств: это может быть стэк jpg иконок одинакового размера, либо иконки + предварительный просмотр, либо навигация типа карты, либо png кнопки/контент произвольной формы. Остановимся на последнем способе.
![](https://habrastorage.org/files/2c5/223/b2c/2c5223b2c3364d6e87084a8dbdd9c702.jpg)
Например для второго пункта меню «Треугольник» создаём три группы с кнопками в каждой:
![](https://habrastorage.org/files/de6/d44/d7a/de6d44d7a07e4eefb17b1d07506ef294.jpg)
Далее сохраняем каждую группу на прозрачном фоне как файл типа «1btn.png» и переносим в папку «data/2sub/». Структуру файлов содержимого приложения и групп в Фотошопе довольно легко понять, просто взглянув на них.
Последний тип «экранов» — полноэкранный контент по типу слайдов. Каждый слайд может состоять из 3-х слоёв с дополнительной анимацией каждого на экране.
![](https://habrastorage.org/files/a94/eeb/c66/a94eebc6665147a38585cfe6ac470664.jpg)
На приложение это выглядит так:
![](https://habrastorage.org/files/809/e55/6cf/809e556cf8e94b31aafe431c51ba24b2.jpg)
Файлы сохраняются по формату «1.png», «1L2.png», «1L3.png», где первая цифра – номер слайда, а после «L» — дополнительный слой. Копировать файлы в «data/2sub/».
Стрелки, крестики и прочие элементы полноэкранной навигации можно заменить на любые другие, т.к. это тоже файлы в папке «data/interface/».
После всех сохранение получаем итоговую структуру интерфейса в папке «data/»:
![](https://habrastorage.org/files/858/8d2/fa3/8588d2fa387447609c8e062e725eabc6.jpg)
Понятное дело, что всё можно масштабировать в плане количества категорий, кнопок, слайдов. Также есть всевозможные настройки, дополнения. Но рассматривается простейший вариант.
Вот что получается в итоге:
И собственно к чему это всё — таким нехитрым способом можно создавать интерактивные книжки, прототипы интерфейсов, приложения для музейных киосков, презентации продукции, компаний, приложения для Windows планшетов (правда пока что только Desktop приложения), информационные системы для гос-учреждений, образовательных заведений и т.д.