методичка. Методичка по программе Inkscape. Эргономика и дизайн графических интерфейсов
 Скачать 1.17 Mb.
|
|
ФЕДЕРАЛЬНОЕ АГЕНТСТВО СВЯЗИ Федеральное государственное бюджетное образовательное учреждение высшего образования «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ им. проф. М. А. БОНЧ-БРУЕВИЧА» Т. В. Мусаева ЭРГОНОМИКА И ДИЗАЙН ГРАФИЧЕСКИХ ИНТЕРФЕЙСОВ Практикум САНКТ-ПЕТЕРБУРГ 2020 ВВЕДЕНИЕ Практикум (часть 1) предназначен для получения и закрепления практических навыков студентами по темам рабочей программы дисциплины. Материал содержит краткую теоретическую справочную информацию и указания по выполнению заданий в графическом редакторе. Полученные знания и навыки помогут сформировать у обучающихся компетенции, направленные на приобретение знаний и навыков в области компьютерной графики, web-проектировании, web-программировании для создания графических объектов пользовательских интерфейсов. После освоения практического материала студент должен уметь: применять методы и средства компьютерной графики для создания объектов контента web-интерфейсов; применять средства и методы по созданию анимаций, баннеров. знать: методы и средства создания и обработки векторных изображений. владеть: программными средствами компьютерной графики. навыками создания объектов контента интерфейса средствами компьютерной графики . 1. Введение в векторную графику 1.1. Векторная, растровая графика Векторная графика – область компьютерной графики, в которой изображения представляются в виде отрезков прямых (векторов). Для каждого из них задается пара точек концов вектора и атрибутов (цвет, толщина линии и т.п.). Векторные изображения хранятся в памяти компьютера в виде математических формул геометрических объектов ( прямая, прямоугольник, окружность и т.п.). Для создания и обработки векторных и растровых объектов используются графические редакторы, имеющие большой набор функций и методов. В методическом пособии, в качестве примера, будут рассмотрены команды программы Inkscape . Большинство команд, существующих в этом редакторе, аналогичны тем, что имеются и в других векторных и растровых редакторах. В программе Inkscape имеется также возможность создания 3d графических объектов и анимации. Растровое графика – это изображение, представленное в виде сетки пикселей или цветных точек (обычно прямоугольную) на компьютерном мониторе, бумаге и других отображающих устройствах и материалах (растр). Inkscape — векторный графический редактор, предназначенный для создания графических объектов, как художественных иллюстраций, технических иллюстраций . Это стало возможным во многом благодаря открытому формату SVG, развиваемому консорциумом W3C. Формат SVG позволяет создавать иллюстрации различного типа, в том числе анимационные. Поскольку SVG основан на языке разметки XML, к нему можно писать расширения, чем авторы Inkscape и пользуются. Программа распространяется на условиях GNU. Программу можно использовать для создания : http://tavmjong.free.fr/INKSCAPE/MANUAL/html/AShortExample.html Иллюстрации для Интернета Графика для мобильных телефонов Простые линейные рисунки Мультфильмы Комплексные произведения искусства Рисунки для статей и книг Организационные схемы Формат файла, который использует Inkscape, компактен и быстро передается через Интернет. Тем не менее, он мощный и может описывать сложные чертежи, которые можно масштабировать до любого размера. В рамках HTML5 все основные браузеры поддерживают прямой рендеринг SVG. Inkscape поддерживает рисование правильных фигур (прямоугольников, кругов и т. Д.), Произвольных путей и текста. Этим объектам могут быть присвоены самые разнообразные атрибуты, такие как цвет, градиентные или узорчатые заливки, альфа-смешение и маркеры. Объекты могут быть преобразованы, клонированы и сгруппированы. Гиперссылки могут быть добавлены для использования в веб-браузерах. Программа Inkscape стремится быть полностью совместимой с XML , SVG и CSS Inkscape доступен в предварительно упакованном виде для операционных систем Windows , Macintosh и Linux . Программа и ее исходный код находятся в свободном доступе. Их можно получить на сайте Inkscape . Inkscape очень быстро развивается, добавляются новые функции и постоянно улучшается соответствие стандарту SVG Методические указания к практической части курса. Для выполнения работы практической части используется программа Inkscape, которая предоставляется пользователю на бесплатной основе. Загрузить программу нужно с официального сайта https://inkscape.org/ru/ Страница сайта показана на рис. 1 Рис.1 Страница официального сайта Inkscape 1.2 Краткий обзор команд главного меню и панели инструментов При загрузке программы Inkscape, появится рабочее окно (см.рис.2). Окно интерфейса Inkscape можно разделить на девять основных областей: 1. Главное меню 2. Панель команд 3. Панель команд прилипания 4. Панель инструментов 4. Панель параметров инструментов 5. Разметка, линейки, направляющие и сетки 6. Лист (холст) 7. Полосы прокрутки 8. Образцы цветов 9. Строка состояния Рис.2 Окно программы Рассмотрим кратко команды программы. i. Главное меню содержит перечень основных используемых команд, большинство которых являются стандартными для Windows-приложений. На рисунке 3, представлен перечень наименований меню. Рис.3. Главное меню (ГМ) На рис.3.1 -3.5 показано содержание команд пунктов раскрывающегося ГМ. Рис.3.1 Файл, Правка Рис.3.2 Вид, Слой Рис.3.3 Объект, Контур Рис.3.4 Текст, Фильтры Рис.3.5 Расширение, Справка В левой части окна расположена Панель инструментов (см.рис.4), которая предназначена для выбора команд (пиктограммы) создания и обработки векторных графических объектов. Большинство команд, содержат скрытый список подкоманд. Такие команды (пиктограммы), имеют справа маленький черный треугольник, который можно раскрыть нажатием на него. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Рис.4 Основные инструменты создания и редактирования 1.Инструмент выбора и выделения, преобразования (трансформирования) объекта или группы объектов. 2. Инструмент редактирования узлов контура или рычага узлов кривой, символа текста перемещения узлов. 3. Инструмент корректирования объектов лепкой или раскрашиванием. 4. Инструмент масштабировния ( увеличения/уменьшения) изображения. 5. Инструмент измерения (линейка) элементов или изображения. 6. Инструмент создания прямоугольника, квадрата. 7. Инструмент создания круга, эллипа, дуги. 8. Инструмент создания многоугольника, звезды. 9. Инструмент создания спирали. 10. Инструмент рисования произвольных контуров. 11. Инструмент рисования кривых Безье и прямых линий. 12. Инструмент рисования каллиграфическим пером. 13. Инструмент создания и редактирования текста. 14. Инструмент распыления объектов лепкой или раскрашиванием. 15. Инструмент удаление (стирание) изображения, цвета.. 16. Инструмент заливки замкнутых областей. 17. Инструмент создания и рпавки градиента. 18. Инструмент В правой крайне части рабочего окна расположена Панель команд управления, которая предназначена для более легкого доступа к наиболее используемым командам, функциям редактора рабочей области. Панель содержит иконки – команды редактора. Эти команды также доступны в главном меню или по комбинации клавиш. Лист (Холст) является главной рабочей областью программы. Это основная часть интерфейса, лист на котором создается и редактируется графические объекты. В нижней части окна программы находится Палитра цветов, предназначенная для задания цвета к графическим объектам, сделать заливку и задать канву. Строка состояния находится в самом низу окна программы. Предназначена для отображения состояния графического объекта, таких как: цвет заливки и обводки объекта, работы со слоями и переключения между ними, сообщений, указания координат указателя мыши, масштаба. В главном меню п.Справка содержится руководство с примерами по работе в программе и учебник, который содержит всю необходимую информацию по изучению возможностей редактора по созданию векторных графических объектов, работы с растровыми изображениями, создания 3d объектов, создания эффектов методами компьютерной графики. Рассмотрим порядок работы и возможности программы на примерах. Задание 1. Построение простых графических объектов. Загрузить программу Inkscape, Появится рабочее окно (см.рис.2). В рабочем окне выбрать одну из команд: Файл ► Создать или Создать по шаблону. Выбрав команду Создать по шаблону, можно выбрать любой подходящий шаблон для работы. Желательно сразу настроить параметры размера рисунка, задав: формат листа, единицы измерения, настроив сетку. Параметры можно задать, выбрав команду главного меню Файл ► Свойства документа. В открывшемся диалоговом окне настроить так, как показано на рисунке 5. Рис.5 Окно настройки После создания документа надо его обязательно сохранить. Для построения графических объектов можно выбрать разные методы построения. Создать 1 прямоугольник, создать 5 его копий. Сделать попарную заливку разным цветом, выбрав заливку. Для изменения графического объекта, справа находится диспетчер объектов, в котором находится набор команд, применяемые к графическому объекту (см.рис.6). Рис.6 Команды преобразования графического объекта Для преобразования прямоугольника нужно его выделить, затем, нужно щелкнуть 1 раз левой кнопкой мыши. При этом, появятся виды маркеров, как показано на рис.7а ;щелкнуть еще раз, появится вид маркеров, как показано на рис.7б, щелкнуть два раза подряд, появится вид маркеров, как показано на рис.7в. На рисунке 7г показаны те же преобразования, но только для окружности. а) б) в) г) Рис.7 Преобразование объекта Используя рассмотренные операции можно построить более сложные объекты, как показано на рис.8. Рис.8 Построение сложных форм объектов Рассмотрим операции преобразования к другим графическим объектам: окружность, звезда, спираль. Выбираем команду Рисование окружности. Протягиванием создать круг. Выбрать команду Объект ►Свойства Объектов. Задать канву. Затем выбрать команду Заливка (см.рис.9) и переместить курсор мыши на окружность. В итоге получим окружность как показано на рис.11. В строке состояния (рис.10) отображается информация о параметрах заливки. Рис.9 Рис.10 Рис.11 Создав объект, можно применить к нему операции копирования, поворот, а также Объект ►Отразить вертикально или Отразить горизонтально, в результате которого будет создан объект, представленный на рис.12 Рис.12 Рассмотрим объекты, созданные с помощью команд Многоугольник, Спираль. Выбрать команду Рисование многоугольника. Применить разные варианты команд Заливка и Обводка. На рис.13а показаны результаты преобразований. На рисунке 13б показаны преобразования объектов, с применением операций Закругление, Искажение, которые появляются, если дважды щелкнуть на объекте. а) б) Рис.13 Преобразование графических фигур многоугольник, звезда. Применяя, также как и в предыдущем варианте с многоугольником разные варианты команд окна Заливка и Обводка в фигуре Спираль, можно получить разные формы фигур, как показано на рис.14 Рис.14 Преобразование графической фигуры Спираль Создание текста. Выбрать инструмент создания текста, набрать текст. Настроить размеры, начертание и т.д., используя в ГМ п. Текст, или выбрать настройки в диспетчере объектов. Для размещения текста вдоль объекта, кривой, как показано на рисунке 15, надо создать кривую, выбрав многоугольник/ кривую/ окружность и т.п., вдоль которой нужно разместить текст. Выбрать (выделить) текст и объект, выбрать команду Текст ► Разместить по контуру. Можно отменить команду, выбрав Текст ► Снять с контура. Рис.15 Текст вдоль пути Рассмотрим пример вложения текста в графический объект. Для этого нужно создать текст, создать графический объект, выделить текст и объект, выбрать команду в ГМ Текст ► Заверстать в блок (ALT+W). (см.рис.16) Рис.16 Текст в блоке Задание. Создание календаря. Для создания календаря нужно: установить свойства страницы – Альбомная, ширина - 290, длина – 210. выбрать в ГМ Расширения ► Отрисовка ► Календарь. настроить параметры в появившемся диалоговом окне, как показано на рисунке 17.1 и 17.2 Нажать на кнопки Применить, Закрыть. Рис.17.1 Рис.17.2 В результате появится изображение календаря , как показано на рисунке 18. Рис.18 Результат настроек календаря с сеткой Далее, выбрать команду Объект ► Объекты и направляющие, чтобы появились направляющие вспомогательные линии. После подготовки фоновых изображений выбрать Файл ► Импортировать. Во время импорта появится диалоговое окна, в котором будет предложено сделать выбор связать или внедрить растр. Выбрать связать. После импортирования, нужно подогнать размер изображения под размер области дней месяца (см.рис 19) рис.19 Для того, чтобы текст закрытый изображением был видимым, необходимо выбрать изображение , затем выбрать команду Объект ►Опустить. В примере, для понимания, что не каждое изображение подходит в качестве фона, выбраны разные изображения. Календарь это сложносоставной объект, который можно сгруппировать или разгруппировать и редактировать отдельно. После создания графического объекта, состоящего из разных частей, следует объединить их в один единый объект обычным выделением области протягиванием курсором мыши. Далее, выбирается команда ГМ Объект► Сгруппировать. Добавить объекты к уже выделенным можно используя комбинацию клавиш Shift + Alt. Для перемещения объекта, нужно выделить объект, нажать на клавишу Alt и удерживая эту клавишу, нажимать на клавиатуре стрелку указателя направления ◄►▲▼ . Можно улучшить текст с помощью цвета, настроив его через Заливку. Цвет нужно подобрать самостоятельно. Также, надо удалить лишние даты, выделив каждый элемент отдельно (см.рис.20). Рис.20 Создать 2 слой через команду ГМ Слой ► Создать слой. В строке состояния появится список, в котором можно будет выбрать тот слой, на котором производятся действия. Лист, на котором был создан календарь – это Layer1( слой 1). На втором созданном слое Layer2, создать прямоугольник с контуром и заливкой, используя диспетчер Свойства объекта Заливка, Обводка. После завершения работ по созданию календарь, надо отключить сетку ГМ Вид ► Сетка страницы или через Файл ►Свойства документа. После всех преобразований получен календарь, как показано на рис.21 рис.21 Задание. Создание графического объекта «Кружка» с применением кривых. Используя инструмент Рисовать кривые Бизье (см.рис 3 №12) создать кривую, как показано на рис.22 Рис.22 Выбрав инструмент, нужно щелкнуть левой кнопкой мыши в 1 точке, отпустить курсор мыши, затем щелкнуть во 2 точке, отпустить курсор мыши (рис.23 а), еще раз щелкнуть в 2 точке, отпустить курсор мыши, довести до 3 точки (рис.23 б), щелкнуть курсором мыши в 3 точке и не отпуская курсор мыши образовать требуемую кривую в левой части, выравнивания направляющую до прямой, как показано на рисунке 23 с). После этого, отпустить курсор мыши, доводим курсор мыши до точки 4, щелкнуть в точке 4 (рис.23 д) ,затем щелкнуть в точке 5, щелкнуть правой кнопкой мыши для завершения процесса рисования (рис.23. е). Результат выполненных операций показан на рис.23 и) а) б) с) д) е) и) Создать из окружности внутреннюю часть чашки. Залить цветом, как показано на рисунке 24. Создать из окружностей блюдце. Применить операцию преобразования Контур, залить, добавить инструментом Спираль узоры. Создать ручку и пар, используя инструмент 13 (см.рис.3). Рис. 24 Чайный набор Задание. Пример создания прототипа макета интерфейса веб-страницы в программе Inscape. Прототип интерфейса может быть создан в любом редакторе. В задании рассмотрен пример создания модели одной веб-страницы. Свойства окна интерфейса настроены через п.м. Файл► Свойства документа, как показано на рисунке 25. Рис 25. Настройки свойств документа Далее, требуется создать макет страницы. Сетка помогает равномерно распределить блоки по всей странице. Разделить с помощью прямоугольников страницу на смысловые блоки, разделы, например, как показано на рисунке 26. Рис 26 Разработка макета страницы Создать логотип, используя многоугольник, настроив количество В программе в ГМ Расширения ►Шрифтовой дизайн► Настроить холст Задание. Создание композиции. Для получения практических навыков по применению теоретической части раздела «Эргономика и дизайн», нужно выбрать Справка ►Учебник ► Основы дизайна (рис.27). Рис.27 Основы дизайна Рис.28 Пример Композиции При работе с композицией воспользоваться Inkscape: руководство по программе векторного рисования ► Композиционные фильтрующие примитивы. Inkscape ►Эффекты фильтра► Пользовательские►Составление примитивов фильтра. http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Filters-Compositing.html Самостоятельно исследовать примеры Глава 19. Черепица. Содержание http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Tiles.html Вкладка Симметрия, Вкладка Масштаб Вкладка Вращение Вкладка Blur Opacity Вкладка Цветная Вкладка След Вкладка Ухищерения 1. Самостоятельная работа (выполнить и отправить на проверку в СДО). 1.На рисунке 29 графический объект Муравей, создан с использованием окружностей. Усы созданы с помощью кривых. Применены операции копирования, вращения, зеркального отображения для создания лапок, усов. Самостоятельно создать такой же графический объект. Рис.29 Объект, созданный с использованием окружностей 2. Создать самостоятельно, используя команду Спираль объекты (см.рис.30). Рис.30 Объекты, созданные с использованием окружностей 3. Создать 3 графических объекта (объект логотипа, объект рекламы, объект буклета) на любые темы с использованием точек, пятен, линий. Например, логотип создается с применением точек, объект рекламы с использованием линий, объект буклета с использованием пятен). 4. Создать рекламный буклет с применением методов статической, динамической композиции. 5. Создать сюжет рекламы, с применением эффекта иллюзии. 6. Создать свой проект Композиции. Пример композиции и анимации. Рис. Кадры для анимации |