Всем привет! Баннер – это анимированная картинка небольших размеров, изображения которой, как правило, поочередно меняются. Чаще всего баннер состоит из 3-4 изображений, каждое из которых демонстрируется несколько секунд.
Анимированные (gif, flash) баннеры отлично привлекают внимание посетителей сайта, а это значит, что трафик можно перенаправлять с одного ресурса на другой.
О том, как создать баннер для сайта, как его настроить, а также какие программы использовать, я расскажу вам в этой статье.
Программы для создания баннераСуществует несколько популярных программ, позволяющих сделать баннер для сайта. И хотя их не так много, как хотелось бы, все же они бесплатны. Я рекомендую использовать следующие программы для создания анимированной картинки:
Каждая из них имеет свои достоинства и недостатки, описывать которые нет смысла. Я рекомендую попробовать все (они небольшие – каждая занимает около 25 МБ), а остановиться на самой удобной, на ваш взгляд.
Easy GIF Animator
Я опишу создание баннера с помощью программы Easy GIF Animator, так как сам ей нередко пользуюсь. Данная программа подойдет в том случае, когда нужно быстро создать простой и незамысловатый баннер, состоящий из 2-3 меняющихся надписей. Интерфейс проги очень удобен, что позволяет мгновенно в ней разобраться. Но графика оставляет желать лучшего.
Первым делом вам нужно будет скачать данную программу в интернете – выбирайте нужную версию, подходящий язык, скачивайте и начинайте работать (я, к примеру, использую русифицированную версию «5 PRO»).
Запустив программу, вы попадете на главную страницу, где надо будет выбрать, что создать (анимацию, баннер, кнопку и т.д.). Мы выбираем анимированный баннер.
Следующий этап – выбор цвета. Можно выбрать монотонный цвет, а можно градиент. Доступна огромная палитра цветов, поэтому с этим проблем не возникнет. Снова переходим к следующему шагу.
Третий этап – создание надписей, которые и будут транслироваться. Здесь есть множество опций, которые можно регулировать. Меняйте размеры надписей, их анимацию, расположение на баннере и т.д. Можно поэкспериментировать со шрифтом, а также цветами надписей. Всего можно создать до трех текстовых сообщений, к сожалению, больше создать не получится =).
Когда вы завершите все работы, программа предложит вам сохранить только созданный баннер.
Вот, что у меня получилось (на создание ушла всего минута):
Создание баннера в фотошопеФотошоп – мощнейшая программа, позволяющая создавать феерические графические элементы, но при этом нужно долго осваивать эту программу. Да и не у каждого она есть на компьютере. Но если вы все же хотите сделать баннер именно в фотошопе, а его у вас нет, тогда воспользуйтесь онлайн-фотошопом(ищите в гугл). Его функционал во многом ограничен, но это лучше, чем ничего.
Сразу скажу, что фотошоп – очень мощная программа, и создавать на нем можно как очень простые и незамысловатые картинки, так и очень яркие анимированные баннеры.
Я нашел в интернете две очень интересных статьи, расписывающие разные варианты создания красивых логотипов. Рекомендую вам ознакомиться с ними.
Обе статьи очень подробно описывают процесс создания баннеров, поэтому проблем с их восприятием не должно возникнуть. Вот так можно . Если у вас остались какие-то вопросы, пишите в комментариях.
Тем не менее, если вам нужен по-настоящему качественный баннер, то лучше обратиться к тому кто занимается этим уже несколько лет и имеет хорошие отзывы. Рекомендую дизайнера по имени Дмитрий, обязательно посмотрите его работы, вы можете перейти на его сайт и заказать баннер по кнопке ниже.
Здравствуйте дорогие читатели сайта. Сегодня разберем несколько популярных онлайн сервисов для создания баннера для сайта. Постараемся выбрать оптимальный конструктор для работы, в котором будут совмещены бесплатные функции и русскоязычный интерфейс. Разберем их достоинства и недостатки. В следующих статьях речь пойдет о , в которых вы убедитесь на примерах, что пользоваться онлайн-редакторами гораздо удобнее.
BannerBOO – онлайн-конструктор html5 баннеровЭтот онлайн редактор предлагает возможность создавать баннеры html5 . Оформление главной страницы располагает пользователя к дружественному общению с сервисом. Она оформлена в виде landing page страницы. Все интуитивно понятно, что добавляет плюсов этому редактору.
Представлено два основных языка интерфейса: русский и английский. Можно просмотреть примеры готовых баннеров, нажав на кнопку «Галерея» или выбрать «Подробнее» , чтобы узнать о возможностях онлайн конструктора баннеров. Кроме этого, на стартовой странице можно ознакомиться с тарифными планами, выбрав меню «Цены» , создать баннер онлайн, прочитать блог компании, познакомиться с готовыми шаблонами html5-баннеров.
BannerBOO предлагает своим клиентам два тарифных плана:
Можете сами ниже сравнить возможности тарифов:
Преимущества :
Минусы бесплатного создания онлайн html5 баннера в этом конструкторе:
Banner Fans () – этот редактор выделяется большой функциональностью и удобством создания баннера. На главной странице представлен макет, который будет изменяться при каждом внесении изменений в шаблон. Стартовая страница мрачная, но мы пришли сюда не любоваться ей. Изначально этот ресурс англоязычный, но со временем появилась поддержка многих языков. Выбор языка находится в верхнем правом углу (указан стрелкой на скрине внизу). Хочу сразу заметить, перевод отвратительный, складывается впечатление, что переводили Google переводчиком.
Рассмотрим меню:
Любое изменение в настройках можно посмотреть, нажав на кнопку «Изменить баннер» . Эти кнопки находятся внизу окна. Здесь можно сохранить его, получить код для вставки на сайт, скачать в виде файла. Хотите создать новый баннер, кнопка «Начать новый» и откроется новый макет.
Недостатки:
Достоинства:
Canva () – онлайн сервис для создания бесплатного баннера сайта. На главной странице предлагается выбрать тип:
В зависимости от выбранного типа будут предлагаться соответствующие шаблоны для создания баннера . Canva предлагает больший выбор макетов. Достаточно кликнуть на один из них, и он будет доступен для редактирования. Выбираем любой из элементов, размещенных на шаблоне (двойной клик на нем) и его можно изменять. Это касается как картинок, так и текста.
В левой части представлено меню:
Canva.com имеет и платные возможности . Для изменения размера макета нужно оформить подписку на месяц. Стоимость 12,95%. На год – дешевле. Заплатив, вы получаете определенные преимущества. Но и без них, можно создать баннер бесплатно онлайн, используя халявные функции конструктора .
Достоинства :
Недостатки :
Рано или поздно каждый начинающий веб дизайнер или владелец сайта приходит к мысли о том что ему необходима качественная и красивая реклама сайта. Для этого существует немало возможностей и инструментов. Но пожалуй самым традиционным и действенным способом такой рекламы (раскрутки) сайта является - баннерная реклама. Но здесь возникает вопрос, а как сделать баннер для сайта самостоятельно, так как на начальном этапе бюджет сайта сильно ограничен, и поэтому не каждый владелец готов заплатить фрилансерам за изготовление баннера. Оказывается, сделать баннер для сайта не такое уж и сложное дело и очень близкое по технологии с таким процессом как сделать шапку для сайта, при этом мы ведем речь о статичном баннере.
Итак, приступим, как сделать баннер для сайта. Для этого нам понадобится программа «Фотошоп», причем нет необходимости гнаться за самыми современными версиями, для нашей цели вполне подойдет и фотошоп 6-й версии. Кстати кто не знает, как сделать фоновое изображение для сайта, а так же шапку для вашего сайта может так же воспользоваться данной программой для этих целей.
Для того, что бы ответить на вопрос для сайта, необходимо открыв программу создать наш баннер точнее его основу. При этом следует помнить, что стандартные баннеры имеют несколько типоразмеров. Как правило, на сайтах применяются баннеры 468х60, 120х120, 100х100, а так же 88х31. Рассмотрим вариант изготовления баннера с размером 468х60.
После того как открыли программу нажимаем вкладку «файл» - «новый». После в открывшемся окне прописываем размеры (высоту 60 и ширину 468) при этом обязательно убедитесь в том, что единицами измерения являются пиксели. Разрешение ставим на значение 150 пикселей на дюйм, и выбираем прозрачный фон.
Далее необходимо на нашем баннере разместить картинку и текст. Но для начала зальем наш баннер нужным вам цветом. Для этого слева в панели инструментов выберите инструмент заливка, но перед этим обязательно выберете необходимый цвет (щелкаем левой кнопкой по верхнему квадратику цветности и в открывшейся палитре выбираем необходимый вам цвет). А вот теперь можно используя заливку закрасить фон баннера в выбранный цвет.
Теперь разместим картинку на баннере. Для этого сначала определитесь с картинкой, которую будете размещать. Желательно что бы она представляла не сложную фигуру и была если не логотипом, то максимально похожей на него (хотя многое зависит от задач которые стоят перед баннером). После того как картинку выбрали, кстати, она должна иметь расширение либо jpg либо gif, открываем ее в фотошопе. После этого подгоняем размер картинки под наш баннер. Для этого в основном меню выбираем вкладку «изображение»-«размер изображения». После чего в открывшемся окне необходимо задать высоту картинки в 60 пикселей при этом обязательно должна стоять галочка в поле «сохранять пропорции». Если же изображение имеет свой фон, то предварительно его необходимо вырезать и вставить в новое изображение с прозрачным фоном. После того как размер подогнали выбрав инструмент перемещение перетаскиваем изображение на наш баннер и размещаем там в необходимом нам месте.
Теперь нам необходим текст. Для этого выбрав инструмент «текст» вписываем необходимую нам фразу и размещаем простым перетаскиванием по картинке как нам необходимо. После этого остается выбрать в меню «сохранить для web» (сохранить как) и при сохранении выбрать формат изображения jpg.
Но многим баннера с текстом бывает мало желательно, что бы это был баннер ссылка. Как сделать ссылку для своего баннера и связать их. Для этого необходимо на сайте который разместит ваш баннер написать следующий код (это можно сделать и в типа дримвевер) < а href="URL ВАШЕЙ СТРАНИЧКИ">< img srс=" URL БАННЕРА " >< /а>. для того чтобы определить " URL БАННЕРА " необходимо знать как добавить баннер на сайт и куда.
Во и все ваш баннер готов и теперь вы не задаете себе глупый вопрос как сделать баннер для сайта. Кстати используя баннеры, но не статичные, а основанные на флеш-технологии можно заметно разнообразить страницы вашего сайта и придать ему вид типа как красивые флеш сайты.
Приветствую Вас друзья на блоге « «! В сегодняшней статье рассмотрено изготовление рекламного баннера своими руками с помощью бесплатных программ.
В Инфобизнесе для заработка через Интернет без рекламы никак не обойтись, в том числе и без баннерной. Рекламные баннеры устанавливаются на своих и чужих блогах, а также на различных площадках баннерной рекламы. Для этих целей используются рекламные баннеры различных размеров и различного оформления.
Если Вы зарабатываете на партнерских программах, на реселлинге, то как правило, рекламные баннеры различных размеров идут с этими продуктами и блоггеру остаётся только установить рекламный баннер на сайт, либо разместить их на биржах рекламных площадок. Но если Вы хотите рекламировать свой продукт, без собственного баннера не обойтись. Где его взять? Есть два пути:
- купить (заказать) баннер на бирже фриланса;
- создание рекламного баннера самостоятельно.
Конечно, купить за деньги просто, но это стоит денег, а на начальном пути работы их и так нет, сначала деньги надо заработать. За создание рекламного баннера самостоятельно берутся далеко не все, пугает страх перед неизвестностью, отсутствие нужных знаний – хотя это очень просто.
Со мной были случаи, когда надо было выполнить размещение рекламных баннеров партнерской программы на бирже Ротабан, но сделать я это не смог из-за отсутствия нужных размеров рекламных баннеров (прикладывались в материалах баннеры других размеров). О работе на бирже Ротабан писалось в статье « «. Выходит, что для заработка на партнерках свои рекламные баннеры тоже нужны.
Напомню, что рекламные баннеры на сайте бывают статические и анимированные. Статический баннер представляет собой простое изображение, на котором обычно есть какая-то надпись, анимированный сам о себе говорит. Так вот сделать статический баннер сделать проще простого любому новичку и в данной статье мы этим займемся. Вариантов для изготовления статических баннеров великое множество, но мы на примере рассмотрим достаточно простой вариант, причем с применением бесплатных программ.
Итак, для изготовления рекламного простого статического баннера нам нужен графический редактор, он может быть простым типа стандартной программы Paint до всем известного Photoshop. В нашем случае создание рекламного баннера выполним в графическом редакторе Pixlr, мне эта программа нравится, это по сути онлайн фотошоп, но гораздо проще в пользовании.
Итак, начинаем! Сначала нам надо определиться, какой размер баннера нам нужен. Далее заходим в онлайн программу Pixlr (как это сделать, подробно показано в статье « «. Заходим внутрь программы и нажимаем «Создать новый рисунок». В открывшейся форме устанавливаем размер будущего баннера, в нашем случае 468х60 и нажимаем «Да».
Теперь поле будущего баннера можно залить нужным нам цветом и сделать надписи. Как это сделать было подробно рассмотрено в предыдущей статье « «, где мы делали картинки для статей блога.
В данной статье мы усложним себе задачу, вместо обычной заливки поля баннера, используем режим «Градиент», заливка будет сделана с переменной интенсивностью окраски, изображение будет смотреться симпатичнее. Для этого в левой панели инструментов программы Pixlr, выбираем режим «Градиент» (смотрите скрин) – действие 1. В верхней части окна появляется полоска «Градиент», нажимаем на нее – действие 2, открывается окно выбора цветов, выбираем нужную нам градацию цвета – действие 3.
Теперь мышкой устанавливаем курсор в средней части будущего баннера и перемещаем вверх, вниз или вправо, влево. Экспериментальным путем получаем нужную градацию цвета.
Теперь можно наложить изображение, а также написать текст любым цветом и размером (как это делать показано в статье « «).
С целью размещения рекламного баннера на своем или чужом блоге, нужно создать еще html код полученного баннера. Делается это очень просто, также, как размещаете картинку на блоге (например, в сайдбаре). Итак, используем шаблон кода:
target=»_blank»>Адрес картинки баннера на блоге
» width=»468″ height=»60″ border=»0″>
где width – ширина созданного баннера;
height – высота;
Указывать эти параметры не обязательно, но лучше указать их, иначе при сбое элементы баннера могут отображаться некорректно. Чтобы избежать отображения синей рамки вокруг баннера, нужно отобразить border=»0″.
Теперь в вышеуказанный шаблон вставляем ту ссылку, куда она должна вести посетителя. В моём примере это .
Теперь надо получить адрес картинки на блоге. Для этого полученный баннер, а это картинка, размещаем на блоге в папке медиафайлы и берем оттуда ссылку. Если Вы не знаете, как это сделать, рекомендую посмотреть статью « », там все подробно показано – размещение картинки и получение ссылки.
target=»_blank»>
Как видим процесс изготовления рекламных баннеров легкий и простой, эту работу может выполнить любой новичок, а когда разбогатеете, можно будет и заказать на фрилансе. Рекламный баннер любого размера делается за 5-10 минут. Если Вы продвигаете партнерскую программу, а баннера подходящего размера нет, этот способ вполне подойдет как для изготовления нового, так и для переделки существующего рекламного баннера другого размера.
Кстати, партнерские продукты рекламируют десятки, а то и сотни человек и все рекламируют партнерскую программу одними и теми же баннерами, поверьте, отдачи от таких баннеров очень мало. Для повышения заработка лучше иметь уникальные рекламные баннеры. Процесс изготовления рекламного баннера можно посмотреть и в небольшом видео, смотрите здесь:
В ближайшее время, мы рассмотрим изготовление более привлекательных анимационных баннеров. Подписывайтесь на обновление блога и не пропустите новости. Будут вопросы – обращайтесь. Удачи Вам!
Получайте новые статьи блога прямо себе на почту. Заполните форму, нажмите кнопку "Подписаться"
На определенном этапе развития интернет-проекта ему может понадобиться свой собственный баннер. Например, для продажи своих или партнерских информационных продуктов (об этом виде заработка я писал в статье " "), раскрутки бренда, привлечения трафика и так далее.
На первый взгляд может показаться, что для создания полноценного баннера профессионального уровня необходимо иметь дизайнерские навыки или, по меньшей мере, уметь хорошо рисовать. Ничего этого в условиях современного развития компьютерных технологий не требуется. Даже если владелец сайта в школе получал по рисованию одни двойки, создать отличный, персонализированный, уникальный и привлекательный веб-баннер можно буквально за несколько минут. А если затратить на это немного больше времени, собственноручно состряпанный медиа-плакат не будет уступать профессионально выполненным дизайнерским работам.
Что включает в себя веб-баннер:
Главное, баннер должен создаваться с таким расчетом, чтобы пользователь был привлечен его красивым изображением, прочитал сопроводительный рекламный текст и был воодушевлен кликнуть по его поверхности, чтобы узнать подробности. От привлекательности изображения мини-плаката и от содержащейся интриги в сопроводительном тексте, зависит число переходов по баннеру и, соответственно, процент продаж рекламируемого продукта.
Распространенные типы баннеров1. Статический плакатЧтобы создать простой статический баннер для сайта, достаточно любого графического редактора с опцией добавления текста. Затем остается только разместить картинку на веб-странице и добавить к ней гиперссылку.
2. СлайдерПредставляет собой последовательность автоматически переключающихся картинок. Посетитель может самостоятельно перелистывать картинки, нажимая на кнопки вперед и назад..
Для создания слайдера любого размера на сайте WordPress рекомендую использовать плагин .
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 код, который можно разместить в любой части своего или сайта-донора.
Обновлено: Апрель 25, 2017 автором: Роман Ваховский
