Мастер-класс Делаем баннер для магазина за 5 минут

Делаем баннер для магазина за 5 минут

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

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

Я после регистрации тут, тоже задалась этим не мало важным вопросом и просмотрела кучу разных объявлений. Но бывает так, что на начальных этапах формирования магазина, не хочется или нет возмоности тратить деньги на создание или заказ баннера. И вот я думаю, обращусь я к своему мужу (Он у меня ВебДизайнер и т.д и т.п.). Подумала, пусть он мне сделает несколько хороших баннеров для моей Ярмарки :) Но, естественно, как и все мужчины — у него нет времени, и лишь подсказал он самый простой и быстрый способ, с помощью которого любой желающий сделает себе баннер за несколько минут :) Безусловно, я внесла коррекцию в его способ. И сейчас я вам подробно об этом расскажу и покажу (Весь процесс у вас займет не более 5-10 минут):

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

2. Далее нам нужно нажать на «Файл» —«Создать Новый Рисунок» и в новом маленьком окошке указать размеры нашего будущего баннера. В данном случае размер будет 760×75 (Ширина 760, Высота 75). Получаем это:

3. Это мы получили 30% нашего баннера :) Ну а как же сделать теперь интересный фон своему баннеру? Т.к тематика у нас Новогодняя, мы идём в любимый наш поисковик в раздел «Картинки», и вводим «Новогодний Фон». Выбираем фон, сохраняем его на свой компьютер и возвращаемся во вкладку «ФотошопаОнлайн». Нажимаем «Файл»—«Открыть изображение», и выбираем наш фон, который сохранили минуту назад. Получаем это:

4. Теперь нам нужно просто выделить примерную область картинки, которую мы хотим видеть на нашем баннере. Делается это просто и вот таким инструментом:

5. Теперь переносим выделенную область на наш баннер, делается это вот этим инструментом:

6. Получаем вот такой результат :) Это уже 80% готовности нашего баннера, что-то уже есть, не правда ли? :)

7. Теперь нам остаётся лишь добавить любой текст на наш баннер. Он может быть разным: Название вашего магазинчика, Ваше имя, слоган или девиз и многое другое :) Делается это так:

8. Вот и всё :) Поздравляю! В несколько простых шагов, не используя никаких программ, и потратив несколько минут не закрывая даже свой браузер, вы получили забавный баннер. И сможете теперь делать сколько угодно и каких угодно — на любой вкус и цвет :)

Комментируйте, добавляйтесь, давайте общаться :) С удовольствием помогу и расскажу, если вас возникли какие-либо трудности при создании баннера моим способом.

Спасибо за внимание, думаю вам понравился и был полезен мой Мастер-Класс :) Желаю всем много продаж и получения удовольствия от любимого дела!

Урок 5. Баннер для Ярмарки Мастеров за 10 минут!

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

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

Если вы еще не зарегистрированы на Ярмарке мастеров, начните с Урока 1 . В нем пошагово показано, как зарегистрироваться в качестве Покупателя и Продавца. А также даны ссылки на другие уроки из этой серии, посвященных ЯМ.

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

Что значит «онлайн»? То есть, ничего не надо скачивать себе на компьютер, устанавливать, запускать и пр. Раньше эти действия меня ужасно пугали, поэтому я очень обрадовалась, когда нашла этот сайт.

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

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

Итак, что мы разберем в этом уроке?

1. Как создать баннер для ЯМ за 10 минут.
2. Как баннер проходит модерацию в ЯМ .

Часть 1. Создаем простой баннер для Ярмарки Мастеров

Обращаю ваше внимание, что на Ярмарке Мастеров строгие правила по размещению баннеров. Читаем их ниже, привела их на скриншот-картинке. Из всего текста нам сейчас нужно знать, какие размеры допустимы: ровно 760 х 75 пикселей. Запомнили, приступаем к работе.

Для начала нужно попасть на нужный сайт. Вводим в строке браузера адрес: //bannerfans.com

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

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

Начнем с первого пункта «Макет». Сайт англоязычный, переводится в гугле автоматически, поэтому иногда перевод может отличаться, например, на фото ниже вы видите слово « Планировка». Прямо под ним видим задание:

1. «Выберите размер» . Выбираем вторую строку, чтобы иметь возможность задать свои параметры.

Затем переходим вправо:

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

Прямо под этой надписью смотрим:

3. «Режим» , я выбрала второй, т. е. на баннере будет две цветовой полосы, плавно переходящей одна в другую.

Теперь уходим влево, к надписи выбора:

4. «Градиент цвета» . Выбирайте на свой вкус, нажимая на цветные квадратики. Сразу появятся новые окна с выбором цветов.

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

После всех действий смело нажмем «Обновить» .

Через пару секунд увидим обновление.

Значит, время переходить к текстовому оформлению. Кликнем по «Текст и шрифты».

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

1. В поле «Ваш текст» вписываю нужные предложения.
2. «Имя шрифта» — вот тут в первый раз я «застряла» надолго, т. к. не все из них распознают кириллицу. Сейчас вы можете просто вписать такие же, как у меня на фото, чтобы не терять время. А позже, при желании, поэкспериментировать еще. Предупреждаю, дело захватывающее, т. к. нам предлагают множество разных шрифтов, от готических до классических. Чтобы их увидеть, кликните по значку «>» рядом с каждым.

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

3. Так, «Размер шрифта» — при клике выскакивает длинная таблица с нумерацией. Чтобы выбрать какой-то номер, жмем по нему, он сразу отразится.
4. «Цвет» — здесь уже интуитивно понятно. При нажатии появится маленькое окно, в котором можно выбрать желаемый оттенок для текста.
После всех изменений вновь обновляем . И увидим, что текстовые сообщения окрасились в разные цвета, и обрели новые размеры и конфигурацию.

Теперь зададим «Тени и эффекты» (кликнув по ним). При нажатии на значки в строке «Расстояние» появляется такая картина. Выберем значение «4px», чтобы тень от букв немного падала вправо. И еще отметим цвет теней.

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

И, наконец, отметим «Формат» IPG, поскольку у нас изображение не требует прозрачности (PNG) и не анимировано (GIF).

Все, наш простой баннер готов! Нажмите на кнопку внизу справа «Скачать баннер». И сохраните так, как вам удобно (например, на рабочем столе). Остается разместить его в магазине на Ярмарке Мастеров и ждать одобрения модераторов.

Часть 2. Про то. как баннер проходит модерацию на ЯМ

О том, как баннеры проходят проверку, я писала в своем блоге в Лиру и на ЯМ. Копия статьи приведена ниже в формате скриншот-снимков (т. е. снятых прямо с экрана компьютера). Все изображения кликабельны, просматриваются в виде фото-галереи.

Вот и весь урок. Желаю вам отличных продаж!

А я буду дальше разрабатывать наши новые модели — повязки на голову и шапочку-чалму.

One more step

Please complete the security check to access www.canva.com

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 666a5dd93c512494 • Your IP : 46.175.165.20 • Performance & security by Cloudflare

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

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

Посмотрите на баннер, что ещё можно убрать?

Посмотрите на баннер выше — сколько вы успели прочитать за 3 секунды? А ведь именно столько времени у нас есть на то, чтобы привлечь клиента. И креатив не помог ведь, верно? Понятно, что это смоделированная ситуация, но ведь в обычной жизни происходит ровно то же самое.

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

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

А что не следует отображать на баннере?

  1. Не стоит увлекаться креативом и абстракциями. Очень часто дизайнеры пытаются копировать имиджевые баннеры мировых брендов, совершенно позабыв о контексте. Да, красивая фотография привлечёт внимание, но если на этой фотографии не будет конкретной информации, того сообщения, что вы хотите донести — баннер не сработает.
  2. Не стоит увлекаться игрой шрифтами. Используемый шрифт должен быть распознаваемым и читаемым. Если баннер будет располагаться на улице, например вы делаете широкоформатный баннер на улице 3х3 метра, подойдёт вот такая формула (много раз меня выручала): высота шрифта рассчитывается по формуле : Hмм = 5Lм, где H – высота знака в миллиметрах, а L – расстояние до наблюдателя в метрах. Оптимальное для наружной рекламы соотношение высоты и ширины — это 5/3, поэтому, рассчитав высоту шрифта можно определить и его ширину по формуле S = 3H/5, где S – ширина шрифта, а H — его высота. Длина строки рассчитывается по формуле : l = nH, где l – длина строки, n –количество букв, а H-высота буквы. Если берём обычный плакат 1.8х0.2 метра, то о формуле можно не думать, но представить с какого расстояния информацию будут читать — стоит.
  3. Не стоит выделять второстепенное. Вторая по распространённости ошибка — выделение второстепенного смысла, например на баннере изображены малыш и мама, или женщины, или коробки с покупками и всё это — самые крупные элементы, а про уникальное предложение, про распродажу или мелким шрифтом, или — ни слова. Каждый раз думаю: этот магазин стесняется показать свою индивидуальность, что ли?) По идее, крупные изображения должны привлечь, но если все магазины подряд используют мам, малышей, зверюшек и т.д. на первом плане, то сможет ли покупатель понять: что конкретно ему предлагают?
  4. Не стоит молчать. Это уже не про баннеры, это уже про коммуникацию в магазине: а действительно ли покупатель считал информацию? И тут можно по-честному спросить: а вы видели нашу акцию? И если покупатель ничего не видел, стоит ему рассказать о распродаже, которая сейчас проходит в магазине.

И что дальше?

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

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

Если у вас остались вопросы или вы хотите предложить тему для статьи — напишите мне и команда ВЗВ подготовит статью.

Как сделать продающий баннер для интернет-магазина

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

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

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

Содержание:

Типы продающих баннеров

Основная задача этого элемента страниц интернет-магазина — рост продаж. Поэтому условно их можно разделить на три типа:

1. Имиджевые

Цель. Этот тип баннерных объявлений сообщает о преимуществах сотрудничества с интернет-магазином. Его задача — в нескольких словах рассказать, чем сайт отличается от похожих и почему посетитель должен остаться именно на нём. Лучший способ сообщить об этом — написать здесь УТП.

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

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

2. Рекламные

Цель. Рекламный, исключительно продающий баннер для интернет-магазина, должен обратить внимание на определённый товар или категорию. Его задача — заинтересовать пользователя в получении более подробной информации и «проводить» на страницу конкретной продукции.

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

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

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

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

3. Акционные

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

Место размещения. Уместны как в верхнем блоке главной страницы, так и в виде сквозных объявлений в разделах с взаимосвязанными товарными группами.

Особенности. Акционные баннеры могут рассказывать о:

  • действующих или ближайших скидках;
  • новинках сезона / месяца;
  • самых популярных товарах периода;
  • особых предложениях для конкретного круга клиентов.

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

Как сделать баннер для интернет-магазина: варианты создания

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

1. Самостоятельная отрисовка в графических редакторах

Наиболее функциональные и популярные для этой цели программы:

  • Canva.com;
  • Crello.com;
  • PhotoShop.

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

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

2. Заказ услуг профессионального дизайнера

Получить качественный баннер для интернет-магазина можно путём:

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

Среди бирж фриланса, на которых можно найти подходящего исполнителя, не рискуя потерять при этом деньги, выделим:

  • work-zilla.com
  • freelancehunt.com
  • kabanchik.ua

6 советов, как сделать красивый продающий баннер для интернет-магазина

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

  1. Баннер стилистически должен сочетаться как с дизайном сайта, так и со смыслом самого предложения.
  2. Один баннер — один оффер. Рекламных изображений на странице может быть несколько, но в виде разных элементов.
  3. В слайдере нежелательно размещать более 5-6 объектов. При этом они должны следовать друг за другом в порядке убывания привлекательности предложения для пользователей.
  4. Имиджевые баннеры можно размещать не только на главной странице. Они эффективны и в качестве сквозных элементов.
  5. Не используйте перегруженные графикой и цветами картинки. Они мешают пользователям выделить основной посыл.
  6. Продающий баннер на сайте должен не только мотивировать, но и сокращать путь до целевого действия, поэтому здесь необходимо размещать кликабельный понятный призыв. В зависимости от специфики это может быть «Подробнее…», «Оформить заявку», «Купить» и т. д.

Выводы

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

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

На курсе «10X Интернет-магазин» вы на практике с поддержкой наших специалистов проработаете каждый из элементов своего интернет-магазина, чтобы пользователи не только проводили время на сайте, но и главное — покупали. Переходите по ссылке выше и бронируйте участие. А промокод «SEO-blog» даст вам дополнительный приятный бонус к покупке.

Мастер-класс Делаем баннер для магазина за 5 минут