Как изготовить баннер. Для начала вы должны себе представить ваш будуший
баннер. Какого цвета будет фон, какого буквы, какой текст вы на
нем разместите и где. Для текста особых правил нет, просто надо
помнить, что рекламная площадь ограничена и, соответственно,
быть кратким. Лучше всего сначала напишите текст и нарисуйте сам
баннер на бумажке, а уже затем приступайте к работе на
компьютере.
Итак, мы подумали и решили создать следующий баннер размера
468х60 - на темно-синем фоне постепенно появляется название
сайта и его адрес в интернет: "Студия настоящего дизайна
www.belovs.boom.ru". Составим схемку: баннер будет состоять из
четырех кадров. 1. Просто фон. 2. Постепенно появляются слова.
3. Слова появились целиком. 4. Постепенно исчезают слова. Причем
обратите внимание - 2 и 4 кадры могут быть одинаковыми! Итого,
нам нужно создать только 3 оригинальных рисунка. Начали.
1. Шаг, создаем документ. Я надеюсь, что вы уже загрузили
Photoshop, потому что у нас нашлась для него работка. Итак
заходим: File---New. Сразу выставляем название документа (Name),
скажем ban1, далее ставим размер 468х60 при этом обратите
внимание, что размер должен быть в пикселях (pixels),
устанавливаем разрешение (resolution) равно 72, цвет в RGB и фон
(contents) белый. Жмем Ок.
2. Шаг, заливаем фон. Ищем панель с тремя закладками Color,
Swatches, Brushes. Если не нашли - зайдите в меню
Windows--Swatches. Открываем закладку Swatches и выбираем
темно-синий цвет. В панели инструментов (слева - основная
рабочая панель) выбираем ведерко и щелчком мыши по фону нашего
баннера заливаем его выбранным цветом.
3. Шаг, пишем текст. Сначала тем же манером выбираем цвет букв,
а затем в панели инструментов выбираем букву Т (текст) и щелкаем
ей по фону. В появившемся окне пишем текст. Выделив текст, мы
можем уменьшать или увеличивать его размер (size), менять цвет
букв, выбирать шрифт. Пока вы находитесь в этом окне, вы можете
передвигать свой текст по баннеру. После того, как вы его
установили в нужное место, жмем Ок.
4. Шаг, меняем прозрачность. Чтобы буквы появлялись постепенно,
во втором кадре мы должны поменять прозрачность текста. Для
этого нам понадобиться найти панель Слои (Layers). (Если не
нашли - зайдите в меню Windows--Layers). Там у нас два слоя -
слой с текстом и слой с фоном. Берем слой с текстом мышкой,
тащим в этой же панели к символу с изображением нового листа и
отпускаем, создавая тем самым дубликат текстового слоя. А можно
просто щелкнуть правой кнопкой мыши по слою и выбрать "создать
дубликат". Теперь у нас должно быть три слоя, два с текстом и
фон. В этой же панели (Layers) напротив слоя стоит "глаз".
Уберем его с одного из текстового слоя. Теперь он невидим.
Перейдем на видимый текстовый слой (щелкнуть мышкой по названию
слоя) и изменим прозрачность. Меняется в этой же панели Opacity
по умолчанию стоит 100% мы поставим 50%.
5. Шаг, редактируем. Сейчас еще можно подредактировать ваш
баннер. Вы можете снимать "глаз" с слоев и уже видеть
практически, что получится. Если вы захотите изменить текст,
щелкните по текстовому слою 2 раза мышкой. Чтобы подвигать текст,
надо выделить нужный слой, взять инструмент Move tool (стрелочка
в верхней части панели инструментов) и можно двигать.Довольны?
Сохранились!!!.
6. Шаг, делаем 3 документа. Теперь, то, что у нас получилось,
надо превратить в 3 отдельных файла. Для этого мы пересохраняем
получившийся файл под названиями ban2 и ban3. И открываем все 3
файла. У нас должны получится три одинаковых файла под разными
названиями. В ban1 мы удаляем все слои, кроме слоя с фоном. Для
этого щелкаем правой кнопкой мыши по ненужному слою и выбираем
Удалить (Delete). В ban2 удаляем слой с текстом, оставляем фон и
полупрозрачный текст, и в ban3 удаляем слой с полупрозрачным
текстом, оставляем фон и текст.
7. Шаг, оптимизируем. Теперь у нас 3 документа. На одном фон, на
втором полупрозрачный текст, на третьем конечный текст. Теперь,
прежде чем сохранить эти файлы, нам надо оптимизировать их для
Интернет, т.е. удалить ненужные цвета для уменьшения размера
файла. Делаем следующее: Выбираем Image---Mode---Indexed Color.
Вам зададут вопрос - Flatten image? (Объединить слои?),
соглашаемся. В появившемся окошке выбираем палитру Adaptive.
Далее нам предлагают выбрать количество бит в картинке Color
Depth 8 бит(256цветов); 7(128цв.); 6(64цв.); 5(32цв.); 4(16цв.);
3(8цв.); выбираем 3 бита и в окошке Colors (количество цветов)
соответственно появилась цифра 8. Смотрим на баннер. Нормально,
но попробуем поставить в этом окошке (Colors) - 4 цвета (т.е.
еще меньше!). Заменяем 8 на 4 - отлично! В Option выбираем
diffusion и best. Теперь жмем Ок. Ту же процедуру проделывем и с
остальными файлами. А файл с фоном можносохранить вообще, как
один цвет.
8. Шаг, сохраняем. Все окей, осталось сохранить. File--Save a
copy пишем имя файла, расширение выбираем Gif и жмем Ок. В
следующем окне оставляем все по умолчанию и Ок. И так все 3
файла.
9. Шаг, собираем. Теперь мы открываем Gif аниматор, создаем
новый документ, проставляем размеры и загружаем в него все 3
файла подряд, плюс 4-й файл в конце с полупрозрачным текстом (документ
ban2.gif). Теперь осталось выставить длительность (duration)
каждого кадра. Кадры с прозрачностью лучше выставлять где-то
10-20, чтобы они поплавнее переходили. Я выставил следующим
образом: 50 - 15 - 70 - 15 (фон - полупр. - текс - полупр.)
10. Шаг, оптимизация в аниматоре. Если ваш аниматор имеет
оптимизатор - оптимизируйте еще раз, хотя после проделанных нами
процедур это вряд-ли имеет смысл. Но при работе с многоцветными
баннерами этот шаг необходим. Смотрим результат и сохраняем. Ну
и можно создать еще один вариант баннера убрав 2 и 4 кадры, а в
первом и втором поменяв длительность 40 - 50.
Советы Веб-дизайнеру
1. Делайте то, что от вас хотят видеть.
Клиент всегда прав. Если вам говорят сделать желтый текст на
красном фоне, извольте покрутиться и не растерять читабельность
с привлекательностью.
2. Не увлекайтесь графикой.
Графика это хорошо, но ведь существуют и другие вещи.
Поэкспериментируйте с цветными таблицами и CSS. Разгрузите ваш
сайт и старайтесь придерживаться планки до 50kb на страницу.
3. Держите стиль.
При создании дизайна пляшите от тематики. Есть такое понятие,
как стиль. Он должен пронизывать весь сайт. Для корпоративных
сайтов мягкий дизайн, для развлекательных веселый и обязательно
для всех уникальный
4. Дизайн не должен быть литым.
Не сковывайте дизайном информативность сайта. Рано или поздно
какую-нибудь менюшку убирут или добавят, а тексты поменяют
5. Уделяйте внимание мелочам.
Маркеры, полоски, значки и прочие мелкие элементы, готовьте с
особой тщательностью. Подгоняйте их под общую картину и вы
достигнете хороших результатов.
6. Удобная навигация - залог успеха.
Пользователь не должен часами бродить по вашему сайту (хотя
было-бы неплохо...), это раздражает. Для небольших сайтов можно
ограничиться навигационной полоской с выходами к основным
разделам, а для сайтов с глубокой структурой стоит делать,
что-то помощнее. Неплохо даже подумать о функции поиска.
7. Ваш броузер не единственный, разрешение экрана не уникально.
Созданный вами сайт должен читаться при 256 цветах, на трех
разрешениях экрана (640х480, 800х600, 1024х768) и пониматься
двумя основными броузерами.
8. Если заказчик не может сформулировать задачу, дайте волю
фантазии.
Бывают случаи, когда заказчик ничего не понимает в Интернет и
соответственно не может четко сформулировать, чего он хочет. Не
стоит отчаиваться, дайте волю фантазии, проявите себя и
постарайтесь не разочаровать своего клиента.
9. Любите себя в меру.
Авторские права - это хорошо, но если любовь к себе превращается
в манию это уже плохо. Влепите копирайт в самом низу титульной
страницы и остановитесь. Не надо подписывать все страницы, да
еще и комментарии в гифы пихать. В конце концов, кому страничку
делаем?
10. Дизайн не должен портить жизнь Веб-мастеру.
Создав сайт, доходчиво объясните Веб-мастеру о том, как его не
развалить. У всех есть свои секреты и неординарные приемы.
Веб-мастер должен их знать.
11. Точность - вежливость королей.
Графический дизайн сайта должен быть подогнан с точностью до
одного пикселя. Не ленитесь, пусть работы будет больше, но и
эффект значительно солидней.
12. Авторские права не шутка.
Не стоит воровать чужую графику. Во первых это не хорошо, а во
вторых если не умеешь делать сам, то какой же ты дизайнер!
Урок 2. Создание фона баннера из картинки!
Для работы над вторым баннером вам понадобится картинка. В этом
уроке мы будем использовать в качестве примера картинку из
левого фрейма. Вы можете работать тоже с ней. Для этого кликните
правой кнопкой мыши по 2-й картинке ("Контрольный выстрел") и
выберите открыть в новом окне. Как она загрузится опять кликайте
правой кнопки мыши по ней и выберите сохранить картинку как...
Сохраните ее в рабочей папке. Все, к уроку готовы, можно
отключаться от интернета и заниматься делом!
Мы делаем баннер 468х60 используя фрагмент картинки. Так же
часть картинки мы используеем как фон нашего баннера. У нас есть
ограничения по размеру баннера (в Кб) и поэтому нам придется
анимацию свести к минимуму. В данном случае у нас будут всего 2
фрейма.
1. Шаг, Открываем картинку. Для начала мы откроем картинку в
Photoshop и переведем ее в цветовую палитру RGB Image---Mode---RGB.
Теперь мы можем с ней работать. Сразу создадим документ для
будущего баннера. Как это сделать описано в прошлом уроке.
Теперь у нас открыто 2 окна. Картинка и будущий баннер.
2. Шаг, выбираем фрагмент. Я решил использовать в баннере часть
лица с глазами. Для этого я ее выделяю инструментом "выделение
прямоугольником" (самая верхняя левая кнопка на панели с
инструментами или Shift+M). Если с первого раза не получилось
попробуйте еще. Снять выделение можно комбинацией клавиш Ctrl+D.
3. Шаг, перетаскиваем фрагмент. Теперь берем инструмент
переместить (Move tool Shift+V) и перетаскиваем выделенный
фрагмент в будующий баннер. Готово. Размещаем его слева.
Сочетанием клавиш Ctrl+T мы можем уменьшать или увеличивать
размер выделенного фрагмента, но в данном случае это ни к чему.
4. Шаг, удаляем лишнее. Теперь нам надо удалить кусочек фона
справа от лица. Чтобы лучше и чище выделить этот кусок мы можем
увеличить картинку Ctrl + или для уменьшения Ctrl - . Берем
инструмент лассо (Shift+L) и выделяем не нужный кусочек с фоном.
Для этого ставим вначале точку (щелчком мыши) и ведем
появившуюся линию до следующего угла, ставим точку и т.д. Мы как
бы окружаем не нужный фрагмент. Подведя мышку к начальной точке
должнен появится 0, щелкаем последний раз мышкой и видим
выделенную область. В процессе выделения мы можем отменять
поставленные точки клавишей Del, снять выделение Ctrl+D. Теперь
выделенную область можно удалить нажав клавишу Del.
5. Шаг, готовим фон. Это очень сложный и важный момент, который
вам еще очень часто пригодится. Я выделяю на кртинке кусочек для
фона. В данном случае я выбрал левый верхний кусок. Беру Move
tool и перетаскиваю его в баннер.
Теперь перетаскиваю слой с фоном под слой с глазами. Для этого в
панели Layers (Слои) я просто претаскиваю нужный слой ниже или
выше другого слоя. Взяв инструмент Move tool я могу подвигать
фон. Ставлю его капельку залицо. Теперь я копирую слой с фоном.
В панели Layers (Слои) я щелкаю правой кнопки мыши по фону с
слоем и выбираю Duplicate Layer (дублировать слой). Используя
все тот же Move tool я могу подвигать фон. Ставлю его в притык.
Место стыка видно? Не беда. Жмем Ctrl+T и кликаем правой кнопкой
мыши по картинке. Выбираем повернуть на 180 градусов, кликаем
еще раз и выбираем отразить по вертикале (Flip Vertikal) и жмем
enter. У нас теперь 2 фоновые картинки с оабсолютно одинаковыми
краями, которые надо только состыкавать.
Стык не виден? Молодцы!
Теперь нам осталось написать текст и сохранить. Об этом подробно
рассказано в прошлом уроке.
Итак, сохраняем, собираем в Gif-аниматоре и получаем результат!
И в заключении: выбирайте картинки, где поменьше цветов,
Горячие клавиши работают в английской версии Photoshopa только
когда включен англ. язык.
О баннерах
Ни для кого не секрет, что баннеры - самая распространенная
форма рекламы в Интернете. Да, безусловно, их эффективность
постоянно падает и, на данный момент, уже не превышает в среднем
и полупроцента кликов от общего количества просмотров, хотя еще
год назад средний CTR составлял в Рунете 2, а два года назад - и
все 4 процента. Одновременно с падением эффективности, но не
пропорционально ей, уменьшается общая доля инвестиций в
баннерную рекламу среди рекламодателей и естественным выглядит
развитие новых, ранее не участвовавших в "дележе пирога" форм
рекламы. Так, одной из самых популярных форм сейчас являются
текстовые ссылки, небольшие текстовые врезы, законспирированные
под контент сайта и пр. Тем не менее, по оценкам таких гигантов,
как Media Metrix объем вложений в баннерную рекламу составляет
не менее 52% от всех рекламных затрат в Интернете, а ближайший к
ним конкурент - почтовые рассылки не набирает и 25 %, хотя и "очень
старается". При этом в анализе Media Metrix ни единым словом не
упомянуты баннерные обмены, как форма размещения рекламы, так
что на приведенные цифры можно лишь приблизительно
ориентироваться, а для Рунета, где баннерные сети чрезвычайно
популярны цифра 52% выглядит не просто заниженной, а
смехотворной.
С непосредственным размещением рекламы на сайте-рекламной
площадке все понятно, - здесь необходимо платить деньги (живьем
или "натурой"), причем, если есть желание получить какую-либо
приемлемую отдачу, то деньги немалые. С другой стороны, у нас
есть возможность опосредованного размещения рекламы, то есть,
размещения в баннерных сетях. Сразу оговорюсь, об обмене мы
говорить не будем, так как если сайт имеет менее 300-400
обращений (уникальных), то о баннерном обмене можно практически
забыть, поэтому мы будем говорить о покупке баннерных показов.
Сейчас в Рунете существует несколько десятков (боюсь, что это
значение подбирается уже к сотне, тем более с появлением
БаннерБанка открыть собственную сеть - ело нескольких дней), все
они имеют различный оборот от 0 до 10 миллионов баннерных
показов в день. Очевидно, что большинство сетей будут иметь
трафик в пределах нескольких десятков тысяч баннерных показов,
тогда как таких монстров, которые "накручивают" миллионы - будет
всего ничего. Очень важно понимать, что объем баннерных показов
не зависит от количества страниц, на которых они размещены, а
зависит от общего количества пользователей, которые эти страницы
посещают, поэтому рынок баннерного обмена Рунета занят, -
баннерообмены плодятся быстрее, чем к Сети успевают подключиться
новые пользователи.
Можно говорить о существовании шести баннерных сетей высшего
уровня это: Russian Link Exchange (www.rle.ru), Реклама.Ру (www.reklama.ru),
ИнтерРеклама (www.IR.ru), Rb1 (www.rb1.design.ru), List Banner
Exchange (www.lbe.ru), Эректор (www.erector.ru) @@. В общем, это
все. Сейчас набирает силу некоторая не очень понятная система
Uncle Web (www.UncleWeb.ru), но она не производит впечатления
чего-то стабильного и содержательного. Еще две заметные сетки -
это Power Banner System (www.pbs.ru), которая заполонила собой
изрядное количество развлекательных сайтов и TBN (www.tbn.ru) -
рекламная сеть Агавы, но это не более чем сетки с большим
потенциалом. Все вышеуказанные сети, кроме RLE основаны на новых
механизмах (Rota Banner и Banner Bank), которые обеспечивают
практически бесперебойную работу сети, богатые возможности
управления и быструю загрузку баннеров. Что касается RLE, то,
надо отдать ей должное, механизм сети, не претерпевавший никаких
серьезных изменений на протяжении последних полутора лет,
справляется с колоссальным потоком - до 10 миллионов баннерных
показов в день. Несмотря на это, RLE вот уже несколько месяцев
грозится "на днях" разродится новым механизмов, который будет,
как обычно, лучше всех. Нисколько не сомневаясь в возможностях
RLE разродится новым механизмом, должен сказать, что лучше бы
они поторопились с запуском, так как именно RLE сейчас
предоставляет больше всего "битых" баннеров.
Ишь ты, как много можно сказать на такую, в общем-то, банальную
тему, как баннерные сети. Мы немного отвлеклись в историческую
справку, вернемся к нашим баранам.
Так, для того, чтобы иметь какой-то приличный отклик от
баннерной рекламы нужно прокручивать не менее 10-20 тысяч
баннерных показов в день. Указанный объем доставит вам пару
сотен посетителей, которые, в свою очередь, немного приподняв
вас в рейтингах, принесут новых посетителей. То есть, баннерный
обмен не имеет смысла использовать в одиночку, - только в связке
баннер-рейтинг. В таком случае очень многое зависит от того,
каким образом вы будете прокручивать дневной объем баннеров.
Очень хорошие результаты дает, например, так называемая утренняя
открутка - весь дневной лимит показывается до 10 часов дня,
чтобы к моменту приходя на работу большинства служащих (дневной
пик активности в Интернете) вы были бы уже на первых страницах
рейтингов. Точно так же можно использовать и вечерний пик
активности.
Очень важным фактором в баннерной рекламе является низкий
процент целевой аудитории. Так, например, если вы размещаете
информацию на сайте, продающем автомобили, то можете быть
уверены, что с него к вам придут автовладельцы (или те, кто
собирается таковыми стать), а в баннерной рекламе через обменные
сети вы можете делать такие заключения лишь весьма
приблизительно. Следовательно, весьма существенным будет
предоставлению пользователю сразу по приходу исчерпывающей и
понятной информации о том, куда он попал. Представьте себе, что
человек кликнул на баннере, потому что его заинтересовала
картинка, которая там изображена, теперь он очутился где-то, в
совершенно непонятном ему месте, и первые его, еще инстинктивным
и вполне естественным желанием будет - осмотреться, и определить
свои новые координаты в пространстве, словом, понять "на каком
он свете". Именно поэтому посетителей с баннерной рекламы
следует направлять не на титульную а на входные страницы.
Подробнее об этом вы можете почитать в статье "А был ли мальчик
или цена и ценность баннерного обмена" http://omen.ru/TEMP/bat/www.mymoney.ru/pages/mark-bannerex-part3.shtml
Ха, но у нас остался самый главный вопрос - где взять эти
баннерные показы? Как где взять, - купить, конечно. Так,
допустим, вы собираетесь "выплескивать" ежедневно (кроме
выходных) около 20 тысяч баннеров. Следовательно, на неделю вам
потребуется 100 тысяч. По официальным баннерным расценкам, это
вам обойдется примерно в 250-500 долларов, в зависимости от сети.
Цена эта относительно невысока - примерно сравнима с размещением
рекламы на сайте с посещаемостью 2-4 тысячи в день, но отдача
получается несколько выше. При такой стоимости рекламы даже при
довольно плохом CTR, равном 0,5% вы получите 100 посетителей в
день или около 500 в неделю непосредственно. Каждый посетитель
обойдется вам в 0,5-0,8 доллара - если эта цена вас устраивает,
то вы можете выгодно вложиться в рекламу для примера,
полугодовалой давности отчет JAB скажет нам, что средняя
стоимость привлечения нового покупателя в магазин (речь идет об
Америке) составляет около 35 долларов и постоянно растет. Вот
вам и ответ. (*Предупреждение! Не удалите эту ссылку:
любопытные статьи, шокирующие факты, развлечении:
http://tebea.ru*).
Однако небольшим сайтам с нулевым или почти нулевым бюджетом
такую цену не потянуть, поэтому можно обратить свой взор на
вторичный рынок баннеров. Вторичный рынок - это продажа крупными
площадками частей нераспроданных рекламных площадей (где обычно
ставиться либо внутренняя реклама, либо обмен) и накопленных
баннерных сетях показов. Цены на вторичном рынке обычно
колеблются в районе 20-50 центов за тысячу показов. Купить
рекламу можно на каждом углу, например, в Молотке, там же,
кстати, можно и продать, если не понравиться. Посчитаем. Покупка
100 тысяч баннеров обойдется вам в 20-50 долларов, что составит
не более чем 4-10 центов за каждого. Честно сказать, я за такую
сумму рекламу в PPC (Pay Per Click banner broker) не беру, а вот
купить - это же милое дело. То есть, все определяется простым
фактором: привлекая посетителей на 50 долларов, вы сможете
заработать на этом 100, или нет?
Вот собственно и все. Довольно просто.
Вы можете получать прибыль со своего сайта
разместив