«Каждый день делайте то, что вас пугает»
Элеонора Рузвельт

До начала рисования нужно ясно себе представлять:

1. какого размера требуется баннер,
2. какое изображение хотелось бы разместить на баннере,
3. какой текст должен быть на баннере.

Размер
Баннер почти всегда — небольшое изображение. Оно требует жесткого подхода к выбору изображения и текста, поскольку и то, и другое должны быть четкими, хорошо узнаваемыми и читаемыми. Поэтому баннер сразу рисуется того размера, какое требуется для размещения на сайте. Например, для персональных сайтов всегда 253х93 пикселя.

Изображение
Изображение на баннере , не просто красивой картинкой. Если баннер должен отправить читателя на какой-то сайт, то правильно было бы использовать цветовую гамму и изображение (логотип, к примеру) этого сайта. Тогда баннер станет «визитной карточкой» сайта.

Текст
На небольших баннерах (к примеру, ссылки на сайты) текст должен быть коротким. На больших баннерах (как, например, баннер для этой статьи) его может быть много, место для текста есть. Но и в этом случае лучше, если текст будет коротким, читаемым одним взглядом, ведь его назначение — привлечь внимание читателя.

Рассмотрим процесс рисования баннера на примере ссылок на сайты Позитивный контент и Официальный сайт ЕГЭ .

Баннер «Позитивный контент» на персональном сайте

Размер баннера — 253х93 пикселя.

Изображение . Открываем сайт «Позитивный контент» и видим: основной цвет сайта — фиолетовый, картинок много и явно выделенного логотипа нет. Беру любую понравившуюся, например вот эту:

Что значит «беру»? Правой клавишей мыши щелкаю по изображению и выбираю команду Сохранить картинку как... , сохраняю картинку к себе на компьютер. Если в меню правой клавиши мыши такой команды (именно Сохранить картинку как... ) нет, то по-простому изображение не забрать.

Оцениваю картинку: она слишком высокая для баннера и если все изображение уменьшить до нужных размеров, то на баннере уже ничего не будет видно. Принимаю решение — на баннере картинки не будет.

Текст. Достаточно текста с названием сайта «Позитивный контент».

Начинаю рисовать.

Баннер выполнен в цветах сайтах, на который ведет ссылка, и текст на нем отлично читается.

Баннер «Официальный сайт ЕГЭ»

Размер баннера — 253х93 пикселя.

Изображение . Открываем сайт «Официальный портал ЕГЭ» и видим: основной цвет сайта — белый, явно виден логотип. Пробуем забрать логотип: правой клавишей мыши щелкаю по изображению и выбираю команду Сохранить картинку как... , сохраняю картинку к себе на компьютер.

Оцениваю картинку: можно попробовать разместить картинку, добавив поля справа и слева, чтобы баннер был нужных размеров.

Текст. Достаточно текста на изображении, дополнительный текст не нужен.

Начинаю рисовать.

Друзья, снова рад Вас приветствовать! Сегодня расскажу как легко сделать баннер онлайн. Это необходимо уметь делать, если вам надо что-то прорекламировать и заработать денег.

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

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

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

Значит, чтобы сделать баннер онлайн бесплатно, необходимо зайти по этой ссылке. Как видите это генератор, который и создаст вам рекламный баннер, только надо ввести необходимые параметры.

И так, мы зашли на сайт и видим перед собой поля, которые надо заполнить, чтобы сделать баннер онлайн. В первое поле вводим ссылку на тот сайт, на который надо лить трафик. Т.е. надо ввести вашу партнерскую или реферальную ссылку.

В следующее поле вводим ссылку на изображение. Для того чтобы получить ссылку изображения, которое вы нашли в интернете, надо просто нажать на него правой кнопкой и в выпавшем меню выбрать «Копировать URL…». Так вы и скопируете то что вам надо.

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

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

Следующие две строчки – это ширина и высота баннера. Пишите те значения, каких размеров вам надо добиться. Но смотрите чтобы картинка в таких размерах смотрелась без искажений.

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

Можно предварительно создать картинку нужных размеров в фотошопе, я написал об этом в статье «как создать миниатюру для статьи ». Так реклама получится на много интереснее.

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

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

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

В этому уроке Photoshop я собираюсь показать Вам, как создать профессиональный баннер для своих дизайнов.

Итак, для начала Вам нудно создать документ с размерами 500×300рх и залить его белым цветом.

Затем берем инструмент Rectangle Tool (Radius: 5 px), чтобы создать фигуру и залить её цветом #6d9e1e , как показано на моей картинке ниже.

После этого применяем настройки стиля слоя Gradient Overlay к этому слою.

Результат должен быть следующим:

Отлично, переходим к следующему шагу. Пришло время создать «заголовок» для нашего баннера. Нажимаем Ctrl+левую кнопку мышки на значке слоя в наборе слоев, чтобы выделить фигуру баннера, затем используем Rectangular Marquee Tool , чтобы отрезать часть выделения. Удерживая кнопку Alt , обрезаем нижнюю часть, как показано на моей картинке ниже. После этого оставляем эту часть белого цвета.

Снимаем выделение с помощью Ctrl+D , после чего меняем режим отображения слоя на Overlay и устанавливаем непрозрачность 20% .

Отлично, переходим к следующему шагу. Я хотел бы добавить графические элементы в наш заголовок. Переходим на сайт Google Images и ищем подходящую картинку, которую мы могли бы добавить. Не имеет значения, какая это будет картинка. Это зависит только от области на баннере, куда мы собираемся её добавить. Я буду использовать картинку будильника, которую Вы можете загрузить . Открываем эту картинку и копируем её на основной холст. После этого нажимаем Ctrl+T , чтобы немного уменьшить картинку.

Применяем инструмент Sharpen Tool , чтобы немного увеличить резкость объекта.

Отлично, переходим к следующему шагу. Берем инструмент Horizontal Type Tool и пишем название заголовка.

На изображении выше я использовал шрифт Myraid Pro и белый цвет для шрифта. Этот шрифт является платным, но, если у Вас он не установлен, то Вы можете легко . После этого применяем настройки стиля слоя Drop Shadow к этому текстовому слою.

Смотрим результат ниже:

Отлично, мы закончили с заголовком. После этого я хотел бы добавить несколько элементов дизайна к нашему баннеру. Выбираем инструмент Custom Shape Tool и одну из стандартных фигур Photoshop, которую Вы можете увидеть на картинке ниже.

Добавляем две фигуры белого цвета на наш баннер.

Производим слияние двух фигур в один слой. Теперь нам нужно обрезать все части, которые находятся за пределами баннера. Как нам это сделать? Нажимаем Ctrl+левая кнопка мышки на значке слоя с баннером в наборе слоев, чтобы выделить баннер, а затем инвертировать выделение с помощью Ctrl+Shift+I . После нажимаем Delete

Снимаем выделение с помощью Ctrl+D . А теперь попробуем поиграть с режимом отображения слоя и непрозрачностью/заливкой. Я попробовал режим Soft Light с непрозрачностью 20% .

Теперь нам нужно очистить заголовок баннера от этих элементов. Используем инструмент Rectangular Marquee Tool , чтобы создать выделение, как на моей картинке ниже, и нажимаем Delete , чтобы очистить выделенную область.

Снова снимаем выделение с области с помощью Ctrl+D и добавляем ещё текст с помощью инструмента Horizontal Type Tool . Используем для текста снова белый цвет.

Пришло время добавить последнюю строку текста. Но перед этим я хочу добавить подложку. Используем инструмент Rounded Rectangle Tool (Radius: 2 px) и добавляем фигуру, используя цвет #69990d .

Теперь используем инструмент Horizontal Type Tool и добавляем текст на подложку.

Отлично, мы закончили с этим уроком. Теперь у нас есть профессионально нарисованный баннер. Смотрится неплохо, правда?

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

Но для того чтобы разместить баннер на сайт, сперва его нужно где-то взять. Для этого есть два способа:

• нарисовать самому;
• взять готовое изображение с другого сайта.

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

Зачем нужны баннеры?

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

Баннер сайта-партнера принесет вам процент за продажи или просто вознаграждение за переходы по ссылке. Это отличный вид на своем веб-ресурсе.

для сайта?

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

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

Размеры изображения

Конечно же, вы можете создать баннер с любыми размерами, а потом искать сайты, на которых его можно разместить. Однако большинство веб-ресурсов имеет общераспространённые стандартизированные размеры для рекламных изображений. Вот наиболее популярные из них: 728х90, 468х60, 336х280, 300х600, 300х250, 250х250, 234х60, 200х200, 180х150, 160х600, 125х125, 120х600, 120х240. Скорее всего, весь этот набор не будет доступен на каждом сайте, но в информации о партнёрской программе будут указаны конкретные требования к вашему баннеру.

Вид баннера

По способу реализации баннеры делятся на три категории:

Приложения для создания баннеров

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

Приложения использующие web-технологии все больше входят в нашу жизнь. Почтовыми клиентами на персональном компьютере в основном пользуются только корпоративные пользователи, а для личной переписки достаточно лишь доступа в интернет, ведь все современные почтовые системы имеют удобную для повседневной работы web-оболочку.
Написать статью для сайта можно прямо на сайте из оболочки CMS, хоть с компьютера, хоть с планшета, а при необходимости и с смартфона.
Облачный хранилища позволяют хранить все необходимые данные в интернете не занимая места в компьютере. И при этом Вы будете иметь к ним доступ из любой точки планеты.
Плюсы от таких нововведений огромны. Мы стали независимы от своего компьютера, от его месторасположения, мы стали платформонезависимыми, ведь доступ к данным и сама возможность работы не зависят от применяемого устройства. Это дает определенную степень свободы. Но есть и минусы, мы стали интернетозависимыми и в чем-то беспомощными. Это напоминает ситуацию с калькуляторами, с появлением которых многие граждане просто разучились считать в уме.
Но сегодня речь не об этом.

Он-лайн сервис Banner Fans

Конструктор баннеров BannersABC.com

BannersABC.com – это сайт, где любой желающий может создать свой анимированный баннер за несколько минут, не обладая какими-либо специальными знаниями в области flash-дизайна (говоря flash, мы подразумеваем Flash EDI). Основная задача - дать пользователю возможность получить привлекающий внимание баннер, максимально упростив процесс его создания.

Проект по сути является условно-бесплатным. А именно: вы бесплатно пользуетесь сервисом и создаете в нем свои баннеры. Сервис бесплатно хранит ваши баннеры у себя на сервере. Вы бесплатно пользуетесь результатами своего труда. Но на вашем баннере будет водяной знак или небольшая рекламная ссылка на сам сервис. Убрать рекламу сервиса можно за символическую сумму. Мой первый баннер мне обошелся в 1 USD.

Сервис многоязычный, в том числе на русском. Визуальный редактор адекватный и интуитивно понятный. На сервисе есть несколько шаблонов. В которых уже подобраны подходящие друг к другу цвета, как текста так и фона.
Особенно понравилось наличие на сайте уроков по использованию сервиса, а так же полезные советы по дизайну вообще и рисованию баннеров в частности.
Для создания баннера можно использовать 2 инструмента:
QuickStart – максимально упрощенная версия. Предназначен для пользователей, у которых нет ни малейшего представления, как их баннер должен выглядеть.
И Designer , который предоставляет пользователю возможность подробного редактирования параметров баннера.
Как результат пользования сервисом предлагаю на всеобщее обозрение мой первый флеш-баннер:

На изготовление которого я потратил 2 минуты.