С помощью этой программы вы сможете создавать прототипы интерфейсов GUI. Pencil предоставляет различные встроенные коллекции фигур для рисования различных типов пользовательского интерфейса, начиная от настольных и заканчивая мобильными платформами. Начиная с версии 2.0.2 Pencil имеет еще больше коллекций фигур, включенных по умолчанию.
В составе программы по умолчанию идут такие коллекции как: общие формы, элементы блок-схемы, формы рабочего стола/веб-интерфейса, формы графического интерфейса GUI для Android и iOS. Есть также много других коллекций, созданных сообществом и свободно распространяемых в Интернете. Вы можете легко захватить коллекцию и установить его в Pencil с простой операции перетаскивания (Drag-and-drop).
Популярные элементы рисования также реализованы в Pencil для упрощения операций рисования. И много других возможностей для создания прототипов GUI. Программа бесплатная.
Источник: sonraid.ru
Evolus Pencil Project Tutorial — Part 1
Как работать с программой Pencil evolus
Для того чтобы скачать эту программу можно пройти на официальный сайт:
pencil.evolus.vn
и скачать программу.
Использование программой
ctrl + Позволяет увеличить масштаб. ctrl — Позволяет уменьшить масштаб.
Программа позволяет в одном проекте создать несколько страниц и даже внутри странице можно создать вложенную страницу. Отображаются они снизу примерно по центру. Нажав правой кнопкой на Untiled page.
Тут можно
- Properties перейти в настройки страницы в которых можно настроить ширину и высоту страницы, название и фон страницы.
- Creat Page создать новую страницу,
- New Child Page создать вложенную страницу,
- Duplicate Создать копию страницы.
- Delete позволяет удалить страницу.
Прототипируем
После того как вы создадите страницу и настроите необходимую ширину и высоту, на неё можно будет перетащить элементы, которые расположены во вкладке слева Shapes.
Для создания прототипов я использую Desktop — Sketchy GUI, выберите необходимый элемент и перетащите на страницу. Всегда можно настроит ширину и высоту данного элемента как мышкой так и задав в ручную в меню сверху справа.
В этом же меню можно настроить и отступы этого элемента от верхнего и левого края, фон, толщину рамки, шрифт описания, и многое другое.
Pencil Project =VS= Wireframe. Создание макета сайта на реальном примере.
Редактирование объекта
Щёлкнув на объекте левой кнопкой мышки один раз вы можете изменить его размер или переместить, щёлкнув повторно вы можете повернуть объект на определённый угол.
Нажав правой кнопкой мышки вы можете:
- Locked зафиксировать.
- Arrangement переместить объект на слой выше над другими объектами или на слой ниже.
- Cut вырезать,
- Copy скопировать,
- Delete удалить объект,
Элемент HTML Texts позволяет задать фиксированную ширину элемент, перетаскиваем элемент и ставим галочку напротив Fixed Width.
Экспорт
В моей программе возникли сложности с экспортом. Самые оптимальные варианты решений:
- Экспортировать полностью весь проект в HTML код.
- Экспортировать каждую страницу по отдельности через пункт снизу — Правая кнопка на названии страницы — экспорт.
Источник: lordr.ru
Карандаш, очень легко делать модели и прототипы
В следующей статье мы рассмотрим карандаш. Это приложение, разработанное для обеспечения интерфейс, с помощью которого мы можем создавать модели и прототипы. Это мультиплатформенное приложение, бесплатное, бесплатное и с открытым исходным кодом. С помощью этого инструмента у нас будет возможность создавать наши собственные модели веб-страниц, настольные приложения, веб-приложения, блок-схемы и многое другое.
Приложение предоставит нам очень простой и быстрый способ создать дизайн для демонстрации клиенту, прежде чем углубляться в его разработку и программирование. Процесс можно выполнить перетаскиванием. Мы также можем использовать коллекции форм, что значительно упрощает конструкцию.
- 1 Общие характеристики карандаша
- 2 Установка на Ubuntu
- 3 Создание дизайна с помощью карандаша
- 3.1 Ваш первый карандашный дизайн
Общие характеристики карандаша
- Карандашные предложения различные коллекции фигур для рисования различных типов пользовательского интерфейса от настольных приложений до мобильных платформ. Это еще больше упрощает создание прототипов наших приложений с помощью простой установки.
- В список встроенных коллекций входят формы общего назначения, элементы блок-схемы, формы пользовательского интерфейса рабочего стола / веб-интерфейса, формы графического интерфейса пользователя Android и iOS. Есть также много других коллекций, созданных сообществом и свободно распространяемых в Интернете. Некоторые коллекции шаблонов собраны в следующих ссылка.
- Приложение поддерживает экспорт документа чертежа в различные форматы. Мы можем экспортировать наш рисунок как набор растровые файлы PNG или как веб-страница что мы можем показать. Pencil поддерживает экспорт документов в популярные форматы, включая текстовые документы OpenOffice / LibreOffice, Inkscape SVG и Adobe PDF.
- Pencil имеет инструмент для браузера клипарт, который интегрируется с OpenClipart.org чтобы легко находить клипарты по ключевым словам. Мы можем добавить рисунок с помощью простого перетаскивания. Клипарты, перечисленные инструментом, находятся в векторный формат.
- Элементы в рисунок может быть привязан к определенной странице в том же документе. Это помогает пользователю определять поток пользовательского интерфейса при создании приложений или макетов веб-сайтов. Ссылки, определенные в документе, преобразуются в гиперссылки HTML при экспорте документа в веб-формат. Этот процесс создает интерактивная версия макета в котором мы можем видеть смоделированный поток при нажатии на элементы пользовательского интерфейса.
Установка на Ubuntu
Карандаш — это мультиплатформенный инструмент доступен для Gnu / Linux, Mac OSX и Windows. Чтобы установить его в Gnu / Linux, нам нужно будет загрузить пакет формата DEB или RPM, соответствующий вашей системе (32-битный или 64-битный), который доступен в страница загрузки пользователя Pencil.
В этом примере я буду установить это приложение на Ubuntu 17.10. Для установки нам нужно будет только открыть терминал (Ctrl + Alt + T) и написать следующие команды:
wget http://pencil.evolus.vn/dl/V3.0.4/Pencil_3.0.4_amd64.deb sudo dpkg -i Pencil_3.0.4_amd64.deb