Профессионально нарисованный баннер

2 голоса

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

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

Вы сможете получать деньги даже если только вчера открыли свой сайт и на него заходит всего 5 человек. Я расскажу как сделать баннер на сайт и дать шанс молодому проекту приносить в разы больше денег.

Приступим?

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

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

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

Ну что ж, давайте начнем.

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

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

Вот так выглядит панель редактора. Здесь есть возможность добавить фон, изображение, кнопку, текст или анимацию.

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

Изображения хранятся в одноименной категории и «Разное». Тут есть всякие картинки с подарками, векторными человечками, стрелками и так далее. Выбирайте и при помощи мыши перетаскивайте в нужное место. Я добавил человечка. Если вы передумали использовать какой-то элемент, щелкните по нему и в правом верхнем углу рисунка появится кнопка «Удалить».

Теперь вы можете добавить кнопку. Нажмите на этот элемент, я расскажу более подробно о его функциях.

С основными настройками думаю, что проблем не возникнет. Наверняка вы и сами разберетесь с тем, что такое верхний и нижний цвет, вкругление углов и текст. Я хочу поговорить про Open Link Tab. Так как сама кнопка не анимированная, сменяются только изображения в заданное время, то я рекомендую вам не ставить на нее линк, а использовать ссылку для всей картинки.

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

Теперь можете добавить текст. Здесь тоже нет ничего сложного.

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

Теперь вам нужно щелкнуть на «Получить баннер».

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

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

Обратите внимание, что если у вас стоит для этого сайта, вам придется его отключить, иначе вы не увидите свой проект. Выключите его, затем еще раз тыкните на «Мой кабинет».

Чуть ниже появится вам проект и html код, который будет нужно добавить на сайт. Скопируйте его.

Как добавить баннер на все страницы

Откройте и зайдите во вкладку «Внешний вид – Виджеты».

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

Кстати, куда именно вы поместите этот виджет, там он и расположится визуально. Если над «Поиском», как я, то картинка встанет над этой панелью. Если под «Рубрики», то… ну вы поняли.

Вставьте скопированный текст в «Содержимое» и поменяйте информацию в кавычках после «a href» здесь должна быть ссылку, куда будет вести ваш баннер. Измените также текст в кавычках после title. Это добавит вашу подсказку. Сейчас она будет выглядеть, как «Баннер сделан на Баннерович».

Вот так у меня получилось в итоге, после всех изменений.

На всех страницах сайта теперь у меня появился этот рисунок.

Добавляем баннер в записи

Если вы хотите вставить картинку в конкретную статью, то откройте категорию «Записи», а затем выберите ту, в которую хотите добавить картинку или создайте новую.

Откройте вкладку «Текст» в правой верхней части поля ввода информации, вставьте html код, измените ссылку и заголовок. Если после этого вы снова откроете «Визуально», то увидите картинку. Ее можно окружить нужным вам текстом.

Готово. Вот так мой баннер.

Надеюсь, вам удалось все сделать самому и проблем при регистрации не возникло. Если что – оставляйте свои комментарии к этой статье. Будем разбираться вместе. Кстати, в моем блоге вы можете прочитать еще для сайта. Они будут чуть менее красивые, зато исключительно html.

Кстати, создание баннеров – это уже хороший способ делать деньги. Могу предложить вам курс «Как заработать, создавая баннеры ». Это хобби может приносить от 30 000 рублей в месяц. Главное найти хорошего клиента и знать кое-какие нюансы, позволяющие увеличить количество кликов по картинке.

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

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

До новых встреч и удачи в ваших начинаниях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам нужно задействовать свою креативную часть, которая в каждом человеке есть, и изготовить баннер для своих нужд. У Баннеровича изготовлено более 500 баннеров на сегодня. Посмотрев примеры изготовленных баннеров вы можете представить, что можно сделать в этом конструкторе баннеров! Мы уверены, что ваш баннер, сделанный вашими силами будет намного лучше!

Просто возьмите и сделайте баннеры! Хочешь сделать хорошо – сделай сам!

В этому уроке 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 и добавляем текст на подложку.

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