суббота, 23 марта 2013 г.

Делаем анимированный баннер

Доброго времени суток!

Давно хотела научиться делать не простые баннеры, а АНИМИРОВАННЫЕ.

Делаем анимированный баннер. Пошаговая инструкция


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

Ну и естественно я весь процесс описываю для Вас дорогие мои читатели. Надеюсь Вам тоже пригодится это умение.


Шаг 1.  Мы создаем в фотошопе новый файл:

Делаем анимированный баннер.  Шаг 1

Шаг 2. Выдираем нужный нам цвет подложки. У меня это как всегда фиолетовый:

Делаем анимированный баннер.  Шаг 1

Шаг 3. Начинаем создавать наши слои.
слой с фоном подложки следует сделать Дубликат (количество этих дубликатов зависит от того сколько слоев в баннеры Вы планируете сделать).
Затем мы на каждый из слоев подложек  делаем рисунки или добавляем картинки / текст - все что Вы хотите что бы содержал конкретный слой баннера.

Делаем анимированный баннер.  Шаг 1

Шаг 4. Пишем послойно текст - на каждый слой подложки к добавленным рисункам еще добавляем и текст. У меня он к примеру разный на всех слоях. Написав текст настройте Параметры наложения слоя. Я выбрала внешнее свечение и тень, которую немного сдвинула....

Делаем анимированный баннер.  Шаг 1

Шаг 5. Каждый отдельный слой баннера группируем - то есть объединяем слои которые мы делали для нашего баннера. У меня это Слой подложка + слой с картинкой +  слой с текстом. И таких слоев у меня получилось 6 шт.

Делаем анимированный баннер.  Шаг 1

Шаг 6. После того как все слои для будущего баннера готовы мы приступаем к самому интересному. Его непосредственному созданию. Для этого нужно открыть окно Анимации как показано на рисунке а. ( у меня же такого пункта не обнаружилось, поэтому я воспользовалась вариантом b. в правом верхнем углу я развернула 3D и выбрала Движение)

Делаем анимированный баннер.  Шаг 1

Шаг 7. Почти кульминация. В появившемся окошке Шкалы времени мы ищем кнопочку как показано на рисунке ниже стрелочкой и в появившемся окошке выбираем СОЗДАТЬ КАДРЫ ИЗ СЛОЕВ.

Делаем анимированный баннер.  Шаг 1



Шаг 7.  К сожалению скриншот данного шага у меня упорно отказывался делаться, поэтому я воспользовалась чужим (за что очень стыдно, но надеюсь я буду прощена). И так как показано ниже Нам следует выбрать на сколько секунд будет задерживаться каждый кадр баннера. 


Шаг 7

Шаг 8. Завершение. Вот мы с Вами и создали нашщ баннер, теперь остается его только правильно сохранить. Для этого открываем окошко Сохранить для Web:



Делаем анимированный баннер.  Шаг 1

При сохранении ОБЯЗАТЕЛЬНО выбираем формат GIF 

Делаем анимированный баннер.  Шаг 1

Жмем сохранить и остается только установить Ваш баннер. Я устанавливала его просто через установку картинки и добавила на нее ссылку. Можноже воспользоваться HTML кодом в который вставить URL адрес картинки и URL адресс сайта на который эта картинка будет ссылаться:


<a href="АДРЕС САЙТА на который будет ссылаться баннер"><img border="0" height="42" src="URL вашего картинки баннера"></a>




ВОТ что получилось у меня:





видео на тему:






Как всегда с наилучшими пожелания Вам,
Велерея.

4 комментария :

  1. Спасибо большое! Я примерно знакома с этой системой создания, но банер делала не с помощью фотошопа, а с помощью другой программки (честно уже не помню название) там делаешь одинаковые картинки на каждой пишешь текст сохраняешь (на пример5-6 картинок) и вставляешь в ту программку и она уже сама соединяет между собой картинки. Нужно попробовать с фотошопом:)

    ОтветитьУдалить
  2. Ната, огромное спасибо за пошаговое разъяснение. Мне баннеры всегда делает сын. Но он часто занят и его не всегда допросишся. Буду учиться по вашей инструкции, шаг за шагом.

    ОтветитьУдалить
    Ответы
    1. Не за что Татьян, если будут какие вопросы спрашивайте я постараюсь разъяснить подробнее.

      Удалить