Не будемо сперечатися, що саме називати "складним" анімованим банером - тут розмова піде про банері, в якому БІЛЬШЕ трьох фреймів. І більше 10. Скажімо, близько 150. Цікаво?
Одна з умов, що стоять перед усіма дизайнерами-розробниками - його творіння має бути легким. Як правило верхня межа ваги - не більше 15 Kb. Оскільки мова піде саме про анімованому гіф е, тобто про набір індексованих зображень, нагадаємо ще кілька правил:
палітра gif'a може містити максимум 256 кольорів (менше - можна, більше - ні) і в ньому застосовується алгоритм стиснення без втрати якості зображення (конкретно - алгоритм LZW). Також GIF допускає створення прозорих областей і анімації. Використовуючи gif-формат, слід пам'ятати про закритість ліцензії алгоритму компресії LZW, через що потрібно її (цю саму ліцензію) оплачувати для використання в будь-якому програмному забезпеченні. Цей недолік призведе до того, що поступово в графіку для web від формату GIF будуть відмовлятися на користь інших, більш відкритих форматів. Що стосується анімованих банерів - тут альтернативою може бути використання flash-технологій, avi. Сумно це якось звучить. І все ж, оскільки розмова йде саме про анімованому gif`е, переходимо до сл. пункту:
найсуттєвіший параметр індексованого зображення - кількість квітів в його палітрі. Важливим завданням при створенні нашого банера стане зведення кількості квітів до мінімуму;
Наявність градієнтних заливок і багатобарвних малюнків і фотографій унеможливлює серйозне зменшення кількості квітів у палітрі, тому градієнтних заливок у нас не буде, а з фотографіями: подивимося;
Дуже складно підготувати велику кількість фреймів, дотримуючись динаміку і не допустити будь-яких помилок, тому технологія виготовлення банера з окремих кадрів, по черзі завантажуються в Ulead Gif Animator нам не підійде. Банер будемо робити в Adobe (всі вихідні можна зібрати в PhotoShop`e, a саму анімацію - в ImageReady)
Припустимо, що ви вже знаєте, в якій кольоровій гамі буде ваш банер, і що буде відбуватися (крутитися, рухатися, з'являтися і зникати). Створюєте новий файл, в полях розмірів вказуєте формат вашого банера, в підрозділі background вибираєте transparent - ви отримали поле потрібного розміру з одним, поки ще порожнім шаром.
При створенні банерів важливо пам'ятати, що чудное властивість гифа, анімованого в тому числі - transparent в даному випадку можна забути, оскільки часто долю банера передбачити важко - на який сайт, з яким фоновим кольором або ще гірше - з яким background image ваш шедевр стане. Тобто ваша прямокутна область не повинна мати прозорих ділянок
У разі якщо розробляється банер має колір, відмінний від білого, чорного і сірого, - швидше за все загальний тон вашого банера буде відрізнятися від основного тону сторінки сайту. Теорія ймовірності штука складна, але навіть якщо ви робите банер з хітроліловим background`oм, і він потрапляє на схожий хітроліловий сайт (абсолютно випадково) - швидше за все відтінки все ж будуть відрізнятися. Але банери зі стандартним кольором background`а краще оформляти в рамочку, можна тоненьку однопіксельні, можна кольору не сильно відрізняється від основного: Для того, що б ту інформацію, яку представляєте в банері ВИ відокремити від загальної інформації простору чужого для вас сайту.
Пора вважати - background і обведення - це вже два кольори. Вважати і контролювати кількість використовуваних квітів доведеться весь час.
Повинно бути прийшов час для створення основного текстового елемента картинки - власне назви банера - це може бути назва магазину, ім'я сайту або будь-яке інше провідне слово. Знову ж таки - як колір вибираєте самий контрастний колір з уже наявних - для світлої підкладки - найтемніший елемент картинки і навпаки.
ТЕПЕР - пропонується метод порізки слова (будь-якого іншого елемента банера) для створення динамічного ефекту промальовування елемента банера на екрані.
Карбується це слово, вибираєте потрібну гарнітуру і розмір, в параметрах згладжування шрифту встановлюєте 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 - ви отримали ще один шар з другої вирізаної смужкою з вашого назви. За цим алгоритмом розріжте на смужки все ваше слово - шари послідовно будуть створюватися, і їх імена будуть мати порядкові номери.
Оскільки розглядається найпростіший варіант складного банера (перепрошую за невдалий каламбур) інші можливі елементи банера розглядати не будемо. Головне описати технологію. Це я кажу до того, що зараз приступаємо до складання заготовок в повноцінну анімацію.
Якщо з шарами ви працювали в PhotoShop`e, то зараз саме час перейти в ImageReady - в меню File - 'Jump to -' Image Ready.
У меню Window вибрати Show Animation - з'явиться сувій, в якому присутній один фрейм. Зробіть все шари макета UnVisible, залишивши Visible тільки підкладку і рамочку.
У свиті Animation в лівому верхньому кутку натисніть на стрілочку - з'явиться контекстне меню свитка. Виберіть команду New Frame - ви створили фрейм, який є дублікатом попереднього - тобто з увімкненим шаром з підкладкою і рамочкою.
Таким чином - додаючи фрейми і включає шари прорисуйте всі ім'я, і коли будуть включені всі верстви імені зверніться до властивості фрейму "delay" і змініть час затримки на, припустимо, величину в 5 секунд.
Створіть ще один кадр, перевірте, щоб параметр delay був маленьким, і включіть видимість шару з графікою (в нашому прикладі той самий монітор).
Новий фрейм - і вимкніть Visible нижньої смужки ІМЕНІ, і за відповідною технологією в зворотному порядку послідовно, пофреймово приберіть ІМ'Я.
У новому фреймі включите шар зі слоганом. Знову необхідно збільшити затримку (delay) відображення у кадрі.
І для початку досить. Параметр циклічності анімації встановіть в стан Forever - і ваш банер буде прокручуватися завжди.
Зверніться до сувою Optimize, встановіть параметри gif - 4 colors - lossy: 0 - No dither - Selective - No transparent
У свиті Animation в підміню Optimize Animation потрібно відзначити обидва checkbox.
У висновку хотілося б підкреслити той факт, що цю технологію можна застосовувати і для створення більш складної анімації - і при обмеженій кількості квітів можна виготовляти складні і оригінальні банери.
Можна ускладнити процес промальовування ІМЕНІ - шари з розрізаними смужками продублювати (права кнопка миші на шарі -'Dublicate Layer) і дублікатами задати прозорість шару 50% (як варіант), і при створенні анімації генерувати промальовування спочатку напівпрозорих шарів, потім непрозорих.
Подібний ефект можна створити з промальовуванням вертикальних елементів - і при грамотній композиції елементів банера і хорошою колірній гамі банер буде вдалим.
Як ви могли помітити об'єкт на шарі TEMP в кінцевому дизайні нами не використовувався. Це всього лише інструмент для швидкого створення маски, якого вирізується елемент анімації. І маска ця не обов'язково повинна бути однопіксельні смужкою - це може бути будь-яка довільна форма. Рух промальовування також може відбуватися в будь-якому напрямку, хоч по діагоналі, хоч спочатку зверху, потім ліворуч, потім ще звідки небудь.
Вдалих вам анімованих банерів!