Отправляет email-рассылки с помощью сервиса Sendsay

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка и продвижение сайта. Лучшие партнерские программы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Александр

Статистика

2.334 подписчиков
-9 за неделю
←   Все выпуски   →

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны №13


Информационный Канал Subscribe.Ru

Рассылка от
Design-Forever.ru

 Выпуск №13    
Сегодня в выпуске:
 - Новости сайта
 - Шаблон № 12
 - Уроки создания баннеров. Урок №6. Создание анимации объектов в баннере.
- Эффективное создание и обмен баннерами

горячая новость

У нас открылся на сайте форум. Теперь все свои проблемы Вы можете писать там. Спрашивайте, общайтесь, спорьте, высказывайте свои мысли...
 Новости сайта
1. Наш ресурс предлагает произвести обмен ссылками. Ознакомится с правилами по обмену ссылками мы предлагаем здесь http://design-forever.ru/links/ 
2. Закажите у нас баннер и Вы получите неделю рекламы на нашем сайте http://design-forever.ru/ 
3. Открылся форум. Общайтесь... Рекламируйте себя, спрашивайте, показывайте, обсуждайте, спорьте. Все в Ваших буквах...
4. Скоро на сайте появятся шаблоны для интернет-магазина и домашней странички. Следите за новостями, оставайтесь в рядах подписчиков, Вы узнаете об этом первыми.
 Шаблон №12
Шаблон №11 с использованием CSS.

[перейти и скачать]

примечание: в шаблоне используется таблица стилей CSS.

 Создание анимации объектов в баннере

Автор: IDA-Design
Сайт: www.design-forever.ru
Мы научились пользоваться слоями, поэтому нам будет теперь проще работать с анимацией. Как я раньше и говорил, что лучшим способом размещать объекты, которые в последствии будут анимированы, расположить в отдельных слоях от фона и от других объектов.
Начнем анимацию.
 
Эффект мерцания объекта.
Довольно часто Вы видите в баннере, как моргает стрелочка или какой-нибудь другой предмет. Открываем программу Photoshop и создаем новый документ с размерами 100x100px.
Заходим в меню Слои->Новый слой - у Вас появился новый слой. В этом слое и нарисуем какой-нибудь объект, например круг.
Итак, у вас есть объект и нам нужно заставить его мерцать. Для этого вместе с программой Photoshop идет программа ImageReady, которая является почти аналогом Photoshop, но лишена некоторых возможностей, зато позволяет Вам подготавливать именно Ваши работы для WEB. Чтобы перейти в ImageReady, достаточно войти в меню Файл->Перейти к->Adobe ImagyReady и мы видим, что наш баннер уже там.
Внизу, под документом мы видим окно управления анимацией (там также присутствуют вкладки для работы с изображением и нарезкой изображений для WEB). Автоматически Вы находитесь в кадре №1. В этом же окошке анимации выберем команду Duplicates current frame, данная команда располагается на кнопочках этого окошка, которые позволяют управлять анимацией. У Вас появился второй кадр.
Создание анимации в ImageReady
Далее мы заставим исчезнуть круг во втором кадре. Для этого в окне управления слоями нажмите на "глазик" и Вы увидите, что круг во втором кадре испарился. Если Вы нажмете в окне управления анимацией на первый кадр, то в окне слоев, "глазик" опять появится. Этот "глазик" является индикатором видимости слоя в кадре.
В итоге мы имеем два кадра. В одном есть круг, в другом нету круга. Теперь нам нужно добиться эффекта мерцания. Возможно Вы уже догадались, что на кадрах написано время показа данного кадра.

Работа со слоями в ImageReady.
Сейчас стоит время 0sec. Нам не нужно такое быстрое мерцание и мы изменим это время, щелкнув по нему. В появившемся меню, Вы можете выбрать другое время из предложенного списка, или задать свое командой Other. Задайте время, сколько будет шарик гореть и сколько его не будет видно.
В принципе анимация готова и Вы можете её сейчас просмотреть прямо в программе, если нажмете в окне управления анимацией кнопку Plays. Замерцал, ну и отлично.
Теперь нам нужно это все конвертировать в анимационный баннер, т.е. файл. Для этого из меню выбираем File->Save Optimized As ..., выбираем тип Images Only (*.gif), даем название типа mercanie и нажимаем ok. Вот Ваш баннер с мерцанием готов.
 
Движение объекта.
Теперь заставим двигаться объект. Создайте новый документ размером 468х60 пикселей. Нарисуйте в Photoshop, а можно сразу в ImageReady круг или прямоугольник в левом углу (не забывайте это делать в новом слое). Давайте заставим его передвинуться в правый угол.
Для этого в окне управления анимацией создадим новый кадр. И с помощью клавиш "стрелок" передвинем наш объект в правый угол (это же можно сделать выбрав инструмент Move Tool и двигать мышью, кому как удобно). Следующий этап очень прост, в окне управления анимацией нажимаем на команду Tweens animation frames, в появившемся окне указываем количество кадров. Т.е. сколько будет между ними кадров. Вот Вам и движение объекта. Нажмите кнопку Plays и наслаждайтесь как движется объект.
В зависимости от кадров естественно движение будет казаться либо плавным, либо прерывистым.(Но от числа кадров, будет расти объем в байтах получаемого файла, Вы не должны забывать об ограничениях для баннеров.) Опции, которые можно еще изменять в окне Tween, я оставляю Вам на растерзание. 
Создание движения объекта в ImageReady
Допустим Вам нужно чтобы объект двигался не определенно по какой-то траектории, а например, то туда, то сюда. Это тоже просто, в окне управления анимацией, добавляем новый кадр и смещаете объект куда душе угодно. Затем опять новый кадр и опять двигаете. Так пока не надоест.
 
Объект постепенно появляется.
Создаем новый документ, например 120х60. Рисуем объект. Затем в окне управления анимацией создаем новый кадр. Возвращаемся на первый кадр и в окне слоев делаем слой прозрачным, т.е. устанавливаем параметр Opacity=0%.
Переходим обратно ко второму кадру и нажимаем волшебную команду Tweens animation frames. Указав количество кадров, Вы получаете появление объекта.
 
Вот в принципе и создание анимации в баннере, но есть еще кое-чего.
Для этого давайте воспользуемся программой Flash.
Там мы выполним еще одну анимацию, которая будет трансформировать форму одного объекта в другой. Например трансформация шара круга в прямоугольник.
Создаем новый документ размером 468х60.
В первом кадре рисуем круг, затем в линейке времени создадим в этом слое еще один кадр, например 20 и в нем нарисуем прямоугольник.
Мышкой от последнего кадра к первому, выделяем все кадры, затем щелкнув правой кнопкой мыши, выбираем команду Create Motion Tween->Shape. Вот и все, Flash автоматически создаст промежуточные кадры, которые будут трансформировать круг в прямоугольник.
Ускорение Вы можете регулировать значением Easing. А также попробовать другие параметры. Вот что может получится:
Анимация и трансформация во Flash.
Многие наверное догадались, что если выбирать не команду Shape, а команду Tween, то можно добиться движения объекта. А это тоже не очень сложно, почти как в Photoshop. 
Ну вот пока такая анимация. А как можно анимировать текст, это в следующем уроке.
 
  обсудить урок в форуме
 

 Эффективное создание и обмен баннеров
Источник: http://www.interproms.ru
Реклама в баннерных сетях является, наверное, одним из популярнейших способов раскрутки интернет проектов. В данной статье я немного опишу сам процесс баннерной рекламы для тех, кто еще не знаком с ним и дам некоторые советы по эффективному использованию баннерной рекламы.

Что такое баннер. Баннер - это графический файл, который размещается на странице сайта и который имеет ссылку на другую web-страницу. Баннеры имеют разные размеры. Основной единицей измерения при этом являются пиксели. Вот наиболее известные размеры: 468x60, 120x60, 100x100, 88x31. Существуют и другие, но менее известные размеры баннеров. Как нетрудно догадаться, чем больше баннер, тем он эффективнее.

Очень важным является размер (объем) самого файла баннера. Обычно, принято, чтобы размер баннера был не более 15Kb. Конечно, с введением новых форматов (flash) достичь этого будет уже невозможно.

Существуют следующие способы баннерной рекламы.

Участие в баннерообменных системах.

Прямая договоренность между web-мастерами сайтов об обмене баннерами между собой.

Покупка показов баннеров на других сйтах или в баннерообменных системах.

Остановимся подробнее на баннерообменых системах. Баннерообменные системы - это службы которые позволяют автоматизировать взаимообмен и показ баннеров между различными сайтами - участниками системами. Как происходит данный процесс. Зарегистрировавшись в системе баннерообмена, вы загружаете в нее свой баннер и вставляете в свои страницы (в которых хотите показывать чужие баннеры) специальный код. Каждый раз, когда данные страницы загружаются, на них показываются баннеры чужих сайтов. Каждый показ баннера учитывается на вашем внутреннем счете (аккаунт) в системе. Но не все показы чужих баннеров засчитываются вам. Система оставляет себе комиссию за предоставленную вам услугу. Это примерно 10%-20%. Остальные показы вы можете тратить по своему усмотрению. Можете их накапливать, (некоторые системы выкупают свои показы). Можете тратить их на показы своих баннеров на чужих сайтах.

В некоторых баннеророобменных системах предусмотрен таргетинг. Таргетинг - это возможность выбора условий показа вашего баннера на чужих сайтах - участниках системы. Это может быть выбор сайтов определенной тематики, определение времени показа, количества показов и многое другое. Но, к сожалению, не все баннерообменные системы принимают сайты с малым посещением. У многих таких систем существуют планки, при которых ваш сайт может быть принят в систему. Например, не менее 100 показов чужих баннеров в день. Ссылки на некоторые баннерообменные системы находятся на странице Баннерный обмен.

Основным показателем в баннерной рекламе является отклик или эффективность баннера. Коротко отклик обозначается CTR (click/through ratio). Данное число высчитывается в процентах. Так если CTR = 2%, то это значит, что только на 2% из всего количества показанных баннеров кликнули. Сейчас, средним CTR считается 2%, но на самом деле, на практике получается еще меньше. Но есть, некоторые советы, следуя которым можно хоть как-то увеличить CTR баннеров.

Сначала советы по созданию баннеров:

Следует сразу определиться, чего вы хотите добиться от показов данного баннера. Хотите ли вы просто увеличить посещаемость сайта или хотите привлечь целевого посетителя. От вашего выбора зависит то, каким будет сам баннер. Так если вы просто хотите максимизировать CTR банера, то можно его сделать немного непонятным, загадочным. Пусть пользователи думают, что вы хотели этим сказать. Сексуально - эротические мотивы также увеличивают отклик баннера. Если же вам нужен целевой посетитель, то и баннер должен быть соответственно оформлен. Он должен давать точное представление, о чем идет речь.

Как уже было сказано, чем больше размер баннера, тем выше его эффективность. На иностранных сайтах, например, сейчас популярны баннеры - небоскребы. Точного их размера сказать вам не смогу, но примерно это 120x700. В некоторых российских баннерных системах также практикуется работа с данными банерами.

Несмотря на кажущуюся эффективность большеформатных баннеров, у них есть и отрицательные стороны. Так чем больше баннер, тем больше его размер, тем дольше загружается страница с таким баннером. Возникает вероятность, что баннер не успеет загрузиться на страничку, а пользователь уже уйдет с нее. Особенно это касается, на мой взгляд, модных сейчас flash баннеров. Конечно, flash баннеры - это новое слово в баннеростроении, но их большой размер (объем) напрочь отбивает желание связываться с ними.

Могу привести пример. Как-то на главной странице Rambler.ru размещался flash баннер (возможно, и сейчас что-нибудь есть). Чтобы данный баннер загрузился, мне, например, пришлось подождать минуты две. Я специально ждал - интересно было, что же это за баннер. Но, смею предположить, что многие не ждали, а просто набирали поисковые запросы и благополучно покидали данную страницу (благо поисковая форма появлялась на странице одной из первых). Теперь если предположить, что хотя бы половина посетителей не дожидалась загрузки данного баннера, то можно подсчитать, убыток рекламодателя (реклама на Rambler.ru стоит тысячи долларов).

Использование анимации увеличивает отклик баннеров.

Использование в оформлении баннера стандартных элементов windows, таких как полосы прокрутки, кнопки и др. также увеличивают его эффективность.

Теперь советы по размещению баннеров:

Отклик баннера расположенного на самом верху выше, нежели отклик баннера расположенного в самом низу страницы.

Баннер расположенный на 1/3 ниже от верха экрана дает CTR на 70% больше, чем баннер расположенный в само верху (по результатам исследований www.webreference.com).

Баннер не стандартного размера (125x125), расположенный в нижнем правом углу первого экрана страницы (пользователь не должен скроллировать страницу чтобы увидеть баннер) дает CTR на 228% больше, чем стандартный баннер (468x60), расположенный самом верху. (по результатам исследований www.webreference.com).

Используйте ALT в теге IMG (если вы не пользуетесь баннерообменными сетями). Многие пользователи отключают графику.

Текст размещенный над и под баннером, увеличивает его эффективность.

Вот, наверное, и все.
 
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: comp.design.webbanner		 Отписаться
В избранное