Збереження для Web

Багато засобів оптимізації файлів об'єднане в діалоговому вікні File Save for Web (Файл > Зберегти для Web). У верхній частині головного вікна є чотири вкладки для попереднього перегляду: Original (Початкове зображення), Optimized (Оптимізоване зображення), 2-Up (Два варіанти) і 4-Up (4 варіанти). Крім того, в цьому вікні розташовані таблиця кольорів і засобу управління форматом, якістю зображення і ін. Також є меню Preview (Попередній перегляд) і кнопка Preview in [browser] (Попередній перегляд в [браузері]).

Завдання 13.1. Збережіть зображення 4 рази – gif: 32 та 8 кольорів, jpeg з якістю 0 та 100. Як змінюється розмір файла в залежності від формату і якості?

13.3. GIF-анімація

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

Для підготовки анімації в програмі ImageReady необхідно створити безліч кадрів зображення за допомогою палітри Animation ( Анімація). Потім можна редагувати окремі шари кожного кадру за допомогою палітри Layers (Шари), причому у кожного кадру буде власна унікальна сукупність установок на палітрі Layers. І нарешті, треба зберегти послідовність кадрів у вигляді одного GIF-файлу — тепер анімація готова для перегляду в інтерактивному режимі.

13.3.1. Переміщення елементу зображення за допомогою анімації

Завдання 1. Створимо анімаційний ефект для зображення.

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

2. Відкрийте палітру Animation ( Анімація), клацнувши по вкладці Animation (Анімація) або виконавши команду Window > Show Animation ( Вікно > Показати палітру Animation).

3. Виберіть шар на палітрі Layers (Шари).

4. За допомогою інструменту Move ( Переміщення) перетягнітье елемент зображення до краю основного вікна.

5. У нижній частині палітри Animation клацніть по кнопці Duplicate current frame (Дублювати поточний кадр). Скопійований кадр буде виділений.

6. Шар, вибраний на кроці 3, повинен залишатися виділеним.

7. За допомогою інструменту Move ( клавіша V) перетягніть елемент шару на іншу сторону основного вікна. Залиште цей шар виділеним!

8. На палітрі Animation клацніть по кнопці Tween (Проміжні кадри) для побудови проміжних кадрів між вже вибраними.

9. У діалоговому вікні Tween ( Проміжні кадри) поставте перемикач Layers (Шари) в одне з наступних положень:

· All Layers ( Всі шари), щоб скопіювати крапки зі всіх шарів в нові кадри - навіть тих шарів, які не були змінені. Ця опція також дозволить запам'ятати зміни, вироблені одночасно в двох і більш шарах;

· Selected Layer ( Виділений шар), щоб скопіювати точки тільки виділеного шару в нові кадри. Всі інші шари будуть заховані.

Потім встановіть в групі Parameters ( Параметри) прапорці тих параметрів, які змінюватимуться в проміжних кадрах: Position (Розташування), Opacity ( Непрозорість) и/или Effects (Ефекти).

Із спливаючого меню Tween with ( Діапазон проміжних кадрів) виберіть режим Previous Frame (Додавання проміжних кадрів між виділеним кадром і попереднім).

10. Клацніть по кнопці ОК.

Вибір параметрів відтворення анімації

Із спливаючого меню, розташованого в нижньому лівому кутку палітри Animation ( Анімація), виберіть режим відтворення, вказуючий, як відтворюватиметься анімація: Once (Одноразово) або Forever ( Безперервно в циклі). Або включіть опцію Other (Інакше), щоб вказати певну кількість відтворень анімації, а потім клацніть по кнопці ОК.

Щоб визначити тривалість показу окремого виділеного кадру в процесі відтворення, виберіть значення часу затримки (delay value) із спливаючого меню Select frame delay time (Вибрати час затримки кадру), розташованого під кадром на палітрі

Параметри, які можна змінювати при створенні проміжних кадрів

У анімацію можна включити зміну розташування елементу шару, зміну прозорості шару або перехід від одного ефекту шару до іншого (за винятком ефекту Gradient/Pattern (Градієнт/Узор), який не можна використовувати в поєднанні з командою Tween (Проміжні кадри)).

Попередній перегляд анімації

1. Клацніть по кнопці Play ( Програти).

2. Клацніть по кнопці Stop ( Зупинити.

3. Збережіть файл, потім клацніть по кнопці Default Browser ( Попередній перегляд в браузере за умовчанням), розташованій на панелі інструментів. Клацніть по кнопці Back (Назад), щоб повернутися в програму ImageReady, коли перегляд буде закінчений.

13.3.2. Анімація предметів за рахунок трансформації

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

Створимо анімацію, в якій об'єкт переміщатиметься в певному напрямку і назад.

1. Відкрийте зображення і палітру Animation ( Анімація).

2. У нижній частині палітри Animation клацніть по кнопці Duplicate current frame (Дублювати поточний кадр). Тепер буде виділений дублікат кадру.

3. На палітрі Animation клацніть по кнопці Tween (Проміжні кадри), а потім поставте перемикач Layers (Шари) в положення All Layers ( Все шар), введіть число кадрів: шість в полі Frames to Add (Додати кадри) і клацніть по кнопці ОК.

4. Клацніть по кадру, в якому повинне початися похитування.

5. На палітрі Layers ( Шари) створіть дублікат шару.

6. Відредагуйте дублікат шару (виділіть частину зображення, натисніть на виділенні праву кнопку миші та в контекстному меню виберіть «Трансформація з числовими значеннями», вкажіть кут нахилу: 15°. Заховайте початковий шар, щоб побачити внесені зміни. Зміни відіб'ються у виділеному кадрі на палітрі Animation.

7. Повторіть дії таким чином, щоб на третьому слої кут складав 30° від початкового, на четвертому і п’ятому: – 15° та – 30°, відповідно.

8. Кожен кадр повинен показувати лише один шар: 1 кадр – 1 шар; 2 кадр – 2 шар; 3 кадр – 3 шар; 4 кадр – 2 шар; 5 кадр – 1 шар; 6 кадр – 4 шар; 7 кадр – 5 шар; 8 кадр – 4 шар.

9. Перегляньте та збережіть анімаційне зображення.

§ 14. Практична робота №42. “Photoshop для WWW”

Низький рівень

1. Запустіть програму Adobe ImageReady. Відкрийте файл Урок-13.psd. Збережіть зображення під іменем PR42-1.psd.

2. Приберіть фон. Для цього:

А. Виберіть інструмент Magic Wand Tool (Чарівна паличка).

Б. Клацніть покажчиком миші в будь-якому місці фону. В результаті логотип повинен виділитися пунктирною лінією.

В. Натисніть клавішу Delete, фон буде видалений.

Г. Натисніть комбінацію клавіш CTRL+D, щоб зняти виділення.

Середній рівень

3. Виберіть команду: Редагувати у Photoshop.

4. Збережіть файл.

А. Для цього виберіть команду: Зберегти для Web… Встановіть формат – Gif.

Б. У полі Colors зменшіть кількість кольорів до 8.

В. Виконайте обрізання зображення, щоб видалити порожні місця.

Г. Замість чорних встановіть прозорі пікселі.

Д. Збережіть файл як PR42-1.Gif. Перегляньте результат.

5. Виконайте аналогічне збереження для формату Jpeg з якістю 30 (PR42-1.Jpg).

6. Порівняйте розміри та якість. Запишіть висновки.

Достатній рівень

7. Створіть 2 анімаційних зображення з різними типами. Збережіть малюнки та покажіть результат викладачеві.

Високий рівень

Застосуйте другий анімаційний ефект до існуючої анімації.

1. Виберіть або створіть шар, до якого слід застосувати анімаційний ефект.

2. На палітрі Animation (Анімація) клацніть по тому кадру, з якого починатиметься ефект анімації.

3. На новому шарі створіть чи скопіюйте зображення. При необхідності відрегулюйте його непрозорість або застосуйте які-небудь ефекти.

4. Клацніть по кінцевому кадру анімаційної послідовності.

5. У кінцевому кадрі змініть положення зображення шару або значення непрозорості, видаліть або, навпаки, застосуєте ефекти шару. Не знімайте виділення з шару!

6. Клацніть по кнопці Tween ( Проміжні кадри), розташованій на палітрі Animation, щоб зразу ж створити проміжні кадри. Другий спосіб: у меню палітри Animation виконаєте команду Tween. Встановіть перемикач Layers (Шари) в положення All Layers ( Всі шари), встановіть прапорці для тих параметрів, які тільки що змінили (Position (Розташування), Opacity ( Непрозорість) або Effects (Ефекти)), а потім клацніть по кнопці ОК.