баннер для сайта (стат и динам)

Изготовление баннера для Интернет
В принципе, баннером можно назвать любую рекламную картинку, которая
находится на сайте. Но обычно принято придерживаются стандартного размера 468
60 пикселов. Физический размер файла в килобайтах тоже ограничен. Желательно
укладываться в 10–12 Кбайт. Форматы файлов для баннеров обычно те же, что и для
обычной Web-графики, то есть GIF и JPG. Ниже мы рассмотрим, как создать баннер
в Photoshop.
1. Пример. Делаем статичный рекламный
баннер для радиостанции Маяк
Создайте новый документ для баннера 468×60 пикселов – рис. 1.
Рис. 1. Результат выполнения команды Файл-Создать
На палитре Слои дважды кликните по иконке слоя и введите имя слоя (рис. 2).
Нажмите на кнопку «OK», теперь слой имеет имя, а также будет разблокирован.
Рис. 2. Окно Новый слой
Теперь снова кликните два раза на иконке слоя, чтобы открылось окно Стиль слоя.
Активируйте флажок Наложение градиента и укажите градиент, от серого до белого
– рис. 3.
Рис. 3. Окно Стиль слоя-Наложение градиента
Теперь необходимо создать новый слой, для этого палитре Слои нажмите на иконку
Создать новый слой. Затем выберите инструмент Перо и нарисуйте форму как на
рис. 4. Она должна быть замкнутой.
Рис. 4. Рисуем на заготовке баннера инструментом Перо
Перейдите на вкладку Контуры и выберите Рабочий контур – рис.5.
Рис. 5. Рабочий контур выбран
Щелкните мышкой по значку Загрузить контур как выделенную область, затем
возьмите инструмент Заливка и заполните выделение выбранным вами цветом (в
нашем случае – голубым). Далее выделенная область скопирована, повернута и
залита красным цветом. В результате заготовка для баннера приобрела следующий
вид (рис. 6).
Рис. 6. Заготовка для баннера видоизменена
Далее на вкладке Слои мы дважды щелкнули на слоях и синим и красным
ломтиками, активировали флажок Обводка, выберите желтый цвет и размер обводки
3 пикселя (рис. 7).
Рис. 7. Задаем параметры обводки “цветных ломтиков”
Мы получили следующее (рис. 8).
Рис. 8. Процесс создания баннера продолжается
В соответствии с тем, что баннер рекламирует, ставьте на баннер изображения и
текст (рис. 9).
Рис. 9. Баннер для радиостанции Маяк готов
2. Делаем анимированный баннер в
Photoshop
Запускаем программу Photoshop. Командой Файл–Создать создаем новый файл с
размерами 468 на 60 пикселей. Создадим для него фон, с помощью заливки какимлибо цветом, например, f5f7d3 – рис. 10.
Рис. 10. Выбираем цвет баннера
Далее выполним команду Просмотр-Показать-Сетку, вставляем в баннер логотип
провайдера и пишем следующий текст (рис. 11).
Рис. 11. Первый текстовый слой готов
На палитре Слои отключаем видимость текстового слоя и пишем новый текст (рис.
12).
Рис. 12. Пишем новый текст
Еще раз на палитре Слои отключаем видимость текстового слоя и пишем еще один
текст (рис. 13).
Рис. 13. Это третий текст баннера
И, наконец, делаем последний кадр нашей анимации (рис. 14).
Рис. 14. Последний кадр анимации создан
Выполним команду Окно-Шкала времени. В палитре слои выделим слои для
первого кадра, остальные отключим (рис. 15).
Рис. 15. Мы выбрали три слоя первого кадра анимации
На шкале времени щелкните на кнопку Создать анимацию кадра (рис. 16).
Рис. 16. Первоначальный вид шкалы времени
Теперь шкала времени изменила свой вид (рис. 17).
Рис. 17. Первый кадр помещен на шкалу времени
Далее, удерживая CTRL, активируете слои для второго кадра, сделав их видимыми
(рис. 18).
Рис. 18. На рисунке выбраны три слоя для кадра №2
Нажмите на шкале времени на кнопку Новый кадр (рис. 19).
Рис. 19. На шкалу времени помещен кадр №2
Описанным выше способом создайте все кадры анимации и задайте время показа
каждого кадра – 1 сек. (рис. 20).
Рис. 20. Из списка выбираем время демонстрации каждого кадра анимации
Зациклите показ баннера по кругу, выбрав вариант Постоянно (рис. 21).
Рис. 21. Зацикливание демонстрации баннера по кругу
В заключение сохраните анимацию, выполнив команду Файл-Сохранить для Web
(рис. 22).
Рис. 22. Окно сохранения баннера в формате GIF
Нажмите на кнопку Сохранить – работа окончена!
Вопросы и задания
1. Создайте статичный баннер для рекламы вашего сотового телефона (рис. 22).
Рис. 22. Статичный баннер
2. Выполните анимированный (динамичный) баннер, взяв за основу логотип вашего
провайдера Интернет, например,
Содержание
Изготовление баннера для Интернет ..................................................................................1
Рекламный баннер для радиостанции Маяк ......................................................................1
Делаем анимированный баннер в Photoshop .....................................................................4
Вопросы и задания ...............................................................................................................9