Створення мультфільмів рано чи пізно цікавить кожного свідомого малюка у віці як мінімум від п'яти років. Пригадую, в школі з цією метою ми малювали серію картинок на сторінках блокнотів і робили «мультфільм». Сучасним дітям з цією справою дати раду набагато легше - особливо якщо під рукою є комп'ютер з відповідними програмами. Адже Adobe Photoshop «вміє» не лише малювати, а й створювати рухоме зображення - таким чином зробити кілька рухомих кадрів буде зовсім не важко.

З основними можливостями ImageReady ми вже з вами знайомилися - однак до детального розгляду анімації руки так і не дійшли...

Нагадаємо, в ImageReady 3.0 використовується інтерфейс Фотошопу, однак у ньому також є інструменти для створення Gif-анімації, карт малюнків, HTML-коду для малюнків-»перевертишів». Але поважаючий себе веб-дизайнер не буде відмовлятися від Фотошопу, оскільки в ImageReady немає всіх інструментів для створення повноцінної графіки (наприклад, відсутній в останньому Gradient Tool - заливка від одного кольору до іншого).

 

Трішки історії

У недалекому минулому Photoshop, хоча і був, безперечно, одним з головних інструментів кожного професійного Web-дизайнера, не міг вирішити багатьох повсякденних задач, у першу чергу таких, як:

- створення анімаційних GIF-зображень;

- створення інтерактивних елементів навігації: кнопок і панелей;

- оптимізація зображень при експорті у формати, прийняті в Internet, - GIF і JPEG. Фільтри експорту не дозволяли досягти необхідної компактності графічних файлів;

- створення карт посилань на основі зображень;

- розрізування зображень на фрагменти, їхня незалежна обробка і подальше збирання на Web-сторінці.

Для вирішення цих задач Web-дизайнеру доводилося використовувати або модулі сторонніх фірм, що підключаються до Photoshop, або взагалі окремі додатки. Фірма Adobe, знаючи про потреби Web-дизайнерів, запропонувала окремий редактор растрових зображень ImageReady 1.0. Він являв собою Photoshop, полегшений за рахунок вилучення деяких інструментів і функцій, що застосовуються при підготовці зображень для поліграфічного тиражування.

Особливо це стосується колірної і тонової корекції, керування кольором, роботи з каналами, друком. Програма суттєво зменшилась в ціні і, крім того, у неї були внесені доповнення, необхідні саме для Web-дизайнера, у першу чергу, пов'язані з оптимізацією зображень. Зважаючи на все, програма не користувалася достатньою популярністю, оскільки була позбавлена тієї гнучкості і різноманіття можливостей, що забезпечили Photoshop безумовне лідерство на ринку. Перша версія ImageReady стала останньою її самостійною версією. Новий варіант ImageReady 2.0 був включений у Photoshop 5.5. Таким чином, користувачам Photoshop не довелося розлучатися з улюбленою програмою для реалізації відсутніх функцій. Версія Photoshop 6.0 містить версію ImageReady 3.0.

Версія Photoshop 7.0 з вмонтованим редактором ImageReady 7.0 порівняно з шостою версією надає такі додаткові можливості:

• швидка і зручна навігація по зображеннях;
• сортування зображень за категоріями (наприклад "Не закінчені", "Готові " і т. п.), іменем файлу, висотою і шириною зображення, розміром та типом файлу, роздільною здатністю, колірним профілям, даті створення і модифікації, автором зображення;
• керування і робота з файлами і каталогами - створення, перейменування і видалення папок, копіювання, переміщування видалення й перейменування файлів зображень, перейменування групи зображень;
• повертання зображень на 90 або 180 градусів;
• наявність нових інструментів ретушування зображень (Healing Brush та Patch Tool);
• порівняння якості зображення і розмірів файлу до і після оптимізації;
• гнучке керування прозорістю;
• збереження чіткості тексту і векторної графіки при стисканні для областей, що містять такі елементи;
• створення персональних робочих просторів, що зберігають установки для подальшого використання;
• створення унікальних інструментів шляхом настроювання існуючих і збереження змін.

 

Трішки теорії

Вікна програм ImageReady і Photoshop дуже схожі. Різниця полягає в вилученні та переміщенні деяких інструментів та появі нових вікон: Animation (Анімація), Rollover (Ролловер), Image Map (Карта посилань).

Програму ImageReady можна запустити зі списку Програми системного меню Пуск, за допомогою ярлика, або безпосередньо з програми Photoshop.

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

Створення простих анімацій в Photoshop за допомогою програми ImageReady передбачає такі етапи:

• створення початкового зображення;
• створення кількох ключових кадрів (створюється новий кадр і робиться переміщення об'єкта);
• створення переходів з одного стану в інший за допомогою команди Tween (Проміжний);
• проведення оптимізації за допомогою спеціальної опції;
• визначення часових інтервалів для кожного кадру чи для анімації в цілому;
• збереження файлу з потрібними якістю і розміром.

В діалоговому вікні, яке викликається командою Tween (Проміжний), можна задати напрям формування послідовності проміжних кадрів (до кадру «до» - Previous Frame, та до кадру "після" - Next Frame). Можна також визначити кількість проміжних кадрів і те, які параметри зображення будуть враховуватись при створенні проміжних кадрів:

• Position (Позиція) - положення елементів зображення в кадрі;
• Opacity (Непрозорість) - поступовість перетворення кольору елементів зображення;
• Effects (Ефекти) - будь-які стилі шарів: тіні, рельєфи, відблиски, що застосовані до елементів зображення.

Ролловер, що створюється в програмі ImageReady, являє собою набір зображень, які змінюють одне одного при взаємодії з курсором миші. Зовнішній вигляд ролловера пов'язується з такими подіями: Over (Над), Down (Вниз), Up (Вверх), Click (Щиглик, Out (Наповерхню), None (Відсутність). Ролловер може включати не всі шість, а тільки частину станів. Більшість ролловерів для Web мають два стани: None (Відсутність) і Over (Над). Це забезпечує менший обсяг файлу і полегшує сприйняття Web-сторінки користувачем. Створюють ролловери в вікні Rollover (Ролловер).

Палітра карт посилань Image Map (Карта посилань) надає інструменти малювання форм на поверхні зображення, призначення цим зонам посилань на Web-сторінки, файли, звуки або анімацію. Можна також задати текст підказки, яка випливає при наведенні курсору на посилання.

За допомогою палітри Optimize (Оптимізація) можна вибрати Web-безпечний формат файлу для його збереження, задати якість вибраного формату і вибрати різновид завантаження зображення (прогресивний чи черезрядковий).

При експорті зображення в HTML-формат ImageReady автоматично генерує сценарій мовою JavaScript. Для того, щоб читач Web-сторінки побачив ролловерні ефекти, треба, щоб ця мова не була відключена в його броузері.

 

Переходимо до практики:

GIF-анімація

Для створення анімаційних зображень, як ми щойно згадували, ImageReady пропонує особливий інструмент - палітру Animation. Палітра містить мініатюри усіх фаз анімації і керує їх черговістю і переглядом. Створення анімації багато в чому схоже на створення ролловерів. Основна відмінність полягає в тім, що станів зображення може бути скільки завгодно.

 

Підготовка зображення

Баннер, що ми створимо, буде зображувати літак, який летить і залишає за собою рекламний напис.

1. Для виготовлення баннера нам знадобиться зображення літака. Запустите Photoshop і відкрийте в ньому файл plane.tif.

2. Перетворіть шар Background у звичайний шар.

3. Завантажте з альфа-каналу виділену область і натисніть клавішу <Delete>. У такий спосіб ви одержите навколо літака прозоре тло.

4. Збережіть зображення у файлі plane.psd і перейдіть у ImageReady. Виконати цю операцію в ImageReady неможливо, оскільки вона не підтримує роботи з альфа-каналами.

5. Стандартний розмір баннера 60х468 пікселів. Створіть у ImageReady нове зображення такого розміру за допомогою команди New з меню File. Тло зображення установіть білим.

6. Виберіть інструмент Type у палітрі інструментів.

7. Клацніть курсором миші з лівого краю зображення і введіть текст «Welcome to Adventure!».

8. Налаштуйте параметри тексту таким чином, щоб він займав усю ширину баннера. Для цього виберіть вузький напівжирний шрифт великого кегля.

9. Залийте текст темно-синім кольором, вибравши його в палітрі Swatches.

10. Відкрийте документ plane.psd.

11. Зменшите його пропорційно командою Image Size з меню Image так, щоб вертикальний розмір документа складав 70 пікселів.

12. Скопіюйте зображення літака в документ із баннером.

Далі ми застосуємо невеличкий фокус, заснований на тому, що ImageReady, як і Photoshop, зберігає інформацію про об'єкт на шарі, переміщеному за межі документа.

1. Виберіть інструмент Move і перемістіть шар із зображенням літака за ліву границю документа. Не бійтеся, воно не пропаде!

2. Зробіть білий колір поточним основним кольором.

3. Заповніть шар основним кольором за допомогою команди Fill чи натиснувши клавіші <Alt>+<Backspace>.

4. Перемістіть шар по горизонталі вправо інструментом Move при натиснутій клавіші <Shift> так, щоб зображення літака виявилося посередині документа.

5. Виділіть прозору ділянку між носом літака і білим заливанням інструментом Magic Wand.

6. Залийте виділену область білим кольором.

7. Інструментом Magic Wand виділіть прозору область за літаком.

8. Виберіть інструмент Airbrush у палітрі інструментів.

9. Великою кистю створіть короткий градієнт із білого в прозорість за літаком.

 

Створення кадрів

Зображення підготоване. Тепер займемося визначенням кадрів анімації. Для початку визначимо два кадри - перший і останній.

1. Переконайтеся, що всі шари видимі.

2. Виберіть інструмент Move з палітри інструментів.

3. Перемістіть шар із зображенням літака строго по горизонталі вліво, щоб літак вийшов за край документа і не був видимий. Щоб переміщати шар точно по горизонталі, утримуйте при цьому клавішу <Shift>. Усе поле документа повинне бути білим.

4. Відкрийте палітру Animation командою Show Animation з меню Window, якщо її немає на екрані.

5. Поточний стан документа приймається як перша фаза анімації. Йому відповідає мініатюра першої фази анімації.

6. Створіть ще одну фазу, натиснувши кнопку із зображенням листа папера в нижній частині чи палітри вибравши команду New Frame з меню палітри. Поруч з мініатюрою першої фази анімації в палітрі Animation з'явиться ще одна. Поки що обидві фази ідентичні.

7. Клацніть мишею на мініатюрі другої фази.

8. Виберіть інструмент Move з палітри інструментів.

9. Перемістіть шар із зображенням літака вправо так, щоб літак виявився за правим краєм документа. При цьому напис «Welcome to Adventure» на попередньому шарі повинен стати цілком видимим. Активна мініатюра в палітрі Animation відіб'є новий стан документа.

 

Розрахунок проміжних фаз

Ми визначили початкову і кінцеву фази анімації. У першій фазі літак ще не «прилетів», а в останній вже «полетів» і відкрив рекламний напис. А тепер майже фокус:

1. Виділіть в палітрі Animation мініатюри обох фаз, клацнувши на кожній з них, і натиснувши клавішу <Ctrl>.

2. Виберіть команду Tween з меню палітри Animation. Вона відкриває діалогове вікно. Перемикач Layers переведіть у положення All Layers, у групі Parameters встановіть тільки прапорець Position, у поле Frames to Add введіть число 10.

3. Натисніть кнопку ОК. ImageReady автоматично побудує проміжні кадри між двома виділеними.

4. Тепер можна і подивитися на готову мультиплікацію. Натисніть кнопку програвання анімації (трикутна стрілка вправо) у нижній частині палітри Animation і подивіться на результат у вікні документа. Навколо кнопки програвання знаходяться ще чотири кнопки керування переглядом анімації, аналогічні до тих, що ви бачили на пульті керування програвачем компакт-дисків. Це - кнопка зупинки, переходу до попереднього кадру і до першого кадру. Праворуч знаходяться кнопки переходу до наступного і до останнього кадру.

Як ви бачите, програма «здогадалася» про ваші маніпуляції з переміщенням шару і побудувала проміжні стадії його руху. Втім, ви самі вказали на це у діалоговому вікні Tween. Розглянемо його докладніше.

Перемикач Layers визначає, які шари зображення варто враховувати: усі чи тільки поточний, виділений у палітрі Layers. Група прапорців Parameters задає параметри, що змінюються від кадру до кадру:

положення шару (Position), його прозорість (Opacity) чи параметри ефектів (Effects). Список Tween with визначає, між якими кадрами варто будувати проміжні. Якщо в палітрі Animation виділені два чи більше кадри, то доступний тільки варіант Selection, що говорить про те, що проміжні кадри треба робити, виходячи з виділених. Якщо в палітрі виділений один кадр, то в списку доступні два варіанти: попередній кадр (Previous Frame) чи наступний (Next Frame). Наступним для останнього кадру є перший. І нарешті, поле Frames to Add задає кількість проміжних кадрів.

1. Натисніть клавіші <Ctrl>+<Z> чи виберіть команду Undo з меню Edit. Це скасує останню команду Tween і ми випробуємо її з новими установками.

2. Виділите обидва кадри в палітрі Animation і виберіть команду Tween у її меню.

3. У діалоговому вікні Tween встановіть прапорець у параметра Opacity.

4. Натисніть кнопку ОК.

5. Перегляньте анімацію, що вийшла. Напис «Welcome to Adventure'» тепер ніби «проявляється», змінюючи прозорість від 100% до 0%.

 

Час демонстрації (таймінг)

Для кожного кадру анімації ви можете задати довільний час демонстрації.

1. Натисніть кнопку переходу до останнього кадру.

2. Клацніть на маленькій трикутній стрілці, розташованої нижче мініатюри кадру. Поруч з нею виводиться поточний час демонстрації кадру, 0,00 сек.

3. У списку, що відкрився, виберіть 2 сек. Тепер рекламний напис буде знаходитися на екрані довше.

Врахуйте, що при перегляді анімації в ImageReady час демонстрації кадрів не дотримується. Для того щоб переглянути анімацію з реальним таймінгом, скористайтеся переглядом у браузері за допомогою команди Preview in.

 

Оптимізація анімації

Для GIF-анімації винятково важлива оптимізація, оскільки це, фактично, кілька зображень в однаковому форматі. Якщо анімація довго завантажується в браузері користувача, то вона скоріше його не привабить. А відштовхне.

Для всіх кадрів анімації використовуються однакові параметри оптимізації, включаючи індексовану палітру. Параметри оптимізації встановлюються в палітрі Optimize.

1. Перейдіть на вкладку Optimized у вікні документа, щоб стежити за результатом оптимізації.

2. У палітрі Optimize встановіть палітру Selective.

3. Достатньою кількістю кольорів буде 16. Встановіть їх в списку Colors.

4. Скасуйте згладжування, вибравши в списку Dithering Algorithm варіант No Dither. Це зробить файл більш компактним і зовсім не погіршить якості зображення.

Ми задали досить твердий режим оптимізації, але він цілком виправданий. Вихідне зображення літака саме по собі містить зовсім небагато кольорів і плавних кольорів переходів. Розмір файлу після оптимізації написаний у рядку стану вікна документа: 11,85 Кбайт. Це цілком прийнятний розмір для баннера.

Для GIF-анімації існують і особливі алгоритми оптимізації.

1. Виберіть команду Optimize Animation з меню палітри Animation. Вона відкриває однойменне діалогове вікно, що пропонує два напрямки оптимізації. Перше складається з автоматичної обрізки кожного кадру зображення, щоб у ньому залишалися тільки області, що міняються. Другий шлях складається у видаленні всіх пікселів, що не змінюються від кадру до кадру. Обидва способи оптимізації дають дуже суттєвий виграш для більшості анімацій і ми рекомендуємо їх використовувати.

2. Натисніть кнопку ОК. Анімація оптимізована.

 

Видалення кадрів

Крайнім способом зменшення розміру зображення можна вважати видалення окремих кадрів. Критично погляньте на готову анімацію, і подумайте, чи можна скоротити її на кадр-іншій. Результат можна відразу переглянути в браузері за допомогою команди Preview in.

1. Виділіть третій і десятий кадри анімації в палітрі Animation.

2. Натисніть на кнопку із зображенням сміттєвого цебра в нижній частині палітри. Виділені кадри вилучені.

3. Виберіть ваш браузер у списку Preview in з меню File і оцініть результат у браузері.

Очевидно «гладкість» анімації постраждала не сильно, а розмір зображення зменшився більш ніж на півтора кілобайта. Спробуйте підібрати мінімальну припустиму кількість кадрів на свій смак.

 

Редагування готової анімації

ImageReady, на відміну від багатьох спеціалізованих программ-аніматорів, забезпечує широкі можливості редагування вже готової анімації. Дві з них очевидні: додавання і видалення окремих кадрів. Настільки ж просто кадри анімації можна переставляти.

1. Виділіте будь-як кадр анімації щигликом миші.

2. Помістіть курсор миші на мініатюру виділеного кадру.

3. Натисніть ліву кнопку миші.

4. Переміщайте мишу до сусіднього кадру. Коли курсор миші буде виявлятися в проміжках між кадрами, ви побачите жирну вертикальну лінію, крапку вставки. Вона показує, куди буде поміщений виділений кадр, як тільки ви відпустите кнопку миші.

5. Перемістіть кадр перед сусіднім, а потім поверніть його назад.

Ви можете відредагувати і компоненти зображення, не ризикуючи повторювати це для кожного кадру.

1. Виділіть шар з рекламним текстом у палітрі Layers.

2. У палітрі Type змініть шрифт на який-небудь іншій. Оскільки анімація заснована на шарах зображення, шрифт зміниться у всіх кадрах анімації.

3. За допомогою інструмента Move виправте положення тексту так, щоб він виявився точно посередині документа. Положення тексту зміниться тільки в поточному кадрі анімації.

4. Щоб текст зайняв ту ж позицію й в інших кадрах, виберіть команду Match Layer Across Frames з меню палітри Animation. Поточний стан шару буде поширено на всі кадри анімації.

За допомогою Image Ready ви можете редагувати і готові анімації, наприклад з GIF-файлів, які ви завантажите з чужих сторінок. Готовий файл з анімацією можна відкрити командою Open і редагувати його так, начебто він створений у ImageReady. При відкритті анімації програма сама заповнить палітру Animation її кадрами.

Ви також можете створити анімацію в Photoshop, розташовуючи кадри анімації кожний на своєму шарі. Потім варто зберегти отримане багатошарове зображення у форматі PSD і відкрити в ImageReady. У меню палітри Animation ви знайдете команду Make Frames From Layers. Вона автоматично заповнить палітру кадрами анімації, використовувавши для цього окремі шари зображення.

 

Збереження анімації

Збереження анімації у форматі GIF здійснюється усі тією же командою Save Optimized. Вам буде потрібно тільки вибрати папку для готового анімаційного файлу і дати йому ім'я.