Ваш IP: 54.92.197.82

Главная » Нужные мелочи » Как самостоятельно сделать баннер

Как самостоятельно сделать баннер

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

Самостоятельно сделать баннер не сложно, достаточно немного знать работу программы Фотошоп. Существует несколько видов и размеров баннеров. Поскольку флеш- баннеры или анимированные баннеры новичку сделать не очень просто, то  я приведу пример, как сделать простой статичный баннер размером к примеру 480 х 60.

Открываем программу Фотошоп, в меню Файлы выбираем функцию Создать и в открывшемся окне прставляем размеры будущего баннера. В нашем случае это 480 х 60

Нажимаем ОК и у нас появится окошко с "телом" баннера, которое будем превращать в настоящий баннер.

Окошко можно растянуть, как указано стрелкой. Так будет удобнее работать. Сделаем к примеру баннер для сайта на автомобильную тематику. Для будущего баннера надо подобрать цвет и пару картинок. Для примера возьмём такие картинки:

  

Теперь перенесём эти картинки в Фотошоп. Для этого в меню Файл выбираем функцию Открыть и ищем сначала одну выбранную картинку, а потом точно так же вторую. Теперь на рабочем столе Фотошопа будет три окошка

картинки

Картинки имеют белый фон. От фона надо избавиться, иначе на цветном фоне баннера они будут смотреться не красиво. Для тех кто не знает как удалить фон, объясню на примере с одной картинкой. Возьмём для примера картинку с мотоциклом.

Для начала выставляем окно с картинкой на передний план. Затем необходимо сделать копию слоя, для этого заходим в меню Слои и выбираем функцию Создать дубликат слоя. В окне Слои теперь будет две картинки Фон и Копия фона. Слой Фон отключаем и работаем с Копией фона. В панели инструментов выбираем инструмент "Волшебная палочка". Этим инструментом делаем клики по белым фонам картинки. Отделять мотоцикл от белого фона будут пунктирные линии. После этого нажимаем на клавиатуре клавишу "Backspace". Белый фон исчезнет и картинка примет такой вид:

Точно так же убирается фон с другой картинки. Пока можно не заливать фон самого баннера каким-нибудь цветом. Цвет баннеру подберём уже с установленными картинками. А пока скопируем картинки на баннер. Сразу видно, что картинки будут намного больше размера баннера. Ничего страшного, картинки после копирования будем мсштабировать и подгонять к размеру баннера

Выделяем первую картинку по периметру инструментом "Прямоугольная область". Заходим в меню Редактирование и выбираем функцию Скопировать. Дальше на передний план выносим окошко с баннером и опять заходим в меню Редактирование и выбираем функцию Вставить. Поскольку мотоцикл получился намного больше размеров баннера, то мы его будем масштабировать. Для этого заходим в меню Редактирование и выбираем функцию Трансформирование и в ней выбираем Масштабирование. Получится вот такая картина:

масштабирование

Со следующей картинкой поступаем точно так же. В итоге баннер будет выглядеть так:

Теперь останется залить фон баннера каким-нибудь цветом, написать какой-то текст и баннер будет готов. Для заливки цветом необходимо в окне СЛОИ переключиться на слой ФОН (кликом мышки)

После подбора фонового цвета баннера я остановился на красном цвете. Всё делается инструментом "Заливка" или "Градиент". Текст может быть любым, на Ваше усмотрение. Я напишу к примеру название и адрес сайта, для наглядности. Используем инструмент "Горизонтальный текст". В итоге получился вот такой простенький баннер:

баннер

Теперь остаётся сохранить баннер в компьютере. Для этого заходим в меню Файл и выбираем пункт "Сохранить для Web и устройств...". В открывшемся окне выбираем расширение GIF и сохраняем файл. Готовый баннер теперь можно устанавливать на сайты.

Всем удачи!!!

Как самостоятельно сделать баннер обновлено: Апрель 10, 2017 автором: admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*