Не будемо сперечатися, що саме називати "складним" анімованим банером - сьогодні розмова піде про банері, в якому БІЛЬШЕ трьох фреймів. І більше 10. Скажімо, близько 150. Цікаво?

Одна з умов, що стоять перед усіма дизайнерами-розробниками - його творіння має бути легким. Як правило верхня межа ваги - не більше 15 Kb. Оскільки мова піде саме про анімованому гіф е, тобто про набір індексованих зображень, нагадаємо ще кілька правил:

1. Палітра gif'a може містити максимум 256 кольорів (менше - можна, більше - ні) і в ньому застосовується алгоритм стиснення без втрати якості зображення (конкретно - алгоритм LZW). Також GIF допускає створення прозорих областей і анімації. Використовуючи gif-формат, слід пам'ятати про закритість ліцензії алгоритму компресії LZW, через що потрібно її (цю саму ліцензію) оплачувати для використання в будь-якому програмному забезпеченні. Цей недолік призведе до того, що поступово в графіку для web від формату GIF будуть відмовлятися на користь інших, більш відкритих форматів. Що стосується анімованих банерів - тут альтернативою може бути використання flash-технологій, avi і ін. Сумно це якось звучить ...
   І все ж, оскільки розмова йде саме про анімованому gif`е, переходимо до наступного пункту;

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

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

4. Знову ж таки з метою зменшення кількості кольорів в палітрі рекламний текст, присутній на банері, буде без згладжування. Слід зазначити, що anti-aliased взагалі має сенс включати тільки для шрифту крупніше 12px - дрібний шрифт читатися зі згладжуванням не буде. Звичайно, тут же перед вами виникне проблема вибору шрифту - але це питання до наступного матеріалу.

5. Дуже складно підготувати велику кількість фреймів, дотримуючись динаміку, і не допустити будь-яких помилок. Тому технологія виготовлення банера з окремих кадрів, по черзі завантажуються в Ulead Gif Animator, нам не підійде. Банер будемо робити в Adobe (всі вихідні можна зібрати в PhotoShop`e, a саму анімацію - в ImageReady)

Припустимо, що ви вже знаєте, в якій кольоровій гамі буде ваш банер, і що буде відбуватися (крутитися, рухатися, з'являтися і зникати). Створюєте новий файл, в полях розмірів вказуєте формат вашого банера, в підрозділі background вибираєте transparent - ви отримали поле потрібного розміру з одним, поки ще порожнім шаром.

1. При створенні банерів важливо пам'ятати, що чудное властивість гифа, анімованого в тому числі (transparent в даному випадку можна забути, оскільки часто долю банера - на який сайт, з яким фоновим кольором або, ще гірше, з яким background image ваш шедевр стане - передбачити важко) - ваша прямокутна область не повинна мати прозорих ділянок

2. У разі якщо розробляється банер має колір, відмінний від білого, чорного і сірого, - його загальний тон, швидше за все, буде відрізнятися від основного тону сторінки сайту. Теорія ймовірності штука складна, але навіть якщо ви робите банер з хітроліловим background`oм, і він потрапляє на схожий хітроліловий сайт (абсолютно випадково) - швидше за все відтінки все ж будуть відрізнятися. Але банери зі стандартним кольором background`а краще оформляти в рамочку, можна тоненьку однопіксельні, можна кольору не сильно відрізняється від основного, для того, щоб ту інформацію, яку представляєте в банері ВИ відокремити від загальної інформації простору чужого для вас сайту.

3. Пора вважати - background і обведення - це вже два кольори. Вважати і контролювати кількість використовуваних квітів доведеться весь час.

4. Уважно подумайте - чи є необхідним присутність на банері ілюстрацій? Припустимо, так. Найчастіше це дійсно виправдано - людина, мигцем глянув на банер, який рекламує комп'ютерний магазин легше зачепиться поглядом за зображення монітора або миші, ніж те ж саме, написане словами. Якщо ви все-таки вирішили в банері показати ці самі монітори - заздалегідь обробіть зображення. Для того, що б монітор був схожий сам на себе, достатньо двох-трьох кольорів. Кількість квітів продовжуємо вважати: в макеті вже присутні мінімум два шари - підкладка з обведенням і шар з картинкою. До речі, відразу можна використовувати в якості контуру банера самий темний колір, присутній на картинці.

5. Повинно бути прийшов час для створення основного текстового елемента картинки - власне назви банера. Це може бути назва магазину, ім'я сайту або будь-яке інше провідне слово. Знову ж, як колір вибираєте самий контрастний колір з уже наявних. Для світлої підкладки - найтемніший елемент картинки і навпаки.

ТЕПЕР - пропонується метод порізки слова (або будь-якого іншого елемента банера) для створення динамічного ефекту промальовування елемента банера на екрані.

• Карбується ваше слово, вибираєте потрібну гарнітуру і розмір, в параметрах згладжування шрифту встановлюєте NONE і робите копію шару. В меню Layer вибираєте Type- »Render Layer - ваше назва перестало бути текстом - це просто графічний елемент, який має один (!) Цвет.Дайте назву шару - наприклад NAME.

• Зробіть новий шар. Дайте йому назву TEMP - це робочий шар, клікати по ньому доведеться часто. Добре буде, якщо він легко піддаватиметься виявлення, в той час як виросте кількість шарів у вашому файлі.

• Намалюйте на цьому шарі однопіксельні лінію (на вибір - горизонтальну або вертикальну. Для горизонтально орієнтованого банера, та ще якщо в якості тренування рекомендую саме горизонтальну) контрастного кольору. Будь-якого - цей колір ми вважати не будемо, оскільки ЕТА лінія в нашому дизайні використовується як ІНСТРУМЕНТ, а не елемент банера. Тому краще зробити її яскравим кольором, та ще й таким, щоб гарантовано відрізнити від реальних деталей банера.

• У разі, якщо готується таки горизонтальна порізка назви (яке у нас вже забито в попередньому шарі і конвертувати в графіку) виберіть інструмент move (кнопка c літерою "V" на англицкой розкладці) і перемістіть лінію в самий верх по відношенню до верхнього пікселя вашого назви (можна вниз - напрямок принципового значення не має, важлива послідовність)

• Ctrl-click на шарі TEMP - ви отримали SELECT прямокутної області висотою в один піксель. Click на шарі NAME, Ctrl-Shift-J - і з вашого назви вирізувалася в новий шар однопіксельні смужка. Click на шарі TEMP, при активному інструменті Move стрілкою перемістіть вашу робочу смужку на один піксель вниз. Ctrl-click на шарі TEMP, перейдіть на шар NAME, Ctrl-Shift-J - ви отримали ще один шар з другої вирізаної смужкою з вашого назви. За цим алгоритмом розріжте на смужки все ваше слово - шари послідовно будуть створюватися, і їх імена будуть мати порядкові номери.

• Створіть ще один шар, наприклад зі слоганом, що описує суть реклами. Колір - з уже існуючих в палітрі. Параметр згладжування тексту - NONE.

• Оскільки розглядається найпростіший варіант складного банера (перепрошую за невдалий каламбур) інші можливі елементи банера розглядати не будемо. Головне описати технологію. Це я кажу до того, що зараз приступаємо до складання заготовок в повноцінну анімацію.

Якщо з шарами ви працювали в PhotoShop`e, то зараз саме час перейти в ImageReady - в меню File - »Jump to -" Image Ready.

У меню Window вибрати Show Animation - з'явиться сувій, в якому присутній один фрейм. Зробіть все шари макета UnVisible, залишивши Visible тільки підкладку і рамочку.

• У свиті Animation в лівому верхньому кутку натисніть на стрілочку - з'явиться контекстне меню свитка. Виберіть команду New Frame - ви створили фрейм, який є дублікатом попереднього, тобто з увімкненим шаром з підкладкою і рамочкою.

• Увімкніть властивість Visible для шару з верхньої смужкою вашого розрізаного елемента (можливо шар з назвою "Name copy").

• Створіть ще один New Frame - в ньому вже буде підкладка, рамочка і перший елемент, і зробіть Visible шар з другої смужкою імені ( "Name copy 2").

• Таким чином, додаючи фрейми і включає шари, прорисуйте всі ім'я, і, коли будуть включені всі верстви імені, зверніться до властивості фрейму "delay" і змініть час затримки на, припустимо, величину в 5 секунд.

• Створіть ще один кадр, перевірте, щоб параметр delay був маленьким, і включіть видимість шару з графікою (в нашому прикладі той самий монітор).

• Новий фрейм - і вимкніть Visible нижньої смужки ІМЕНІ, і за відповідною технологією в зворотному порядку послідовно, пофреймово приберіть ІМ'Я.

• У новому фреймі включите шар зі слоганом. Знову необхідно збільшити затримку (delay) відображення у кадрі.

І для початку досить. Параметр циклічності анімації встановіть в стан Forever - і ваш банер буде прокручуватися завжди.

Зверніться до сувою Optimize, встановіть параметри gif - 4 colors - lossy: 0 - No dither - Selective - No transparent

У свиті Animation в підміню Optimize Animation потрібно відзначити обидва checkbox.

Запам'ятайте отриманий gif (File- »SaveOptimizedAs) і запустіть гіф - переглянути його можна і з Image Ready Plays Animation (движок внизу свитка Animation), і через File-» Preview in в браузері. Якщо все зроблено правильно - ваша анімація буде програватися без зсувів і помилок.

У висновку хотілося б підкреслити той факт, що цю технологію можна застосовувати і для створення більш складної анімації - і при обмеженій кількості квітів можна виготовляти складні і оригінальні банери.
Можна ускладнити процес промальовування ІМЕНІ - шари з розрізаними смужками продублювати (права кнопка миші на шарі - »Dublicate Layer) і дублікатами задати прозорість шару 50% (як варіант), і при створенні анімації генерувати промальовування спочатку напівпрозорих шарів, потім непрозорих.
Подібний ефект можна створити з промальовуванням вертикальних елементів. В такому випадку, при грамотній композиції елементів банера і хорошою колірній гамі банер буде вдалим.
Як ви могли помітити об'єкт на шарі TEMP в кінцевому дизайні нами не використовувався. Це всього лише інструмент для швидкого створення маски, якого вирізується елемент анімації. І маска ця не обов'язково повинна бути однопіксельні смужкою - це може бути будь-яка довільна форма. Рух промальовування також може відбуватися в будь-якому напрямку, хоч по діагоналі, хоч спочатку зверху, потім ліворуч, потім ще звідки небудь.

Вдалих вам анімованих банерів!

Тетяна Bукс
http://www.uapeople.com