Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Интерактивные интерфейсы. Цифровые постеры. Для оффлайна.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
37
Битрикс24

Битрикс24

www.bitrix24.ru

28
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
Eczo.bike

Eczo.bike

www.eczo.bike

9
GIFTD

GIFTD

giftd.tech

7
Flowlu

Flowlu

flowlu.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Что ещё можно сделать в Фотошопе?

558 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Об использование "интерактивной презентации" для создания интерфейсов.

Речь пойдёт о собственном .NET+WPF программном продукте (называется «inForm»), который использую для получения так называемых «интерактивных презентаций» (они же «не-линейные презентации»), а также интерактивных информационных интерфейсов.

И сразу же отвечу на заголовок статьи — в Фотошопе можно нарисовать интерфейс и его запустить нехитрым способом на платформе Windows. В итоге для получения рабочего интерактивного информационного интерфейса понадобятся всего 2 средства – приложение inForm и Фотошоп.

Для выполнения задачи в Фотошопе нужно знать как создавать слои, группировать их по группам и сохранять в отдельные файлы. В общем-то ничего особенного.Статья имеет ознакомительных характер, и скорее будет интересна энтузиастам-любителям Фотошопа и интерфейсов. Приложение inForm можно использовать бесплатно с некоторыми ограничениями функционала.

Итак, пример интерактивного приложения «Привет, мир».

Интерфейс будет вписывать в общую идеологию моего программного продукта: есть «домашний экран» с главным меню и слайдами, затем по каждому пункту меню выводится экран с информацией, либо под-меню, из которого открываются полноэкранные слайды. Всё это похоже на обычные мобильные приложения или сайты, только работает в полноэкранном режиме под Windows и подразумевает использование тач-скрина.

Открываем фотошоп, создаём новый файл 1920х1080х96dpi и сразу в блоке управления слоями делаем папки структуры для «домашнего экрана»:

e0ae561ee4cb46c48afe8f48bc1d1d28.jpg

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

Теперь берём в руки немного фотошопного креатива и рисуем собственно интерфейс будущего интерактивного приложения.

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 кнопки/контент произвольной формы. Остановимся на последнем способе.

2c5223b2c3364d6e87084a8dbdd9c702.jpg

Например для второго пункта меню «Треугольник» создаём три группы с кнопками в каждой:

de6d44d7a07e4eefb17b1d07506ef294.jpg

Далее сохраняем каждую группу на прозрачном фоне как файл типа «1btn.png» и переносим в папку «data/2sub/». Структуру файлов содержимого приложения и групп в Фотошопе довольно легко понять, просто взглянув на них.

Последний тип «экранов» — полноэкранный контент по типу слайдов. Каждый слайд может состоять из 3-х слоёв с дополнительной анимацией каждого на экране.

a94eebc6665147a38585cfe6ac470664.jpg

На приложение это выглядит так:

809e556cf8e94b31aafe431c51ba24b2.jpg

Файлы сохраняются по формату «1.png», «1L2.png», «1L3.png», где первая цифра – номер слайда, а после «L» — дополнительный слой. Копировать файлы в «data/2sub/».

Стрелки, крестики и прочие элементы полноэкранной навигации можно заменить на любые другие, т.к. это тоже файлы в папке «data/interface/».

После всех сохранение получаем итоговую структуру интерфейса в папке «data/»:

8588d2fa387447609c8e062e725eabc6.jpg

Понятное дело, что всё можно масштабировать в плане количества категорий, кнопок, слайдов. Также есть всевозможные настройки, дополнения. Но рассматривается простейший вариант.

Вот что получается в итоге:

И собственно к чему это всё — таким нехитрым способом можно создавать интерактивные книжки, прототипы интерфейсов, приложения для музейных киосков, презентации продукции, компаний, приложения для Windows планшетов (правда пока что только Desktop приложения), информационные системы для гос-учреждений, образовательных заведений и т.д.

+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать