Главная » Картинки и баннеры
    РейтингРейтингРейтингРейтингРейтинг


Картинки и баннеры

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

Содержание:
  • § 1. Где взять изображение для баннеров
  • § 2. HTML-код баннеров
  • § 3. Делаем Gif баннер в фотошопе
  • § 4. Online генератор баннеров и аватаров 
  • § 5. Как вставить баннер на сайт или блог

§ 1. Где взять изображение для баннеров

Банеры бывают обычно следующих форматов: 468х60, 120х120, 100х100 или 88х31.

Изображение можно взять:

1. Нарисовать или сконструировать изображение для баннеров программой Фотошоп

2. Скопировать или скачать готовую картинку из Интернета.

3. Сделать скриншот экрана и затем отредактировать его в стандартной программе Paint net

4.Так же можно воспользоваться программой FSCAPTURE и вырезать необходимую часть картинки с экрана компьютера


§ 2. HTML-код баннеров

Код баннера:

<center><nofollow><noindex><a href="адрес сайта" target=_blank><img src="адрес картинки" border="0" title="Надпись при наведении" width=ширина height=высота></a></noindex></nofollow></center>

Этот код  из которого, каждый желающий может скопировать код Вашего баннера и разместить на своем сайте или блоге:

<center><nofollow><noindex><input type= 'text' size= '15' value= 'окошко'></noindex></nofollow></center>

Рассмотрим подробно действие каждого тега:

тег  HTML - код, заключенный в острые скобочки <>

Четыре парных тега:

<center></center> - картинка будет располагаться по центру

<nofollow></nofollow> - ссылка будет закрыта для поисковика Гугл

<noindex></noindex> - ссылка будет закрыта для поисковика Яндекс

<a href="адрес сайта"></a> - тег адреса ссылки

Рассмотрим «внутренности» кода нашего баннера:

target=_blank – страница ссылки откроется в новой вкладке

<img src="адрес картинки" – прямая ссылка на картинку

border="0" – картинка в окантовке (изменив цифру 0, поменяется ширина рамки)

title="Надпись при наведении" – при наведении на картинку рядом с курсором будет появляться надпись, которую Вы вставите в кавычки.

width=ширина – ширина картинки в пикселях (вместо слова ширина вставьте цифру)

height=высота – высота картинки в пикселях (вместо слова высота вставьте цифру)

</a> - закрывающий тег кода

<input type= 'text' size= '15' value= 'окошко'> - это HTML-код окошка, из которого, каждый желающий может скопировать код Вашего баннера и разместить на своем сайте или блоге.

Вместо слова «окошко» нужно вставить весь код баннера.

size= '15' – размер окошка, изменив цифру 15, Вы поменяете размер окошка.


§ 3. Делаем Gif баннер в фотошопе

Для работы я использую программу Adobe Photoshop CS5 Extended на русском языке. 

1. Создаем новый файл необходимого нам размера, для это в верхнем меню выбираем «Файл» — «Создать» и в появившемся окне выставляем необходимые размеры баннера, в моем случае — 970х250px.  и нажимаем «ок».

2. Получив новый холст необходимого размера перемещаем на него вторым слоем картинку  и делаем еще 2 новых слоя с записями (слоганами баннера). Шрифты, размеры и цвет надписей настраиваем по усмотрению.

3. Теперь, когда все объекты для нашего баннера готовы (картинка и 2 слогана) создадим по-кадровую анимацию, для этого в нижнем левом углу окна программы нажимаем на вкладку «Шкала времени». Данная вкладка установлена со стандартными настройками программы, если же вы не наблюдаете такую вкладку в нижнем левом углу, тогда нужно ее включить (возможно она просто отключена), для этого в верхнем меню выберите «Окно» — «Шкала времени». После этого во вкладке шкалы времени выберите «Создать анимацию кадра» и нажмите на эту кнопку.

 

4. Далее мы будем  добавлять кадр, за кадром в данную шкалу, при этом на каждом кадре менять положение объектов (картинка, слоганы), согласно сценарию анимации. Для создания следующего кадра нужно кликнуть левой кнопкой мыши по квадратному значку под шкалой времени. Под каждым кадром указано время его проигрывания, которое так же настраивается по щелчку мыши на него. 

6. Первый кадр у нас есть — это просто авто с запчастями по середине сцены (холста). По сценарию анимации у нас первый слоган баннера «Дорогие запчасти для иномарок?» будет вылетать слева, долетать до автомобиля и вместе с ним пролетать дальше в правую сторону баннера, скрываясь из вида. 

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

Выбираем следующий кадр (2-й), выделяем в слоях слоган, так же кликнув по нему левой кнопкой мыши и перемещаем данный слогам до автомобиля. Затем создаем третий кадр и выбрав его перемещаем в нем слоган дальше, тем самым создавая движение этого слогана.

7. Таким образом делаются все последующие кадры. Суть заключается в том, что вы делаете в каждом кадре какое-то изменение (движение объекта), тем самым создается по-кадровая анимация с разными переходящими картинками. Чем больше кадров — тем плавнее и динамичнее анимация, но тем больше она весит.

8. После того, как вы сделаете все необходимые кадры нужно будет настроить время данных кадров  по 0,5 сек, а на тех кадрах, где необходимо сделать небольшую паузу, чтобы посетитель сайта смог успеть прочесть слоган, выставил время 2 секунды и на втором — 5 секунд. 

9. Необходим баннер, который будет постоянно работать, а не останавливаться, поэтому нужно зациклить анимацию. Для этого под шкалой времени выбираем настройку «Постоянно».

10.Теперь баннер готов и необходимо сохранить его в формате Gif, для этого в верхнем меню выбираем «Файл» — «Сохранить для Web» и в открывшемся окне выбираем настройки Gif.

Получаем вот такой анимированный баннер, который можно использовать в качестве рекламы.

Еще одна программа для изготовление баннеров - это Aleo Flash Intro Banner Maker 


§ 4. Online генератор баннеров и аватаров

Порой делать баннеры затратно, особенно, когда вам и нужно то только фон да пару строчек текста…Можно просто на одном из этих сайтов бесплатно сконструировать себе желанный баннер.

http://bannersabc.com/rus/QuickStart/ — абсолютно простой

http://rx24.ru/sozdat-banner-onlajn — несложный

http://webmasta.org/banner/ — тож простенький, без анимации

http://www.artbanner.com.ua/generator-bannerov-onlayn — бесплатный online генератор баннеров и аватаров


§ 5. Как вставить баннер на сайт или блог

Баннер по своей конструкции ничем не отличается от рисунка, и вставить баннер на сайт, не сложнее вставки рисунка, единственное необходимо определиться, где его вставлять. 

Вам понадобится:

  • - готовый баннер и его исходный код

  • - html файл сайта

  • - знание основ языка HTML

Инструкция:

1. Берем созданный баннер и копируем его в папку где находится исходный html файл. 

2. Открываем html файл нашего сайта. Выбираем место для вставки баннера, оно может быть любое, например, после определенной статьи, или в шапке сайта. За размещение объектов отвечает тэг "object", он является закрывающимся тэгом, т.е. в конце нужно его закрыть "/object". Обычно программа по созданию баннеров генерирует этот тэг вместе с кодом, поэтому просто копируем код в html файл.
3. В коде указываются основные параметра баннера, его фоновый цвет, эффекты и прочее. Стоит обратить внимание на тэг "embed". Его присутствие очень желательно. 

4. Сохраняем файл html, переходим на страницу и обновляем ее.  Если баннер имеет формат gif, то его вставляют на сайт как обычную ссылку с картинкой.

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

<a href="http://сайт_куда_направляет_баннер/" target="_blank"><img src="http://путь_к_баннеру.gif" alt="описание"></a>

Для вставки баннера в статью вам необходимо отредактировать файл Single.php, и найти там код вывода поста, у меня он прописан так:

<div id="post-<?php the_ID(); ?>" class="article">

Если вы хотите, чтобы баннер выводился в самом низу вашей статьи, то вставляйте код вывода баннера в самом низу файла Single.php, не бойтесь экспериментировать, если не до конца понимаете куда вставлять код, вставили в одно место - посмотрели, если не там удалили и переставили в другой.

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

Всем спасибо!

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!