Зміст
Введення. 2
1. Особливості створення анімованих зображень у програмі Adobe ImageReady 4
1.1 Інтерфейс Adobe ImageReady. 4
1.2 Палітра Анімація. 9
1.3 Перегляд та збереження анімації. 17
2. Розробка анімованого зображення в програмі Adobe ImageReady 21
2.1 Створення інтерактивних компонентів Web - сторінок. 21
2.2 Створення анімованого банера для Інтернет - порталу. 21
Висновок. 30
Список використаної літератури .. 31
Від розробки інструментів створення анімації не залишилася осторонь і фірма Adobe, яка включила в Photoshop програму ImageReady.
Актуальність обраної теми: за допомогою цієї програми простіше всього реалізується анімація з заздалегідь підготовлених файлів малюнків, що містять фази руху, проте в ній передбачена і можливість автоматичного розрахунку проміжних кадрів.
Попередньо створений в Adobe Photoshop файл малюнка, що містить в зображенні кілька шарів, дозволяє швидко отримати анімацію, що використовує ці шари. Для цього в Photoshop призначена спеціальна кнопка (Перейти) палітри інструментів, яка запускає додаток ImageReady і завантажує в нього файл, відкритий в даний момент в растровому редакторі Photoshop.
Анімації ImageReady зберігаються у форматі GIF і можуть відтворюватися задану кількість разів, а також повторюватися в циклі. Однак вони не допускають приєднання аудіофайлів для звукового супроводу.
Шари забезпечують також зручний спосіб композиційної побудови зображення з різних графічних і текстових елементів, дозволяючи виконувати зміни кожного з них без впливу на інші елементи. Поділ елементів зображення по шарах також дає можливість застосовувати до них різні фільтри, отримуючи найрізноманітніші ефекти. Концепція шарів важлива не тільки для створення зображень в Photoshop - з появою каскадних таблиць стилів, Web-дизайнери можуть розробляти сучасні Web-сторінки, аналогічним чином маючи по шарах входять до них текст і графіку.
Предметом дослідження є програма Adobe ImageReady.
Об'єкт дослідження - розробка і створення анімованого зображення за допомогою даного програмного продукту.
Мета даної роботи - розглянути основні можливості створення анімованих зображень за допомогою програми Adobe ImageReady.
Для досягнення поставленої мети доведеться вирішити низку завдань, такі як:
· Вивчить короткі відомості про програму;
· Розглянути можливості програми;
· Проаналізувати інтерфейс програми;
· Розглянути палітру Анімація;
· Розглянути роботу по створенню графічних додатків для Web;
· На практичному прикладі зробити інформаційний банер для Інтернет - порталу і т.д.
Робота складається з вступу, двох розділів (теоретичної і практичної), висновків та списку використаної літератури.
Це не лише рядки заголовка і меню, а також цілий комплект інструментів і палітр для створення і редагування різних об'єктів, в тому числі шарів і масок. До командам меню можуть бути додані нові команди і фільтри, розроблені третіми фірмами і представлені у вигляді додаткових модулів. Палітра інструментів дозволяє створювати, редагувати і переглядати зображення, а також виділяти його області. Деякі інструменти малювання мають асоційовані палітри, наприклад такі, як (Кисті) і (Параметри), що дозволяють вибирати для них різні значення керуючих параметрів.
Розглянемо малюнок 1, що знаходяться на екрані палітри дозволяють управляти зображенням і змінювати його. Вони можуть бути відображені або приховані під час роботи, але за замовчуванням розташовуються групою в правій частині вікна програми. Щоб вивести на екран відсутню палітру, слід виконати відповідну їй команду меню (Вікно> Показати). Вона відкриває вікно однієї з груп палітр, відображаючи на першому плані вкладку до обраної палітрою. При бажанні можна об'єднати кілька палітр в одну, перетягнувши відповідну вкладку у вікно іншої палітри. Якщо палітра має асоційоване меню команд, то для його відкриття служить спеціальна кругла кнопка із стрілкою всередині. Приховати групу палітр можна клацанням на кнопці закриття в правому верхньому куті її рядки заголовка. Цей рядок використовується також для переміщення палітри по екрану.
За командою (Файл> Новий) відкривається вікно (Новий документ) для вибору параметрів створюваної в ImageReady анімації.
У цьому вікні задають розмір кадру майбутньої анімації в пікселях, її назву, а також вибирають тип першого шару, службовця фоном: (білий), (кольоровий фон), (прозорий). Клацання на кнопці ОК відкриває вікно документа з заданими властивостями.
Вікно документа ImageReady дозволяє не тільки редагувати зображення поточного кадру анімації, але й виконувати її перегляд. Завдяки наявності чотирьох вкладок воно дозволяє легко перемикатися між оригінальним зображенням і його оптимізованої версією. Крім того, воно має уявлення 2-Up, що дозволяє розташувати ці версії поруч, і уявлення 4-Up, що показує одночасно три варіанти оптимізації зображення для розміщення на Web-сторінці із завданням для них індивідуальних параметрів.
Можна тримати на екрані одночасно відкритими декілька вікон документів, в тому числі, щоб бачити кілька версій одного файлу.
Спадне меню вікна документа містить команди, що інформують про властивості оригінального і оптимізованого зображень. Клацання на стрілці, розташованій у нижньому рядку вікна, відкриває список наступних команд:
Розмір файлу оригіналу / оптимізованого зображення - перше значення представляє розмір оригінального файлу. Якщо була виконана оптимізація, то друге значення вказує розмір оптимізованого файлу і його формат у відповідності з параметрами Optimize palette;
Optimized Information (Результати оптимізації) - показує формат, розмір, кількість квітів і відсоток імітації оптимізованого зображення;
Розмір зображення - показує розмір в пікселях;
Водяний знак - дозволяє побачити цифровий підпис малюнка Digimarc, якщо вона є;
Число відмін / повторів - показує кількість можливих скасувань (повторень) дій із зображенням;
Розмір оригіналу в байтах - показує розмір оригінального зображення в байтах;
Розмір оптимізованого зображення в байтах - показує розмір оптимізованого зображення в байтах;
Економія при оптимізації - показує, на скільки зменшується розмір оптимізованого зображення;
Розмір і час завантаження для швидкостей 9.6 Kbps / 14.4 Kbps / 28.8 Kbps / 56.6 Kbps / 128 Kbps / 256 Kbps - показує розмір оптимізованого файлу і передбачуваний час завантаження при відповідній швидкості.
При достатній ширині вікна в його нижньому рядку стає доступним друге аналогічне меню, що розкривається, що містить такий же набір команд і дозволяє відобразити додатково одне з перерахованих властивостей. Adobe ImageReady може відкривати і імпортувати файли наступних форматів: PSD, AI, BMP, EPS, FlashPix, FLIC, FLI, GIF, JPEG, PCX, PDF, Pixar, PNG, MOV, Targa і TIFF. Файли AI, PDF і EPS при цьому растеризуються, тобто векторне опис зображення стає точковим.
Щоб відкрити файл, виконують команду (Файл> Відкрити), вибирають папку, в якій він знаходиться, виділяють потрібний файл і клацають на кнопці (Відкрити). Якщо файл відкривався в попередньому сеансі роботи з програмою, то його ім'я можна вибрати зі списку підменю команди (Файл> Нещодавно відкривалися). Кожен виділений файл відкривається в окремому вікні документа.
Якщо зображення, що зберігається у файлі, потрібно помістити у вже відкритий документ, то виконують команду (Файл> Помістити), яка дозволяє вказати точне місце розміщення зображення в кадрі.
У першому діалоговому вікні (розміщувані файли) вибирають файл із зображенням, а після клацання на кнопці (Відкрити) відкривається наступне вікно Place (Розміщення), в якому з розкривних списків (По горизонталі) і (По вертикалі) вибирають потрібні значення, визначаючи точку, щодо якої вимірюється зрушення вставляється зображення, і у відповідних полях введення задають значення цього зсуву у пікселях (можна задавати і негативні значення). Кнопка (Вибір) дозволяє знову відкрити вікно вибору файлу для його заміни. Клацання на кнопці ОК вікна (Розміщення) вставляє зображення у вказану позицію. При розміщенні векторного зображення, створеного в Adobe Illustrator, відкривається також вікно (Параметри растрування), в якому визначаються наступні параметри: розміри зображення (Ширина) і (Висота) в пікселях, а також встановлюються прапорці (Зберегти пропорції) для запобігання спотворення зображення при масштабуванні і (Згладжування) для отримання гладких контурів. Клацання на кнопці ОК вставляє зображення у вікно документа на новий шар.
При імпорті або скануванні зображення воно поміщається на перший шар документа. Імпорт файлу виконується по команді (Файл> Імпорт) з вибором відповідної команди підменю.
Команда цього підменю (Папки як кадри) дозволяє імпортувати всі файли зображень, що зберігаються у вибраній папці як послідовність кадрів анімації. У цьому випадку всі файли повинні мати назви, що дозволяють їх розташувати в потрібному порядку. Після імпорту файлів з папки вони не тільки створюють послідовність кадрів анімації, але й представлені окремими шарами на палітрі (Шари).
Створення додаткових шарів дозволяє організувати об'єкти за рівнями. На кожному шарі можна поміщати або малювати нові об'єкти, редагувати або змінювати розташування існуючих об'єктів, не зачіпаючи при цьому інші шари.
Шари забезпечують зручний спосіб композиційної побудови зображення з різних графічних і текстових елементів, дозволяючи виконувати в них зміни без впливу на інші елементи. Поділ елементів зображення по шарах також дає можливість застосовувати до них фільтри, забезпечуючи різне їх взаємодія. Спеціальні властивості, такі як шари-маски, які призначаються для окремих шарів, дозволяють експериментувати із зображенням і добиватися різноманітних ефектів.
Багатошарове зображення, створене в Photoshop і відкрите в ImageReady, зберігає весь набір шарів, в тому числі коригувальні шари, а також ефекти, раніше застосовані до шарів. У ImageReady можна редагувати всі шари, крім коригувальних. Однак ImageReady не підтримує шар полотна Photoshop. Цей шар перетворюється на звичайний шар, після того, як файл, створений в Photoshop, відкривається в ImageReady.
З шарами можна працювати як на вкладці оригінального вигляду вікна документа, так і на вкладці оптимізованого виду. Проте в оригінальному поданні результат буде отримано швидше. Крім того, в оптимізованому вигляді може застосовуватися лише обмежений набір інструментів редагування. При збереженні оптимізованого зображення всі верстви об'єднуються в єдиний шар зображення або при створенні анімованого GIF-файлу об'єднуються в єдиний шар кожного окремого кадру.
Палітра (Шари) відображає всі шари зображення по порядку, починаючи з самого верхнього. Разом з ім'ям шару на ній представлена мініатюра, яка показує вміст шару і змінюється в процесі його редагування. Палітра шарів дозволяє створювати нові шари, приховувати або відображати існуючі, копіювати, видаляти або об'єднувати шари.
Виділений шар є активним, і до нього можна застосовувати редагування. Виділити можна лише один з шарів. При роботі з шаром можна змінювати його колір і тон, прозорість і позицію, застосовувати до шару графічні ефекти, наприклад тінь або сяйво, і т.п.
Палітра (Анімація) - це вікно, в якому відображається послідовність кадрів з можливістю їх копіювання, переміщення, видалення та організації в будь-якому порядку. Щоб відобразити її у вікні ImageReady, виконують команду (Вікно> Показати анімацію). Для скорочення місця, займаного палітрою на екрані, можна зменшити розмір зображення окремого кадру на ній, що дозволяє бачити одночасно більше число послідовних кадрів при її фіксованою шириною (див. малюнок 2).
Палітра (Анімація) має власне меню команд, що викликається клацанням на кнопці зі стрілкою, розташованої у верхньому правому кутку. У меню представлені наступні команди:
Новий кадр - створює дублікат виділеного кадру (швидше можна виконати цю дію, якщо клацнути на кнопці Duplicates Current Frame, розташованої в нижній частині вікна палітри);
Видалити кадр - видаляє виділений кадр (ця дія також швидше виконується за допомогою клацання на кнопці з малюнком корзини в нижній частині вікна палітри);
Видалити анімацію - видаляє всі кадри анімації;
Копіювати кадр - копіює виділений кадр;
Вставити кадр - вставляє в задану позицію останній скопійований кадр;
Вибрати всі кадри - виділяє всі кадри анімації;
Проміжний - викликає діалогове вікно створення заданої кількості проміжних кадрів між двома сусідніми кадрами;
Звернути кадри - змінює порядок двох або декількох виділених кадрів в анімації;
Оптимізувати анімацію - зменшує розмір файлу анімації за допомогою засобів Bounding Box і Redundant Pixel elimination;
Підігнати шар під кадри - дозволяє при редагуванні шару за допомогою палітри (Шари) вставити зміни у всі кадри анімації;
Зробити кадри з шарів - створює кадри з шарів малюнка Photoshop;
Звести кадри в шари - об'єднує шари в кадрах анімації в один шар;
Додавати шар для нового кадру - дозволяє при створенні нового кадру створювати також новий шар, видимий тільки в цьому кадрі, для знову з'являється елемента зображення;
Нові шари відображаються у всіх кадрах - дозволяє відобразити новостворений шар у всіх кадрах анімації;
Параметри палітри - ставить одне з трьох розмірів зображення кадрів на палітрі.
Після відкриття файлу зображення він представлений на палітрі Animation (Анімація) як перший кадр послідовності. Новий кадр послідовності створюється як копія попереднього, після чого в нього можна вносити зміни, використовуючи палітру (Шари) і інструменти ImageReady.
Для зміни одного з кадрів послідовності його слід виділити. Вміст виділеного кадру відображається у вікні документа. Можна одночасно виділити декілька кадрів, розташованих як послідовно один за одним, так і в довільному порядку, редагуючи їх або застосовуючи до них команди як до групи. У вікні документа при цьому відображається тільки поточний кадр, який був виділений першим. На палітрі (Анімація) поточний кадр виділяється вузькою рамкою, в той час як всі виділені кадри помічені сірим фоном навколо їх зображень.
Щоб зробити кадр поточним, можна виконати одну з таких дій:
· Клацнути на зображенні потрібного кадру на палітрі (Анімація);
· На палітрах (Анімація) або (Шари) клацнути на кнопці (Вперед), щоб зробити поточним наступний по порядку кадр;
· На палітрах (Анімація) або (Шари) клацнути на кнопці (Назад), щоб зробити поточним попередній кадр;
Введення. 2
1. Особливості створення анімованих зображень у програмі Adobe ImageReady 4
1.1 Інтерфейс Adobe ImageReady. 4
1.2 Палітра Анімація. 9
1.3 Перегляд та збереження анімації. 17
2. Розробка анімованого зображення в програмі Adobe ImageReady 21
2.1 Створення інтерактивних компонентів Web - сторінок. 21
2.2 Створення анімованого банера для Інтернет - порталу. 21
Висновок. 30
Список використаної літератури .. 31
Введення
У своїй роботі я хочу розглянути створення анімованих зображень у програмі Adobe ImageReady. На сьогоднішній день велика кількість фірм виставляють на продаж розроблені ними програми, намагаючись скласти конкуренцію лідерам продажів.Від розробки інструментів створення анімації не залишилася осторонь і фірма Adobe, яка включила в Photoshop програму ImageReady.
Актуальність обраної теми: за допомогою цієї програми простіше всього реалізується анімація з заздалегідь підготовлених файлів малюнків, що містять фази руху, проте в ній передбачена і можливість автоматичного розрахунку проміжних кадрів.
Попередньо створений в Adobe Photoshop файл малюнка, що містить в зображенні кілька шарів, дозволяє швидко отримати анімацію, що використовує ці шари. Для цього в Photoshop призначена спеціальна кнопка (Перейти) палітри інструментів, яка запускає додаток ImageReady і завантажує в нього файл, відкритий в даний момент в растровому редакторі Photoshop.
Анімації ImageReady зберігаються у форматі GIF і можуть відтворюватися задану кількість разів, а також повторюватися в циклі. Однак вони не допускають приєднання аудіофайлів для звукового супроводу.
Шари забезпечують також зручний спосіб композиційної побудови зображення з різних графічних і текстових елементів, дозволяючи виконувати зміни кожного з них без впливу на інші елементи. Поділ елементів зображення по шарах також дає можливість застосовувати до них різні фільтри, отримуючи найрізноманітніші ефекти. Концепція шарів важлива не тільки для створення зображень в Photoshop - з появою каскадних таблиць стилів, Web-дизайнери можуть розробляти сучасні Web-сторінки, аналогічним чином маючи по шарах входять до них текст і графіку.
Предметом дослідження є програма Adobe ImageReady.
Об'єкт дослідження - розробка і створення анімованого зображення за допомогою даного програмного продукту.
Мета даної роботи - розглянути основні можливості створення анімованих зображень за допомогою програми Adobe ImageReady.
Для досягнення поставленої мети доведеться вирішити низку завдань, такі як:
· Вивчить короткі відомості про програму;
· Розглянути можливості програми;
· Проаналізувати інтерфейс програми;
· Розглянути палітру Анімація;
· Розглянути роботу по створенню графічних додатків для Web;
· На практичному прикладі зробити інформаційний банер для Інтернет - порталу і т.д.
Робота складається з вступу, двох розділів (теоретичної і практичної), висновків та списку використаної літератури.
1. Особливості створення анімованих зображень у програмі Adobe ImageReady
1.1 Інтерфейс Adobe ImageReady
Хоча програма ImageReady може бути відкрита незалежно від Photoshop, її вікно включає стандартний набір елементів, властивий цьому растровому редакторові.Це не лише рядки заголовка і меню, а також цілий комплект інструментів і палітр для створення і редагування різних об'єктів, в тому числі шарів і масок. До командам меню можуть бути додані нові команди і фільтри, розроблені третіми фірмами і представлені у вигляді додаткових модулів. Палітра інструментів дозволяє створювати, редагувати і переглядати зображення, а також виділяти його області. Деякі інструменти малювання мають асоційовані палітри, наприклад такі, як (Кисті) і (Параметри), що дозволяють вибирати для них різні значення керуючих параметрів.
Розглянемо малюнок 1, що знаходяться на екрані палітри дозволяють управляти зображенням і змінювати його. Вони можуть бути відображені або приховані під час роботи, але за замовчуванням розташовуються групою в правій частині вікна програми. Щоб вивести на екран відсутню палітру, слід виконати відповідну їй команду меню (Вікно> Показати). Вона відкриває вікно однієї з груп палітр, відображаючи на першому плані вкладку до обраної палітрою. При бажанні можна об'єднати кілька палітр в одну, перетягнувши відповідну вкладку у вікно іншої палітри. Якщо палітра має асоційоване меню команд, то для його відкриття служить спеціальна кругла кнопка із стрілкою всередині. Приховати групу палітр можна клацанням на кнопці закриття в правому верхньому куті її рядки заголовка. Цей рядок використовується також для переміщення палітри по екрану.
За командою (Файл> Новий) відкривається вікно (Новий документ) для вибору параметрів створюваної в ImageReady анімації.
У цьому вікні задають розмір кадру майбутньої анімації в пікселях, її назву, а також вибирають тип першого шару, службовця фоном: (білий), (кольоровий фон), (прозорий). Клацання на кнопці ОК відкриває вікно документа з заданими властивостями.
Вікно документа ImageReady дозволяє не тільки редагувати зображення поточного кадру анімації, але й виконувати її перегляд. Завдяки наявності чотирьох вкладок воно дозволяє легко перемикатися між оригінальним зображенням і його оптимізованої версією. Крім того, воно має уявлення 2-Up, що дозволяє розташувати ці версії поруч, і уявлення 4-Up, що показує одночасно три варіанти оптимізації зображення для розміщення на Web-сторінці із завданням для них індивідуальних параметрів.
Можна тримати на екрані одночасно відкритими декілька вікон документів, в тому числі, щоб бачити кілька версій одного файлу.
Спадне меню вікна документа містить команди, що інформують про властивості оригінального і оптимізованого зображень. Клацання на стрілці, розташованій у нижньому рядку вікна, відкриває список наступних команд:
Розмір файлу оригіналу / оптимізованого зображення - перше значення представляє розмір оригінального файлу. Якщо була виконана оптимізація, то друге значення вказує розмір оптимізованого файлу і його формат у відповідності з параметрами Optimize palette;
Optimized Information (Результати оптимізації) - показує формат, розмір, кількість квітів і відсоток імітації оптимізованого зображення;
Розмір зображення - показує розмір в пікселях;
Водяний знак - дозволяє побачити цифровий підпис малюнка Digimarc, якщо вона є;
Число відмін / повторів - показує кількість можливих скасувань (повторень) дій із зображенням;
Розмір оригіналу в байтах - показує розмір оригінального зображення в байтах;
Розмір оптимізованого зображення в байтах - показує розмір оптимізованого зображення в байтах;
Економія при оптимізації - показує, на скільки зменшується розмір оптимізованого зображення;
Розмір і час завантаження для швидкостей 9.6 Kbps / 14.4 Kbps / 28.8 Kbps / 56.6 Kbps / 128 Kbps / 256 Kbps - показує розмір оптимізованого файлу і передбачуваний час завантаження при відповідній швидкості.
При достатній ширині вікна в його нижньому рядку стає доступним друге аналогічне меню, що розкривається, що містить такий же набір команд і дозволяє відобразити додатково одне з перерахованих властивостей. Adobe ImageReady може відкривати і імпортувати файли наступних форматів: PSD, AI, BMP, EPS, FlashPix, FLIC, FLI, GIF, JPEG, PCX, PDF, Pixar, PNG, MOV, Targa і TIFF. Файли AI, PDF і EPS при цьому растеризуються, тобто векторне опис зображення стає точковим.
Щоб відкрити файл, виконують команду (Файл> Відкрити), вибирають папку, в якій він знаходиться, виділяють потрібний файл і клацають на кнопці (Відкрити). Якщо файл відкривався в попередньому сеансі роботи з програмою, то його ім'я можна вибрати зі списку підменю команди (Файл> Нещодавно відкривалися). Кожен виділений файл відкривається в окремому вікні документа.
Якщо зображення, що зберігається у файлі, потрібно помістити у вже відкритий документ, то виконують команду (Файл> Помістити), яка дозволяє вказати точне місце розміщення зображення в кадрі.
У першому діалоговому вікні (розміщувані файли) вибирають файл із зображенням, а після клацання на кнопці (Відкрити) відкривається наступне вікно Place (Розміщення), в якому з розкривних списків (По горизонталі) і (По вертикалі) вибирають потрібні значення, визначаючи точку, щодо якої вимірюється зрушення вставляється зображення, і у відповідних полях введення задають значення цього зсуву у пікселях (можна задавати і негативні значення). Кнопка (Вибір) дозволяє знову відкрити вікно вибору файлу для його заміни. Клацання на кнопці ОК вікна (Розміщення) вставляє зображення у вказану позицію. При розміщенні векторного зображення, створеного в Adobe Illustrator, відкривається також вікно (Параметри растрування), в якому визначаються наступні параметри: розміри зображення (Ширина) і (Висота) в пікселях, а також встановлюються прапорці (Зберегти пропорції) для запобігання спотворення зображення при масштабуванні і (Згладжування) для отримання гладких контурів. Клацання на кнопці ОК вставляє зображення у вікно документа на новий шар.
При імпорті або скануванні зображення воно поміщається на перший шар документа. Імпорт файлу виконується по команді (Файл> Імпорт) з вибором відповідної команди підменю.
Команда цього підменю (Папки як кадри) дозволяє імпортувати всі файли зображень, що зберігаються у вибраній папці як послідовність кадрів анімації. У цьому випадку всі файли повинні мати назви, що дозволяють їх розташувати в потрібному порядку. Після імпорту файлів з папки вони не тільки створюють послідовність кадрів анімації, але й представлені окремими шарами на палітрі (Шари).
Створення додаткових шарів дозволяє організувати об'єкти за рівнями. На кожному шарі можна поміщати або малювати нові об'єкти, редагувати або змінювати розташування існуючих об'єктів, не зачіпаючи при цьому інші шари.
Шари забезпечують зручний спосіб композиційної побудови зображення з різних графічних і текстових елементів, дозволяючи виконувати в них зміни без впливу на інші елементи. Поділ елементів зображення по шарах також дає можливість застосовувати до них фільтри, забезпечуючи різне їх взаємодія. Спеціальні властивості, такі як шари-маски, які призначаються для окремих шарів, дозволяють експериментувати із зображенням і добиватися різноманітних ефектів.
Багатошарове зображення, створене в Photoshop і відкрите в ImageReady, зберігає весь набір шарів, в тому числі коригувальні шари, а також ефекти, раніше застосовані до шарів. У ImageReady можна редагувати всі шари, крім коригувальних. Однак ImageReady не підтримує шар полотна Photoshop. Цей шар перетворюється на звичайний шар, після того, як файл, створений в Photoshop, відкривається в ImageReady.
З шарами можна працювати як на вкладці оригінального вигляду вікна документа, так і на вкладці оптимізованого виду. Проте в оригінальному поданні результат буде отримано швидше. Крім того, в оптимізованому вигляді може застосовуватися лише обмежений набір інструментів редагування. При збереженні оптимізованого зображення всі верстви об'єднуються в єдиний шар зображення або при створенні анімованого GIF-файлу об'єднуються в єдиний шар кожного окремого кадру.
Палітра (Шари) відображає всі шари зображення по порядку, починаючи з самого верхнього. Разом з ім'ям шару на ній представлена мініатюра, яка показує вміст шару і змінюється в процесі його редагування. Палітра шарів дозволяє створювати нові шари, приховувати або відображати існуючі, копіювати, видаляти або об'єднувати шари.
Виділений шар є активним, і до нього можна застосовувати редагування. Виділити можна лише один з шарів. При роботі з шаром можна змінювати його колір і тон, прозорість і позицію, застосовувати до шару графічні ефекти, наприклад тінь або сяйво, і т.п.
1.2 Палітра Анімація
Adobe ImageReady - це потужний і зручний інструмент для створення GIF-анімації. Кожна анімація представляється поруч кадрів, для управління якими призначені як палітра (Анімація), так і палітра (Шари). Якщо палітра шарів відома з растрового редактора Photoshop, то палітра анімації з'являється тільки в програмі ImageReady.Палітра (Анімація) - це вікно, в якому відображається послідовність кадрів з можливістю їх копіювання, переміщення, видалення та організації в будь-якому порядку. Щоб відобразити її у вікні ImageReady, виконують команду (Вікно> Показати анімацію). Для скорочення місця, займаного палітрою на екрані, можна зменшити розмір зображення окремого кадру на ній, що дозволяє бачити одночасно більше число послідовних кадрів при її фіксованою шириною (див. малюнок 2).
Палітра (Анімація) має власне меню команд, що викликається клацанням на кнопці зі стрілкою, розташованої у верхньому правому кутку. У меню представлені наступні команди:
Новий кадр - створює дублікат виділеного кадру (швидше можна виконати цю дію, якщо клацнути на кнопці Duplicates Current Frame, розташованої в нижній частині вікна палітри);
Видалити кадр - видаляє виділений кадр (ця дія також швидше виконується за допомогою клацання на кнопці з малюнком корзини в нижній частині вікна палітри);
Видалити анімацію - видаляє всі кадри анімації;
Копіювати кадр - копіює виділений кадр;
Вставити кадр - вставляє в задану позицію останній скопійований кадр;
Вибрати всі кадри - виділяє всі кадри анімації;
Проміжний - викликає діалогове вікно створення заданої кількості проміжних кадрів між двома сусідніми кадрами;
Звернути кадри - змінює порядок двох або декількох виділених кадрів в анімації;
Оптимізувати анімацію - зменшує розмір файлу анімації за допомогою засобів Bounding Box і Redundant Pixel elimination;
Підігнати шар під кадри - дозволяє при редагуванні шару за допомогою палітри (Шари) вставити зміни у всі кадри анімації;
Зробити кадри з шарів - створює кадри з шарів малюнка Photoshop;
Звести кадри в шари - об'єднує шари в кадрах анімації в один шар;
Додавати шар для нового кадру - дозволяє при створенні нового кадру створювати також новий шар, видимий тільки в цьому кадрі, для знову з'являється елемента зображення;
Нові шари відображаються у всіх кадрах - дозволяє відобразити новостворений шар у всіх кадрах анімації;
Параметри палітри - ставить одне з трьох розмірів зображення кадрів на палітрі.
Після відкриття файлу зображення він представлений на палітрі Animation (Анімація) як перший кадр послідовності. Новий кадр послідовності створюється як копія попереднього, після чого в нього можна вносити зміни, використовуючи палітру (Шари) і інструменти ImageReady.
Для зміни одного з кадрів послідовності його слід виділити. Вміст виділеного кадру відображається у вікні документа. Можна одночасно виділити декілька кадрів, розташованих як послідовно один за одним, так і в довільному порядку, редагуючи їх або застосовуючи до них команди як до групи. У вікні документа при цьому відображається тільки поточний кадр, який був виділений першим. На палітрі (Анімація) поточний кадр виділяється вузькою рамкою, в той час як всі виділені кадри помічені сірим фоном навколо їх зображень.
Щоб зробити кадр поточним, можна виконати одну з таких дій:
· Клацнути на зображенні потрібного кадру на палітрі (Анімація);
· На палітрах (Анімація) або (Шари) клацнути на кнопці (Вперед), щоб зробити поточним наступний по порядку кадр;
· На палітрах (Анімація) або (Шари) клацнути на кнопці (Назад), щоб зробити поточним попередній кадр;
· На палітрі (Анімація) клацнути на кнопці (Перемотка), щоб зробити поточним перший кадр анімації.
Щоб виділити кілька кадрів як групу, можна виконати одну з таких дій:
· Виділити перший кадр безперервної групи і, утримуючи клавішу Shift клацнути по заключного кадру виділеної групи;
· Клацати по кадрам, розташованим у довільній послідовності, при натиснутій клавіші Ctrl;
· Виділити всі кадри анімації можна командою (Вибрати всі кадри) у спадному меню палітри (Анімація).
Прибрати кадр з виділеної групи можна, повторно клацнувши по ньому, утримуючи клавішу Ctrl.
Виділену групу кадрів можна перемістити, змінивши її місце в послідовності, або, якщо це безперервна група кадрів, замінити їх порядок зворотним. При переміщенні довільно виділених кадрів в новій позиції вони розташуються послідовно один за одним.
Щоб видалити виділені кадри, можна виконати одну з таких дій:
· Скористатися командою (Видалити кадри) з меню палітри (Анімація);
· Клацнути на кнопці (Корзина) і підтвердити видалення клацанням на кнопці (Так) діалогового вікна;
· Перетягнути мишею виділені кадри на значок кошика палітри Animation (Анімація).
Команди копіювання і вставки кадрів меню палітри (Анімація) дозволяють отримати копію кадру, яка може бути вставлена в будь-яке місце послідовності. При цьому копіюється не саме зображення, а та конфігурація шарів і їх атрибутів, яка властива даному кадру. При вставці в кадри місця призначення поточної анімації або інший анімації слід вказати метод, який буде використаний при вставці:
(Замінити кадри) - дозволяє замінити виділені кадри скопійованими. При вставці кадрів в той же самий зображення до нього не додаються нові шари, а замінюються тільки їх атрибути тими, що були в скопійованих кадрах. При вставці кадрів у нове зображення до нього додаються нові шари, і їм присвоюється властивість (видимий), старим ж верствам присвоюється властивість (прихований).
Вставити у виділені - додає вміст вставляються кадрів в якості нових шарів зображення. При вставці кадрів в той же самий зображення число шарів у ньому подвоюється, причому вставлені шари в кадрах призначення будуть видимими, а існували раніше - приховані. В інших кадрах анімації вставлені шари будуть приховані.
Вставити перед виділенням або Вставити після виділення - додає скопійоване число кадрів перед або після виділення, причому нові шари додаються до зображення і будуть видимі тільки в знову доданих кадрах, в яких існували до вставки шари зображення будуть приховані.
Прапорець (Зв'язати додаються шари) дозволяє зв'язати вставляються шари і потім одночасно змінювати їхню позицію. Після клацання на кнопці ОК виконується обраний спосіб вставки.
У ImageReady кожен шар розглядається як окремий елемент анімації. Використовуючи команди і параметри палітри (Шари), можна задавати потрібні зміни, домагаючись створення анімаційних ефектів у зображенні, тому що зміни будуть впливати тільки на виділені кадри. Можна міняти положення об'єкта, його прозорість, а також розраховувати проміжні кадри, використовуючи команду (Проміжний). Зміни, виконані на палітрі (Шари), можна застосувати до всіх кадрів, якщо виконати команду (Підігнати шар під кадри).
Проте зміни об'єкта, що впливають на параметри пікселів (такі, як розфарбування, зміна тону або кольору, трансформації), впливають на всі кадри анімації, в яких представлений даний об'єкт. Для анімації подібних властивостей слід створювати окремі шари з різними параметрами для кожного змінюваного кадру, задаючи відповідний режим видимості.
Застосування ефекту до шару-масці впливає на всі кадри, в яких представлений цей шар, проте при цьому маска може додатково змінювати своє положення.
Створення анімації зміною параметрів шарів виконується досить просто і надає, якщо зберегти її у форматі документа Photoshop, подальшу можливість її редагування. При створенні анімації в ImageReady аніміруемие об'єкти слід розміщувати на різних шарах, пов'язуючи ці верстви в групи.
Можливість автоматичного створення проміжних кадрів анімації є дуже корисною і може бути застосована як до графічних, так і до текстових зображень. Ця функція дозволяє розраховувати кадри, в яких об'єкт може переміщатися, з'являтися або зникати, а також до нього може бути застосовано поступово посилюється ефект.
Перед розрахунком проміжних кадрів слід виділити один або кілька послідовних кадрів. Якщо виділений один кадр, то розраховані кадри вставляються між ним і попереднім або ж подальшим кадрами. Якщо виділено два послідовних кадру, то нові кадри вставляються між ними. Для виділеної безперервної групи кадрів всі проміжні кадри (тобто всі, крім першого і останнього) замінюються кадрами, розрахованими по команді (Проміжний). Виділення першого і останнього кадрів анімації також розглядається як послідовне і дозволяє додати розраховані кадри в кінець анімації, забезпечуючи безперервність при її циклічному повторенні.
Потім у спадному меню вибирається команда (Проміжний) або виконується клацання по однойменній кнопці палітри (Анімація). У вікні (Розрахунок проміжних кадрів) задаються наступні параметри:
Час демонстрації кожного кадру в секундах зазначено під зображенням кадру. Щоб його змінити, слід виділити один чи кілька кадрів і клацнути на величині часу затримки, що викличе меню з набором постійних значень. Вибір значення (Інше) відкриває діалогове вікно (Час кадру), в якому можна задати довільне число секунд. Після клацання на кнопці ОК цей час буде присвоєно всіх виділених кадрів анімації. Слід зазначити, що під час перегляду анімації в ImageReady час демонстрації кадрів може відрізнятися від встановленого. Тому перегляд слід виконувати в браузері, де цей час точно витримується.
Створювана анімація при відтворенні може бути повторена задане число разів. Для цього клацанням на спадному списку (Вибір параметрів повторення), розташованому в лівому нижньому кутку палітри (Анімація), вибирається одне зі значень списку: (Одноразово), (Нескінченно) або (Інше). В останньому випадку в діалоговому вікні (Кількість повторів) вводиться потрібне числове значення.
Метод видалення кадру визначає, чи збережеться зображення попереднього кадру при демонстрації наступного. При використанні кадрів з прозорим фоном в цьому випадку буде видно зображення попередніх кадрів.
Вибір методу здійснюється для одного або декількох виділених кадрів за допомогою контекстного меню, що викликається клацанням правої кнопки миші на малюнку кадру у вікні (Анімація):
Автоматично - встановлюється за умовчанням, автоматично стираючи зображення поточного кадру, якщо наступний містить прозорий шар;
He видаляти - зберігає зображення попереднього кадру, додаючи до нього зображення наступного, причому попередній перегляд такої анімації слід виконувати в браузері;
Відновити фон - дозволяє демонструвати в кожен момент часу тільки один кадр.
Для методів (He видаляти) і (Відновити фон) у малюнків кадрів з'являється спеціальна відмітка Disposal Method icon, що вказує на тип методу.
При збереженні анімації у форматі GIF початкові шари зображень губляться, тому що в кожному кадрі всі верстви зводяться до єдиного шару. Тому якщо потрібне подальше редагування анімації, то її доцільно зберегти у форматі Photoshop, що містить всі вихідні шари зображень. При необхідності можна отримати зведення шарів у кадрах цього файлу, виконавши команду (Звести кадри в шари). Ця команда дозволяє створити окремий зведений шар для кожного з кадрів і оберегти вихідні верстви, зробивши їх таємними, для подальшого створення нових кадрів.
Відкриваючи в ImageReady файл Photoshop, що містить декілька шарів, кожен шар можна зробити окремим кадром анімації. Для цього в меню команд палітри (Анімація) передбачена команда (Створити кадри з шарів), що розбирає шари з кадрів, після чого файл можна зберігати як анімований GIF з вибраними параметрами оптимізації.
Незалежно від заданого числа повторів анімації вона в цьому випадку відтворюється в нескінченному циклі. Щоб завершити перегляд анімації, слід клацнути на кнопці (Стоп). Повернутися до початкового кадру можна, клацнувши на кнопці (Перемотка).
Для перегляду анімації у вікні браузера виконують команду (Файл> Перегляд) з вибором назви оглядача в підменю, або клацають на кнопці (Перегляд у браузері за замовчуванням) стандартної панелі. Для зупинки анімації використовують кнопку панелі інструментів браузера (Стоп), а для повторного перегляду - кнопку (Оновити).
Управління параметрами оптимізації для різних уявлень вікна документа 2-Up і 4-Up виконується за допомогою установок вікна, що викликається по команді (Правка> Установки> Оптимізація). У вікні (Установки) в області (Оптимізація за замовчуванням) можна вибрати одне із значень:
(Попередні) - автоматично застосовуються параметри останньої оптимізації;
(Автовибір) - автоматично вибирається оптимізація як GIF або JPEG за результатами аналізу зображення;
(Пойменовані) - з вибором пойменованого набору установок з розкривного списку.
В областях 2-Up Settings або 4-Up Settings визначаються параметри для чотирьох панелей (3-я і 4-я панелі доступні тільки у вигляді 4-Up):
(Оригінал) - відображає на панелі вихідне зображення (значення доступно тільки для першої панелі);
(Поточні) - відображає на вибраної панелі зображення з поточними значеннями параметрів Optimize palette (значення доступне для всіх панелей);
(Автоматично) - відображає найменшу за розміром версію, що згенерувала автоматично ImageReady на основі поточних параметрів Optimize palette (значення є для другої, третьої і четвертої панелей).
Також можливий вибір одного з дванадцяти пойменованих наборів установок, які забезпечують демонстрацію на даній панелі зображення, що відповідає цим настановам (значення є для другої, третьої і четвертої панелей).
Оптимізація необхідна для зменшення розміру файлу формату GIF, який є єдиним форматом в ImageReady, що дозволяє демонструвати анімацію на Web-сторінці. Крім завдання стандартних параметрів оптимізації слід при редагуванні кадрів анімації залишати в них тільки змінюються області на прозорому фоні, що дозволяє значно скоротити розмір одержуваного файлу. Скорочення кількості кольорів у палітрі також зменшує розмір файлу, однак, щоб запобігти мерехтіння зображення при відтворенні і зберегти можливість відображення колірних відтінків, відсутніх у палітрі, використовується спеціальна техніка імітації. У цьому випадку буде потрібно більше часу на створення результуючого GIF-файлу.
Вибір команди (Оптимізувати анімацію) з меню команд палітри (Анімація) відкриває однойменне вікно, в якому за замовчуванням встановлені прапорці:
Гранична рамка - обрізає кожен кадр за розміром змінною області (файл з такими кадрами можна редагувати тільки в програмах, що підтримують цей режим);
Видалення надлишкових пікселів - робить прозорими все не змінилися пікселі в кадрі (щоб цей параметр працював, необхідно встановити параметр (Прозорість) у палітрі і вибрати метод зміни кадрів Automatic).
Клацання на кнопці ОК запускає оптимізацію.
Створену анімацію можна зберегти у форматі GIF або як фільм QuickTime. Інші формати файлів, такі як JPEG або PNG, збережуть лише перший кадр зображення, не дозволяючи відтворити всю анімацію. Існує кілька способів зберегти оптимізовану анімацію для використання на Web-сторінці. У ImageReady досить вибрати команду (Файл> Зберегти оптимізований), щоб зберегти анімацію з установками, обраними за попереднього її збереженні. Якщо це не перше збереження, то діалогове вікно (Зберегти) не з'являється і назва файлу і його параметри залишаються тими ж, що були присвоєні раніше.
Вибір команди (Файл> Зберегти як оптимізований) дозволяє змінити ім'я файлу і вибрати інше місце його зберігання. Крім того, можливий вибір зміненого параметра (Тип файлу) з набору доступних значень:
(HTML і малюнки) - генерує HTML-файл і зберігає кожен зображення у вигляді окремого файлу;
(Тільки малюнки) - зберігає тільки зображення в окремому файлі;
(Тільки HTML) - зберігає тільки HTML-файл без файлів зображень.
Крім того, ImageReady дозволяє створити HTML-файл по команді (Копіювати HTML), яка копіює код HTML в буфер обміну, а потім він може бути вставлений на Web-сторінку в будь-якому HTML-редакторі. У разі змін вихідного зображення для оновлення HTML-файлу виконують команду (Оновити HTML) із зазначенням імені оновлюваного файлу.
Щоб зберегти анімацію у форматі QuickTime, слід вибрати команду (Файл> Експорт початкового) і у спадному списку вибрати значення QuickTime Movie (воно буде доступно, якщо на комп'ютері встановлена програма QuickTime). Вказавши ім'я файлу і його місце розташування, клацанням на кнопці (Зберегти) створюємо файл вибраного типу.
Photoshop забезпечує підготовку статичних зображень для Web з можливістю їх розподілу на окремі області, пов'язані гіперпосиланнями з цільовими об'єктами;
ImageReady крім всіх можливостей, що надаються Photoshop, включає також інструменти для створення динамічних елементів, таких як анімації та інтерактивні кнопки.
За допомогою ImageReady можна створити цілу анімовану Web-сторінку, що використовує комбінацію текстів, малюнків і графічних об'єктів. При цьому попередньо слід продумати черговість їх появи і переміщення в межах сторінки, яка повинна мати стандартний розмір, щоб повністю відображатися у вікні браузера. Однак найчастіше ImageReady використовують для створення таких інтерактивних компонентів Web-сторінки, як графічні карти або анімовані кнопки.
У відповідності зі старими традиціями ставиться рамка в один піксель, як видно на малюнку 4 вона знаходиться в окремому шарі, хоча це не необхідно. Прийнято вважати, і мені здається не без підстав, що рамка в банері надає йому деяку акуратність.
Починаємо малювати елементи нашого банера. У даному випадку я збираюся намалювати кількох абстрактних чоловічків, один з яких буде різко відрізнятися за кольором від інших, також я планую створити напис «design different» - наслідування слогану компанії Apple Macintosh «Think different». Я хочу, щоб і напис і помаранчевий чоловічок блимали. Чоловічків малюю в даному випадку попіксельно (тобто збільшую зображення до 1600% і заливаю фарбою кожен піксель вручну). Це дає колосальну економію в розмірі файлу. Якщо на малюнку 5 голова чоловічка має по краях області світло-сірого - це добре видно при сильному увелечение, то в наслідок я переведу вручну все світло-сірі пікселі в один колір і зроблю голову більш примітивною, на якості промальовування це не позначиться, зате дасть економію в розмірі файлу.
Зверніть увагу, на малюнку 6 є виділена пунктиром область. Вона буде залита білим в окремому шарі 2, він «вище» тексту і за рахунок включення / вимикання цього шару вийти миготіння слова «different». Аналогічна ситуація з миготливим чоловічком, помаранчевий перебувати в шарі yell.
Як бачите банер готовий. Він ще не блимає і ніяк не оптимізований. Зберігаємо в його форматі psd і натискаємо на піктограму ImageReady, значок підсвічений на малюнку 7. Після чого Photoshop автоматично запустить ImageReady, причому наш psd файл вже буде відкрито в ImageReady.
На малюнку 8 ми бачимо невелику область вікна ImageReady. Спробую пояснити. Зовні ImageReady на 80% схожий на Photoshop. Але його основна сфера зайнятості - веб, тому в нього свої викладки. Наприклад, у випадку з банером нам знадобляться дві викладки - Анімація і Оптимізація. І та і інша добре видно на рисунках 9 і 10. Про оптимізацію пізніше, а зараз кілька слів про анімацію. Викладення анімації дозволяє створити кадр (малюнок 7, лівіше кошики; в ImageReady - Дублювання вихідного кадру), призначити час його програвання (спливаюче меню на малюнку 8), програти. Технічне відступ. Крім Анімації є ще дві викладки: Частина і Прокрутка. Перша дозволяє «різати» наш малюнок та оптимізувати окремі його фрагменти з різними установками. Наприклад, є великий малюнок, в одній його частині є порожня область, в інший шматок фотографії. Зберігаючи кожну область малюнка окремо ми отримаємо дуже велику економію загального розміру. Крім того, коли вантажиться не один великий малюнок, а багато маленьких, створюється враження, що сторінка вантажиться швидше. Викладення Прокрутка дозволяє працювати з картинками, html і JavaScript, з тим, що прийнято називати роловерамі - графічними подіями, що відбуваються при проходженні курсора мишки по області малюнка. Наприклад, ми хочемо намалювати меню, при наведенні мишки на яку пункти меню будуть змінювати свій вигляд (технічно це просто зміна картинок). За допомогою викладки Прокрутка цей процес буде зведений до мінімуму: намалювати малюнок, його варіант реакції на курсор мишки (наприклад, шари), задати умови прокручування та збереження Зберегти оптимізацію як ... клікнувши галочку Update HTML.
На рисунку 9 в нашій анімації існує всього два кадри (в термінах ImageReady - кадр). Перший кадр триває 1 секунду, другій - 3. Відмінності кадрів я не показую, але, як я вже згадував, я включаю \ вимикаю шари, за рахунок чого в кінцевому файлі формату gif ми отримаємо блимання. Нагадаю, що ми досі працюємо з файлом psd. І нам ще доступні шари. Коли ми збережемо анімований gif і спробуємо відкрити його в тому ж ImageReady, то ми отримаємо анімований gif, причому не буде ніяких верств - тільки кадри. Якщо відкрити цей gif в Photoshop'е, то ми побачимо лише перший кадр анімації.
На малюнку 10 у нас уже 7 кадрів. Зверніть увагу, всі кадри мають різний час показу. Власне банер готовий. Натиснувши кнопку Відтворити анімацію ми побачимо, як буде виглядати наш анімований gif файл. Залишилося оптимізувати і зберегти.
На рисунку 9 - оптимізація. Я вибираю 16 кольорів, хоча в даному випадку можна вибрати три кольори, так як у банері використані темно-сірий, білий і жовтогарячий. Взагалі питання оптимізації gif насамперед зводиться до скорочення кількості використовуваних кольорів. У деяких випадках доводиться задіяти інші пункти викладки Оптимізація. Але чітких рад тут дати не можна - експериментуйте. До речі, на малюнку 8 видно, що вікно нашого банера має декілька закладок: Оригінальна - для psd, Оптимізована - банер виглядає у відповідності з нашими установками меню Оптимізація, 2-Up - 2 малюнки для порівняння налаштувань, 4-Up - 4 малюнка для порівняння . Всі ці закладки створені, щоб допомогти максимально точно встановити оптимізаційні налаштування. Рекомендую після установки оптимізаційних налаштувань програти наш файл в закладках 2-Up і 4-Up. Так можна буде побачити в порівнянні результат роботи.
Для збереження нашого банера в формат gif відкриваємо меню Файл і вибираємо пункт Зберегти оптимізацію як ... Даємо файлу ім'я, натискаємо Ok, банер готовий.
Ось результат: примітивний анімований банер, мета виконана. «Вага» файлу 2,53 Кб. Для анімованого банера такого формату (468 на 60 пікселів) стандартний розмір близько 12-16 Кб. Причина такого малого "ваги" мого банера - застосування лише трьох кольорів, попіксельно промальовування і мінімум елементів.
ImageReady підтримує створення інтерактивних об'єктів, додаючи код JavaScript в результуючий HTML-файл, що забезпечує зміну стану об'єкта при наведенні на нього покажчика миші. Для створення інтерактивних об'єктів служить палітра Rollover, поєднана з палітрою (Анімація). На ній відображаються можливі стани об'єкта, кожному з яких може відповідати своє зображення, або навіть ціла анімація. При збереженні такого об'єкта, як елемента Web-сторінки кожне стан зберігається в окремому файлі.
В даний час у Adobe ImageReady з'являється велика кількість конкурентів в області анімації зображень, але завдяки тому що програма успішно оновлюється, можна сказати, що програма Adobe ImageReady є зручним програмним комплексом по створенню і впровадженню анімованих зображень в мережу Інтернет.
2. Дж. Ерсон. Створення інтерактивних компонентів Web-сторінок. - Спб., 2004
3. Мануйлов В.Г. Мультимедійні компоненти, Інформатика та освіта № 12 - 2004, № 1, № 2, № 5 - 2005
4. Фігурне В.Е. IBM PC для користувача Короткий курс М.: Инфра-М, 2000 .- 480 с.; 2001 .- 480 с. 1997
5. Лавров С.М. Adobe ImageReady: зб. прикладів і завдання М.: Фінанси і статистика, 2003
6. Макарева Н.В. та ін Інформатика: підручник-3-е изд М.: Фінанси і статистика, 2003
7. Інформатика Базовий курс Навчальний посібник для студентів вузів СПб.: Пітер, 2003
8. Хелворсон М., Янг М Ефективна робота з Adobe ImageReady .- СПб.: Пітер, 2000
Щоб виділити кілька кадрів як групу, можна виконати одну з таких дій:
· Виділити перший кадр безперервної групи і, утримуючи клавішу Shift клацнути по заключного кадру виділеної групи;
· Клацати по кадрам, розташованим у довільній послідовності, при натиснутій клавіші Ctrl;
· Виділити всі кадри анімації можна командою (Вибрати всі кадри) у спадному меню палітри (Анімація).
Прибрати кадр з виділеної групи можна, повторно клацнувши по ньому, утримуючи клавішу Ctrl.
Виділену групу кадрів можна перемістити, змінивши її місце в послідовності, або, якщо це безперервна група кадрів, замінити їх порядок зворотним. При переміщенні довільно виділених кадрів в новій позиції вони розташуються послідовно один за одним.
Щоб видалити виділені кадри, можна виконати одну з таких дій:
· Скористатися командою (Видалити кадри) з меню палітри (Анімація);
· Клацнути на кнопці (Корзина) і підтвердити видалення клацанням на кнопці (Так) діалогового вікна;
· Перетягнути мишею виділені кадри на значок кошика палітри Animation (Анімація).
Команди копіювання і вставки кадрів меню палітри (Анімація) дозволяють отримати копію кадру, яка може бути вставлена в будь-яке місце послідовності. При цьому копіюється не саме зображення, а та конфігурація шарів і їх атрибутів, яка властива даному кадру. При вставці в кадри місця призначення поточної анімації або інший анімації слід вказати метод, який буде використаний при вставці:
(Замінити кадри) - дозволяє замінити виділені кадри скопійованими. При вставці кадрів в той же самий зображення до нього не додаються нові шари, а замінюються тільки їх атрибути тими, що були в скопійованих кадрах. При вставці кадрів у нове зображення до нього додаються нові шари, і їм присвоюється властивість (видимий), старим ж верствам присвоюється властивість (прихований).
Вставити у виділені - додає вміст вставляються кадрів в якості нових шарів зображення. При вставці кадрів в той же самий зображення число шарів у ньому подвоюється, причому вставлені шари в кадрах призначення будуть видимими, а існували раніше - приховані. В інших кадрах анімації вставлені шари будуть приховані.
Вставити перед виділенням або Вставити після виділення - додає скопійоване число кадрів перед або після виділення, причому нові шари додаються до зображення і будуть видимі тільки в знову доданих кадрах, в яких існували до вставки шари зображення будуть приховані.
Прапорець (Зв'язати додаються шари) дозволяє зв'язати вставляються шари і потім одночасно змінювати їхню позицію. Після клацання на кнопці ОК виконується обраний спосіб вставки.
У ImageReady кожен шар розглядається як окремий елемент анімації. Використовуючи команди і параметри палітри (Шари), можна задавати потрібні зміни, домагаючись створення анімаційних ефектів у зображенні, тому що зміни будуть впливати тільки на виділені кадри. Можна міняти положення об'єкта, його прозорість, а також розраховувати проміжні кадри, використовуючи команду (Проміжний). Зміни, виконані на палітрі (Шари), можна застосувати до всіх кадрів, якщо виконати команду (Підігнати шар під кадри).
Проте зміни об'єкта, що впливають на параметри пікселів (такі, як розфарбування, зміна тону або кольору, трансформації), впливають на всі кадри анімації, в яких представлений даний об'єкт. Для анімації подібних властивостей слід створювати окремі шари з різними параметрами для кожного змінюваного кадру, задаючи відповідний режим видимості.
Застосування ефекту до шару-масці впливає на всі кадри, в яких представлений цей шар, проте при цьому маска може додатково змінювати своє положення.
Створення анімації зміною параметрів шарів виконується досить просто і надає, якщо зберегти її у форматі документа Photoshop, подальшу можливість її редагування. При створенні анімації в ImageReady аніміруемие об'єкти слід розміщувати на різних шарах, пов'язуючи ці верстви в групи.
Можливість автоматичного створення проміжних кадрів анімації є дуже корисною і може бути застосована як до графічних, так і до текстових зображень. Ця функція дозволяє розраховувати кадри, в яких об'єкт може переміщатися, з'являтися або зникати, а також до нього може бути застосовано поступово посилюється ефект.
Перед розрахунком проміжних кадрів слід виділити один або кілька послідовних кадрів. Якщо виділений один кадр, то розраховані кадри вставляються між ним і попереднім або ж подальшим кадрами. Якщо виділено два послідовних кадру, то нові кадри вставляються між ними. Для виділеної безперервної групи кадрів всі проміжні кадри (тобто всі, крім першого і останнього) замінюються кадрами, розрахованими по команді (Проміжний). Виділення першого і останнього кадрів анімації також розглядається як послідовне і дозволяє додати розраховані кадри в кінець анімації, забезпечуючи безперервність при її циклічному повторенні.
Потім у спадному меню вибирається команда (Проміжний) або виконується клацання по однойменній кнопці палітри (Анімація). У вікні (Розрахунок проміжних кадрів) задаються наступні параметри:
Час демонстрації кожного кадру в секундах зазначено під зображенням кадру. Щоб його змінити, слід виділити один чи кілька кадрів і клацнути на величині часу затримки, що викличе меню з набором постійних значень. Вибір значення (Інше) відкриває діалогове вікно (Час кадру), в якому можна задати довільне число секунд. Після клацання на кнопці ОК цей час буде присвоєно всіх виділених кадрів анімації. Слід зазначити, що під час перегляду анімації в ImageReady час демонстрації кадрів може відрізнятися від встановленого. Тому перегляд слід виконувати в браузері, де цей час точно витримується.
Створювана анімація при відтворенні може бути повторена задане число разів. Для цього клацанням на спадному списку (Вибір параметрів повторення), розташованому в лівому нижньому кутку палітри (Анімація), вибирається одне зі значень списку: (Одноразово), (Нескінченно) або (Інше). В останньому випадку в діалоговому вікні (Кількість повторів) вводиться потрібне числове значення.
Метод видалення кадру визначає, чи збережеться зображення попереднього кадру при демонстрації наступного. При використанні кадрів з прозорим фоном в цьому випадку буде видно зображення попередніх кадрів.
Вибір методу здійснюється для одного або декількох виділених кадрів за допомогою контекстного меню, що викликається клацанням правої кнопки миші на малюнку кадру у вікні (Анімація):
Автоматично - встановлюється за умовчанням, автоматично стираючи зображення поточного кадру, якщо наступний містить прозорий шар;
He видаляти - зберігає зображення попереднього кадру, додаючи до нього зображення наступного, причому попередній перегляд такої анімації слід виконувати в браузері;
Відновити фон - дозволяє демонструвати в кожен момент часу тільки один кадр.
Для методів (He видаляти) і (Відновити фон) у малюнків кадрів з'являється спеціальна відмітка Disposal Method icon, що вказує на тип методу.
При збереженні анімації у форматі GIF початкові шари зображень губляться, тому що в кожному кадрі всі верстви зводяться до єдиного шару. Тому якщо потрібне подальше редагування анімації, то її доцільно зберегти у форматі Photoshop, що містить всі вихідні шари зображень. При необхідності можна отримати зведення шарів у кадрах цього файлу, виконавши команду (Звести кадри в шари). Ця команда дозволяє створити окремий зведений шар для кожного з кадрів і оберегти вихідні верстви, зробивши їх таємними, для подальшого створення нових кадрів.
Відкриваючи в ImageReady файл Photoshop, що містить декілька шарів, кожен шар можна зробити окремим кадром анімації. Для цього в меню команд палітри (Анімація) передбачена команда (Створити кадри з шарів), що розбирає шари з кадрів, після чого файл можна зберігати як анімований GIF з вибраними параметрами оптимізації.
1.3 Перегляд та збереження анімації
Щоб виконати попередній перегляд анімації у вікні документа ImageReady, досить клацнути на кнопці (Відтворити) палітри (Анімація).Незалежно від заданого числа повторів анімації вона в цьому випадку відтворюється в нескінченному циклі. Щоб завершити перегляд анімації, слід клацнути на кнопці (Стоп). Повернутися до початкового кадру можна, клацнувши на кнопці (Перемотка).
Для перегляду анімації у вікні браузера виконують команду (Файл> Перегляд) з вибором назви оглядача в підменю, або клацають на кнопці (Перегляд у браузері за замовчуванням) стандартної панелі. Для зупинки анімації використовують кнопку панелі інструментів браузера (Стоп), а для повторного перегляду - кнопку (Оновити).
Управління параметрами оптимізації для різних уявлень вікна документа 2-Up і 4-Up виконується за допомогою установок вікна, що викликається по команді (Правка> Установки> Оптимізація). У вікні (Установки) в області (Оптимізація за замовчуванням) можна вибрати одне із значень:
(Попередні) - автоматично застосовуються параметри останньої оптимізації;
(Автовибір) - автоматично вибирається оптимізація як GIF або JPEG за результатами аналізу зображення;
(Пойменовані) - з вибором пойменованого набору установок з розкривного списку.
В областях 2-Up Settings або 4-Up Settings визначаються параметри для чотирьох панелей (3-я і 4-я панелі доступні тільки у вигляді 4-Up):
(Оригінал) - відображає на панелі вихідне зображення (значення доступно тільки для першої панелі);
(Поточні) - відображає на вибраної панелі зображення з поточними значеннями параметрів Optimize palette (значення доступне для всіх панелей);
(Автоматично) - відображає найменшу за розміром версію, що згенерувала автоматично ImageReady на основі поточних параметрів Optimize palette (значення є для другої, третьої і четвертої панелей).
Також можливий вибір одного з дванадцяти пойменованих наборів установок, які забезпечують демонстрацію на даній панелі зображення, що відповідає цим настановам (значення є для другої, третьої і четвертої панелей).
Оптимізація необхідна для зменшення розміру файлу формату GIF, який є єдиним форматом в ImageReady, що дозволяє демонструвати анімацію на Web-сторінці. Крім завдання стандартних параметрів оптимізації слід при редагуванні кадрів анімації залишати в них тільки змінюються області на прозорому фоні, що дозволяє значно скоротити розмір одержуваного файлу. Скорочення кількості кольорів у палітрі також зменшує розмір файлу, однак, щоб запобігти мерехтіння зображення при відтворенні і зберегти можливість відображення колірних відтінків, відсутніх у палітрі, використовується спеціальна техніка імітації. У цьому випадку буде потрібно більше часу на створення результуючого GIF-файлу.
Вибір команди (Оптимізувати анімацію) з меню команд палітри (Анімація) відкриває однойменне вікно, в якому за замовчуванням встановлені прапорці:
Гранична рамка - обрізає кожен кадр за розміром змінною області (файл з такими кадрами можна редагувати тільки в програмах, що підтримують цей режим);
Видалення надлишкових пікселів - робить прозорими все не змінилися пікселі в кадрі (щоб цей параметр працював, необхідно встановити параметр (Прозорість) у палітрі і вибрати метод зміни кадрів Automatic).
Клацання на кнопці ОК запускає оптимізацію.
Створену анімацію можна зберегти у форматі GIF або як фільм QuickTime. Інші формати файлів, такі як JPEG або PNG, збережуть лише перший кадр зображення, не дозволяючи відтворити всю анімацію. Існує кілька способів зберегти оптимізовану анімацію для використання на Web-сторінці. У ImageReady досить вибрати команду (Файл> Зберегти оптимізований), щоб зберегти анімацію з установками, обраними за попереднього її збереженні. Якщо це не перше збереження, то діалогове вікно (Зберегти) не з'являється і назва файлу і його параметри залишаються тими ж, що були присвоєні раніше.
Вибір команди (Файл> Зберегти як оптимізований) дозволяє змінити ім'я файлу і вибрати інше місце його зберігання. Крім того, можливий вибір зміненого параметра (Тип файлу) з набору доступних значень:
(HTML і малюнки) - генерує HTML-файл і зберігає кожен зображення у вигляді окремого файлу;
(Тільки малюнки) - зберігає тільки зображення в окремому файлі;
(Тільки HTML) - зберігає тільки HTML-файл без файлів зображень.
Крім того, ImageReady дозволяє створити HTML-файл по команді (Копіювати HTML), яка копіює код HTML в буфер обміну, а потім він може бути вставлений на Web-сторінку в будь-якому HTML-редакторі. У разі змін вихідного зображення для оновлення HTML-файлу виконують команду (Оновити HTML) із зазначенням імені оновлюваного файлу.
Щоб зберегти анімацію у форматі QuickTime, слід вибрати команду (Файл> Експорт початкового) і у спадному списку вибрати значення QuickTime Movie (воно буде доступно, якщо на комп'ютері встановлена програма QuickTime). Вказавши ім'я файлу і його місце розташування, клацанням на кнопці (Зберегти) створюємо файл вибраного типу.
2. Розробка анімованого зображення в програмі Adobe ImageReady
2.1 Створення інтерактивних компонентів Web - сторінок
При створенні Web-сторінок за допомогою програм Adobe Photoshop або Adobe ImageReady слід брати до уваги конкретні можливості кожного з цих додатків:Photoshop забезпечує підготовку статичних зображень для Web з можливістю їх розподілу на окремі області, пов'язані гіперпосиланнями з цільовими об'єктами;
ImageReady крім всіх можливостей, що надаються Photoshop, включає також інструменти для створення динамічних елементів, таких як анімації та інтерактивні кнопки.
За допомогою ImageReady можна створити цілу анімовану Web-сторінку, що використовує комбінацію текстів, малюнків і графічних об'єктів. При цьому попередньо слід продумати черговість їх появи і переміщення в межах сторінки, яка повинна мати стандартний розмір, щоб повністю відображатися у вікні браузера. Однак найчастіше ImageReady використовують для створення таких інтерактивних компонентів Web-сторінки, як графічні карти або анімовані кнопки.
2.2 Створення анімованого банера для Інтернет - порталу
Створення банера - в нашому випадку формату 468 пікселів на 60 - починається в Photoshop. На малюнку 3 показано діалогове вікно створення нового файлу.У відповідності зі старими традиціями ставиться рамка в один піксель, як видно на малюнку 4 вона знаходиться в окремому шарі, хоча це не необхідно. Прийнято вважати, і мені здається не без підстав, що рамка в банері надає йому деяку акуратність.
Починаємо малювати елементи нашого банера. У даному випадку я збираюся намалювати кількох абстрактних чоловічків, один з яких буде різко відрізнятися за кольором від інших, також я планую створити напис «design different» - наслідування слогану компанії Apple Macintosh «Think different». Я хочу, щоб і напис і помаранчевий чоловічок блимали. Чоловічків малюю в даному випадку попіксельно (тобто збільшую зображення до 1600% і заливаю фарбою кожен піксель вручну). Це дає колосальну економію в розмірі файлу. Якщо на малюнку 5 голова чоловічка має по краях області світло-сірого - це добре видно при сильному увелечение, то в наслідок я переведу вручну все світло-сірі пікселі в один колір і зроблю голову більш примітивною, на якості промальовування це не позначиться, зате дасть економію в розмірі файлу.
Зверніть увагу, на малюнку 6 є виділена пунктиром область. Вона буде залита білим в окремому шарі 2, він «вище» тексту і за рахунок включення / вимикання цього шару вийти миготіння слова «different». Аналогічна ситуація з миготливим чоловічком, помаранчевий перебувати в шарі yell.
Як бачите банер готовий. Він ще не блимає і ніяк не оптимізований. Зберігаємо в його форматі psd і натискаємо на піктограму ImageReady, значок підсвічений на малюнку 7. Після чого Photoshop автоматично запустить ImageReady, причому наш psd файл вже буде відкрито в ImageReady.
На малюнку 8 ми бачимо невелику область вікна ImageReady. Спробую пояснити. Зовні ImageReady на 80% схожий на Photoshop. Але його основна сфера зайнятості - веб, тому в нього свої викладки. Наприклад, у випадку з банером нам знадобляться дві викладки - Анімація і Оптимізація. І та і інша добре видно на рисунках 9 і 10. Про оптимізацію пізніше, а зараз кілька слів про анімацію. Викладення анімації дозволяє створити кадр (малюнок 7, лівіше кошики; в ImageReady - Дублювання вихідного кадру), призначити час його програвання (спливаюче меню на малюнку 8), програти. Технічне відступ. Крім Анімації є ще дві викладки: Частина і Прокрутка. Перша дозволяє «різати» наш малюнок та оптимізувати окремі його фрагменти з різними установками. Наприклад, є великий малюнок, в одній його частині є порожня область, в інший шматок фотографії. Зберігаючи кожну область малюнка окремо ми отримаємо дуже велику економію загального розміру. Крім того, коли вантажиться не один великий малюнок, а багато маленьких, створюється враження, що сторінка вантажиться швидше. Викладення Прокрутка дозволяє працювати з картинками, html і JavaScript, з тим, що прийнято називати роловерамі - графічними подіями, що відбуваються при проходженні курсора мишки по області малюнка. Наприклад, ми хочемо намалювати меню, при наведенні мишки на яку пункти меню будуть змінювати свій вигляд (технічно це просто зміна картинок). За допомогою викладки Прокрутка цей процес буде зведений до мінімуму: намалювати малюнок, його варіант реакції на курсор мишки (наприклад, шари), задати умови прокручування та збереження Зберегти оптимізацію як ... клікнувши галочку Update HTML.
На рисунку 9 в нашій анімації існує всього два кадри (в термінах ImageReady - кадр). Перший кадр триває 1 секунду, другій - 3. Відмінності кадрів я не показую, але, як я вже згадував, я включаю \ вимикаю шари, за рахунок чого в кінцевому файлі формату gif ми отримаємо блимання. Нагадаю, що ми досі працюємо з файлом psd. І нам ще доступні шари. Коли ми збережемо анімований gif і спробуємо відкрити його в тому ж ImageReady, то ми отримаємо анімований gif, причому не буде ніяких верств - тільки кадри. Якщо відкрити цей gif в Photoshop'е, то ми побачимо лише перший кадр анімації.
На малюнку 10 у нас уже 7 кадрів. Зверніть увагу, всі кадри мають різний час показу. Власне банер готовий. Натиснувши кнопку Відтворити анімацію ми побачимо, як буде виглядати наш анімований gif файл. Залишилося оптимізувати і зберегти.
На рисунку 9 - оптимізація. Я вибираю 16 кольорів, хоча в даному випадку можна вибрати три кольори, так як у банері використані темно-сірий, білий і жовтогарячий. Взагалі питання оптимізації gif насамперед зводиться до скорочення кількості використовуваних кольорів. У деяких випадках доводиться задіяти інші пункти викладки Оптимізація. Але чітких рад тут дати не можна - експериментуйте. До речі, на малюнку 8 видно, що вікно нашого банера має декілька закладок: Оригінальна - для psd, Оптимізована - банер виглядає у відповідності з нашими установками меню Оптимізація, 2-Up - 2 малюнки для порівняння налаштувань, 4-Up - 4 малюнка для порівняння . Всі ці закладки створені, щоб допомогти максимально точно встановити оптимізаційні налаштування. Рекомендую після установки оптимізаційних налаштувань програти наш файл в закладках 2-Up і 4-Up. Так можна буде побачити в порівнянні результат роботи.
Для збереження нашого банера в формат gif відкриваємо меню Файл і вибираємо пункт Зберегти оптимізацію як ... Даємо файлу ім'я, натискаємо Ok, банер готовий.
Ось результат: примітивний анімований банер, мета виконана. «Вага» файлу 2,53 Кб. Для анімованого банера такого формату (468 на 60 пікселів) стандартний розмір близько 12-16 Кб. Причина такого малого "ваги" мого банера - застосування лише трьох кольорів, попіксельно промальовування і мінімум елементів.
Висновок
У висновку хотілося б відзначити, що, зберігаючи зображення для використання в якості елемента Web-сторінки, можна одночасно згенерувати HTML-файл, який буде містити інформацію для браузера про те, як відтворювати елементи сторінки при завантаженні. Цей файл містить посилання на зображення (в форматі GIF, PNG або JPEG), HTML-текст, гіперпосилання і код JavaScript для створення інтерактивних ефектів (rollover effects). Хоча для більшості ефектів можна виконати попередній перегляд безпосередньо в програмах Photoshop або ImageReady, але залежність демонстрованих Web-сторінок від операційної системи, типу браузера і системи відображення кольору вимагає виконання перегляду в кожному конкретному браузері.ImageReady підтримує створення інтерактивних об'єктів, додаючи код JavaScript в результуючий HTML-файл, що забезпечує зміну стану об'єкта при наведенні на нього покажчика миші. Для створення інтерактивних об'єктів служить палітра Rollover, поєднана з палітрою (Анімація). На ній відображаються можливі стани об'єкта, кожному з яких може відповідати своє зображення, або навіть ціла анімація. При збереженні такого об'єкта, як елемента Web-сторінки кожне стан зберігається в окремому файлі.
В даний час у Adobe ImageReady з'являється велика кількість конкурентів в області анімації зображень, але завдяки тому що програма успішно оновлюється, можна сказати, що програма Adobe ImageReady є зручним програмним комплексом по створенню і впровадженню анімованих зображень в мережу Інтернет.
Список використаної літератури
1. Аксьонов П.П. Самовчитель роботи на Adobe ImageReady CS2. - М., 20062. Дж. Ерсон. Створення інтерактивних компонентів Web-сторінок. - Спб., 2004
3. Мануйлов В.Г. Мультимедійні компоненти, Інформатика та освіта № 12 - 2004, № 1, № 2, № 5 - 2005
4. Фігурне В.Е. IBM PC для користувача Короткий курс М.: Инфра-М, 2000 .- 480 с.; 2001 .- 480 с. 1997
5. Лавров С.М. Adobe ImageReady: зб. прикладів і завдання М.: Фінанси і статистика, 2003
6. Макарева Н.В. та ін Інформатика: підручник-3-е изд М.: Фінанси і статистика, 2003
7. Інформатика Базовий курс Навчальний посібник для студентів вузів СПб.: Пітер, 2003
8. Хелворсон М., Янг М Ефективна робота з Adobe ImageReady .- СПб.: Пітер, 2000