Изготовление баннера для Интернетa

Владимир Молочков (В.Новгород)

В принципе, баннером можно назвать любую рекламную картинку, которая находится на сайте. Но обычно принято придерживаются стандартного размера 46860 пикселов. Физический размер файла в килобайтах тоже ограничен. Желательно укладываться в 10–12 Кбайт. Форматы файлов для баннеров обычно те же, что и для обычной Web-графики, то есть GIF и JPG. Ниже мы рассмотрим, как создать баннер в Photoshop.

Рекламный баннер для радиостанции Маяк

Создайте новый документ для баннера 468×60 пикселов.

На палитре Слои дважды кликните по иконке слоя и введите имя слоя. Нажмите на кнопку «OK», теперь слой имеет имя, а также будет разблокирован.

Далее снова кликните два раза на иконке слоя, чтобы открылось окно Стиль слоя. Активируйте флажок Наложение градиента и укажите градиент, от серого до белого

Теперь необходимо создать новый слой, для этого палитре Слои нажмите на иконку Создать новый слой. Затем выберите инструмент Перо и нарисуйте форму. Она должна быть замкнутой.

Рисуем на заготовке баннера инструментом Перо

Перейдите на вкладку Контуры и выберите Рабочий контур.

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

В результате заготовка для баннера приобрела следующий вид:

Далее на вкладке Слои мы дважды щелкните на слоях c синим и красным ломтиками, активируйте флажок Обводка, выберите желтый цвет и размер обводки 3 пикселя.

Мы получили следующее:

В соответствии с тем, что баннер рекламирует, ставьте на баннер изображения и текст.

Баннер для радиостанции Маяк готов.

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

Запускаем программу Photoshop. Командой Файл > Создать создаем новый файл с размерами 468 на 60 пикселей. Создадим для него фон, с помощью заливки каким-либо цветом, например, f5f7d3.

Далее выполним команду Просмотр > Показать > Сетку, вставляем в баннер логотип провайдера и пишем следующий текст.

На палитре Слои отключаем видимость текстового слоя и пишем новый текст.

Еще раз на палитре Слои отключаем видимость текстового слоя и пишем еще один текст.

Это третий текст баннера.

И, наконец, делаем последний кадр нашей анимации.

На шкале времени щелкните на кнопку Создать анимацию кадра.

Теперь шкала времени изменила свой вид.

Далее, удерживая CTRL, активируете слои для второго кадра, сделав их видимыми.

На рисунке выбраны три слоя для кадра №2

Нажмите на шкале времени на кнопку Новый кадр.

На шкалу времени помещен кадр №2

Описанным выше способом создайте все кадры анимации и задайте время показа каждого кадра – 1 сек.

Из списка выбираем время демонстрации каждого кадра анимации

Зациклите показ баннера по кругу, выбрав вариант Постоянно.

В заключение сохраните анимацию, выполнив команду Файл > Сохранить для Web.

Окно сохранения баннера в формате GIF

Нажмите на кнопку Сохранить – работа окончена!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>