7 Індивідуальне завдання

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

Одним із варіантів виведення зображення на екран комп’ютера являється GIF-анімація. GIF-анімація складається з набору кадрів (в растровому форматі), розміщеному в одному файлі GIF (Graphics Interchange Format). І таку послідовність кадрів тепер можна створювати в Photoshop. Дуже ефективним засобом, що забезпечує створення анімації в Photoshop, є механізм шарів і палітра Layers (Шари), що дозволяють накладати прозорі шари зображення один на інший в установленому порядку. А починаючи з Photoshop версії CS2, в програму були додані нові засоби, об'єднані в палітрі Animation і дозволяють створювати анімаційний ряд зображень з метою подальшого збереження його у файлі формату GIF.

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

Для початку запустив програму Photoshop СS6. Далі натиснув кнопку «Окно» далі кнопку «Робочая среда» і вибрав пункт «Движения». Після цього я добавив зображення, яке має бути фоном GIF-анімації, яке було заготовлене раніше (рис. 7.1).

Рисунок 7.1 – Фон GIF-анімації

Єдиний кадр, розташований в палітрі Animation (Анімація), відображає видимі частини зображення, які визначаються станом шарів у палітрі Layers (Шари).

Для того, щоб в палітру «Анімація» добавити новий кадр, клацнув на піктограмі «Дублировать текущий кадр» і добавив ще два таких кадри, тобто фон анімації.

Добавив шар з текстом «Ремонт комп’ютерів». Даний шар, я зробив видимим тільки на третьому кадрі. Першому кадру я задав затримку в 0,4 секунди а для інших задав затримку в 0,1 секунду. Після цього клацнув лівою кнопкою миші на останньому кадрі і натиснув на піктограму «Создания промежуточных кадров». Після цього в поле «Добавить кадров» ввів число 10. Таким чином було добавлено 10 нових кадрів (рис. 7.2), за допомогою яких моєму банері плавно появлявся текст.

Рисунок 7.2 – Створення нових кадрів

Створив ще один кадр. На цьому кадрі текст був невидимий, тому я знову натиснув на піктограму «Создания промежуточных кадров» і знову задав число 10. Після чого, даний текст на моєму банері, плавно появлявся і зникав.

Добавив шар з текстом «Заправка картриджів». Добавив ще один кадр з затримкою в 0,5 секунд для того, щоб була затримка між текстом, який появляється і зникає. Знову були створені ще два кадри, з затримкою 0,1. На останньому кадрі на якому я зробив видимий шар «Заправка картриджів» та невидимий шар «Ремонт комп’ютерів» була повторена дія з «Созданием промежуточных кадров».

Таким чином всі вище описані дії я повторив двічі. В результаті був створений банер, на якому плавно мінявся текст.

Після того, як було досягнуто бажаного результату, зберіг цей анімаційний ряд у форматі GIF , вибравши File > Save As (Файл > Зберегти як ), потім дав файлу ім'я і клацнув ОК . Для того, щоб переглянути анімацію прямо в веб-браузері, я оптимізував зображення для Web, виконайте команду меню Файл> Зберегти для Web (Файл > Зберегти для веб). Далі появилося вікно в якому я вибрав на скільки буде оптимізований банер (рис. 7.3).

Рисунок 7.3 – Вікно оптимізації GIF-анімації.

Після оптимізації, та збереження моєї GIF-анімації, я підключив банер до сайту (рис. 7.4).

Рисунок 7.4 – Банер у відповідному блоці сайту