У цій статті я познайомлю вас з принципами створення анімованих gif банерів за допомогою програм Photoshop і ImageReady. Бажано, щоб ви вже мали певний досвід роботи з Photoshop, тому що дана стаття в основному присвячена роботі з програмою ImageReady.

Перше, що необхідно зробити - це розробити сценарій банера, т. Е. Вирішити яким буде фон, що саме буде рухатися. А коли ви все це уявили собі, створіть в Photoshop файл з розмірами рівними розмірам банера. Тепер створюємо фон банера. Він не буде змінюватися при анімації. Всі інші елементи банера, які будуть брати участь в анімації - текст, зображення помістимо в окремі шари. У самому верхньому шарі помістіть рамку банера.

Тепер можна приступати до створення анімації. Для цього, натиснувши найнижчу кнопку основний палітри програми Photoshop ( "Jump to ImageReady" ) Або натиснувши комбінацію клавіш Ctrl + Shift + M, перейдіть в ImageReady. Ця програма відкриється з уже завантаженим в неї банером.

Програма ImageReady нагадує програму Photoshop, але у неї є і власні вкладки. При створенні анімації використовується вкладка Animation. Створений нами файл вже поміщений в перший кадр вкладки Animation, його збільшене зображення ви можете бачити на вкладці Original.

Тепер звернемо увагу на вкладку Layers. Вона виглядає так само як і в програмі Photoshop. Саме з цією вкладкою ми зараз і будемо працювати. Наприклад, для того щоб на банері блимав текст, в першому кадрі шар з текстом зробіть видимим. Перейдіть до вкладки Animation і створіть другий кадр анімації, для цього зробіть дублікат першого кадру (кнопка "Duplicates current frame" внизу вкладки Animation). Тепер, для того щоб текст блимав, зробіть шар з текстом у другому кадрі невидимим (клацніть по зображенню очі в шарі з текстів на вкладці Layers). Необхідно також вказати тривалість кадру, для цього натисніть на маленький трикутник під кадром з написом 0 sec і виберіть тривалість кадру з розкрився списку. Тепер за допомогою кнопки "Plays / stops animation" ви можете вже подивитися свою анімацію.

Якщо ви хочете додати в ваш банер рух або зміна прозорості, вам не потрібно промальовувати кожен кадр самому. Нехай ви хочете змінити положення якої-небудь фігури. Зараз вона знаходиться в первісному положенні. Створіть наступний кадр і, в цьому кадрі пересуньте фігуру. Тепер, при натисканні на кнопку "Tweens animation frames", вкладки Animation будуть створені проміжні кадри анімації. Після натискання на цю кнопку відкриється вкладка Tween, де в рядку Frames to Add необхідно вказати бажану кількість проміжних кадрів. Таким же методом можна змінювати прозорість фігур. На цих, створених програмою ImageReady кадрах, необхідно, керуючи видимістю шарів, показати або приховати всі інші шари, щоб все відповідало сценарієм.

Коли всі необхідні кадри створені, приступимо до оптимізації та збереженню банера в форматі gif. Перейдіть на вкладку 4-UP, де ви будете спостерігати за якістю зображення і розміром майбутнього gif файлу. Для оптимізації використовується вкладка Optimize. На цій вкладці виберемо тип файлу GIF. Не можна забувати про те, що банер, для того щоб він був прийнятий банерообмінних мережами, повинен бути легким. Наприклад, вага банера розмірами 468х60 не повинен перевищувати 15 Kb. Виходячи з цього, виберіть на вкладці Optimize таку кількість квітів, щоб при хорошій якості зображення вага банера був якомога меншим. Потім, звернувшись до головного меню, зберігаємо банер (File- Save Optimized As ...). Все - ви створили анімований gif банер.

Удачі в створенні банерів!

Оцініть, будь ласка, цю статтю:

Рейтинг: 2.7 / 5 (голосів: 22)

Читати коментарі [25] на форумі.

Залишити коментар