Нарисую, спрограммирую, научу, поддержу... Всё будет хорошо!
(926) 194-25-80, (926) 194-20-60

01 Особенности рекламных банеров
02 Пример того, как рисуется статичный банер
03 Одна история про банер, или... дизайнерская эволюция
04 Примеры выполненных работ: Статичные банеры
05 Примеры выполненных работ: Анимированные банеры
06 Примеры выполненных работ: Экранные банеры


Особенности рекламных банеров

Рекламные банеры для web — вещь, встречающаяся нам на любых web-ресурсах, на любых страницах. Разные: мигающие в GIF или движимые запрограммированной логикой Flash — они призваны привлечь внимание и вселить в нас побудительное свойство кликнуть на них.

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

Также порой очень непросто вместить в маленький банер-кнопку (например, 88х31) много информации, не увеличивая его размер в килобайтах. Тут речь уже идёт о полном минимализме, «на вес» учитываются или выборочные палитры цвета, без всяких градиентов и полутонов, или минимум шагов анимации (если банер анимирован).

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

Обычно заказчик считает, что нарисовать банер просто. Я не буду спорить. Конечно, просто! Попробуйте открыть «ФотоШоп» и нарисовать сами... а если будет интересно, то ниже я привёл вкратце по шагам процесс создания одного простого статичного банера.

Пример того, как рисуется статичный банер

Создание банера — занятие увлекательное. Попробуем?


Рассмотрим вкратце этапы создания несложного статичного банера для web.


Создадим в «ФотоШопе» новый документ с необходимыми параметрами (в нашем случае это — 300 на 150 точек) и обведём его слой чёрным контуром в 1 пиксел:

Создание рекламного банера для сайта

Создадим новый слой и зальём его градиентом по вертикали (90°) в оттенках синего: от светлого — к более тёмному:

Создание рекламного банера для сайта

Наложим на слой фильтр зерна — Grain — с той интенсивностью, которая нам необходима:

Создание рекламного банера для сайта

В новом слое создадим горизонтальную полосу:

Создание рекламного банера для сайта

Зальём слой градиентом по вертикали (90°) в оттенках красного: от светлого — к более тёмному:

Создание рекламного банера для сайта

Наложим на слой фильтр зерна — Grain — с той интенсивностью, которая нам необходима, и добавим тень:

Создание рекламного банера для сайта

Возьмём исходное изображение с фрагментом джинсовой ткани и кармана:

Создание рекламного банера для сайта

Вытравим обводкой контур кармана и получим:

Создание рекламного банера для сайта

Зададим оттенок в более синих, насыщенных тонах:

Создание рекламного банера для сайта

Поместим карман левее:

Создание рекламного банера для сайта

Отбросим от кармана тень:

Создание рекламного банера для сайта

Вытравим у кармана строчку и продублируем её как новый слой, при этом добавив в канале красного:

Создание рекламного банера для сайта

Поместим строчку на прежнее место, совместив с исходной строчкой кармана, и подложим между этими двумя слоями новый слой с логотипом бренда:

Создание рекламного банера для сайта

Слой с логотипом сдвинем левее, обрежем его по верхему контуру кармана, притемним и добавим шероховатости:

Создание рекламного банера для сайта

Придадим слою с логотипом рельеф и небольшую тень:

Создание рекламного банера для сайта

Создадим надпись (шрифт Arial):

Создание рекламного банера для сайта

Обведём контур надписи:

Создание рекламного банера для сайта

Добавим остальные надписи и получим оконченный банер:

Создание рекламного банера для сайта

Цветовую гамму банера можно и поменять, выключив некоторые слои и создав вместо них другие:

Создание рекламного банера для сайта

Ура! У нас получилось!

Одна история про банер, или... дизайнерская эволюция

У заказчика имелся банер, созданный самостоятельно в сервисе «Гугла»:

Создание банера

Конечно, подобный банер не устраивал добрых, боевых ребят, к тому же, на картинке человек от кого-то убегал. И тогда на основе имеющегося банера, с повторением геометрии и цвета и с использованием иллюстрации заказчика, был создан вариант и его подвариант в хаки-стиле:

Создание банера   Создание банера

Где фото были взяты с сайта заказчика. Такой яркий банер, сохраняющий цвета уже имевшегося, не понравился заказчику. Им виделось соблюдение стилистики сайта, имевшегося у них. Возможно, это и правильно, но при этом нарушалось правило того, что банер должен быть ярким, даже если размещён на ярком ресурсе. Порой банер — это некая бесвкусица, не подчиняющаяся правилам цвета. Был предлоден вариант с другой подложкой, являющейся основным фоном сайта заказчика:

Создание банера

Были предложены и альтернативные варианты:

Создание банера   Создание банера

Впоследствии шрифт был сделан крупнее, а кулон размещён строго горизонтально, как того захотел заказчик, и во взаимном компромиссе удалось прийти к такому варианту:

Создание банера

И на основе этого варианта, который называется в банерной сети «большой прямоугольник» и имеет размер 336х280 точек, были созданы все необходимые остальные форматы, это:


«квадрат» 250х250:

Создание банера

«малый квадрат» 200х200:

Создание банера

«баннер» 468х60:

Создание банера

«полноразмерный баннер» 728х90:

Создание банера

«встроенный прямоугольник» 300х250:

Создание банера

«небоскрёб» 120х600:

Создание банера

«широкий небоскрёб» 160х600:

Создание банера
Примеры выполненных работ: Статичные банеры
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Статичный банер
Примеры выполненных работ: Анимированные банеры
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Анимированный банер
Примеры выполненных работ: Экранные банеры
Экранный банер
Экранный банер
Экранный банер
Экранный банер
Экранный банер
Экранный банер
Экранный банер
Экранный банер

вверх

© Purple Mouse студия сайтостроителя, 2001—2017
версия 2.0 (это значит, что когда-то была первая, но она всем порядком надоела)
в сети всегда здесь: www.pmouse.ru
пишите письма:
написать мастеру

КОНТАКТ

Телефоны:


В сети всегда здесь:
www.pmouse.ru

Пишите письма:




...и главное ...помните:
я нарисую самый ровный круг!

×