Як зробити анімований банер самостійно

  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 Зовсім не обов'язково, щоб всі верстви банера були однакові. Ви можете створювати різні за колірною гамою шари, додавати в кожен шар необхідні картинки. Тут все буде залежати від вашого смаку і фантазії.
Творіть із задоволенням!

схоже


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

Пишемо текст (нагадую: ліве вертикальне меню, інструмент «текст» - «Т»), наприклад: «Ви вперше на моєму сайті?

Новости

  • Оформление торжеств
    21.11.2014
    Оформление торжеств

    Оформление мероприятий цветами и декорация тканью: свадьбы, юбилеи, торжества, корпоративные вечеринки, выставки, конференции, семинары, презентации.Правильная организация праздников и планировка работы для Вас и Ваших сотрудников — это залог успешного развития бизнеса. Мы предоставим полный комплекс услуг по оформлению специальных мероприятий любого масштаба. Опыт наших проектов по-своему индивидуален. Мы готовы предложить именно... 
    Читать полностью

Статьи о цветах
  • Свадебные букеты
    Свадебные букеты

    Безумное счастье воссоединения в браке, прекрасная церемония, счастливые лица гостей… Несомненно, свадьба... 
    Читать полностью

  • Роль и значение цветов в нашей жизни
    Роль и значение цветов в нашей жизни

    Еще с давних времен цветы в жизни людей играли огромную роль. Они всегда ассоциировались с любовью, радостью, хорошим... 
    Читать полностью

  • История цветов
    История цветов

    Искусство украшать живыми цветами, листьями, ветками, плодами и другим декоративным материалом праздничные процессии,... 
    Читать полностью

  • Цветочные традиции в Европе
    Цветочные традиции в Европе

    В Западной Европе в XIV в. распространилась мода на ароматы, а вместе с ней и на небольшие букетики из пахнущих цветов.... 
    Читать полностью

  • Цветы для свадьбы
    Цветы для свадьбы

    В нашей жизни ни одно торжественное событие не обходится без цветов. Букет из белых роз тонко подчеркнет красоту... 
    Читать полностью

  • Цветочный этикет
    Цветочный этикет

    В нашей жизни ни одно торжественное событие не обходится без цветов. При этом очень важно соблюдать цветочный... 
    Читать полностью