Як зробити банер для сайту. Частина 2.

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

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

Акцентую вашу увагу на тому, що у своїх уроках по створенню банерів я не розглядаю сам сценарій і розробку ідеї банера. Це дуже важливий і, я б навіть сказала, основний етап. Адже без точного знання, ЩО саме ви хочете сказати своїм банером і ЯК ви собі це уявляєте, починати робити банер не має ніякого сенсу.

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

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

Як зробити анімаційний банер у фотошопі.

Варіант 1.
Анімаційний банер, отриманий в результаті простої зміни картинок (фонів, рекламних оголошень). Для цього нам треба зробити всього три прості кроки:

Крок 1. Підготовчий.
• вибираємо розмір банера (в нашому випадку 468х60) і створюємо новий файл
• беремо підготовлені заздалегідь для нашого банера картинки, які вже приведені до потрібного розміру банера, копіюємо їх, і кожну з них вставляємо в наш файл у вигляді окремого шару (відкриваємо картинку — виділяємо її — копіюємо Ctrl + C — переходимо в наш файл — вставляємо Ctrl + V).
Для свого банера я підготувала 3 картинки (картинка А).

Крок 2. Робимо обведення для банера:
• Вибираємо шар 1. Подвійним клацанням по шару викликаємо меню «Стиль шару» і в цьому меню вибираємо «Обведення».

• Вибравши ширину обведення, його становище і колір, зафіксуємо ці параметри, натиснувши на кнопочку «Застосувати за замовчуванням». Колір обведення повинен виділяти чітко контури нашого банера, а це означає, що він повинен бути в міру яскравим і контрастним по відношенню і до фону картинок, і до фону вашого сайту.
• Переходимо на шар 2. Клацаємо по ньому двічі та у вікні «Стиль шару» просто вибираємо «Обведення» і натискаємо OK. (Налаштування стилю обведення ми залишаємо незмінними)
• Аналогічно обводимо й останній третій шар-картинку.

Крок 3. Створюємо безпосередньо анімацію для нашого банера.

• Вибираємо у верхньому меню фотошопі «Вікно» – «Анімація» і вибираємо покадрову анімацію. На зображенні Б докладно показано, що позначає кожна окрема кнопочка на панелі анімації. (Картинка Б)
• Створюємо кадри анімації: перший кадр створюється, коли ми стаємо на шар першої картинки, для створення другого кадру натискаємо на кнопочку 7 (картинка Б) і переходимо на другий шар, для створення третього кадру ми знову натискаємо на кнопочку 7 (картинка Б) і «включаємо» третій шар — шар нашої третьої картинки.
• Визначаємося з часом анімації. Виставляємо час на кожному кадрі та натискаємо на кнопочку 4, щоб подивитися, як виходить. Якщо щось не влаштовує — коригуємо час. Якщо влаштовує і більше нічого ми не хочемо змінювати, то зберігаємо отриманий найпростіший анімаційний банер.

• Зберігаємо банер: Файл — Зберегти для веб пристроїв — формат gif і виставляйте параметри табличці як на картинці. Це, на мій погляд, найбільш оптимальні настройки, хоча ви можете і поекспериментувати.

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

Все, найпростіший анімаційний банер у фотошопі готовий.

Коли будете дивитися відео, то зверніть увагу, що на створення його фактично пішло приблизно 3 хвилини.

Вариант 2. Анімаційний банер, отриманий в результаті накладання на один і той же фон-заготовку різних текстових повідомлень (або можна якихось зображень).

Принцип створення такого банера описувати не буду, він в основному аналогічний варіанту 1, відмінність лише в формуванні анімації кадрів:

1 кадр — фон + перший текст
2 кадр — фон + другий текст
3 кадр — фон + третій текст

На відео ви все зможете розглянути в реальному виконанні.

Анімація тексту при створенні анімаційного банера.

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

Будуть питання — запитуйте, обов’язково відповім детально.

Мабуть, і все на сьогодні. Пробуйте, експериментуйте! Ось і обіцяне відео!

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

І також розповім, як вставити банер на свій сайт, і навіть постараюся показати, як зробити анімаційний і флеш банер в програмі Easy Gif-Animator.

І ще … Уроки по створенню анімаційних банерів знадобляться вам не тільки для створення банерів для вашого сайту, але і для створення будь-якої анімації, адже принцип анімації залишиться таким же, зміниться лише розмір картинки!

Поділитися в соц. мережах