Перейти к содержимому

Реферальная программа Мегаплана


Как создать баннер для сайта?

#1 Darkhoru

Darkhoru
  • Пользователь
  • 8 сообщений
  • Репутация: 5
10

Отправлено 22 Октябрь 2012 - 20:50

Добрый день! Данная статья написана для конкурса «Статейник 2». Тема статьи: «Как создать баннер для сайта». Приятного чтения!

Вступление

Итак, создание баннера – достаточно частое явление в нынешней деятельности Вебмастера. Основная задача баннера – привлечь потенциального посетителя на ваш сайт. Большинство людей просто заказывают баннер у профессиональной студии или частного дизайнера. Некоторые не хотят тратить на создание свое время, некоторые не умеют. Конечно, если имеются средства, почему бы и не заказать. А если средств нет? Попробуем разобраться, как же самостоятельно сделать небольшой баннер, из чего он должен состоять и какие функции должен выполнять. Вы увидите, что это просто и интересно. Заранее сообщу, что это лишь мое видение создания баннера, и оно не является незыблемым сводом правил.

Основные понятия

1. Размер баннера.
Естественно, у баннера должны быть размеры. В принципе, абсолютно не важно, каких габаритов будет ваш баннер, лишь бы он удачно вписался в сайт, на котором будет размещен. Однако существуют несколько стандартных размеров: 468х60px, 468х120px, 500х100px, 125х250px, 160х400px, 160х600px. На мой взгляд, они и являются самыми удобными, поскольку предоставляют больше возможности для творчества, чем, скажем, баннер 88x31px, в который сложно что-то пристроить. Но, опять же, здесь все зависит от места его расположения и информации, которую он должен донести до зрителя.
2. Тема/Цветовая гамма/Подбор деталей.
Определившись с размером, переходим к следующему пункту, а именно – определимся с тематикой баннера. Думаю, тут вопросов быть не должно, делаем баннер для сайта о здоровье – баннер про сайт о здоровье, делаем баннер для сайта об играх – баннер про сайт об играх.
Что касается цветовой гаммы, то нужно помнить - баннер обязан привлечь посетителя, но при этом максимально вписаться в дизайн сайта. Например, для сайта о здоровье подойдут приятные, яркие цвета, не раздражающие посетителя – зеленый, белый, розовый и так далее. Сайт об играх может содержать резкие, строгие цвета, призывающие взять в руки старый добрый револьвер и отправиться истреблять нечисть – черный, красный и так далее.
На основе выбранной цветовой гаммы, необходимо подобрать детали (картинки), которые мы потом поместим в баннер, для создания более привлекательного вида. Стоит отметить, что это не ключевой фактор. Картинок может и не быть, все дело вкуса и цели баннера. Я беру картинки из сервисов Яндекс и Google. Вводим название нашей темы или слова, которые входят в нашу предметную область и выбираем понравившиеся. Возвращаясь к сайту о здоровье это – «здоровье», «красный крест», «лекарства» и прочие .
3. Тип баннера.
Анимационный или статичный. Конечно, анимационный выглядит привлекательнее, поэтому его мы и выбираем.
4. «План анимирования».
Раз уж мы решили делать анимационный баннер, то необходимо придумать некий «План анимирования», т.е. что за чем будет следовать и как это будет реализовано. Здесь определенных советов быть не может, поскольку все зависит лишь от фантазии.
5. Структура баннера.
Наконец, структура баннера. Проще говоря, что на баннере желательно должно присутствовать. Я выделяю 3 основных элемента баннера:
1) Непосредственно информация, интригующая зрителя.
2) Объект рекламы.
3) Призыв к действию.
Таким образом, первым делом располагается информация. Это могут быть вопросы или просто факты интригующего характера, призванные заинтересовать посетителя. Например: «3000$!// В месяц!// Это реально!» или «Проблемы с учебой?// Завалили заданиями?//Нет времени на решение?» и так далее. Второй шаг – раскрытие объекта рекламы. «3000$!//В месяц!//Это реально! – GoGetLinks!» или «Проблемы с учебой?//Завалили заданиями?// Нет времени на решение? – Site.ru – все решебники здесь!». Третий шаг – призыв к действию. Реализуется чаще всего «мигающими кнопками» со словами «Регистрация», «Играть», «Вступай».
Что же, вроде все, что я хотел сказать. Но, думаю, здесь чего-то не хватает… Ах да, самого процесса создания баннера. Сейчас мы создадим небольшой баннер, тематика – место проведения конкурса, а именно – форум MasterWebs.ru.
Я использую графический редактор Gimp. Мне он нравиться больше фотошопа (проще, удобнее, экономнее), поэтому урок создания будет проводиться в нем, версия 2.8.


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

1. Создаем новое изображение
Изображение

2. Задаем габариты будущего баннера. Я выбрал 468х120
Изображение

3. Создав заготовку, приступим к графическому оформлению. Я решил сделать градиентную заливку. Тип градиента можно выбрать из предложенных, а можно создать самому. Для это нажимаем Создать новый градиент (вторая кнопка слева в панели градиентов)-->В открывшемся поле щелкаем правой кнопкой мыши-->Выбираем цвет крайней левой точки-->Выбираем цвет крайней правой точки-->Пишем название (Для удобства) и сохраняем полученный градиент.
Изображение

Изображение

Изображение

4. Выбираем инструмент Градиент-->Проводим ровню линию от нижнего края баннера к верхнему. Получаем результат.

Изображение

Изображение

5. Я планирую сделать баннер из 3-х частей, которые появятся одна за другой. Для этого я беру инструмент Свободное выделение и отмечаю нужную мне область. Затем Правка-->Обвести выделенное, чтобы графически зафиксировать границы частей баннера, а также Выделение-->В контур (это пригодиться нам позже).

Изображение

Изображение

6. Делаем копию фона: Правая кнопка мыши на слое-->Создать копию слоя-->Переименовываем в "1" (для удобства)-->Правая кнопка мыши на слое-->Добавить альфа-канал (Для создания бесцветного фона). В полученном слое инструментом Свободное выделение выделяем "правую область" и удаляем ее (клавиша Del).

Изображение

Изображение

7. Снова делаем копию фона и называем "2".Так же добавляем альфа-канал на слой. Переходим на вкладку Контуры-->Выбираем сохраненный нами контур-->Контур в выделение, тем самым, не придется 2 раза выделять одну и ту же область. Затем, Выделение-->Инвертировать-->Клавиша Del - получаем 2-ю часть нашего баннера.

Изображение

Изображение

Изображение

8. Используя схожие действия, создаем слой "3" и получаем на нем изображение 3-ей части баннера.

Изображение

9. Создаем слой серого оттенка "Подкладка", такого же размера, как и баннер. Располагаем его под слоями с частями баннера. Данная подкладка понадобиться в будущем, а также она скроет недочеты при создании частей баннера.

Изображение

10. Располагаем на частях баннера заранее заготовленные картинки. Для этого перетаскиваем картинки из папки, в которой они находятся, на поле со слоями. Каждый слой с картинкой должен располагаться над соответствующей ему частью баннера. Получается следующее сочетание.

Изображение

11. Объединяем слой с картинкой и слой с частью баннера, который ей соответствует. Для этого Щелкаем правой кнопкой мыши на слое с картинкой от 1-ой части (повторюсь, она должна располагаться над ним)-->Объединить с предыдущим. Затем делаем то же самое для 2-ой и 3-ей части.

Изображение

12. Теперь создаем текстовые надписи. Выделяем слой с одной из частей--> Инструмент Текст-->Выставляем шрифт, размер, цвет-->Пишем текст-->Щелкаем Правой кнопкой мыши на слое с текстом и Объединяем с предыдущим (т.е. с частью баннера, на которой мы пишем текст). Данное действие повторяется для каждой части.

Изображение

Изображение

13. Создаем 2-е изображение для баннера, используя те же инструменты из первых шагов, и те же навыки: Свободное выделение, градиент, копирование слоев, кнопка Del :).

Изображение

Изображение

14. Создаем слой с кнопочкой "Регистрация". Создаем бесцветный фон и добавляем изображение кнопки.

Изображение

15. На этом этапе закончились все подготовления. Теперь создаем слои, которые будут участвовать в анимации. Для этого делаем видимыми только те слои, которые необходимы для изображения-->Создать из видимого-->переименовываем в "I". Так делаем для каждого изображения. Получаем 5 слоев от I до V.

Изображение

Изображение

Изображение

Изображение

16. Мы получили 5 кадров для нашей анимации. Теперь нужно создать как бы "Мигающую кнопку". Щелкаем на слое с кнопкой (Отдельном слое, где располагается только кнопка)-->Цвет-->Яркость-контраст-->Выставляем ползунок "Контраст" в положение "20". Теперь необходимо сделать видимыми слои с частями 2-го изображения и кнопки, после чего объединить в слой, уже знакомым Объединить видимое.

Изображение

17. Делаем копии слоев V и VI. Располагаем их поочередно, как показано на рисунке ниже, чтобы получился эффект мигания. После чего можно пробовать объединить все в анимацию: Фильтры-->Анимация-->Воспроизведение. Однако в таком варианте анимация нам не сгодиться, слишком быстро меняются кадры. Дело в том, что задержка кадров по умолчанию - 100ms. Изменим ее. Для этого 2 раза щелкаем левой кнопкой мыши на слое и дописываем к названию время задержки в миллисекундах. Например: 1(800ms).

Изображение

Изображение

18. Сохраняем получившийся баннер в формате .gif.

Изображение

Баннер готов:

Изображение



Заключение

Что же, вот и закончен мой урок по созданию баннера. Надеюсь, что хоть несколько человек сочтут пост полезным -_-. Помимо небольшой пошаговой иллюстрации, планировал записать более подробный видео-урок. Однако ограничение на бронирование темы - 3 дня, не дает такой возможности, слишком мало времени. Ну, что сказать, правила есть правила. Всем большое спасибо за внимание!

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 4

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Требуется создать баннеры
  2. Где научиться создавать баннеры?
  3. Как создать игровой сайт
  4. Бесплатное создание баннеров
  5. Как убрать баннер Joomla на созданном сайте

#2 deco90

deco90
  • Пользователь
  • 22 сообщений
  • Репутация: 7

Отправлено 23 Октябрь 2012 - 13:05

Хорошая статья, а видео ты можешь записать и сейчас, когда уже статья опубликована. И выложить его в комментарии.
  • 0

#3 Iceforce

Iceforce
  • Пользователь
  • 20 сообщений
  • Репутация: 2

Отправлено 23 Октябрь 2012 - 14:23

Отличная статья, все четко и просто. За гимп и доту2 отдельный респект :)
  • 0

#4 Darkhoru

Darkhoru
    Topic Starter
  • Пользователь
  • 8 сообщений
  • Репутация: 5

Отправлено 23 Октябрь 2012 - 14:58

Спасибо :) Да, дота - третье увлечение, после инет-деятельности и музыки))
  • 0

#5 SeredinPlus

SeredinPlus
  • Пользователь
  • 235 сообщений
  • Репутация: 8

Отправлено 23 Октябрь 2012 - 15:27

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

#6 Alexandr Vi Key

Alexandr Vi Key
  • Пользователь
  • 33 сообщений
  • Репутация: 6

Отправлено 23 Октябрь 2012 - 22:47

Не думал, что создание анимированных баннеров настолько простая штука, +1 за статью и за Gimp, вообще об этой программе впервые услышал, пойду фантазировать :)
  • 0

#7 Николян

Николян
  • Пользователь
  • 79 сообщений
  • Репутация: 3

Отправлено 24 Октябрь 2012 - 20:31

Отличная статья.Добавил в избранное.Попробую по ней баннер слепить
  • 0

#8 EmilAbramov

EmilAbramov
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 01 Декабрь 2012 - 18:10

молодец! хорошая статья
  • 0

#9 wedsaet

wedsaet
  • Пользователь
  • 47 сообщений
  • Репутация: 0

Отправлено 09 Март 2013 - 15:13

Отлично!! Респект
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru