Практична робота № 4 (для самостійного дистанційного навчання)

1. Що таке банер?
2. Які існують розміри графічних банерів?
3. Банер - як психологічний тригер
4. Як зробити анімований банер в GIMP?

Розробка анімованого банера для сайту
в растровому редакторі GIMP

Мета роботи: Навчитися готувати анімований банер для сайту за допомогою растрового графічного редактора GIMP: вибір розміру банера, створення фону для банера, створення шарів банера, призначення часу для кожного кадру, оптимізація анімації.

ІНФОРМАЦІЯ ДЛЯ ВИВЧЕННЯ

Особливості GIF-анімації

Анімація (від

англ. Animate - оживляти) - процес створення рухомих зображень.

анімований GIF - файл, що містить кілька зображень у форматі GIF, які по черзі відображаються, створюючи рухоме зображення.

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

GIF-зображення може мати від 2 до 256 кольорів. Скорочення числа квітів в зображенні, числа і розміру кадрів, відмова від півтонів дозволяють домогтися значного зменшення GIF -зображення.

Широке поширення анімований GIF отримав в Інтернеті (створення банерів).

Для створення анімації на основі GIF-файлів існує безліч редакторів, які називаються GIF -аніматорамі.

Прикладами таких програм можуть служити: Magic Viewer, WWW GIF Animator, Animagic GIF, Ulead GIF Animator. Також gif-анімацію можна створити за допомогою графічних редакторів Gimp і Adobe Photoshop. До Adobe Photoshop версії CS3 в пакет Adobe входила спеціальна програма Adobe Image Ready для створення веб-анімації.

Створення GIF-анімації можна розбити на 3 етапи: 1) створення окремих кадрів; 2) призначення часу відображення кадру на екрані 3) збереження файлу в форматі gif і його оптимізація.

Як правило, програми GIF -аніматори не потребують додаткового редакторі для підготовки кадрів, так як містять всі необхідні для цього інструменти.

Відтворюватися GIF -Анімація може в браузерах, програмах для перегляду фотографій, крім того анімовані зображення можна вставляти в слайд-фільми, створені в MS Power Point.

Кожен день ми бачимо величезну кількість всіляких банерів, не тільки в інтернеті, але і в реальному житті. У будь-якому місті можна зустріти придорожні плакати з рекламою - це теж своєрідні банери. Реклама, реклама куди не глянь реклама. Що ж таке банер? Давайте дізнаємося.

Що таке банер?

Як свідчить одна розумна вікі енциклопедія, то

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

Таким чином, банер служить на кшталт «наживки» для клієнта, щоб той клікнув по ньому і попався «на вудку». Від сюди випливає висновок, банер повинен притягувати наш погляд і викликати емоцію. Але про це трохи нижче.

Які існують розміри графічних банерів?

Існує безліч різних форматів банерів. Наведу вам лише неповний список стандартних розмірів банерів:

88x31, 100x100, 100x200, 120x60, 120x90, 120x240, 120x600, 125x125, 125x250, 160x60, 160x120,160x240,160x600, 240x400, 250x250, 336 x 280, 460x60, 728 x 90 і багато інших.

Крім вище представленого списку вам не хто не заважає зробити банер по своїм неповторним розмірами.

Банер - як психологічний тригер

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

Якщо описати кратно, то залучення клієнта йде кількома кроками:

• Позначаємо проблему в питанні (болить голова? Потрібні гроші? Чи потрібен сайт? І т.п.)
• Повідомляємо, що Є чарівна таблетка
• Хочеш дізнатися більше? І закликаємо до дії (Купи, клацай, замовляй, дивись тут, клацай по посиланню і т.п.)

Ми зробимо анімований банер, який буде складатися з трьох різних слайдів. Кожен слайд - це окремий крок з вище представленого списку.

Як зробити анімований банер в GIMP?

Крок 1. Запускаємо редактор GIMP і створюємо новий проект. Для даного прикладу обрані розміри баннера 468x60 пікселів. Ви ж, можете вибрати і інший, який вам сподобається найбільше.

Крок 2. Н аш банер буде складатися з трьох кадрів, тобто ми повинні з вами створити три окремі шари. Пам'ятайте, як ми з вами робили просту анімацію ? Тепер, замість шарів з цифрами, у нас будуть шари з текстовими написами, різниці в принципі ніякої немає.

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

Для створення текстового напису, вибираємо інструмент «Текст» і створимо напис

Крок 3. Тепер потрібно об'єднати текстовий шар з нижнім білим. Клацаємо по верхньому шару правою кнопкою миші і вибираємо «Об'єднати з попереднім».

Крок 4. Ось так, перший кадр, що позначає проблему, у нас готовий. Йдемо далі і створюємо новий шар з білої заливкою натиснувши на піктограму «створення нового шару»

Далі, знову вибираємо інструмент «Текст» і пишемо напис виду

Також, об'єднуємо текстовий шар з білою підкладкою. На даний момент у нас вже є два окремих шару в панелі шарів.

Крок 5. Створюємо ще один білий шар і текстовий. Цього разу я вибрав колір тексту чорний, а не червоний.

Об'єднуємо шар з текстом і білим фоном, як це ми робили вище. В результаті цих дій у нас готове три кадри, нашого майбутнього анімованого банера. Також, для простоти можна перейменувати шари.

Крок 6. Додаємо до імені шару параметр часу в круглих дужках (1000ms-це одна секунда), тобто ставимо те інтервал, який буде показуватися кадр анімації. Як я вже говорив раніше, останній верхній кадр ми затримаємо довше, тобто збільшимо час його показу до трьох секунд (3000ms).

Тепер, потрібно відтворити нашу анімацію і подивитися, що у нас вийшло. Для цього переходимо в меню "Фільтри - Анімація - Відтворення" і натискаємо на кнопку "Play"

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

Приклад найпростішого банера

Анімація за допомогою редактора GIMP - це дуже просто. Вашій увазі пропонується два базових варіанти створення анімованих картинок і банерів:

1. Створення необхідних шарів, необхідних для анімації, безпосередньо в середовищі редактора GIMP з подальшим експортом отриманого результату в формат gif-файлу. Для цього необхідно мати необхідні базові вміння та навички використання графічних інструментів, вбудованих в інтерфейс редактора GIMP.
2. Можливий і інший варіант створення анімації - це попередня підготовка набору графічних зображень, необхідних для створення анімації, в будь-яких інструментальних графічних середовищах і редакторах (Paint, Power Point, Word тощо.) І збереження результатів цієї роботи у вигляді пакету графічних файлів. Потім можна відкрити ці файли в редакторі GIMP як шари і відразу виконати експорт в формат gif. Цю операцію можна виконати за одну хвилину. Крім того, в редакторі додатково передбачена можливість настройки часу показу кожного шару в анімованому ілюстрації, перед тим, як експортувати результат роботи в файл з розширенням gif.

У цьому дистанційному курсі будуть опубліковані покрокові візуальні інструкції щодо практичного застосування графічного редактора під GIMP в професійній діяльності вчителя. Кожна вправа - це детальне уявлення одного з прийомів роботи в середовищі GIMP. Думаю, до початку нового навчального року, такий базовий навчальний курс буде підготовлений. Додатково до Вашої уваги можуть бути запропоновані інтерактивні тренажери - емулятори, розроблені в форматі Power Power. Підготовка таких навчальних ресурсів - це дуже витратний процес, тому на першому етапі будуть опубліковані тільки уроки в мережі Інтернет на моєму сайті http://www.ikt-school.com/

приклади анімації