На уроке как сделать баннер  вы научились делать простой баннер. Уверена, что все у вас получилось без труда. Сегодня поговорим о том, как сделать анимированный баннер для сайта. Не стесняйтесь задавать вопросы. Причина вашего непонимания может крыться в том, что я недостаточно хорошо объяснила. Буду благодарна за то, что вы поможете улучшить данный материал.

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

      1. Загружаем в фотошоп основу нашего баннера.  Верхнее меню -> файл -> открыть. Напоминаю, что наш баннер имеет размеры 468 х 60.

основа баннера

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

меню фотошопа

     3.  В окне фотошопа меню «слои» находится справа внизу. Если у вас нет этого меню, то открыть его можно так: Верхнее меню -> окно -> слои.
 В меню «слои» видим, что получилось три строчки плюс строчка с «замочком», которую мы не трогаем. 
Левой кнопкой мышки встаем на 1-й слой.  Пишем текст (напоминаю: левое вертикальное меню, инструмент «текст» – «Т»), например: «Вы впервые на моем сайте? »

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

      5.  Идем в левое вертикальное меню и нажимаем самую нижнюю кнопку «редактировать в Image Ready».

как сделать

Отключаем значок «глаз» у 2-го и 3-го слоев. Внизу экрана вы видите окошко со словом «анимация». В нижней строчке этого окошка – меню (см. картинку «анимация»). Жмем в этом нижнем меню кнопку «создать дубликат текущего кадра». Затем убираем «глаз» на 1-м слое и открываем на 2-м. Делаем опять дубликат кадра. Тоже повторяем для 3-го слоя.

      6.  Теперь устанавливаем количество секунд для каждого кадра. В нашем случае – 2с. Для выбора параметров цикла оставляем слово «Всегда». Вы можете поманипулировать количеством секунд и циклами параметров, чтобы лучше понять, как это работает. Нажмите на воспроизведение, чтобы видеть результат.

     7.  И последний шаг. Верхнее меню -> файл -> сохранить оптимизированный.  Теперь вы знаете, как сделать анимированный баннер, осталось только залить его на сервер и сделать ссылку.

     P.S.  Совсем не обязательно, чтобы все слои баннера были одинаковые. Вы можете создавать разные по цветовой гамме слои, добавлять в каждый слой необходимые картинки. Здесь все будет зависеть от вашего вкуса и фантазии.
     Творите с удовольствием!

И еще: здесь можно скачать бесплатно заготовки для баннеров, обои и кнопки.

Как сделать образ диска для восстановления системы Если вам понравилась статья, подпишитесь на RSS-ленту, чтобы не пропустить обновления блога.

—————————–
Любой может скачать игры на компьютер абсолютно бесплатно.

Еще в этой рубрике:

Нравится эта статья? Подпишитесь на RSS-ленту и получите еще больше классной информации!