[X] Помощник

[JustLight Topic Starter]

Добрый день! Данная статья написана для конкурса «Статейник 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. Создаем новое изображение
[img]http://i056.radikal.ru/1210/d0/d5595d29a646.jpg[/img]

2. Задаем габариты будущего баннера. Я выбрал 468х120
[img]http://s017.radikal.ru/i403/1210/9e/dffdc051ff23.jpg[/img]

3. Создав заготовку, приступим к графическому оформлению. Я решил сделать градиентную заливку. Тип градиента можно выбрать из предложенных, а можно создать самому. Для это нажимаем Создать новый градиент (вторая кнопка слева в панели градиентов)-->В открывшемся поле щелкаем правой кнопкой мыши-->Выбираем цвет крайней левой точки-->Выбираем цвет крайней правой точки-->Пишем название (Для удобства) и сохраняем полученный градиент.
[img]http://s017.radikal.ru/i444/1210/fe/c6c15587399e.jpg[/img]

[img]http://s017.radikal.ru/i441/1210/3e/3ee7e65f1def.jpg[/img]

[img]http://s019.radikal.ru/i614/1210/ac/03004ef5e624.jpg[/img]

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

[img]http://s019.radikal.ru/i616/1210/ef/6869acb6ec66.jpg[/img]

[img]http://s50.radikal.ru/i130/1210/94/c66d3d076d47.jpg[/img]

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

[img]http://i057.radikal.ru/1210/27/01fbbbec4220.jpg[/img]

[img]http://s43.radikal.ru/i101/1210/fe/46d82e034f5e.jpg[/img]

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

[img]http://s58.radikal.ru/i162/1210/2b/f53f278f138b.jpg[/img]

[img]http://s55.radikal.ru/i148/1210/30/75da1fd4d076.jpg[/img]

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

[img]http://s017.radikal.ru/i441/1210/d8/b8830c225b34.jpg[/img]

[img]http://s61.radikal.ru/i172/1210/5e/37761f5037f0.jpg[/img]

[img]http://s014.radikal.ru/i327/1210/b1/be543c474762.jpg[/img]

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

[img]http://s48.radikal.ru/i121/1210/33/9caf3162003d.jpg[/img]

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

[img]http://s006.radikal.ru/i213/1210/62/da3d7761cd01.jpg[/img]

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

[img]http://s017.radikal.ru/i431/1210/7f/fd632e5061f0.jpg[/img]

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

[img]http://s017.radikal.ru/i402/1210/da/96afa7621680.jpg[/img]

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

[img]http://s018.radikal.ru/i514/1210/cc/0513e9ec2fc4.jpg[/img]

[img]http://s48.radikal.ru/i119/1210/f4/54f3500483b3.jpg[/img]

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

[img]http://s018.radikal.ru/i504/1210/f7/79a313e199ef.jpg[/img]

[img]http://s48.radikal.ru/i119/1210/47/985bfd843699.jpg[/img]

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

[img]http://s002.radikal.ru/i200/1210/77/cca3d232ceef.jpg[/img]

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

[img]http://s005.radikal.ru/i211/1210/d3/b26fdaad2870.jpg[/img]

[img]http://s004.radikal.ru/i207/1210/9a/c80e4d3e83f6.jpg[/img]

[img]http://s004.radikal.ru/i207/1210/56/f8d6ad3d979c.jpg[/img]

[img]http://s013.radikal.ru/i324/1210/77/0deb3804a029.jpg[/img]

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

[img]http://s59.radikal.ru/i165/1210/bc/15dbc3600c1f.jpg[/img]

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

[img]http://s59.radikal.ru/i163/1210/b8/9f9d93ea193f.jpg[/img]

[img]http://s009.radikal.ru/i309/1210/8a/0138a40eec3b.jpg[/img]

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

[img]http://s018.radikal.ru/i513/1210/97/dcf628fe8afd.jpg[/img]

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

[img]http://s40.radikal.ru/i088/1210/04/5440757dd7e9.gif[/img]

Заключение

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

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

[img]http://www.masterwebs.ru/sp/seopult.gif[/img]

[deco90]

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

[Iceforce]

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

[JustLight Topic Starter]

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

[SeredinD]

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

[AlexandrVK]

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

[Николян]

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

[EmilAbramov]

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

[wedsaet]

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

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.