Изготовление рекламного баннера своими руками. Как сделать дизайн баннера


Бесплатный конструктор баннеров для соцсетей

Бесплатный конструктор баннеров для соцсетей

Баннеры 23.06.2017

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

Конструктор баннеров онлайн

Первое преимущество конструктора баннеров в том, что он доступен онлайн и не требует установки дополнительного программного обеспечения. Как видно на скрине, сам сервис небольшой и не перегружен ссылками меню, кнопками управления и различных настроек. На главной странице их всего 4. Нам потребуется раздел Мои проекты и Вдохновение (Inspiration). После авторизации через Фейсбук или обычной регистрации (емейл + пароль) мы можем приступить к созданию баннера, постера или пригласительного.

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

В сервисе есть все необходимые инструменты чтобы сделать баннер быстро и качественно и скачать в нужном нам формате. Доступны несколько форматов изображений готовых баннеров:JPG, PNG и PDF.

Чтобы сделать баннер, достаточно просто начать. Перейдите на сайт конструктора.

  1. Мы можем выбрать готовый дизайн из предложенной библиотеки готовых варантов. По сути, если нас устраивает картинка и оформление, мы можем только заменить текст на свой;
  2. Либо, можно начать создавать с чистого листа, задав нужный размер или выбрав из предложенных форматов (для Фейсбук, Инстаграмм, Постер и др) и загрузив в сервис свою картинку.

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

Каждый добавляемый элемент можно перекрашивать в разные цвета, менять размер, расположение и прозрачность. Текст добавляется отдельно и с ним также можно проделывать все перечисленные выше модификации. Русские шрифты есть в сервисе.

Готовый проект будет храниться в вашем аккаунте и вы сможете вернуться к редактированию когда вам потребуется. Вы сможете скачать готовый баннер или постер в любое время в формате изображения или PDF. Если у вас что-то не будет получаться, посмотрите ниже видео (звук тихий, увы так получилось), где мы попробуем сделать баннер, какой-нибудь незатейливый и скачаем его.

Для работы с конструктором лучше использовать браузер Хром, так как я заметил, что Мозиле при сохранении, не вписывается расширение .png — это решается простым переименовываением файла и добавлением нужного (в котором скачивали) точка и название (png или jpg). Вроде все.

Поделиться!

Еще статьи по теме

i-won.ru

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

На определенном этапе развития интернет-проекта ему может понадобиться свой собственный баннер. Например, для продажи своих или партнерских информационных продуктов (об этом виде заработка я писал в статье "Как заработать на партнерских программах"), раскрутки бренда, привлечения трафика и так далее.

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

Что включает в себя веб-баннер:

  1. Графическое изображение;
  2. Рекламный текст;
  3. Гиперссылку на рекламируемую страницу.

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

Распространенные типы баннеров

1. Статический плакат

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

2. Слайдер

Представляет собой последовательность автоматически переключающихся картинок. Посетитель может самостоятельно перелистывать картинки, нажимая на кнопки вперед и назад. Пример такого слайдера в сайдбаре WordPress-book.ru.

Для создания слайдера любого размера на сайте WordPress рекомендую использовать плагин Content Slide.

3. GIF-анимация

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

4. Flash-анимация

Следующий этап приближения к мультипликации. Анимация на основе Flash-технологии, разработанной компанией Adobe.

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

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

1. Онлайн-сервисы

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

Представлю два бесплатных, понравившихся мне сервиса.

Banner FANS

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

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

Для текстового объявления доступен богатый набор шрифтов, но кириллицу поддерживают только из семейства Stock.

Удобный сервис, позволяющий быстро создать простой и без излишеств баннер для своего сайта.

Гифовина

Gifovina.ru - этот сервис тоже предельно прост в работе, и, в отличие от предыдущего, может создавать анимационные: баннер, аватарку или слайд-шоу со сменой картинок. Просто добавьте картинки в очередь нажав на кнопку "Добавить кадр".

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

2. Специальный софт

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

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

Предлагаю вашему вниманию две программы, которыми время от времени пользуюсь сам.

Ulead Gif Animator

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

Работа со слоями (как в фотошопе), многочисленные инструменты и эффекты вполне позволяют это осуществить.

Я заменил текст бегущей строки шаблонного баннера программы, и вот что у меня получилось:

Easy GIF Animator Pro

Этот софт проще, чем предыдущий.

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

Вот мой баннер, созданный в Easy GIF Animator Pro менее чем за минуту:

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

3. Заказать дизайнерской студии или фрилансеру

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

Результирующий продукт определяется полетом фантазии дизайнера и суммой, которую готов заплатить заказчик.

Хорошего исполнителя заказа вы быстро найдете на биржах фриланса, например таких как frilans.ru.

4. Вручную в графическом редакторе

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

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

Фотошоп

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

Microsoft Power Point

Программа, входящая в установочный пакет Microsoft Office. Высока вероятность того, что она у вас уже установлена вместе с Microsoft Office Word.

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

Paint.net

Бесплатный и довольно популярный графический редактор. Отличная замена платным программам для выполнения работ с графическими изображениями.

Как сделать баннер ссылкой

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

Баннер делается ссылкой как любое другое графическое изображение. Для этого загрузите его на любую страницу своего сайта.

После загрузки в настройках отображения файла в поле «Ссылка» выберите «Произвольный URL» и в поле ниже вставьте свою ссылку.

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

Обратите внимание, чтобы рекламируемая страница открывалась в новом окне, к ее ссылке добавьте атрибут target="_blank", как на картинке.

Тем, кому я помог создать баннер для своего сайта, предлагаю поделиться здесь своим творением. Просто скопируйте его HTML код в форму комментария. Дополнительная реклама вашему сайту не помешает :-).

wordpress-book.ru

Как сделать баннер картинку. Программа для создания баннера

Приветствую вас уважаемый посетитель!

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

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

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

Создание баннера с использованием специальной программы

Баннеры, размещаемые на сайтах, обычно бывают стандартных размеров 468х60, 125х125, 120х600 и т.д.

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

Давайте сделаем баннер размером 468х60 пикселей. Вы можете, конечно, приготовить уже готовые фоновые картинки данных размеров и, добавив по своему желанию надписи, использовать их. Я буду делать баннер с чистого листа.

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

Далее открываем эту картинку в Paint.

Теперь нам необходимо вырезать эту область, сделать чистый прямоугольник размерами 468х60, если не знаете, как это делается, то почитайте статью (Как сделать снимок с экрана монитора ).

Получаем вот такую чистую картинку

Сохраняем ее в формате JPG.

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

Можно делать картинку в Painte, но я предпочитаю использовать либо Snagit, либо FastStone Image Viewer. (О работе в данных редакторах почитайте в статье: «Редактирование картинок»).

У меня получились вот такие два рисунка:

Теперь нам нужно скачать себе на компьютер специальную программу для создания баннера, называемую gif-аниматором. Программа называется GIF Movie Gear, скачать из Интернета не составит труда, правда она платная и срок использования в бесплатном режиме 30 дней. Я думаю, это не проблема для большинства пользователей, тем более за 30 дней можно столько картинок нащелкать, на всю оставшуюся жизнь хватит.

Скачиваете, запускаете, выходит вот такое окно:

  1. Нажимаете открыть файл и с компьютера загружаете первый рисунок.
  2. Затем нажимаете на кнопку под цифрой 2 и загружаете второе изображение.

В красном квадратике стрелочка для просмотра вашего анимированного GIF баннера.

Во время предпросмотра поставьте время показа каждого изображения (циферблат часов).

После выставления временного интервала сохраните полученный баннер File – Save GIF Animation As далее название файла. Если две картинки были в формате JPG, то полученное изображение будет уже в формате GIF.

После того, как сделали баннер, его изображение необходимо загрузить на хостинг, где оно будет храниться.

Дело осталось за малым, теперь помещаем баннер на сайт, для чего необходимо вставить вот такой код в режиме html:

<a href="АДРЕС СТРАНИЦЫ" target="_blank"><img src="АДРЕС КАРТИНКИ" alt="" border="0" /></a>

<a href="АДРЕС СТРАНИЦЫ" target="_blank"><img src="АДРЕС КАРТИНКИ" alt="" border="0" /></a>

Где адрес страницы – URL сайта либо веб-страницы, куда должен перенаправлять ваш баннер;

Адрес картинки – адрес вашего баннера на хостинге.

target= «_blank» – открывает ссылку в новом окне.

alt= » » — В кавычках вы прописываете тег alt, если вы его прописывали в названии картинки при загрузке на хостинг.

border= «0» — это ширина рамки баннера, если ее нет, то ставим 0.

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

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

Таким образом, мы сделали баннер, используя специальную программу gif-аниматора.

Можно сделать картинку, используя онлайн сервисы создания баннеров, есть и такие, и многие пользователи успешно их используют.Вот адрес одного из онлайн сервисов по созданию баннеров – bannerfans.com (выделите мышкой и вставьте в строку браузера) – здесь можно сделать простенький баннер, поддерживается русский язык, я думаю, разберетесь сами, если захотите воспользоваться данным сервисом.

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

Успехов вам!

egofilin.ru

Изготовление рекламного баннера своими руками.

                                                                                                                  

Приветствую Вас друзья на блоге «Способы заработка через Интернет«! В сегодняшней статье рассмотрено изготовление рекламного баннера своими руками с помощью бесплатных программ.

Как сделать рекламный баннер самому

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

Если Вы зарабатываете на партнерских программах, на реселлинге, то как правило, рекламные баннеры различных размеров идут с этими продуктами и блоггеру остаётся только установить рекламный баннер на сайт, либо разместить их на биржах рекламных площадок. Но если Вы хотите рекламировать свой продукт, без собственного баннера не обойтись. Где его взять? Есть два пути:

  • купить (заказать) баннер на бирже фриланса;
  • создание рекламного баннера самостоятельно.

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

Со мной были случаи, когда надо было выполнить размещение рекламных баннеров партнерской программы на бирже Ротабан, но сделать я это не смог из-за отсутствия  нужных размеров рекламных баннеров (прикладывались в материалах баннеры других размеров). О работе на бирже Ротабан писалось в статье «Rotaban, рекламный канал блоггера«. Выходит, что для заработка на партнерках свои рекламные баннеры тоже нужны.

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

Итак, для изготовления рекламного простого статического баннера нам нужен графический редактор, он может быть простым типа стандартной программы Paint до всем известного Photoshop. В нашем случае создание рекламного баннера выполним в графическом редакторе Pixlr, мне эта программа нравится, это по сути онлайн фотошоп, но гораздо проще в пользовании.

Итак, начинаем! Сначала нам надо определиться, какой размер баннера нам нужен. Далее заходим в онлайн программу Pixlr (как это сделать, подробно показано в статье «Онлайн редактор Pixlr«. Заходим внутрь программы и нажимаем «Создать новый рисунок». В открывшейся форме устанавливаем размер будущего баннера, в нашем случае 468х60 и нажимаем «Да».

Теперь поле будущего баннера можно залить нужным нам цветом и сделать надписи.  Как это сделать было подробно рассмотрено в предыдущей статье «Уникальные картинки для статей блога«, где мы делали картинки для статей блога.

В данной статье мы усложним себе задачу, вместо обычной заливки поля баннера, используем режим «Градиент», заливка будет сделана с переменной интенсивностью окраски, изображение будет смотреться симпатичнее. Для этого в левой панели инструментов программы Pixlr, выбираем режим «Градиент» (смотрите скрин) – действие 1. В верхней части окна появляется полоска «Градиент», нажимаем на нее – действие 2, открывается окно выбора цветов, выбираем нужную нам градацию цвета – действие 3.

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

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

Всё наш баннер готов, теперь его надо сохранить на компьютер, для этого заходим «Редактировать», «Копировать», а затем «Файл» и «Сохранить».

С целью размещения рекламного баннера на своем или чужом блоге, нужно создать еще html код полученного баннера. Делается это очень просто, также, как размещаете картинку на блоге (например, в сайдбаре).  Итак, используем шаблон кода:

<a href=«Указать ссылку страницы, куда направляется посетитель»

target=»_blank»><img src=»Адрес картинки баннера на блоге» width=»468″ height=»60″ border=»0″></a>

где width – ширина созданного баннера;

      height – высота;

Указывать эти параметры не обязательно, но лучше указать их, иначе при сбое элементы баннера могут отображаться некорректно. Чтобы избежать отображения синей рамки вокруг баннера, нужно отобразить border=»0″.

Теперь в вышеуказанный шаблон вставляем ту ссылку, куда она должна вести посетителя. В моём примере это https://biz-iskun.ru/kniga_2/ .

Теперь надо получить адрес картинки на блоге. Для этого полученный баннер, а это картинка, размещаем на блоге в папке медиафайлы и берем оттуда ссылку. Если Вы не знаете, как это сделать, рекомендую посмотреть статью «Ошибка 404 страница не найдена», там все подробно показано – размещение картинки и получение ссылки.

Теперь вставляем вторую ссылку и получаем готовый код, в моём случае это:

<a href=«https://biz-iskun.ru/kniga_2/«

target=»_blank»><img src=»https://biz-iskun.ru/wp-content/uploads/2014/09/banner468x60_kniga_2b.png» width=»468″ height=»60″ border=»0″></a>

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

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

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

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

С уважением, Иван Кунпан.

P.S. Если Вы все же хотите освоить процесс изготовления рекламных баннеров высокого качества, тогда лучше использовать программу Фотошоп, но в ней надо уметь работать. В этом случае советую прочитать на эту тему мою статью «Курсы обучения фотошопу» на блоге.

Просмотров: 9054

Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"

Вы можете почитать:

biz-iskun.ru

Как создать баннер в "Фотошопе": пошаговая инструкция, советы начинающим

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

Что такое баннерная реклама

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

Какие виды баннеров бывают

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

Виды интернет-баннеров по способам реализации

Перед тем как узнать, как создать баннер в "Фотошопе", мы познакомимся с разновидностями способов их реализации.

  • Статичные. Простейший баннер – картинка с рекламным содержимым. Размер файла небольшой, поэтому быстро загружается даже при медленном Интернете. Легко создать баннер как в "Фотошопе", так и в других графических редакторах.
  • Анимированные. Весят они в несколько раз больше статичных, в связи с этим загружаются медленнее, но зато больше бросаются в глаза пользователю. Такой рекламный баннер создать в "Фотошопе" уже гораздо сложнее.
  • Ричтекст (Rich text). Баннер, похожий на информационную статью с графической составляющей.
  • HTML5, JS, флеш-анимация. Это уже баннеры, которые являются интерактивными мини-программами. Например: различные тесты, примитивные игры, опросники. Создать такой рекламный баннер в "Фотошопе", как вы понимаете, никак не получится.

Определение размеров баннера

Прежде чем узнать, как создать макет баннера в "Фотошопе", необходимо определиться с его размерами. Стандартом считается размер 100 х 100 пикселей. Самый часто используемый вариант – 468 х 60 и 234 х 60. Первая цифра определяет ширину, а вторая длину. Так что вертикальный баннер будет иметь размер, например, 60 х 468 пикселей. Поэтому важно знать, где вы будете размещать свой баннер.

С чего начать

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

Делаем свой рекламный баннер

Итак, ваш макет готов. Теперь приступим непосредственно к основному процессу.

В этой статье мы сделаем статичный горизонтальный рекламный баннер размером 468 × 60 пикселей и текстом «Распродажа iPhone 5. Не упусти шанс» в программе "Фотошоп" версии CS6.

  1. Запускаем программу. Создаем новый документ с размерами 468 × 60 пикселей.
  2. Фон мы сделаем синим, плавно переходящим в белый. Для этого выбираем цвет в нижнем белом углу, затем выбираем инструмент «Градиентная заливка». Чтобы применить заливку, нажмите курсор на одной стороне холста и, не отпуская, проведите на другой конец. Пробуйте различные варианты, пока не найдете устраивающий вас.
  3. Следующим пунктом мы вставим картинку, которую нашли в поисковике. Открываем ее в "Фотошопе". Для начала мы подгоним размер картинки под баннер – выбираем в меню вкладку «Изображение» и нажимаем «Размер изображения». Устанавливаем высоту 60 пикселей, ширина пропорционально уменьшится. Теперь надо отделить изображение смартфона от фона. Выбираем инструмент «Полигональное лассо» и выделяем необходимое пространство. После этого перемещаем выделенный участок при помощи команды «копировать-вставить».
  4. Вставляем текст, используя инструмент «Текст». Подгоняем размеры, подбираем шрифт и цвет. Можно воспользоваться готовыми шаблонами в окошке со стилями. Обратите внимание на вкладку «Слои». Там каждый элемент баннера – отдельный слой. Их можно копировать, удалять, менять различные свойства по отдельности. Мы дублировали слой с картинкой и переместили второе изображение в противоположную сторону холста. Остается только сохранить файл. При сохранении выбрать формат JPG, GIF или PNG.

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

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

fb.ru

Как сделать эффективный баннер | Продвижение сайтов

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

Сразу хочу заметить, что большинство приведенных ниже советов направленны исключительно на увеличение отклика (ctr) баннера. Если Вам нужны "правильные посетители" (действительно заинтересованные в товарах/услугах Вашего сервера) или, например, Вы делаете ставку на имиджевую рекламу, то простое следование нижеприведенным советам явно недостаточно, а иногда просто противопоказано. ctr не является абсолютным гарантом эффективности баннера.

1. Волшебная фраза — «click here».Самый простой способ увеличить количество щелчков на Ваш баннер — попросить об этом пользователя. По статистике баннеры содержащие слова типа «click here», «жми сюда», «visit now», «enter» имеют отклик на 30% больше, чем без оных.

Хорошей идеей будет поместить на баннере псевдокнопки или полосы прокрутки.2. Ничто человеческое пользователю сети не чуждо.Сделайте баннер загадочным, пусть пользователь будет заинтригован:— Что они этим хотели сказать?— Куда ведет сей баннер?Сексуально-эротические мотивы драматическим образом увеличивают отклик баннера.

3. Размер баннера (пиксели).Баннеры большего размера имеют значительно больший отклик, чем баннеры меньшего размера. Хотя, разумеется, часто за помещение большего баннера приходится больше платить.

4. Размер баннера (байты).Вероятность того, что баннер быстро загрузится на текущую страницу и пользователь увидит его до того, как перейдет к другой странице, напрямую зависит от размера баннера. Если пользователь уйдет, а баннер еще не успеет загрузиться, будет уже совершенно неважно, насколько красочен и круто анимирован был баннер.Помимо этого, многие службы по обмену баннерами лимитируют его размер. Например, не более 15 килобайт.

5. Использование анимации.Движение приковывает взгляд. То же касается анимированных баннеров. По статистике отклик у них на 25% выше, чем у их статичных собратьев. Самое сложное здесь — добиться максимальной эффектности при небольшом размере файла изображения.

6. Изображения.Старайтесь (если это не противоречит основной концепции данного баннера) использовать изображения, а не только игру текста и цветов. Изображения приковывают внимание пользователя и могут дополнять смысл рекламного слогана. При прочих равных условиях следует отдавать предпочтения изображениям людей (лучше женщин, т.к. основная масса пользователей сети — мужчины :). Старайтесь органично встроить изображение, а не просто поместить его как прямоугольную часть баннера.

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

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

— синий на белом;— черный на желтом;— зеленый на белом;— черный на белом;— зеленый на красном;— красный на желтом;— красный на белом;— оранжевый на черном;— черный на пурпурном;— оранжевый на черном;— черный на пурпурном;— оранжевый на белом;— красный на зеленом.

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

Помимо самого дизайна баннера на его отклик имеет сильное влияние расположение на странице

www.internet-technologies.ru

Дизайн баннера – это оригинальность и эффективность, во всём!

Всем привет, друзья и коллеги! С вами на связи, Иван Бурыкин.

В отличие от других художников являющихся специалистами в узком направлении — разработка баннеров, нужно сначала дать ОБЩЕЕ определение этому направлению, а не переходить сразу к нюансам своей специализации. Итак, дизайн баннера — чаще всего начинается с прямоугольной картинки на которой есть изображение чего-либо или без него, с коротким текстом, но бывают и молчащие, с логотипом. Но основные определяющие принципы — это то, ГДЕ он размещен: в сети или в реале! А это уже две большие разницы, как говорят в Одессе. Хотя, и там и там зарабатывают на их создании и делают это неплохо, доложу я вам. О тонкостях ниже, поехали…

1. Дизайн рекламного баннера в реале

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

Сдается мне, что это были спагетти 

Рекламные блоки в газете или в глянцевом журнале тоже прекрасно подходят под это определение, но там встречаются и другие наименования – постер, модуль…

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

Давайте разберем типовой вариант размещения — на щите. Вот недавно нашел это:

А ведь даже я со всем моим опытом, на минуту повёлся и поверил, что это личное. Щчаз! Обратите внимание, с какой любовью оформлено НАЗВАНИЕ кафе: применен другой шрифт, типоразмер, выделение красным цветом фиксирующим внимание зрителя. Но отчётливо помню, что в ту самую минуту, когда верил, мне отчаянно захотелось посмотреть на этого несчастного Ромео, а возможно и его Джульетту. Ну не хватает нам временами на мексиканские сериалы!  А теперь представьте, СКОЛЬКО посетителей кафе добавилось ежедневно, да еще в час после окончания рабочего дня. Гениально! Мои аплодисменты автору шедевра! А ведь даже рисовать ничего не пришлось, ну почти.

Очевидным и доступным плюсом всем свободным художникам является тот факт, что в местной рекламе практически отсутствует контроль за авторством изображений. Это вам не Инет и не федеральные СМИ, но и портреты звезд мирового и российского экрана вставлять не рекомендуется, а, то были прецеденты знаете ли, с криками возмущения и разрыванием одежд. Зато мировой фотобанк вам в помощь, хотя и местная модель может пригодиться, если узнаваема, но ей придётся заплатить. Это я к тому, что основным изображением на рекламной продукции является либо модельный портрет, либо фото предлагаемого товара. Фоны могут быть любые: оригинальные, либо ваши на выбор: побольше воздуха и света, лучиков, улыбок, искорок…, всего подсознательно положительного.

Как вы уже, наверное, догадались, создаваемое нами в этой области должно ВЫДЕЛЯТСЯ из общей массы подобной продукции. Но делать это не за счет яркости света и мигания, это достигает обратного эффекта. А за счет НЕОБЫЧНОСТИ самой подачи, которая будет выламываться из общего шаблона, но делать это нежно и тепло, на мягких лапках…

2. Цена на дизайна для баннера

Скажу одно, меньше тысячи – себя не уважать, если это только не обусловлено необходимостями рейтинга и опыта. Остальное зависит от ТЗ и предложенной цены, но если чувствуете, что ТОЧНО УДАЛОСЬ, то торгуйтесь — высылайте полосатый вариант, который нельзя использовать заказчику без вас. Но и меру знайте, а вдруг у него жесткий бюджет и он рад бы, но больше не может заплатить. Больше пяти – это уровень мастера, это тоже необходимо знать.

3. Варианты изготовления баннера

Даже если у вас уже есть готовая идея по дизайну, её еще надо воплотить в каком-нибудь физическом виде. Существует просто огромное количество вариантов на бумажной и тканевой основе, винила и полиэтилена. Все они отличаются различной стойкостью к осадкам, ветру и солнечному свету, ну и ценой, разумеется. А еще вопросы по свободным местам, освещению в вечернее время, рабочих-высотников с оборудованием… Скорее всего путь один — в местное рекламное агентство и выбирать в прайсах, даже если у них чего-то нет, то они точно знают где оно есть, они такие. Это я про то, что печать баннера они, скорее всего, будут заказывать со стороны, а это прямой путь для вашей экономии, если заказать там напрямую. Думайте, ищите, договаривайтесь и не давайте себя обмануть.

4. Особенности размещения в интернете

Несомненным плюсом такого размещения является утрата статичности, как это было выше и включение гораздо большей динамики, а значит и драйва. Достигается это за счет анимации самого изображения, включения звука или видео при наведении курсора, подчас для этого даже не требуется щелчок мышью, всё происходит само по себе. Анимация и видео обладают свойством притягивать ваш взгляд на появившееся внезапно движение. Однако, всё это внутри имеет элементы навязывания и возможного отторжения посетителем и если уж применяете такое, то делайте это ОЧЕНЬ ИНТЕРЕСНЫМ, иначе просто выключат. Это сейчас самое модное направление. 

Обычно при создании сайта, под рекламные блоки (свои и чужие) отводится своё место в шапке, сбоку – справа и слева, иногда по центру (самые большие). Самые результативные — первые и последние, они же самые дорогие. Эффективность зависит от посещаемости ресурса. Рекламные блоки имеют свои размеры в пикселях, они же — пропорции по высоте и ширине.Очень часто предприниматели, найдя подходящую для них площадку с нужным уровнем посещаемости, связываются с ней и получают эти самые размеры. После чего обращаются на биржи веб-дизайна (о них я писал здесь) с ТЗ на разработку с указанными размерами. Где ждете их вы…Поэтому первое, что нужно сделать — это разобраться с этими самыми размерами, выглядят они примерно так:

Потом изучаем возможности Adobe Flash в части создания Flash или Java анимации, она может быть многослойной и независимой от других уровней и сопровождаться звуком. Возможно написание целых мультфильмов, сказка и игра, а не учеба! Знания, полученные там, затем можно выгодно продать на рынке веб-дизайна. Также применима и GIF-анимация, она выглядит как сменяющие друг друга картинки с заданной частотой.

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

До связи, Иван.

webdesignmaster.ru