Как сделать анимированный баннер
На уроке как сделать баннер вы научились делать простой баннер. Уверена, что все у вас получилось без труда. Сегодня поговорим о том, как сделать анимированный баннер для сайта. Не стесняйтесь задавать вопросы. Причина вашего непонимания может крыться в том, что я недостаточно хорошо объяснила. Буду благодарна за то, что вы поможете улучшить данный материал.
Вы согласитесь со мной, что пока баннер недвижим, он недостаточно выразителен. Анимированный баннер привлечет больше внимания к вашему сайту. Главное не переборщить с анимацией, иначе она будет не привлекать, а только раздражать.
И так, поехали. Чтобы не повторяться, используем основу баннера, сделанного на предыдущем уроке и к нему добавим анимацию.
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.
P.S. Совсем не обязательно, чтобы все слои баннера были одинаковые. Вы можете создавать разные по цветовой гамме слои, добавлять в каждый слой необходимые картинки. Здесь все будет зависеть от вашего вкуса и фантазии.
Творите с удовольствием!
И еще: здесь можно заготовки для баннеров, обои и кнопки.
Если понравилась статья, то пройдя по этой Вы поддержите блог абсолютно бесплатно для Вас. Благодарю!
Любой может скачать игры на компьютер абсолютно бесплатно.
Если вы решили купить нетбук киев, то интернет-магазин к вашим услугам.
Понравилась статья? и получите больше полезной информации!