Не будемо сперечатися, що саме називати "складним" анімованим банером - тут розмова піде про банері, в якому БІЛЬШЕ трьох фреймів. І більше 10. Скажімо, близько 150. Цікаво?
Одна з умов, що стоять перед усіма дизайнерами-розробниками - його творіння має бути легким. Як правило верхня межа ваги - не більше 15 Kb. Оскільки мова піде саме про анімованому гіфі, тобто про набір індексованих зображень, нагадаємо ще кілька правил:
Припустимо, що ви вже знаєте, в якій кольоровій гамі буде ваш банер, і що буде відбуватися (крутитися, рухатися, з'являтися і зникати). Створюєте новий файл, в полях розмірів вказуєте формат вашого банера, в підрозділі background вибираєте transparent - ви отримали поле потрібного розміру з одним, поки ще порожнім шаром.
Тепер пропонується метод порізки слова (будь-якого іншого елемента банера) для створення динамічного ефекту промальовування елемента банера на екрані.
Якщо з шарами ви працювали в PhotoShop`e, то зараз саме час перейти в ImageReady - в меню File - »Jump to -" Image Ready.
У меню Window вибрати Show Animation - з'явиться сувій, в якому присутній один фрейм. Зробіть все шари макета UnVisible, залишивши Visible тільки підкладку і рамочку.
І для початку досить. Параметр циклічності анімації встановіть в стан Forever - і ваш банер буде прокручуватися завжди.
Зверніться до сувою Optimize, встановіть параметри gif - 4 colors - lossy: 0 - No dither - Selective - No transparent
У свиті Animation в підміню Optimize Animation потрібно відзначити обидва checkbox.
У висновку хотілося б підкреслити той факт, що цю технологію можна застосовувати і для створення більш складної анімації - і при обмеженій кількості квітів можна виготовляти складні і оригінальні банери.
Можна ускладнити процес промальовування ІМЕНІ - шари з розрізаними смужками продублювати (права кнопка миші на шарі - »Dublicate Layer) і дублікатами задати прозорість шару 50% (як варіант), і при створенні анімації генерувати промальовування спочатку напівпрозорих шарів, потім непрозорих. Подібний ефект можна створити з промальовуванням вертикальних елементів - і при грамотній композиції елементів банера і хорошою колірній гамі банер буде вдалим.
Як ви могли помітити об'єкт на шарі TEMP в кінцевому дизайні нами не використовувався. Це всього лише інструмент для швидкого створення маски, якого вирізується елемент анімації. І маска ця не обов'язково повинна бути однопіксельні смужкою - це може бути будь-яка довільна форма. Рух промальовування також може відбуватися в будь-якому напрямку, хоч по діагоналі, хоч спочатку зверху, потім ліворуч, потім ще звідки небудь.
Вдалих вам анімованих банерів!