 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Лабораторна робота №1
Розробка графічного дизайну мобільного програмного середовища
засобами Adobe Photoshop
Мета роботи: освоїти основні прийоми роботи в середовищі Adobe Photoshop для розробки графічного дизайну функціональних елементів для мобільних пристроїв, набути навичок у роботі з прошарками (Layouts)
Постановка задачі
Дано: приклади зображень основних функціональних елементів програмного забезпечення для мобільних пристроїв у psd форматі.
Необхідно: перемалювати кожен елемент на окремому прошарку в програмному середовищі Adobe Photoshop і в результаті створити дизайн окремої сторінки програмного забезпечення для мобільних пристроїв (форма створення запиту, список запитів, форма пошуку інформації тощо – див. таблицю варіантів).
Теоретичні відомості
Для більш детального пояснення поставленої задачі наведемо приклад виконання лабораторної роботи. Припустимо, у вас є psd малюнок із зображенням кнопки (button), випадаючого списку (dropdown), текстового поля (textbox) та тексту (label).
Рис.1.1 Окремі графічні елементи
Для кожного елемента необхідно в програмному середовищі Adobe Photoshop створити його прототип для всіх можливих випадків стану, в якому може перебувати елемент (всі випадки будуть наведені у завданні).
Наприклад, для кнопки можливі такі варіанти стилів стану:
1. Звичайний стан: 
2. Натиснутий стан: 
3. Наведений мишою: 
4. Недоступний стан: 
В програмному середовищі Adobe Photoshop необхідно створити новий файл и на кожному новому прошарку намалювати даний функціональний елемент (кнопку) у всіх станах (окремий стан – окремий прошарок). Детальніше про прошарки [1, 2, 3]).
Аналогічно виконати завдання для всіх інших функціональних елементів: випадаючого списка, текстового поля, тексту. Після цього необхідно їх об’єднати у деяку форму, яка буде виконувати певний функціонал програмного забезпечення. Варіанти завдань див. в таблиці нижче.
План виконання завдання
1. Отримати свій варіант завдання від викладача. Навести його у звіті.
2. Користуючись таблицею варіантів (див. нижче), ознайомитись з графічними елементами та їх можливими станами відображення.
3. В програмному середовищі Adobe Photoshop створити прототипи кожного елемента у всіх можливих станах відображення (кожен стан створювати в окремому прошарку).
Всі зображення відобразити у звіті у вигляді скріншотів.
4. В окремому файлі створити дизайн окремої функціональної форми програмного забезпечення для мобільних пристроїв відповідно до завдання, використовуючи вже намальовані елементи. Остаточний варіант дизайну відобразити у звіті.
Варіанти завдань до лабораторної роботи
| Варіант | Завдання |
| Розробити графічний дизайн списку різних видів. Виконати окремо зображення елемента списку (активного, неактивного),перемикача (вкл./викл), «стрілка», «галочка». Див. файл Variant1. psd | |
| Розробити графічний дизайн сторінки профілю користувача. Виконати окремо зображення елемента кнопки (активної, неактивної),елемента «процес виконується», тексту (активного, не активного), маркер «коло». Див. файл Variant2. psd | |
| Розробити графічний дизайн тул бара для пошуку інформації та переходу між закладками. Виконати окремо зображення елемента кнопки, текстового поля, тексту (активного, неактивного), маркери «закрити», «додати», «вперед/назад», «обновити». Див. файл Variant3. psd | |
| Розробити графічний дизайн списку. Виконати окремо зображення елемента списку (активного, неактивного),перемикача (вкл./викл), елемента «стан завантаження», «галочка». Див. файл Variant4. psd | |
| Розробити графічний дизайн форми Контакти. Виконати окремо зображення елемента списку (активного, неактивного), текстового поля для пошуку, верхній тул бар для переходу між контактами, нижній тул бар для переключення між групами контактів. Див. файл Variant5. psd |
Контрольні питання
1. За допомогою яких інструментів можна змінити розмір зображення, його кут нахилу та яскравість/контрастність?
2. Як здійснити розмиття зображення?
3. Які інструменти використовуються для виділення певної області зображення?
4. Які інструменти використовуються для заливки певної області зображення?
5. В чому полягає основна ідея використання прошарків при створенні зображення?
6. Охарактеризувати пункти головного меню Прошарки (Layouts).
7. Які є типи прошарків можна створити за допомогою команди New?
8. Як продублювати/видалити прошарок? Як об’єднати декілька прошарків, що при цьому відбувається?
9. Які властивості можна настроїти для окремого прошарку?
10. Як активувати/деактивувати окремий прошарок?
11. Як зробити видимим/невидимим окремий прошарок?
12. Як змінити порядок розташування прошарків? Які є види команди Arrange для зміни порядку розташування прошарків?
13. Що таке маска прошарку і для чого вона використовується?
14. Що таке фоновий прошарок і чим він відрізняється від звичайного? ЯК його створити?
15. Чи можливо фоновий прошарок перетворити в звичайний? Якщо так, то яким чином?
16. Чи може в зображенні бути створено декілька фонових прошарків?
Література
1. С. Лендер Adobe Photoshop CS с нуля!/ Лендер С., Нечаев И. – Лучшие Книги, 2005 г. – 320 с.
2. С. Топорков Adobe Photoshop CS в примерах / Топорков С. – БХВ-Петербург, 2005 г. – 384 с.
3. К. А. Иваницкий Визуальный самоучитель Adobe Photoshop CS3 /Иваницкий К. А. – М:. Триумф, 2008 г. – 192 с
4. Online учебник по Adobe Photoshop: http://artjunkies.net/online.html
Поиск по сайту: