Дизайн мультимедийного приложения «Учебное пособие по живописи. Портрет акварелью» Текст научной статьи по специальности «Компьютерные и информационные науки»

ДИЗАЙН МУЛЬТИМЕДИЙНОГО ПРИЛОЖЕНИЯ «УЧЕБНОЕ ПОСОБИЕ ПО ЖИВОПИСИ. ПОРТРЕТ АКВАРЕЛЬЮ»

© Красновская Н.В.*, Ли В.Г.Ф, Алябьева С.Н.*

Инженерно-технологическая академия Южного федерального университета, г. Таганрог

Статья посвящена разработке дизайна основных элементов мультимедийного учебного пособия по дисциплине «Академическая живопись». Излагаются основные концепции конструирования и дизайна приложения и их реализация. Отражены методические аспекты проекта.

Ключевые слова: акварель, графический дизайн, живопись, мобильное приложение, планшетный ряд.

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

Рынок мобильных приложений сегодня постоянно растет - приходят новые разработчики, создаются новые операционные системы [1, 2]. Стоит отметить, что в более отдаленной перспективе площадки по распространению мобильных приложений будут получать самые большие доходы, связанные с их использованием, а не от их розничных продаж.

Сегодня, помимо независимых интернет-площадок для продаж мобильных приложений, собственные подобные ресурсы создают ведущие производители сотовых телефонов, смартфонов и коммуникаторов [3, 4].

На фоне обычных учебников в формате pdf, txt, doc, dj view, мультимедийное приложение гораздо удобнее для чтения и восприятия информации, что привлекает к себе большее внимание. Эти приложения популярны, так как обладают рядом преимуществ:

- презентабельность;

- удобство использования;

- интерактивность;

- возможность сочетания различных видов подачи информации (текст, картинка, видео).

Актуальность разработки мультимедийного учебника заключается не только в том, что в приложении собрана вся необходимая для данного ресурса информация, но и в его интерактивности и удобстве редактирования.

* Старший преподаватель кафедры Инженерной графики и компьютерного дизайна.

* Профессор кафедры Инженерной графики и компьютерного дизайна, доктор технических наук, доцент.

" Студент.

Подавляющее большинство известных мультимедийных учебников разработаны с использованием гипертекстовых технологий, когда в тексты включаются указатели, обеспечивающие переход в другой документ и автоматический вывод его на экран.

В процессе работы над дизайном предлагаемого приложения был произведен поиск аналогов среди доступных книг в формате .pdf и мультимедийных приложений, соответствующих теме и по программно-аппаратным или по информационным характеристикам [5,6]. Приведем лишь некоторые из них.

В качестве первого аналога анализировалась книга Чарльза Рэя «Портрет, написанный акварелью» (рис. 1). Выбор был остановлен на этом учебнике, потому что здесь наглядно и поэтапно отображена работа над портретом.

Рис. 1. Разворот книги Ч. Рэя «Портрет, написанный акварелью»

У данного учебника следует отметить следующие достоинства: академический подход к живописи; поэтапная демонстрация этапов работы; приятная техника и подача материала. Однако есть и недостатки: английский язык; отсутствие возможности редактирования; узкая направленность книги; отсутствие интерактивности.

Второй аналог - русский вариант учебника по живописи «Техника акварельной живописи», где пошагово представлены примеры работ акварелью (рис. 2) [7].

К плюсам этого учебника можно отнести: пошаговая демонстрация этапов работы; подробное понятное описание техники. Минусы: отсутствие привлекательного способа подачи материала; описание хода работы рассчитано на неподготовленную аудиторию (начальный уровень).

Третий аналог - это приложение для мобильных устройств под управлением операционной системы ЮБ (рис. 3). Содержит 32 видео-урока, «Как рисовать лица», «Как рисовать граффити», «Как рисовать персонажей мультфильмов» и т.д. Язык интерфейса английский.

Рис. 2. Разворот книги «Техника акварельной живописи»

Pencil Drawing Techniques

Draw a 3D Heart

Draw Bart Simpson

How to Draw Eyes

The Male Body

Draw a Cartoon Tiger

Рис. 3. Мобильное приложение How to Draw (Free Lessons)

Достоинства приложения: видео-уроки уже собраны, что избавляет пользователя от поисковой работы; интерактивность. Недостатки: качество уроков оставляет желать лучшего (слабая методическая проработка); скучный непривлекательный дизайн.

На основе анализа аналогов сформулированы следующие обязательные характеристики разрабатываемого мультимедийного учебника:

- приложение ориентировано на аудиторию, профессионально изучающую живопись, т.е. должно быть методически полноценным для самостоятельного освоения;

- хорошая наглядность;

- удобство работы и чтения;

- интерактивность (активные ссылки);

- возможность вставки материала широкого спектра форматов: текст, звук, картинка, видео;

- кроссплатформенность;

- является хорошим наглядным примером, демонстрирующим возможности платформы для распространения любого учебного материала.

Для оформления страниц приложения был выбран современный стиль с использованием авторской графики, полупрозрачных слоев, классической верстки. При разработке дизайна учитывался разный формат страниц для разных версий платформы iOS и для Windows [8, 9]. Во время поисков дизайна для предлагаемого приложения было рассмотрено несколько вариантов.

Первый вариант был разработан для планшета на платформе iOS. Идея этого дизайна - образ реальной книги с закладками на деревянном планшете (рис. 4). Этот вариант оценивается как неудачный, потому что много места используется нерационально и некоторые элементы отвлекают от чтения.

Рис. 4. Первый вариант страницы приложения

Другой вариант был разработан под влиянием современных тенденций разработки приложений и сайтов (рис. 5). Он не был утвержден, потому что нет наличия демонстрации авторской индивидуальности.

Рис. 5. Второй вариант страницы приложения

При разработке последнего варианта учитывалось стремление наглядно продемонстрировать содержание приложения и его методическую направленность (рис. 6). Предложен более спокойный и лаконичный шрифт для названия, подобраны спокойные цвета, сочетающиеся с авторской графикой, использован прописной шрифт.

Рис. 6. Последний вариант страницы приложения

На рис. 7 представлена композиция приложения для планшета Apple iPad и элемент навигации (активное всплывающее меню). Текст и картинки выровнены по ширине, оставлены широкие поля. Каждая глава представляет собой бесконечную страницу. Включена функция приближения - увеличения. Навигация осуществляется посредством активного содержания и всплывающего меню, которое вызывается двойным нажатием на экран.

ш_ш

н

Рис. 7. Композиционная схема экрана планшета

Главной задачей дизайнера является создание удобной приемлемой графической оболочки (интерфейса) и удобного для пользователя распределения информации.

Графическая информация передается намного медленнее текстовой, а время загрузки изображений находится в прямой зависимости от размера графических файлов, поэтому быстрая загрузка страниц предполагает небольшой размер внедренных в них графических изображений. Последнее достигается путем оптимального выбора формата графического файла, а также за счет оптимизации, задача которой - найти компромисс между скоростью загрузки страницы и качеством представленных на ней изображений [8].

Рис. 8. Карта-схема приложения

Рис. 9. Первые страницы приложения

Для разработки дизайна данного приложения требуются всего две программы - Corel Draw (для создания элементов интерфейса в формате векторной графики) и Adobe Photoshop для редактирования растровой графики.

На рис. 8 показана структура «книги». Первой страницей является обложка, второй - интерактивное содержание (рис. 9), к которому привязаны все главы учебника. Приложение «листается» как книга и открывается на том же месте, где пользователь остановился. Навигация также осуществляется посредством всплывающего меню. Каждая глава книги представляет собой бесконечную страницу.

Для создания интерфейса использованы следующие компоненты:

- полупрозрачные заголовки, которые располагаются в начале каждой главы;

- подложка под заголовки;

- дублирующийся фрагмент фона;

- квадратные элементы для всплывающего меню, представляющие собой фрагменты ключевых рисунков глав (рис. 10).

Намечая лицевую часть головы линиями, оисующий

Рис. 10. Элементы всплывающего меню приложения

Рис. 11. Фрагмент одного из разделов приложения

Текст, заносимый в приложение автоматически, верстается программой, а за дизайнером остается лишь выбор шрифта и его размера в нашем случае это шрифт «a_AvanteLt», кегль 14.

Графика, а именно картинки в формате .png, проходят через процедуру сжатия (в программе Photoshop или используется формат .jpeg), помещаются в текст книги по ширине текста (рис. 11).

Получено приложение с использованием ранее экспериментально апробированных методик обучения; разработана оригинальная графическая оболочка. Приложение обладает следующими отличительными признаками:

- эргономичный современный дизайн;

- для интерфейса используется только авторская графика;

- включены интерактивные элементы (иконка, содержание, меню быстрого доступа, активные ссылки и т.п.);

- продукт сочетает в себе различные способы подачи материала (текст, картинка, видео);

- отличается направленностью на студентов ВУЗов старших курсов, обучающихся по направлению «Дизайн»;

- в приложении собран достаточный для обучения объем информации, который можно редактировать;

- соблюдена классическая стилистика подачи информации;

- произведено гармоничное сочетание свойств книги и приложения.

Список литературы:

1. Наглядная история развития трех главных ОС мобильного рынка [Электронный ресурс]. - Режим доступа: https:// xakep.ru/2014/09/25/ios-android-wphone-history/.

2. Bakerframework [Электронный ресурс]. - Режим доступа: www.baker-framework. com.

3. Htmlbook [Электронный ресурс]. - Режим доступа: http://htmlbook.ru; http://getbootstrap.com/css/.

4. Developer.apple.com [Электронный ресурс]. - Режим доступа: https://de-veloper.apple.com/ library/ios/navigation/.

5. Programming with Objective-C Apple Inc.Infinite Loop Cupertino, CA 95014, Copyright © 2014.

6. Гаврилов Д.Е. Рекомендуемые материалы для работы акварелью [Электронный ресурс]. - Режим доступа: http://gavrilovart.ru/lessons/sove-ty/9-materialy.

7. Назаров А.К. Основные способы акварельной живописи. - М.: Орби-та-М, 2000. - 102 с.

8. Волощенко В.Ю., Ли В.Г., Никипелов М.В. Дизайн сайта «Дизайн. Четверг». Графические аспекты // Наука и современность. - 2015. - № 37-1. -С. 58-64.

9. Ли В.Г., Аббасов И.Б., Алипатов М.В. Разработка Flash-сайта музыкальной группы «E-terra» // Техшчна естетика i дизайн: Мгжвщомчий нау-ково-технiчний збiрник. Випуск 7. - К.: Вшол, 2010. - С. 48-52.

АНИМАЦИОННЫЙ РОЛИК «МЕЧТА». ГРАФИЧЕСКИЙ ДИЗАЙН

© Ли В.Г.*, Красновская Н.В.*, Фомин Д.Е.*

Инженерно-технологическая академия Южного федерального университета, г.Таганрог

Статья посвящена дизайнерским аспектам разработки короткометражного мультипликационного фильма для детей старшего дошкольного возраста. На основании сравнительного анализа фильмов-аналогов предлагается авторский процесс разработки персонажей, фонов, раскрывается суть композиционного решения кадров мультфильма, представлены процессы графической проработки компонентов фильма.

Ключевые слова: графический дизайн, мультипликация, персонажи, фон.

Главной темой разрабатываемого мультфильма является вопрос о мечте жизни, о том, что нам кажется важным, к чему мы стремимся и пытаемся достичь, забывая о действительно важных вещах. Актуальность данной работы обусловлена необходимостью борьбы с засилием мультфильмов, пропагандирующих аморальные ценности, антисоциальную жизнь, ложные идеалы и искаженное мировоззрение.

Мультфильм является особым видом визуального повествования, который привлекает зрителя, в особенности юного возраста, так легко восприимчивого для усвоения новой информации. Идеи гуманизма, заложенные в такую анимацию, ребенок усвоит на долгие годы.

Компьютер является идеальным средством для создания анимационных продуктов. Достаточно просто задать последовательность кадров, копируя изображение и слегка корректируя положение движущихся элементов изображения. Труд мультипликаторов упрощается и превращается в творческий процесс, поскольку результаты работы можно тут же просмотреть и поправить [1].

Возможностями обычной «плоской» анимации обладают графические и презентационные пакеты CorelDRAW, Harvard Graphics (Software Publishing

* Профессор кафедры Инженерной графики и компьютерного дизайна, доктор технических наук, доцент.

* Старший преподаватель кафедры Инженерной графики и компьютерного дизайна. " Студент.