1. Зробити анімований банер зовсім нескладно
2. Продовжуємо роботу над анімаційним банером

На уроці як зробити банер ви навчилися робити простий банер. Впевнена, що все у вас вийшло без праці. Сьогодні поговоримо про те, як зробити анімований банер для сайту. Не соромтеся задавати питання. Причина вашого нерозуміння може критися в тому, що я недостатньо добре пояснила. Буду вдячна за те, що ви допоможете покращити даний матеріал.

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

Зробити анімований банер зовсім нескладно

І так, поїхали. Для того, щоб не повторюватися, використовуємо основу банера, зробленого на попередньому уроці і до нього додамо анімацію.
1. Завантажуємо в фотошоп основу нашого банера. Верхнє меню -> файл -> відкрити. Нагадую, що наш банер має розміри 468х60.

2. Створюємо шари. Верхнє меню -> шар -> новий -> шар. Робимо стільки шарів, скільки різних текстів ви хочете написати на банері. У нашому випадку 3.

3. У вікні фотошопа меню «шари» знаходиться справа внизу. Якщо у вас немає цього меню, то відкрити його можна так: Верхнє меню -> вікно -> шари.
В меню «шари» бачимо, що вийшло три рядки плюс рядок з «замочком», яку ми не чіпаємо.
Лівою кнопкою мишки встаємо на 1-й шар. Пишемо текст (нагадую: ліве вертикальне меню, інструмент «текст» - «Т»), наприклад: «Ви вперше на моєму сайті? »

4. Переходимо на шар 2, попередньо на 1-му шарі тиснемо на значок «очей», щоб його відключити. В результаті маємо знову основу банера без тексту. Пишемо - «Не пропустіть новини». Аналогічно, на 3-му шарі пишемо - « Підпишіться на RSS-стрічку «. Включаємо на кожному з написаних шарів значок «очей», вийшло нашарування написів. Це нормально.

Продовжуємо роботу над анімаційним банером

5. Йдемо в ліве вертикальне меню і натискаємо найнижчу кнопку «редагувати в Image Ready».

Відключаємо значок «очей» у 2-го і 3-го шарів. Внизу екрана ви бачите віконце зі словом «анімація». У нижній сходинці цього віконця - меню (див. Картинку «анімація»). Тиснемо в цьому нижньому меню кнопку «створити дублікат поточного кадру». Потім прибираємо «очей» на 1-му шарі і відкриваємо на 2-му. Робимо знову дублікат кадру. Теж повторюємо для 3-го шару.

6. Тепер встановлюємо кількість секунд для кожного кадру. У нашому випадку - 2с. Для вибору параметрів циклу залишаємо слово «Завжди». Ви можете спробувати маніпулювати кількістю секунд і циклами параметрів, щоб краще зрозуміти, як це працює. Натисніть на відтворення, щоб бачити результат.

7. І останній крок. Верхнє меню -> файл -> зберегти оптимізований. Тепер ви знаєте, як зробити анімований банер, залишилося тільки залити його на сервер і зробити посилання.

8. І останнє, що вам буде потрібно це знати, як встановити отриманий анімований банер на сайт. Про це можна прочитати в статті Як зробити банер , Пункт 11.

PS Зовсім не обов'язково, щоб всі верстви банера були однакові. Ви можете створювати різні за колірною гамою шари, додавати в кожен шар необхідні картинки. Тут все буде залежати від вашого смаку і фантазії.
Творіть із задоволенням!

схоже

Читайте також: