Що ще можна зробити у Фотошопі
Йтиметься про власний .NET+WPF програмний продукт (називається «inForm»), який використовую для отримання так званих «інтерактивних презентацій» (вони ж «не-лінійні презентації»), а також інтерактивних інформаційних інтерфейсів.
І відразу ж відповім на заголовок статті - у Фотошопі можна намалювати інтерфейс і його запустити у нехитрий спосіб на платформі Windows. У результаті для отримання робочого інтерактивного інформаційного інтерфейсу знадобляться всього 2 засоби - додаток inForm і Фотошоп.
Для виконання завдання у Фотошопі потрібно знати, як створювати шари, групувати їх за групами та зберігати в окремі файли. Загалом-то нічого особливого. Стаття має ознайомлювальний характер, і швидше буде цікава ентузіастам-аматорам Фотошопу та інтерфейсів. Програму inForm можна використовувати безкоштовно з деякими обмеженнями функціоналу.
Отже, приклад інтерактивної програми «Привіт, світ».
Інтерфейс вписуватиме в загальну ідеологію мого програмного продукту: є «домашній екран» з головним меню та слайдами, потім по кожному пункту меню виводиться екран з інформацією, або підменю, з якого відкриваються повноекранні слайди. Все це схоже на звичайні мобільні програми або сайти, тільки працює в повноекранному режимі під Windows і передбачає використання тач-скрин.
Відкриваємо фотошоп, створюємо новий файл 1920х1080х96dpi і відразу в блоці керування шарами робимо папки структури для домашнього екрану:
Червоним позначені папки із системними назвами – під цими іменами потрібно буде зберігати файли, щоб отримати елементи інтерфейсу.
Тепер беремо до рук трохи фотошопного креативу і малюємо власне інтерфейс майбутньої інтерактивної програми.
Ось що у мене вийшло на основі випадкової картинки фонових шпалер з пошуку Гугла: три кнопочки зліва, слайдер по центру та логотип праворуч, який також буде кнопкою повернення на «домашній екран».
Потім: - зберігаємо кожен шар елементів інтерфейсу шари на прозорому тлі зі своїм ім'ям файлу і розширенням .png (тільки файл фону bg повинен бути .jpg) - для автоматизації можна використовувати скрипт збереження шарів: issimple.co/app/forhabr/LayerSaver.jsx - Копіюємо отримані файли в папку "data" програми inForm, слайди - в папку "data/slides" - запускаємо INFORM.EXE
Якщо все виглядає так само, як у Фотошопі, то переходимо далі до відтворення «екранів», які з'являтимуться після натискання на кнопки меню. Додаємо в шари нові групи на тому ж рівні, що і «головний екран» - екран 1, Екран 2, Екран 3. Назва груп може бути будь-яка - це просто для зручності.
Наприклад, для другого пункту меню «Трикутник» створюємо три групи з кнопками в кожній:
Далі зберігаємо кожну групу на прозорому тлі як файл типу 1btn.png і переносимо в папку data/2sub/. Структуру файлів вмісту програми та груп у Фотошопі досить легко зрозуміти, просто глянувши на них.
Останній тип "екранів" - повноекранний контент на кшталт слайдів. Кожен слайд може складатися з трьох шарів з додатковою анімацією кожного на екрані.
На додаток це виглядає так:
Файли зберігаються за форматами "1.png", "1L2.png", "1L3.png", де перша цифра - номер слайда, а після "L" - додатковий шар. Копіювати файли в data/2sub/.
Стрілки, хрестики та інші елементи повноекранної навігації можна замінити будь-які інші, т.к. це також файли в папці "data/interface/".
Після всіхзбереження отримуємо підсумкову структуру інтерфейсу в папці "data/":
Ось що виходить у результаті:
І власне до чого це все — таким нехитрим способом можна створювати інтерактивні книжки, прототипи інтерфейсів, додатки для музейних кіосків, презентації продукції, компаній, додатки для Windows планшетів (щоправда, тільки Desktop додатки), інформаційні системи для держ-установ, освітніх закладів і т.д.