Создание баннера - Создание сайта

Баннер представляет собой рекламный рисунок для рекламы в Интернете созданного сайта. Как правило, баннер - это графическое изображение прямоугольной формы в формате Gif или Jpeg. Баннер помещается на Web-странице и имеет ссылку на сайт рекламодателя. Размеры баннеров стандартизированы.

Размер баннера в пикселах

Тип баннера

468х60

Full Banner (Стандартный баннер)

234х60

Half Banner (Баннер половинного размера)

88х31

Micro Ban (Микро полоса)

120х90

Button1 (Кнопка 1)

120х60

Button2 (Кнопка 2)

120х240

Vertical Banner (Вертикальный баннер)

125х125

Square Banner (Квадратный баннер)

728х90

Leaderboard ("Перетяжка" вверху страницы)

Запустите Adobe PhotoShop (Пуск > Программы>Adobe PhotoShop CS2)

Выберите команду Файл>Новый. На экране появится диалог Новый. Заполните его по образцу:

В поле Имя в верхней части диалога можно указать имя создаваемого документа. По умолчанию предлагается Безимени-1. Не изменяйте название. Это можно сделать позже, при сохранении рисунка.

Параметр Разрешение определяет разрешение создаваемого рисунка - количество пикселов (точек, из которых строится изображение) на дюйм. Для экрана этот параметр составляет 72.

В результате получаем следующее:

Баннер, который мы будем создавать, состоит из простого логотипа компании ООО "ДИНАС" и двух сменяющих друг друга анимированных надписей, приглашающих посетить сайт компании. Начнем с подготовки логотипа, который в свою очередь будет состоять из трех объектов, размещенных один внутри другого: текста, эллипса и прямоугольника.

Нарисуем в левой части окна документа прямоугольную область размером 150х50 пикселов, которую затем зальем выбранным цветом.

Выберите инструмент Прямоугольная Область на панели инструментов. Настройте панель свойств инструмента (в верхней части окна) как показано на рисунке:

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

Снимите выделение (Меню Выделение>Снять Выделение).

Создадим внутри прямоугольника эллиптическую область с размерами горизонтальной и вертикальной осей 140х40 пикселей с помощью инструмента Овальная Область. Если область выделения нужно будет расположить иначе, воспользуйтесь командой меню Выделение>Трансформировать Выделенную Область. Залейте область выделения белым цветом. Снимите выделение.

Сохраните документ в своей папке с именем Banner. psd, которое позволит нам редактировать свой документ в дальнейшем.

Добавим в создаваемый логотип надпись ООО Динас. Когда в рисунок добавляется текст, он всегда помещается на отдельный слой. Слои дают возможность редактировать отдельные элементы изображения независимо друг от друга. Управление слоями осуществляется с помощью палитры Слои. Видимость любого слоя может быть отключена при нажатии на кнопку рядом с названием слоя. Кроме того, для каждого слоя можно назначать свой стиль оформления, используя палитру Стили. Выбранный стиль присваивается всем объектам, находящимся на данном слое. С помощью кнопки в правом верхнем углу панели стилей вы можете выбрать подходящий для вас набор из выпадающего списка панели.

Нажмите кнопку Горизонтальный Текст на панели инструментов, установите текстовый курсор в нужное место и напишите текст. Самостоятельно оформите его, используя возможности панели свойств. Для точного позиционирования текста можно использовать инструмент Перемещение . Должно получиться примерно следующее:

Создадим еще 2 текстовых слоя с надписями "Ищите Канцтовары Недорого?" и "Заходите СЮДА!", расположенными на рисунке справа от логотипа, одна под другой так, чтобы они могли сменять друг друга. Присвойте каждому из слоев подходящий на ваш взгляд стиль. Должно получиться примерно следующее:

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

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

Сначала нарисуем основу двери с помощью инструмента. Залейте созданное выделение цветом. В дальнейшем можно использовать какой-либо стиль слоя на ваше усмотрение. Снимите выделение.

Теперь внутри данного прямоугольника нарисуем меньший прямоугольник - дверную коробку. Залейте его цветом, отличным от белого. В дальнейшем из этого прямоугольника будет создана дверь.

Теперь можно выполнить преобразование области выделения с помощью команды Редактирование>Трансформирование>Искажение. Изменим положение левого углового маркера, перетащив его на середину нижней стороны белого прямоугольника.

Подобным образом изменим положение левого верхнего угла прямоугольника так, чтобы левая сторона выделенной прямоугольной области стала вертикальной. Внесите также и другие необходимые изменения чтобы привести дверь к следующему виду. Примените сделанные изменения (кнопка на панели свойств в верхней части окна). Снимите выделение.

Вид баннера на данном этапе представлен на рисунке:

Сохраните файл. В дальнейшем он будет анимирован.

Похожие статьи




Создание баннера - Создание сайта

Предыдущая | Следующая