Лабораторна робота №2

Розробка графічного дизайну мобільного програмного середовища

засобами Corel Draw

Мета роботи: освоїти основні прийоми роботи в середовищі Corel Draw для розробки графічного дизайну функціональних елементів для мобільних пристроїв, набути навичок у використанні Rollover (Інтерактивної кнопки).

Постановка задачі

Дано: приклади зображень основних функціональних елементів програмного забезпечення для мобільних пристроїв у jpg форматі.

Необхідно: перемалювати кожен елемент в програмному середовищі Corel Draw і в результаті створити дизайн окремої сторінки програмного забезпечення для мобільних пристроїв (форма створення запиту, список запитів, форма пошуку інформації тощо – див. таблицю варіантів).

Теоретичні відомості

Графічні посилання на web- сторінках значно краще сприймаються, якщо вони змінюють свій вигляд при наведенні на них миші й при клацанні мишею. В Corel Draw створення таких об'єктів автоматизовано за допомогою використання Rollover (Інтерактивної кнопки)..

Інтерактивна кнопка – це елемент веб-дизайну, що змінює свій зовнішній вигляд залежно від стану покажчика миші. Як правило, вона реагує на три події: NORMAL – покажчик перебуває поза кнопкою, OVER – покажчик над кнопкою й DOWN – натискання кнопки.

Для того, щоб створити інтерактивну кнопку в CorelDRAW потрібно:

1. Намалюйте об'єкт, що стане буде використовуватися в якості кнопки.

2. Виберіть команду Effects > Rollover > Create Rollover (Ефекти > Інтерактивна кнопка > Створити інтерактивну кнопку).

3. Тепер потрібно визначити стан кнопки для кожної події. Для цього виберіть команду Effects > Rollover > Edіt Rollover (Ефекти > Інтерактивна кнопка > Змінити інтерактивну кнопку). Буде викликана панель Іnternet. Зі списку, що розкривається, розташованого в лівій частині панелі, виберіть пункт NORMAL і зробіть необхідні зміни в зображенні ( наприклад, напишіть потрібний текст або змініть колір кнопки). Проробіть аналогічні дії для станів OVER і DOWN.

4. Завершіть редагування, вибравши команду Effects > Rollover > Fіnіsh Edіtіng Rollover (Ефекти > Інтерактивна кнопка > Завершити зміну інтерактивної кнопки) або клацнувши на відповідній кнопці на панелі Іnternet.

5. Для перегляду результатів виберіть команду Vіew > Enable Rollover (Вид > Відображати інтерактивні кнопки) або клацніть на кнопці панелі Іnternet, що включає відображення інтерактивних кнопок.

Інтерактивні кнопки в станах Норма (ліворуч), Наведення (у центрі) і Натискання (праворуч)

В програмному середовищі Corel Draw необхідно створити новий файл намалювати конкретний функціональний елемент (кнопку) у всіх станах з використанням Rollover. Аналогічно виконати завдання для всіх інших функціональних елементів з варіанту. Після цього необхідно їх об’єднати у деяку форму, яка буде виконувати певний функціонал програмного забезпечення. Варіанти завдань див. в таблиці нижче.

План виконання завдання

1. Отримати свій варіант завдання від викладача. Навести його у звіті.

2. Користуючись таблицею варіантів (див. нижче), ознайомитись з графічними елементами та їх можливими станами відображення.

3. В програмному середовищі Corel Draw створити прототипи кожного елемента у всіх можливих станах відображення.

Всі зображення відобразити у звіті у вигляді скріншотів.

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

Варіанти завдань до лабораторної роботи

Варіант	Завдання
1	Розробити графічний дизайн сторінки профілю користувача. Виконати окремо зображення елемента кнопки (активної, неактивної),елемента «процес виконується», тексту (активного, не активного), маркер «коло». Див. файл Variant2. Psd
2	Розробити графічний дизайн тул бара для пошуку інформації та переходу між закладками. Виконати окремо зображення елемента кнопки, текстового поля, тексту (активного, неактивного), маркери «закрити», «додати», «вперед/назад», «обновити». Див. файл Variant3. psd
3	Розробити графічний дизайн списку різних видів. Виконати окремо зображення елемента списку (активного, неактивного),перемикача (вкл./викл), «стрілка», «галочка». Див. файл Variant1. psd
4	Розробити графічний дизайн форми Контакти. Виконати окремо зображення елемента списку (активного, неактивного), текстового поля для пошуку, верхній тул бар для переходу між контактами, нижній тул бар для переключення між групами контактів. Див. файл Variant5. Psd
5	Розробити графічний дизайн списку. Виконати окремо зображення елемента списку (активного, неактивного),перемикача (вкл./викл), елемента «стан завантаження», «галочка». Див. файл Variant4. psd

Контрольні питання

1. Які дії потрібно виконати для публікації Rollover в Інтернеті?

2. Як ви розумієте поняття інтерактивна кнопка?

3. Яким чином здійснити редагування об’єкта вже створеної інтерактивної кнопки?

4. Які інструменти Corel Draw було використано у ході виконання лабораторної роботи?

5. Що таке трасування растрових об’єктів і яким чином її можна реалізувати в Corel Draw ?

6. Яка команда дозволяє перетворити векторне зображення в растрове?

7. Назвіть художні ефекти Corel Draw, які можна застосовувати для обробки не лише векторних, але й растрових об’єктів?

Література

1. Миронов Д. CorelDRAW 10: Учебный курс / Д. Миронов. – СПб.: Питер, 2001. – 444с.: ил. – (Учебный курс).

2. Смолина М. А. CorelDRAW X3. Самоучитель. – М.: «Диалектика», 2006. – С.640.

3. Комолова Н.В. CorelDRAW X4. Самоучитель. – СПб.: «БХВ-Петербург», 2008. – С. 656.

4. Online учебник по Corel Draw: http://www.cdx3.ru/