Содержание

обзор популярных сервисов — ppc.world

Что делать, если в команде нет дизайнера, работать в сложных графических редакторах вы не умеете, но нужно создать красивые рекламные баннеры? На помощь приходят специальные сервисы для создания графического контента. Мы выбрали шесть популярных онлайн-редакторов: Canva, Adobe Spark, Desygner, Bannersnack, Bannerboo и Fotor, протестировали их и готовы рассказать об их преимуществах и недостатках.

  • Canva
  • Adobe Spark
  • Desygner
  • Bannersnack
  • Bannerboo
  • Fotor

Canva

  • Интерфейс на русском языке: да.
  • Авторизация: требуется регистрация или вход через аккаунт в Facebook или Google+.
  • Стоимость: основные функции бесплатны, но есть платная подписка от $12,95 в месяц на аккаунт для командной работы.

Сервис считается одним из самых популярных инструментов для создания графического контента.

В нем много шаблонов открыток, постеров, презентаций, есть специальные форматы для соцсетей Facebook и Instagram.

Попробуем создать самые «ходовые» баннеры: большой прямоугольник 336×280, средний прямоугольник 300×250, полноразмерный баннер 728×90, а также большой мобильный баннер 320×100.

Чтобы начать работу с изображением нажимаем «Создать дизайн», затем — «Использовать специальные размеры».

Вводим параметры высоты и ширины баннера и переходим в редактор.

Сначала сделаем фон. Canva предлагает различные варианты оформления: однотонные, орнаменты, узоры, градиенты, флористические и т. д.

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

Теперь добавим текст.

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

Изменение цвета текста, выравнивания и т. д. — в меню сверху. Текст можно перетаскивать, растягивать и сжимать.

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

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

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

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

Сохраняем то, что у нас получилось, нажав «Скачать» в верхнем правом углу, и аналогичным образом делаем остальные баннеры:

Средний прямоугольник 300×250

Полноразмерный баннер 728×90

Подведем итоги.

Плюсы

  1. Понятный интерфейс на русском языке.
  2. Есть медиатека, можно один раз загрузить все нужные для работы изображения и потом использовать их неограниченное количество раз, они сохраняются в разделе «Мое».
  3. Большая коллекция бесплатных изображений, иллюстраций, фонов, фигур и т. д.

Минусы

  1. Ограниченный функционал редактора: нет возможности работать со слоями, выделять фрагменты изображения, обрезать, накладывать их на рабочее поле, отсутствуют инструменты «Кисть», «Пипетка» и т. д.
  2. Нет возможности на одном экране работать одновременно с несколькими баннерами.

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

Adobe Spark

  • Интерфейс на русском языке: нет.
  • Авторизация: требуется регистрация или вход через аккаунт в Facebook или Google+.
  • Стоимость: основные функции бесплатны, но есть платная подписка от 9,99 $ в месяц.

Adobe Spark — это веб-приложение, им можно пользоваться с десктопа, также есть версия для iOS. У приложения три основных назначения:

  1. Создание графического контента.
  2. Создание видеороликов.
  3. Верстка веб-страниц.

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

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

Спускаемся вниз страницы, нажимаем Create a graphic.

Сервис предлагает воспользоваться шаблонами, но мы будем создавать баннер самостоятельно, поэтому нажимаем Start from scratch.

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

Переходим в редактор.

Начнем с логотипа. Чтобы загрузить его с компьютера, нажимаем на круглый значок с плюсом и выбираем Photo.

Затем выбираем расположение логотипа и корректируем размер.

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

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

Сохраняем, нажав Download справа вверху. Когда один баннер готов, можно оставить макет и поменять размеры, перейдя во вкладку Resize на правой боковой панели и выбрав вариант Custom.

Средний прямоугольник 300×250

Полноразмерный баннер 728×90

Большой мобильный баннер 320×100

Теперь о плюсах и минусах.

Плюсы

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

Минусы

  1. Нет русскоязычной версии, и сам интерфейс простым не назовешь, нужно время, чтобы к нему привыкнуть, разобраться с инструментами и найти нужные функции.
  2. Adobe Spark на каждый проект накладывает свой логотип в нижнем левом углу. Он небольшой, полупрозрачный, но его все равно видно. Конечно, его можно обрезать или закрасить в любом другом фоторедакторе, но на это потребуется дополнительное время.
    Есть возможность один раз убрать логотип, потом эта функция становится платной.
  3. Нельзя один раз поместить изображения в медиатеку и потом использовать, нужные картинки приходится каждый раз загружать заново.

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

Desygner

  • Интерфейс на русском языке: частично.
  • Авторизация: требуется регистрация или вход через аккаунт в Facebook или Google+.
  • Стоимость: основные функции бесплатны, но есть платная подписка от $6,95 в месяц.

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

Сервис предлагает шаблоны баннеров с указанием размеров. Здесь есть нужные нам форматы: прямоугольники 336×280 и 300×250, а также полноразмерный баннер 728×90.

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

В качестве фона или дополнительных элементов можно использовать изображения с компьютера, они сохранятся в библиотеке (My library). Загрузим логотип и добавим его к баннеру. Особенность интерфейса — перетаскивать изображение не нужно, иначе оно займет все рабочее поле. Чтобы наложить его на фон, наводим курсор на изображение в медиатеке и выбираем пункт Add image.

Теперь оформим текст. Поменять стиль, цвет, шрифт и размер текста можно в меню сверху.

Добавим кнопку, выбрав пункт Shapes в меню сверху. Можно также перейти во вкладку Shapes загрузить в библиотеку свою кнопку или выбрать из раздела Stock.

А теперь дополнительные элементы.

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

Все проекты сохраняются в библиотеке и доступны для последующего редактирования.

Плюсы

  1. Шаблоны баннеров с указанием размеров, нет необходимость вводить размеры самостоятельно.
  2. Богатая библиотека фонов, иллюстраций, фотографий и прочих элементов.
  3. Загруженные с компьютера файлы сохраняются в медиатеке, их можно использовать повторно и не нужно загружать заново каждый раз.
  4. Есть возможность по одному образцу создать баннеры разных размеров и редактировать одновременно несколько баннеров в одном окне. Это делает инструмент Desygner одним из самых удобных для быстрого создания графического контента.

Минусы

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

Bannersnack

  • Интерфейс на русском языке: нет.
  • Авторизация: требуется регистрация или авторизация через Facebook или Google+.
  • Стоимость: набор бесплатных возможностей сильно ограничен, есть платная подписка от $7 до $48 в месяц.

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

Мы тестируем бесплатные возможности, поэтому будем создавать баннеры по одному. Нажимаем Make a banner. Открываются шаблоны с указанием размеров. Здесь есть те, которые нам нужны, но если вам необходимо ввести параметры вручную, выбирайте Custom Size.

Переходим в редактор. Открываются готовые варианты статичных и анимированных баннеров, а также строка поиска.

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

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

Чтобы загрузить картинку с компьютера нужно перейти во вкладку My images и поместить туда нужное изображение. Все загруженные картинки будут храниться там.

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

Далее добавляем текст и кнопку. Для оформления текста (шрифт, цвет, выравнивание и т. д.) появляется специальное окно сбоку.

В интерфейсе сервиса есть специальная вкладка Buttons с шаблонами кнопок. Правда, большинство шаблонов платные.

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

Добавим дополнительные элементы. Кстати, любой элемент можно скопировать, нажав Duplicate в выпадающем меню.

Подведем итоги работы с сервисом.

Плюсы

  1. Сервис специально для работы с баннерами: есть шаблоны с размерами, кнопки, возможность создавать сразу несколько проектов, если вы оформили платную подписку.
  2. Есть фильтры по категориям, чтобы было проще найти в библиотеке нужный элемент, фон или картинку.
  3. Расширенные возможности редактора: отображаются слои, можно оформить кнопку градиентом, дублировать элементы, менять местами или скрывать слои и т. д.
  4. Интуитивно понятный и удобный интерфейс.

Минусы

  1. Большая часть возможностей, изображений, шаблонов и элементов доступна только при оплате подписки.
  2. В бесплатной версии можно создать не более десяти баннеров.
  3. Нельзя менять размер уже созданного баннера.

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

Bannerboo

  • Интерфейс на русском языке: да.
  • Авторизация: требуется регистрация или авторизация через Facebook, «ВКонтакте» или Twitter.
  • Стоимость: основные функции бесплатны, но есть платная подписка от 14.99$ в месяц.

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

Можно ввести размеры вручную или выбрать шаблон — здесь как раз есть нужные нам форматы.

При переходе в редактор открывается первая вкладка — «Настройки». Здесь нужно ввести название проекта, выбрать фон, рамку и указать страницу, на которую ведет баннер. Размер можно изменить на любом этапе работы с баннером, вернувшись во вкладку «Настройки».

Следующая вкладка — «Текст». При вводе текста открывается выпадающее меню, в котором можно выбирать шрифт, цвет, оформление, размер межстрочного интервала и т. д.

Далее — вкладка «Фоны». Открывается библиотека фонов. Она не такая большая, как в предыдущих сервисах, зато все изображения бесплатны. Чтобы фон не загораживал текст, переместите его на задний план с помощью кнопки во всплывающем меню.

Во вкладке «Объекты» собраны дополнительные элементы для баннеров: кнопки, иконки, иллюстрации и т. д. Их немного, но для простых баннеров хватит.

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

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

Чтобы созданный проект сохранился на компьютере, нажимаем «Публиковать» и сохраняем картинку в нужном формате.

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

Теперь о положительных и отрицательных моментах в работе с сервисом.

Плюсы:

  1. Понятный и удобный русскоязычный интерфейс.
  2. Возможности сервиса специально для создания баннеров: есть шаблоны с указанием размеров в пикселях, кнопки призыва к действию и т.  д.
  3. Можно менять размер баннера на любом этапе работы с ним.
  4. Созданные проекты можно распределять по разным папкам.
  5. Элементы можно перемещать на задний или передний план.

Минусы

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

Fotor

  • Интерфейс на русском языке: да.
  • Авторизация: необязательна, но можно зарегистрироваться или войти через аккаунт в Facebook.
  • Стоимость: основные функции бесплатны, но есть платная подписка от $3,33 в месяц.

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

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

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

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

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

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

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

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

Теперь переходим во вкладку «Украшения». Выбираем кнопку из раздела «Основные формы».

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

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

А вот функция «Предпросмотр» доступна и в бесплатной версии. Она позволяет увидеть, как баннер будет смотреться на сайте.

Итоги работы с сервисом.

Плюсы:

  1. Понятный интерфейс на русском языке.
  2. Есть подсказки.
  3. Доступны шаблоны баннеров с указанием размеров.
  4. Функция предпросмотра.
  5. Необязательно авторизовываться в сервисе, но без авторизации некоторые функции будут недоступны.

Минусы:

  1. Многие полезные функции платные, например, перемещение слоев, изменение размеров.
  2. Выбор бесплатных объектов сильно ограничен.

Без платной подписки с сервисом Fotor работать сложно, бесплатная версия подходит только для создания простейшей графики.

Подведем итоги

На мой взгляд, самыми удобными оказались универсальные сервисы для создания графического контента: Canva, Adobe Spark и Desygner. Редакторы, разработанные специально для оформления баннеров по-своему хороши: в них есть шаблоны нужных форматов и дополнительные возможности. Но без платной подписки функционал сильно ограничен. Выбирайте инструменты, с которыми вам удобно работать, помните об основных принципах создания баннеров и создавайте яркие привлекательные баннеры для своих кампаний.

Как создать баннер? | Logaster

Anna Kuznetsova

Обновлено

Loading…

Содержание:
1. Что такое баннер?
2. Как создать баннер?
3. Советы по дизайну баннера

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

Что такое баннер?

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

Как правило, баннер состоит из трех элементов:

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

Если говорить о размерах, то не стоит создавать баннеры под все доступные форматы, используйте самые эффективные (размеры указаны в пикселях): 336 x 280, 300 x 250, 728 x 90, 160 x 600 и 300 x 600.

Остановимся детальней на этом пункте:

  • 300 × 250 и 336 × 280: особенно хорошо работают в тексте или в конце статьи
  • 728 × 90: так называемая классика. Прямоугольный формат, который наиболее удачно выглядит в верхней части страниц.
  • 300 × 600: формат предназначен для рекламы. Основной акцент следует делать на визуальную составляющую.
  • 320 × 100: формат для мобильных версий сайта.

А вот для анимированных баннеров встанет выбор между Flash или HTML5. Мы рекомендуем отдать предпочтение последнему, как более востребованному и универсальному.

Как создать баннер?

Способов создания баннеров множество. Мы предлагаем рассмотреть 4 основные решения:

1 — Дизайнер

Если ваш бюджет позволяет и вам необходим баннер высокого качества, тогда это решение для вас. Найти дизайнера помогут такие платформы: Odesk, Elance, Fiverr и т.д. Сколько это стоит? На Fiverr цена услуги стартует от 15$.

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

2 — Графические редакторы

Чувствуете себя художником и имеете навыки работы с графическими редакторами? Тогда этот вариант идеален для вас и вы можете создать баннер самостоятельно.
Для этого творческого процесса нужно выбрать программное обеспечение: Photoshop, Gimp и т.п.
Если же у вас нет навыков работы и знаний функционала, тогда начните с обучения. В Youtube множество обучающих видео, вот только несколько из сотен уроков создания баннеров в Photoshop:

3 — Power Point

Привыкли, что Microsoft PowerPoint создан лишь для презентаций? Приоткроем вам двери в новый мир. Программа позволяет создавать как статичные так и анимированные баннеры.

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

1. Откройте PowerPoint

2. Щелкните на кнопку «Макет» в верхнем меню программы. Далее нажмите на «Пустой слайд». Нажмите «Изменить макет».

3. Теперь перейдите во вкладку «Оформление» — «Размер слайда» — «Настроить размер слайда…» — «Баннер«

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

5. Добавьте логотип компании. Для этого нажмите “Вставка” — “Рисунки”. Выберете файл логотипа и загрузите его с компьютера.

6. Нажмите клавишу F5 на клавиатуре, чтобы просмотреть баннер.

8. Сохраните ваш дизайн на компьютер.

4. Онлайн конструкторы

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

  • Canva: это простая и понятная программа для графического дизайна. Множество шаблонов, кастомизированных форм разрешают без особых усилий создать баннер хорошего качества.
  • Fotor banner maker: простой сервис с приятным интерфейсом. Предлагает как самые популярные размеры баннеров, так и красочные шаблоны и возможность кастомизации.
  • Pixlr: инструмент, похожий на Photoshop, но с более удобным интерфейсом. Выбор фильтров и опций редактирования приятно вас удивит.
  • Picmonkey: еще один инструмент для создания качественного банера. Однако генератор требует приобрести премиум пакет, чтобы иметь доступ ко многим функциям, включая фильтры, рамки, шрифты и прочие удовольствия.
  • Crello: простой и понятный интерфейс значительно облегчит вам процесс создания. Из доступных шрифтов и шаблонов, вы точно найдете что-то по душе.

Советы по дизайну баннера

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

Формат файла

Помните о том, что в первую очередь сайт должен быть удобен для использования. Поэтому баннер как изображение не должен быть громоздким и утяжелять страницу. В идеале используйте файл 50 КБ, максимально допустимый размер — 150 КБ. Для статичных баннеров рекомендуются форматы JPG или PNG, а для анимации — GIF.

Дизайн

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

Призыв к дейстивию

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

Подумайте о клиентах

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

Не стойте на месте

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

Создавать баннеры не так сложно, правда? Да, в большинстве случаев они постоянно должны меняться. Но ведь и у вас есь что сказать и что предложить своей аудитории!

как сделать html5 баннер бесплатно в 2022 году

Содержание

  • Что такое баннер и как он работает
  • Классификация рекламных баннеров
  • Размещение баннеров
  • Способы создания баннеров самостоятельно
  • Рекомендации по созданию наиболее эффективных баннеров

Статья обновлена 24. 07.2022

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

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

Что такое баннер и как он работает

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

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

Стоит начать с простого: как сделать статистический баннер для сайта. Это вид креатива, в котором все детали неподвижны и отображаются одновременно. Анимированный же баннер будет выглядеть интереснее и привлечёт больше внимания посетителей ресурса, однако и делать его сложнее Такой Html5 баннер – это динамичное изображение с большим количеством возможностей. 

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

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

Где взять идеи и какими программами воспользоваться? Что такое Html5 баннер? Как сделать дизайн самостоятельно? Обо всём этом поговорим далее, но сначала давайте разберёмся с азами визуальных искусств, а именно – что должен содержать баннер? 

Дизайн баннера для сайта всегда включает в себя:

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

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

Классификация рекламных баннеров

Выделяют следующие виды баннеров для сайта:

  1. Статический баннер для сайта. Это обычное графическое изображение различных форм. С такого баннера по клику пользователь может перейти на нужную страницу ресурса.
  2. Динамические баннеры. Изображение, которое может меняться, исходя из выбранной локации. Как правило, такие креативы применяются в сетях контекстной рекламы. Например, в программе Google Web Designer адаптивный баннер можно создать единожды и использовать такой креатив сразу в нескольких размерах. Такой баннер умеет самостоятельно подстраиваться под разные размеры рекламных блоков, подбирает оптимальную ширину и высоту, чтобы содержимое отображалось корректно.
  3. Баннер-слайдер. Представляет собой серию изображений, сменяющих друг друга самостоятельно через определённое время или после клика мышкой.
  4. Cквозной баннер. Это изображение, проходящее «насквозь» через весь ресурс, то есть размещаемое на всех страницах сайта.
  5. HTML-баннер. Это интерактивный баннер, который может содержать в себе серию изображений, анимацию, а также Html-код. Он обладает расширенным функционалом, потому что можно запрограммировать переход на разные страницы в зависимости от клика по определённой области. Создание такого баннера для сайта – более сложный процесс, требует больше времени и сил.
  6. Rich-media баннер, переводится с английского языка, как «богатый медиа». Этот баннер может содержать в себе информацию разных форматов: видео, текст, изображение – в общем всё «богатство» контента.

Перечисленные выше виды интернет-баннеров имеют разные размеры. Большой популярностью пользуются web-баннеры 240 на 400 Html5. Но размеры большие и меньши также активно используются создателями рекламных блоков. Подбор размера зависит от вида сайта, пожеланий, задач, которые он должен решать.

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

  • pop-up, то есть открывающиеся в отдельном окне и перекрывающие весь главный экран;
  • pop-under, открывающиеся в отдельном окне под предыдущим изображением;
  • top line – занимает всю верхнюю часть страницы.

Размещение баннеров

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

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

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

Например, сеть контекстной рекламы Яндекс.Директ предлагает загружать баннеры исключительно заданных форматов. Сайты, которые сотрудничают с поисковиком, подобраны таким образом, чтобы на их страницах было место именно для таких форматов. Наиболее распространённые из них: баннер 240 на 400 пикселей, 240 на 600, 300 на 250, 300 на 300. 

Способы создания баннеров самостоятельно

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

Воспользоваться услугами специалиста или агентства

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

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

Даже если вы никогда не работали с графикой, создать рекламный блок самостоятельно вполне реально. Этот способ не затратен, но отнимет некоторое время. Зато вы сами сможете всё сделать, меняя внешний вид и текстовое содержание, экспериментируя и внося корректировки по мере необходимости. Сложность способа в том, что создавать рекламный блок придётся «с нуля». Но на YouTube и на других ресурсах легко найти много подходящих уроков. Чаще всего используются редакторы Paint, Photoshop, Gimp, CorelDRAW. Но могут быть задействованы и другие графические программы.

Использовать конструктор баннеров для сайта онлайн

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

Редактор Banner Fans 

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

Сервис Гифовина

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

Онлайн-редактор Canva 

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

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

Html-баннер: как делать

Html-формат потребует чуть больше усилий, чем остальные виды баннеров, однако даст ряд весомых преимуществ. Среди них:

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

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

Например, программы компании Ulead Systems Ulead Gif Animator и Easy GIF Animator Pro. В них есть множество настроек и возможностей, а встроенный мастер поможет подобрать оптимальный вариант размера для созданной gif-картинки. 

Ещё одна популярная программа для создания Html5-баннеров – Adobe Edge Animate. Но может использоваться также и другой продукт от этого же разработчики – Adobe Animate CC.

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

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

Как вставить html5-баннер

Способ вставки html5-баннера зависит от места сайта, в которое вы хотите поместить креатив, а также от используемой CMS. Например, в WordPress достаточно поместить скопированный код в необходимый виджет.

Для вставки в баннера в шапку сайта потребуется найти файл header.php. А для размещения в тексте – просто скопировать необходимый код и разместить в формате HTML в статье. 

Рекомендации по созданию наиболее эффективных баннеров

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

Чтобы красивый баннер для сайта приносил прибыль и новых клиентов, рекомендуем воспользоваться следующими советами профессионалов:

  1. Изображения для рекламного блока должны быть не шаблонными, привлекающими внимание, но не вызывающими негативных или неоднозначных реакций. Содержание картинки желательно подбирать понятное каждому. Графические файлы должны быть качественными, идеально подобранными по размеру.
  2. Если вы создаёте рекламный блок самостоятельно, убедитесь, что код баннера для сайта написан правильно. В нём должна быть и картинка, и адрес ссылки, на которую ведёт реклама.
  3. Рекламные баннеры на сайт должны запоминаться, мотивировать сделать клик по ним. И изображения, и текст должны вызывать интерес, чтобы посетитель захотел увидеть продолжение.
  4. Добавляйте на изображение уникальные детали, которые сделают вашу компанию или сайт узнаваемыми онлайн и офлайн. Например, используйте ваш логотип в баннере на сайт. Размеры элемента очень важны, так как слишком маленькая картинка может рябить в глазах и быть нечитаемой. Обратите внимание на формат самого баннера при добавлении подобных элементов.  
  5. В рекламном блоке может не быть текста. Но желательно добавить несколько строк, которые зацепят внимание посетителя. Оставляйте только лаконичные послания.
  6. Рекламный блок нужно размещать только на ресурсах с вашей целевой аудиторией. Для каждой группы посетителей можно разработать свой вид креатива. Тогда он лучше сработает. Ведь то, что понравится подросткам и молодым людям, совсем не заинтересует людей 40-50 лет.
  7. Не забудьте на видном месте поместить ссылку на ваш ресурс или странички в соцсетях, чтобы пользователь точно знал, куда нажимать для совершения покупки или получения подробной информации о вашем предложении.
  8. Используйте шрифты, которые легко читаются. Позаботьтесь о том, чтобы текст не «резал» глаз своим оформлением, цветом, текстурой и другими характеристиками. Так, например, не стоит писать красным цветом на синем фоне. Юзабилити сайта и баннера на нём сильно влияет на поведение посетителей на ресурсе.
  9. Помните, интерактивный баннер html5 порой выглядит более презентабельно, чем статичное изображение с текстом. Поэтому постарайтесь, чтобы ваш рекламный блок был не только красивым, но и оформленным с учётом современных тенденций. Чтобы раскрыть все преимущества магазина с широким ассортиментом можно использовать динамический баннер. Пример такого креатива – слайдер с  популярными товарами.

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

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

Следующая статья: « Почему не работает реклама в Яндекс.Директ: ищем причины и исправляем ошибки

Содержание

  • Что такое баннер и как он работает
  • Классификация рекламных баннеров
  • Размещение баннеров
  • Способы создания баннеров самостоятельно
  • Рекомендации по созданию наиболее эффективных баннеров

Оцените статью:

Средняя оценка: 4. 5 Количество оценок: 2623

Понравилась статья? Поделитесь ей:

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

Закажите презентацию с нашим экспертом. Он просканирует состояние вашего маркетинга, продаж и даст реальные рекомендации по её улучшению и повышению продаж с помощью решений от ROMI center.

Запланировать презентацию сервиса

Попробуйте наши сервисы:

  • Импорт рекламных расходов и доходов с продаж в Google Analytics

    Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

    Попробовать бесплатно

  • Импорт рекламных расходов и доходов с продаж в Яндекс Метрику

    Настройте сквозную аналитику в Яндекс. Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

    Попробовать бесплатно

  • Система сквозной аналитики для вашего бизнеса от ROMI center

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

    Попробовать бесплатно

  • Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

    Подробнее → Попробовать бесплатно

  • Сквозная аналитика для Яндекс. Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

    Подробнее → Попробовать бесплатно

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

    Подробнее → Попробовать бесплатно

Как сделать рекламный баннер, который конвертит — RichAds Blog

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

Специально для такой ситуации, мы собрали в одном месте тренды и полезные сервисы для создания эффективного баннера в 2021.

А в конце статьи, возможно, вы найдете то, что давно искали — новый рекламный формат для продвижения. Поехали!

Главные тренды интернет-маркетинга в 2021

Повсеместная изоляция 2020 вынудила людей искать развлечения в интернете. Параллельно возросло общее время, которое пользователи проводили в сети. За год даже бабушки научились заказывать продукты через интернет. Стоит ли говорить, что активное использование digital-технологий в 2021 только возрастет?

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

Если кратко, то миром правит видео-формат и простота подачи, а потенциальный покупатель часто держит в руке смартфон и взаимодействует с рекламой в основном через него.

Тренд №1. Мобильная реклама рулит рынком

В январе 2021 насчитали 4,66 миллиарда активных пользователей интернета, из них 4,32 миллиарда пользуются мобильными девайсами.

Мировая статистика по количеству активных пользователей интернета в январе 2021

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

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

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

Тренд №2. Видео, больше видео

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

Видео можно снимать самостоятельно. Простая видео реклама в Инстаграм только подтверждает это.

Сделайте ролик максимально жизненным. Люди любят истории. Так расскажите им историю, в которой они узнают себя или захотят оказаться на месте главного героя!

Помните, что пользователь готов отдать вам не более 5 секунд своего времени, если интерес не появится сразу, рекламу не станут досматривать.

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

Тренд №3. Реклама в сториз

Обратите внимание на формат сториз в Инстаграм и формат коротких роликов в Тик-Ток. Не зря Facebook и Youtube добавили сториз в свой интерфейс. Самое время начать ими активно пользоваться.

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

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

Пример рекламы в сториз от Ozon

Тренд №4. Влияние инфлюэнсеров и микроинфлюэнсеров

Раньше люди доверяли “сарафанному радио”, теперь слушают топовых блогеров и микроинфлюенсеров (людей с небольшим количеством подписчиков). 

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

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

Тренд №5. Проще, еще проще

В 2021 главными правилами для создания конвертящего баннера стали простота, немногословность и “воздух”.  

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

Простота совсем не подразумевает скуку. Чаще это об использовании нескольких цветов и одного главного объекта. Главный тренд для текста: чем проще, тем лучше.  

Как сделать эффективный баннер?

Чтобы сделать эффективный баннер, нужно пройти путь из 5 главных пунктов. От них во многом зависит успех вашей рекламной кампании. При этом сам пункт по созданию баннера стоит едва ли не на последнем месте.

Путь создания кликабельных рекламных баннеров

  • Выявить цель рекламной кампании

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

От конечной цели будет зависеть его текст и наличие или отсутствие CTA (call to action) кнопок.

  • Описать портрет потенциальной аудитории

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

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

  • Написать несколько вариантов текста

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

К примеру, «зарегистрируйся по телефону», «оставь свой email и мы отправим каталог», «бесплатная консультация по записи в директ».

Если вы хотите показать выгоду, не стоит писать “скидки до 70%”, лучше покажите старую и новую цену. Так сразу станет понятно, какую выгоду получит клиент.

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

  • Выбрать картинки для баннера и определиться с цветовой гаммой 

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

За конкурентами можно подглядывать с помощью специальных сервисов. К примеру, в Ad Library можно посмотреть, что запускают конкуренты в Facebook. 

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

  • Провести A/B тест разных баннеров

A/B тест (он же сплит-тест) – это эксперимент, во время которого пользователю показывают разные варианты рекламных баннеров, а затем по реакции оценивают их успешность.

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

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

Где взять бесплатные картинки для баннера?

Сразу отбросим вариант с поиском бесплатных картинок в Гугл. Все-таки закон об авторском праве никто не отменял. 

Самый доступный способ сделать эффективный баннер — это найти готовые фото на фотостоке. Не нужно организовывать фотосъемку и платить фотографу.  

Фотостоки бывают бесплатными и платными. Нас, конечно же, интересуют бесплатные варианты. И в случае со стоками «бесплатный» совсем не означает отсутствие выбора.

Вот 5 фотостоков, где можно поискать подходящие картинки:

  1. Pixabay — 1.9 млн картинок + музыка и видео;
  2. FreeStockImages — более 100 000 бесплатных фото;
  3. Picjumbo — более 20 категорий с бесплатными фото;
  4. All The Free Stock — источник фото, иконок, звуков и видео;
  5. Stock Up — 25,000+ бесплатных фото.

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

Примеры бесплатных фото из фотостока Pixabay

Какие инструменты использовать для дизайна баннера

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

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

5 лучших инструментов для создания кликабельных баннеров

1. Canva

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

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

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

Создатели не забыли о формате видео, с ним тоже можно работать на платформе. 

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

2. Colorcinch

Colorcinch — редактор, который помогает редактировать фотографии он-лайн. 

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

К редактору добавлен бесплатный фотобанк с изображениями. Частью функционала можно пользоваться бесплатно.

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

3. Clickmajic

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

Классная возможность выделить одного главного героя /объект, если на фото их несколько или фон вам мешает создать красивый баннер. 

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

Из минусов: бесплатно доступны только 3 картинки и придется зарегистрироваться.

4. Infogram

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

Инфографика — незаменимая вещь для интернет-маркетолога. Ее можно разместить на баннере или использовать на лендинге. Такие материалы повышают доверие пользователя.

В бесплатной версии вы получаете доступ к 37 типам инфографики и 13 видам карт. Кроме этого на сервисе можно анимировать объекты и создавать посты и сториз для соцсетей.

5. TinyPNG

TinyPNG — сервис, который помогает уменьшает вес ваших баннеров. Работает с двумя форматами PNG и Jpeg. Анимированные PNG тоже получится сжать.

Инструмент справляется с задачей максимально быстро. Работает бесплатно.

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

Пуш-уведомления — лекарство от баннерной слепоты

Главная проблема, которая преследует любые современные баннеры — это баннерная слепота. Каким бы классным не был макет и его расположение, юзеры привыкли к рекламе и избегают ее на странице.

Пример, на котором можно увидеть, как юзер изучает страницу (хитмеп)

Конечно, можно делать визуал еще ярче и заметнее, но это не всегда помогает. А вот новый рекламный формат может помочь. Особенно, если его видимость равна 100%, и это не пустые обещания маркетологов. 

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

Как выглядит хитмеп с баннером и пуш-уведомлением

Как создать конвертящий баннер для пушей

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

Как выглядит пуш-уведомление на компьютере и мобильном

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

Здесь мы собрали более 300 лучших иконок по 8 топовым вертикалям. Их можно скачать бесплатно.

Главное изображение появляется только на компьютере. На нем можно разместить один крупный или два небольших объекта. Картинки со множеством мелких деталей работают не на пользу конверсиям.

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

Сделайте дополнительный текст достаточно крупным, чтобы его было легко прочитать. Используйте не более 5 слов.

Текст пуша ограничен 75 символами: максимальная длина заголовка — 30 символов, а описания — 45. Постарайтесь кратко и понятно сформулировать свой оффер. 

Формат уведомления позволяет обращаться к потенциальному покупателю, используя местоимения ты/вы, и это будет уместно.

Хотите увеличить конверсию — добавьте в текст эмодзи! Они привлекают внимание к пуш-уведомлению и увеличивают конверсию до +10%.

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

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

Выбирайте перспективные рекламные офферы и лейте в плюс на трафике RichAds.

Запустить оффер на трафике от RichAds

RichAds это —
✅ пуш и попс-трафик,
✅ CPC от $0.003 и CPM от $0,3,
✅ лояльная и быстрая модерация,
✅ помощь персонального менеджера,
✅ автоматическая оптимизация при помощи Target CPA,
✅ большие объемы доступного трафика в более чем 200 гео.

Как сделать баннер для email рассылки

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

  • Зачем создавать баннер для email рассылки
  • Как сделать баннер, который работает
  • Использовать яркий визуал
  • Добавить суть предложения
  • Добавить CTA
  • Разместить баннер в начале письма
  • Попробовать анимацию
  • Как сделать баннер в Photoshop
  • Что стоит запомнить

Это рассылка разработчиков CRM-системы «Мегаплан». На какую деталь вы посмотрите в первую очередь?

Письмо от «Мегаплана»

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

На баннере лежат функции:

  • Привлечь внимание. Люди не любят выискивать главные мысли в тексте. Если вы не заинтересуете их сразу, они могут закрыть письмо не читая. Баннер с текстом становится одновременно заголовком и иллюстрацией и вдвойне привлекает взгляд.
  • Задать тон послания. Серьезное или шутливое письмо, рекламное или информационное — баннер рассказывает, какое настроение и цель у этой рассылки.
  • Ассоциировать материал с брендом. Фирменные цвета, логотип — используйте их, и ваше письмо будет автоматически ассоциироваться с брендом, даже если его название не упоминается в тексте.
  • Быть самостоятельной единицей. Например, вы делаете рассылку с подборкой статей и хотите пригласить подписчиков на вебинар по той же теме. Добавьте в конец письма баннер с текстом-приглашением и CTA кнопкой на регистрацию.

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

Использовать яркий визуал

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

Письмо от портала вакансий Rabota.ru. Фон картинки красный, как логотип портала. Интересная деталь — письмо предлагает вакансии от Тинькофф-банка, а в руках у девушки фирменная кружка Тинькофф:

Письмо с вакансиями Тинькофф-банка от портала Rabota.ru

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

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

  • продублируйте информацию с баннера в тексте письма;
  • пропишите alt текст к баннеру, чтобы на его месте был текст с описанием, если картинка не загрузилась.

Письмо от интернет-магазина La Redoute. Сразу понятно, что тема письма — распродажа, и видно, на какие скидки можно рассчитывать:

Письмо с баннером от интернет-магазина La Redoute

Добавить CTA

Добавьте CTA кнопку на сам баннер или около него. Как и в случае с текстом, помните — есть вероятность, что ваша картинка не загрузится в письме. Если добавляете кнопку на баннер, продублируйте ее гиперссылкой в тексте или поставьте кнопку под баннер.

Письмо от команды сервиса Trello. Баннер в начале, CTA кнопка после текстового анонса:

Письмо от сервиса Trello

Баннер в письме должен привлекать внимание, значит, лучше поставить его вначале. Вот письмо от зоомагазина «4 лапы», баннер в самом начале рассказывает о главном предложении рассылки:

Письмо от зоомагазина «4 лапы»

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

В этом письме от SendPulse мы собрали последние статьи на блоге и анонсы мероприятий. К каждому материалу — свой баннер:

Письмо с несколькими баннерами от SendPulse

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

Попробовать анимацию

Анимированные баннеры интересно смотрятся в письмах. Например, вот письмо от онлайн-университета «Нетология» с гифкой в качестве баннера:

Письмо с гифкой от «Нетологии»

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

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

Виталий покажет, как сделать вот такой баннер:

Пример баннера от дизайнера SendPulse

1. Создаем файл нужного размера

Запускаем Photoshop, нажимаем ctrl+N (здесь и дальше в сочетаниях указана клавиша ctrl, если вы работаете на MacOS, вместо нее жмите cmd). Открывается меню создания нового документа, где нужно проставить размеры. Ширина письма будет 600 px, такой же ширины сделаем баннер: в поле «ширина» указываем значение 600, в поле «высота» 300 и жмем «ОК»:

Настройка размеров баннера

2. Меняем цвет фона

На панели инструментов слева выбираем цвет — нажимаем на верхний из цветных квадратов и назначаем нужный цвет. Я выбрал #485CE5. Нажимаем alt+backspace, фон окрашивается в нужный цвет.

Изменение цвета баннера

3. Добавляем текст

Создать текстовое поле можно с помощью инструмента «Текст» или нажав клавишу «Т» на клавиатуре. Щелкаем в нужном месте заготовки, набираем текст. Цвет текста можно либо выбрать заранее в том же меню, где указывали цвет фона, либо выделить уже набранный текст и изменить цвет в окне редактирования текста:

Редактирование текста на баннере

4. Создаем кнопку

На панели инструментов выбираем инструмент «Прямоугольник», щелкаем в нужном месте, выбираем в появившемся окне размеры, а затем цвет кнопки. Наша кнопка будет 42 на 151 px, желтого цвета #FFF200. Теперь переименуем слой с кнопкой, чтобы не потерять его среди других: в панели слоев (справа внизу) дважды щелкаем на слой «Прямоугольник 1» и меняем имя. Я назвал слой button_bg, то есть бэкграунд кнопки.

Добавление кнопки

5. Добавляем тень для кнопки

Дважды щелкаем на слой кнопки правее от названия. В открывшемся окне выбираем «Тень» и ставим такие параметры: режим наложения «Умножение», непрозрачность 20%, угол 90, смещение 0, размер 20. Можете поэкспериментировать с этими параметрами и посмотреть, что получится. Остальные параметры я оставил как есть:

Добавление тени для кнопки

6. Скруглим углы кнопки

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

Скругление краев кнопки

7. Добавляем текст на кнопку

Используем уже знакомый инструмент «Текст», как в пункте 3. Я выбрал для него цвет фона, #485CE5. Теперь объединим кнопку и надпись на ней, чтобы работать с кнопкой как единым объектом. Эта функция называется «Сгруппировать».

Для этого в панели «Слои» выделяем бэкграунд кнопки и текст на ней — для этого зажимаем ctrl и поочередно щелкаем на оба слоя. Выделив нужные слои, нажимаем комбинацию клавиш ctrl+G — создается группа, которую мы переименуем как «Кнопка», чтобы она не потерялась в новых слоях. Вот так будет выглядеть группа:

Группирование текста и кнопки

8. Вставляем картинку в документ

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

Добавление картинки на баннер

9. Создаем слой с тенью

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

Создание дополнительного слоя для тени

10. Создаем слой с человеком

Создаем дубликат слоя с фотографией, выбираем для дубликата режим наложения «Обычное». Теперь с помощью маски выделим фигуру с фона. Для этого нажимаем alt+ctrl+R или в верхнем меню выбираем «Выделение > Выделение с маской». Курсором выделяем только то, что нам нужно оставить, и нажимаем «ОК»:

Отделение фигуры от фона

Если после нажатия на «ОК» у вас остался фон, а вокруг выделенной фигуры появилась рамка, то нажмите кнопку «Создать маску» на панели справа внизу:

Создание маски в Photoshop

Готово — мы убрали фон у картинки, оставив тень:

Картинка с тенью на баннере

11. Создаем декоративные элементы

Сделаем абстрактную фигуру, чтобы разнообразить фон и сбалансировать баннер. Создаем новый слой, на нем — прямоугольник, как в шаге 4. Берем на панели инструментов слева инструмент «Перо» и с зажатой клавишей alt растягиваем углы, получается вот так:

Добавление фигуры на баннер

Слой с созданной фигурой перетягиваем в слоях на слой ниже, чем человек:

Перемещение слоя с фигурой

12. Добавим градиент на фигуру

Дважды щелкаем на слой с абстрактной фигурой правее названия слоя. В открывшемся меню выбираем вкладку «Наложение градиента», нажимаем на цветной прямоугольник в поле «Градиент». Откроется дополнительное окно, где можно выбрать цвета градиента, для этого нажмите на ползунки под цветной линией, затем на цветной квадрат в поле «Цвет». Я выбрал #3B3879, переходящий в #00C4D5:

Добавление градиента на фигуру

13. Добавим эффект освещенности на фигуру

Переходим во вкладку «Внутреннее сияние» и задаем параметры: непрозрачность 30, стягивание 0, размер 90, диапазон 50, колебание 0. Вы можете выбрать любые параметры и смотреть, что получится:

Настройка параметров во вкладке «Внутреннее сияние»

Вот такой эффект получился у меня:

Эффект сияния на фигуре

14. Добавим вторую фигуру на фон

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

Готовый баннер

Если не хотите устанавливать Photoshop, попробуйте создать баннер онлайн. Для этого подойдут сервисы Canva, Infogram и другие подобные.

Первое, на что люди обратят внимание внутри письма — картинка. При этом баннер не только привлекает внимание, но также:

  • задает тон письма;
  • ассоциирует письмо с брендом;
  • работает как самостоятельный блок в письме.

Чтобы сделать работающий баннер, нужно:

  • подобрать яркую картинку-основу, которая подходит бренду по стилю;
  • разместить на баннере суть предложения в нескольких словах;
  • добавить CTA кнопку на баннер или рядом с ним;
  • прописать alt текст для баннера при верстке письма;
  • поставить баннер в начале письма, при необходимости использовать несколько баннеров для разных блоков.

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

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

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


Как правильно создать дизайн для баннера наружной рекламы

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

Ниже приведены правила для создания рабочего дизайна баннера наружной рекламы

1. Принцип пустого пространства.

Пространство на баннере не должно быть полностью забито текстом. Текст и картинки независимо от размера баннера должны занимать не больше 30-40% всей площади. Остальное пространство заполняется не привлекающим внимание фоном.

   

2.  Один баннер- одно сообщение.

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

   

3. Один баннер- одна картинка.

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

   

4. Чем короче, тем лучше.

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

   

5. Не более одного контактного номера.

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

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

   

6. Баннер-лицо компании.

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

   

7. Грамотность-залог успеха.

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

   

8. Баннер должен быть читаемым.

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

9. Без дизайнера не обойтись.

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

Советы для правильного оформления рекламных баннеров

· Выбрать правильный цвет.

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

    

· Работать с контрастом.

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

· Реальная нереальность.

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


· Креатив.

Креатива хорошо в меру. Пытаясь привлечь внимание потенциального клиента не перестарайтесь. Потому что это может испортить всю рекламу.

   

Следуя этим правилам, вы сможете получить максимально эффективную рекламную компанию.

 

Поделиться в социальных сетях:

Как сделать баннер | Шаблоны, инструменты и советы

Создать баннер для своего веб-сайта, рекламы или страницы в социальной сети сложно, верно? Ни за что! Мы покажем вам, как сделать баннер всего за несколько шагов. Вам не нужно тратить следующие несколько часов (см.: дней), пытаясь сделать баннер с помощью Microsoft Word или другого сложного процесса. Вместо этого вы можете сделать его быстро и стильно с помощью одного из профессионально разработанных шаблонов баннеров PicMonkey (с предварительно заданными размерами) или сделать его своими руками на чистом холсте и нанести свой уникальный дизайн на дизайн. Вы делаете вы.

Вот как.


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

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

  3. Введите сообщение на своем баннере с помощью простых в использовании текстовых инструментов.

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

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

1. Откройте шаблон баннера или пустой холст в PicMonkey

Чтобы создать баннер на основе шаблона дизайна, просто откройте шаблоны в PicMonkey и найдите или найдите тип баннера, который вы хотите настроить.

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

У PicMonkey есть все виды баннеров на выбор, в том числе:

  • Заголовки в Твиттере (1500 x 500 пикселей)

  • Etsy Shop Big Banners (3360 x 840 PX)

  • Etsy Shop Mini Banners (1200 x 160 Px)

  • Cope Facebook Events (1200 x 160 Px)

  • . 628 PX)

  • Ads Facebook (1200 x 628 PX)

  • Обложки на странице Facebook (1640 x 924 PX)

  • Ads Ads Ads Ads для лидеров (728 x 90 px)

  • 99

    . ; 320 x 100 пикселей)

  • Баннеры YouTube (2560 x 1440 пикселей)

Чтобы создать баннер с нуля, просто нажмите Просмотреть все поля на главной странице PicMonkey. Выберите размер холста или используйте поля размеров, чтобы создать свой собственный.

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

2. Добавьте графику или изображения к вашему баннеру

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

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

Хотите добавить или заменить фотографии? Просто нажмите на вкладку «Фото и видео» слева. Загрузите свои собственные фотографии или воспользуйтесь услугами из нашей коллекции.


3. Добавьте дизайнерские шрифты и текст к своему баннерному сообщению

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

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

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

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


1. Говорите кратко

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

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

2. Создайте визуальную иерархию

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

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

3. Поймите, как цвета влияют на восприятие

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

4. Попробуйте разные образы

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

О том, как попробовать разные баннеры — наш инструмент Smart Resize позволяет невероятно легко изменять размеры ваших дизайнов. Используйте его, чтобы увидеть, как дизайн выглядит как баннер Facebook, Etsy и YouTube, если хотите. В отличие от стандартного инструмента изменения размера, «умная» часть этой функции заключается в том, что она может перестраивать элементы дизайна таким образом, чтобы0103 ничего не искажается при увеличении или уменьшении размера.


Вот и все. Краткое изложение баннера. Что нас ждет в будущем? Больше баннеров? Больше работы в социальных сетях? Если вы погружаетесь в цифровой маркетинг для своего бизнеса, обязательно загляните в нашу бизнес-подписку. Это оставит вас со всеми инструментами, которые вам нужны, чтобы отмечать деловые задачи, как если бы они были пунктами в списке покупок!

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

1. Как сделать баннер в Word

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

Вы можете сделать баннер по вашему выбору с помощью Microsoft Word. Если на вашем компьютере установлен Microsoft Office, создание собственного баннера займет всего несколько минут. Относительно как сделать баннер в Word , просто выполните несколько простых шагов, как описано ниже.

Шаг 1: Установите Microsoft Office и откройте Microsoft Word

Перед созданием баннера вам необходимо зайти в Microsoft Office, установить его на свой компьютер и нажать на Microsoft Word. Теперь нажмите на вкладку «Файл», а затем на « New ».

Шаг 2. Выберите подходящий шаблон баннера

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

Шаг 3. Настройка баннера

Откройте нужный шаблон и нажмите кнопку « Создать ». Это позволит вам настроить баннер в соответствии с вашими потребностями. Или просто создайте баннер с самого начала и найдите несколько изображений и символов, чтобы сделать баннер более привлекательным.

Или просто создайте баннер с самого начала и найдите несколько изображений и символов, чтобы сделать баннер более привлекательным. Перейдите в раздел Layout , выберите Margins и выберите Custom Margin, чтобы настроить размер вашего баннера.

Шаг 4. Нажмите кнопку-заполнитель для редактирования

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

Шаг 5: Окончательное сохранение

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

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

1.1 Преимущества создания баннера в Word

Баннерная реклама или простые баннеры основаны на изображениях, а не только на текстовых плакатах, демонстрирующих внутреннюю информацию о вас, вашей компании или видении, которым вы хотите поделиться. Есть несколько преимуществ создания баннера в Microsoft Word , например:

  • Microsoft Word имеет доступные шаблоны баннеров в категории «Баннер», что позволяет вам создавать баннеры по вашему выбору.
  • MS Word — популярная программа для обработки текстов, но она позволяет импортировать мультимедийные данные для оформления баннера.
  • Дизайн баннеров можно легко скопировать на флешку, которая служит внешней памятью.
1.2 Недостатки создания баннера в Word

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

  • Вы не можете легко создавать различные типы диаграмм, такие как блок-схемы, диаграммы Венна, графики и т. д. Если вам нужны такие диаграммы в вашем баннере, вам придется использовать другие инструменты.
  • MS Word довольно дорог по сравнению с другими инструментами, которые предлагают больше возможностей.
  • Некоторые функции в MS Word не всегда интуитивно понятны, и может потребоваться некоторое время, чтобы добиться желаемого эффекта или форматирования баннера.
1.3 Советы по созданию хорошего баннера в Word

Есть определенные советы, если следовать им, вы улучшите свой опыт создания флаеров в Google Docs, например:

  • Всегда выбирайте шаблон баннера, соответствующий вашему видению. С вашей стороны потребуется меньше настроек.
  • Убедитесь, что вы выбрали правильный шрифт и цвета фона. Если вы используете внешние шрифты, экспортируйте баннер в формате PDF. Это гарантирует, что вы не потеряете тип шрифта.
  • Изучите команды MS Word, прежде чем приступить к созданию баннера, так как это сэкономит вам много времени на перетасовку ваших рисунков.

2. Как сделать баннер онлайн проще

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

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

Шаг 1: Войдите в EdrawMax Online

Прежде всего, вам необходимо войти в свою учетную запись EdrawMax Online. Если вы раньше не использовали EdrawMax Online, вы можете зарегистрировать бесплатную учетную запись со своим адресом электронной почты. Тогда вы можете использовать EdrawMax Online бесплатно.

Источник: EdrawMax Online

Шаг 2. Найдите шаблоны баннеров

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

Источник: EdrawMax Online

Шаг 3. Выберите символы баннера

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

Щелкните параметр Библиотека символов в верхней левой части окна редактора. Далее откроется диалоговое окно. В диалоговом окне перейдите в меню Design . Появится раскрывающееся меню для категорий бизнес-символов. Затем отметьте баннер вкладку из выпадающего меню. Затем нажмите кнопку OK , чтобы импортировать символы баннера в окно редактора.

Или вы можете искать символы баннера в библиотеке символов . Затем выберите эту опцию, она появится на левой боковой панели инструментов.

Источник: EdrawMax Online

Шаг 4. Добавьте дополнительные сведения

Как только символы будут импортированы в окно редактора, вы можете перетащить символы баннера в редактор, чтобы создать с их помощью диаграмму баннера. Чтобы отредактировать символ, щелкните в полях и введите свой контент. Точно так же вы можете сделать коробки более привлекательными, используя Fill , Line и Shadow варианты.

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

Кроме того, вы также можете изменить свойства линии и тени, чтобы сделать их в соответствии с вашими предпочтениями. С EdrawMax Online доступные инструменты редактирования бесконечны, чтобы гарантировать, что файл, который вы хотите, — это то, что вы имели в виду!

Источник: EdrawMax Online

Шаг 5. Экспорт баннера в формате Word

Нажмите File в верхнем левом углу, из выпадающего меню выберите Export . В меню «Экспорт» выберите «Экспорт в Word (.docx) », и ваша баннерная диаграмма Edraw будет сохранена в виде файла PowerPoint на вашем компьютере. Вы также можете экспортировать свои файлы в облачные сервисы, такие как Dropbox, в EdrawMax Online.

Таким образом, сделать баннер в EdrawMax Online легко, но вы все еще задаетесь вопросом, как его сделать, просто ознакомьтесь с этим руководством по созданию баннеров, чтобы упростить его создание.

Источник: EdrawMax Online

2.1 Преимущества создания баннера в EdrawMax Online

По сравнению с Word, создание баннера в EdrawMax Online имеет много преимуществ:

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

Несмотря на некоторые преимущества использования EdrawMax Online в качестве инструмента для создания баннера , определенные ограничения влияют на общее качество проекта. Например:

  • EdrawMax Online содержит ограниченное количество символов, связанных с баннерами. Тем не менее, вам будет полезно создавать свои собственные символы для баннеров, вы можете создавать символы из EdrawMax или импортировать понравившиеся символы и сохранять их в своих библиотеках символов.
2.3 Советы по созданию баннера в EdrawMax Online

Создание баннера в EdrawMax Online может быть проще, чем создание в Word, поскольку есть ресурсы и мощная функция экспорта.

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

3. Шаблоны баннеров Word

Ниже приведены диаграммы баннеров в шаблонах Word, вы можете обратиться к ним или даже использовать их сразу же с легкостью. Если эти 3 шаблона не могут вас удовлетворить, есть еще шаблоны баннеров для справки.

Шаблон рекламного баннера

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

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

Источник: EdrawMax Online

Шаблон баннера Youtube

Если вы стремитесь стать влиятельным лицом на YouTube или у кого уже есть канал на YouTube, вы должны знать о важности создания эстетически приятного баннера на YouTube. Выше приведен пример того, как должен выглядеть баннер YouTube. С EdrawMax Online вы можете брать ссылки с такого баннера YouTube или создавать свой баннер, импортируя свое изображение или контент.

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

Источник: EdrawMax Online

Шаблон бизнес-баннера

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

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

Источник: EdrawMax Online

4. Бесплатный онлайн-конструктор баннеров

EdrawMax Online — это бесплатный онлайн-конструктор баннеров, который позволяет создавать баннеры и более 280 типов диаграмм на одной панели. Вдохновитесь бесплатными шаблонами баннеров и начните настройку. Этот универсальный конструктор баннеров содержит более 26 000 различных символов, которые вы можете включить в свой дизайн баннера!

  • В EdrawMax Online есть тысячи элементов дизайна, которые помогут вам создать более 280 различных типов диаграмм.
  • Вы также можете просмотреть широкий спектр шаблонов в Сообществе шаблонов и легко настроить их в соответствии с вашими требованиями.
  • EdrawMax Online — это бесплатный кроссплатформенный инструмент, к которому вы можете получить доступ в любом браузере и использовать без какого-либо предварительного опыта проектирования.
  • Существуют специальные функции для настройки ваших диаграмм и их экспорта в различные форматы, такие как PNG, PDF, TIFF, SVG и другие.

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

EdrawMax Онлайн

Создайте более 280 типов диаграмм онлайн

Доступ к диаграммам в любом месте и в любое время

Все на рабочем столе + Сообщество шаблонов

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

Интеграция личного облака и Dropbox

ПОПРОБУЙТЕ ОНЛАЙН

EdrawMax Desktop

Создайте более 280 типов диаграмм

Поддержка Windows, Mac, Linux

Полный доступ к ресурсам и шаблонам

Локальное программное обеспечение для бизнеса

Безопасность данных корпоративного уровня

СКАЧАТЬ СКАЧАТЬ СКАЧАТЬ

СКАЧАТЬ

5.

Основные выводы

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

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

Попробуйте EdrawMax онлайн

Как сделать баннер? Как создать баннер в Photoshop и других инструментах?

Основные части баннера

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

Как создать баннер для сети аудитории Facebook (советы профессионалов включены)

3 способа оформления баннера, 1 умный подход

#1 Аутсорсинг профессиональному дизайнеру

#2 Самостоятельное создание баннера с помощью различных программ для графического дизайна

Фотошоп

MS Paint

Microsoft PowerPoint

Microsoft Word

Google веб-дизайнер

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

# 3 Использование разумного подхода — работа с единой платформой для всех ваших потребностей в дизайне

4 совета по дизайну баннеров от профессионального дизайнера

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

Основные части баннера

Я полагаю, вы уже знаете, что такое баннер, но если нет, напомню, что он состоит из основных основных частей:

  • Фоновое изображение — это привлекает внимание вашей аудитории и является их первым впечатление о вашем бренде
  • Логотип – помогает вашей аудитории распознать ваш бренд как уникальный
  • Текст/слоган – информирует их о вашей рекламной кампании, включая подробную информацию о вашем продукте. Лучше сделать эту часть короткой и сладкой
  • Призыв к действию — самая важная часть вашего баннера. Это то, что побуждает пользователей нажимать на ваше объявление.

Чтобы ваше объявление выглядело максимально привлекательно, давайте быстро поговорим о различных размерах объявлений, характеристиках объявлений и способах создания баннеров без проблем с дизайном. Я хотел бы начать с описания типов рекламных баннеров, рекламных форматов и наиболее популярных размеров баннеров, используемых в известных рекламных сетях, таких как Google и Facebook.

Есть 3 вида баннеров: мобильные, настольные и планшетные. По данным Statista, сегодня в мире насчитывается 3,5 миллиарда (на четверку!) пользователей смартфонов. Примерно 45% населения мира владеют смартфонами, которые они используют для серфинга в Интернете в течение бесчисленных часов каждый день. В некоторых странах с развивающейся экономикой этот процент значительно выше и может достигать 9 процентов.0-93%!

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

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

Хорошо, теперь давайте посмотрим размеры мобильных объявлений, совместимых с Google: 300×250, 320×50, 320×100, 250×250, 200×200.

Выбор размера баннера для проведения эффективной рекламной кампании иногда может сбивать с толку. Например, если вы хотите показать свой продукт (стиль, изображение, детали) и сосредоточиться в основном на визуальной части, используйте размер баннера 300×250 пикселей. Если ваша рекламная цель состоит в том, чтобы получить как можно больше кликов и привлечь пользователей на определенную целевую страницу, где вы показываете все свои продукты, используйте размер баннера 320 × 100 пикселей. Этот размер обеспечивает более высокий CTR по сравнению с традиционным размером баннера 320 × 50 пикселей. Важное примечание: независимо от размеров все рекламные баннеры должны иметь размер файла не более 150 КБ.

Кроме того, вы должны убедиться, что ваши окончательные проекты сохранены в правильном формате. Например, Google принимает файлы в форматах JPEG, SWF, PNG и GIF. Наилучший вариант сжатия дает вам файл, сохраненный в формате JPEG.

Ниже приведены примеры мобильных баннеров 320×100px и 300×250px:

Мобильная реклама в формате jpeg

Если вы спешите, предварительно разработанные и готовые к использованию шаблоны баннеров — лучший вариант для быстрой настройки рекламная кампания через Google. Огромный выбор красиво оформленных и привлекательных шаблонов можно найти здесь. Просто выберите нужный размер и формат объявления в разделе «Показ», и все готово. Кроме того, вы можете создать рекламный баннер с нуля, используя свои собственные фоновые изображения, или изучить огромные библиотеки фотографий с таких сайтов, как Unsplash, здесь. Этот краткий учебник покажет вам, как сделать это за считанные минуты.

Учебное пособие: Как создать анимированный баннер в приложении Viewst Design

Как создать баннер для сети аудитории Facebook (включая профессиональные советы)

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

Facebook поддерживает следующие форматы рекламы и назначения: 

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

  • Совет № 1. Год назад Facebook объявил, что новостная лента будет оптимизирована за счет высококачественных и оригинальных видео. например, 30 секунд x 3 петли = 90 секунд, 16 секунд x 6 петель = 96 секунд).
  • Совет № 3. Чем короче видео, тем больше просмотров. Больше людей досматривают до конца видео продолжительностью менее 15 секунд.

Например, Starbucks в основном публикует видеоролики, демонстрирующие их продукты, продолжительностью менее 15 секунд. Видео продолжительностью от 5 до 10 секунд были более эффективными и давали в среднем в 2,4 раза больше просмотров и в 2 раза больше взаимодействий, чем видео продолжительностью более 10 секунд. Например, Almond Honey Flat White  (0:05 сек.) набрал 280 тыс. просмотров и 6 000 взаимодействий.сек.) набрал 577 тыс. просмотров и 8,4 тыс. взаимодействий, в то время как Ice Cloud Michiato (0:13 сек.) посмотрели только 175 тыс. человек и получили всего 2,8 тыс. взаимодействий.

  • Совет № 4 (Pro): используйте Facebook Live. Это лучший способ взаимодействия со зрителями в режиме реального времени. Используйте свое время, чтобы ответить на вопросы ваших зрителей и посмотреть на их живую реакцию. Самое главное, Facebook Live дает в 6 раз больше вовлеченности, чем обычное видео.

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

  • Совет № 1. Используйте изображения ярких цветов и избегайте изображений с большим количеством мелких деталей или текста.
  • Совет № 2. Будьте проще. Поместите четкое сообщение, которое побуждает людей к действию (например, кнопка призыва к действию должна содержать: « Купить сейчас », « Попробовать сейчас », « Узнать больше », « Зарегистрироваться », так далее.). Сделайте ваше сообщение коротким и действенным.

Ниже приведены примеры с правильным дизайном СТА:

Баннеры с правильным дизайном СТА
  • Совет № 3. Счастливые люди, которые улыбаются вам и смотрят прямо на пользователя, помогут убедить людей покупать товары или услуги и вызвать чувство счастья. Образ счастливой женщины можно использовать для любого типа продукта, который вам нужно продвигать: от питания и хорошего самочувствия до нового платья или обуви и даже финансовых учреждений, где он может быть связан с идеей освобождения от финансового бремени. Вы когда-нибудь замечали, как Coca-Cola использует счастье в своих рекламных кампаниях? Один из самых успешных попробуй на вкус рекламные кампании с лозунгом «Открытое счастье» — лучший тому пример.
Coca Cola ‘ попробуй это чувство ‘ рекламная кампания Шаблоны баннеров со счастливыми лицами доступны на viewst.com

3. Коллекция: этот формат рекламы идеально подходит для мгновенного привлечения клиентов. Объявления с коллекциями могут стимулировать покупательские импульсы, отображая товары из каталога продуктов и позволяя пользователям просматривать их в одном месте. Это применимо, когда вы хотите продемонстрировать 4 или более продуктов. Вы также можете добавить видео для своей коллекции, чтобы предоставить больше возможностей вашим потенциальным клиентам.

4. Карусель: продемонстрируйте до 10 изображений или видео в одном объявлении, чтобы побудить пользователей прокручивать слайды, демонстрирующие множество различных продуктов.

По данным Facebook, карусельные объявления дают на 30-50% более низкую цену за конверсию, чем другие типы объявлений, и на 20-30% более низкую цену за клик.

  • Совет № 1. Если вы хотите сделать свою карусельную рекламу более привлекательной и увлекательной, зайдите на viewst.com и используйте наши красиво оформленные и превосходно анимированные шаблоны. Эти рекламные баннеры побудят ваших потенциальных клиентов узнать больше о вашем бренде. Это очень легко сделать; быстро загружайте изображения своих продуктов с помощью простого перетаскивания и настраивайте наши готовые к использованию баннеры с вашими собственными сообщениями. Начните свое волшебство здесь

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

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

Наконец, я хотел бы поделиться самым важным #ProTip, применимым ко всем типам рекламы на Facebook: экспериментируйте и проводите A/B-тестирование. Чрезвычайно полезно знать все типы рекламных форматов, которые вы можете настроить в Facebook Audience Networks, но самое главное — протестировать отдельные изображения, чтобы убедиться, что вы получаете максимально возможную производительность.  

3 способа оформления баннера, 1 умный подход

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

#1 Аутсорсинг профессиональному дизайнеру

Проверьте портфолио дизайнеров, вошедших в шорт-лист, на Behance. Это покажет вам, соответствует ли ваш эстетический вкус конкретному дизайнеру.

Что касается цен, вы можете заплатить всего 15 долларов за профессиональный дизайн баннера на Fiverr, но действительно ли это того стоит? Мы увидим позже ниже.

#2 Самостоятельное создание баннера с помощью различных программ для графического дизайна

Сегодня ваши усилия по созданию рекламы мешают обилию платформ, предлагающих все: от дизайна, анимации, редактирования фотографий до изменения размера веб-баннеров или видеобаннеров. Figma, Adobe Photoshop, Adobe Illustrator, Adobe After Effects, SketchApp, inDesign — это лишь несколько известных платформ, хотя существует множество других.

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

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

Photoshop

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

  1. Переход к файлу > Создать позволяет создать новый документ для работы. Следующим шагом будет выбор «Интернет» и ввод конкретных размеров вашего будущего баннера (300 x 250, 480 x 90 или другие). Нажатие «Создать» должно открыть новое пустое изображение в качестве отправной точки.
  2. В качестве основной цели баннера у вас, вероятно, будет своего рода изображение продукта, которое будет центральным элементом этого баннера. Нажав «Файл» > «Открыть», вы сможете добавить изображения вашего продукта, чтобы взаимодействовать с ними в границах вашего будущего баннера. Рекомендуется файл с прозрачным фоном в формате .png, чтобы вы могли свободно менять цвет фона.
  3. Затем вам нужно будет перейти в «Окно»> «Упорядочить»> «Расположить все по вертикали», чтобы изображение вашего баннера и изображение вашего продукта располагались рядом.
  4. Чтобы переместить изображение вашего продукта на ваш баннер, вы должны использовать инструмент «Перемещение» (кнопка, которая указывает сразу в четырех направлениях, в верхнем левом углу интерфейса). Вкладку с изображением товара можно закрыть после завершения перемещения.
  5. Переход в «Правка» > «Свободное преобразование» позволяет подогнать изображение продукта так, чтобы оно соответствовало пустому шаблону баннера, используя маркеры на границах изображения продукта, а также общую возможность перемещать изображение.
  6. Затем вам нужно будет использовать инструмент Paint Bucket (значок на панели инструментов, который выглядит как ведро, из которого вытекает краска), чтобы изменить цвет фона. Убедитесь, что слой, который вы раскрашиваете, является слоем 1, чтобы это изменение не повлияло на ваше изображение.
  7. После выбора цвета фона пришло время добавить текст к вашему баннеру. Это можно сделать с помощью инструмента «Текст» (большая буква «Т» на панели инструментов), выберите его и щелкните баннер после этого, чтобы получить текстовое поле, которое вы можете заполнить любым текстом, который хотите. Также доступна дополнительная настройка текста, включая шрифты, размеры, цвета и так далее.
  8. Последняя часть нашего относительно простого баннера — это кнопка, которую мы разместим под текстовым полем из предыдущего шага. Прежде всего, необходимо создать прямоугольную кнопку с помощью инструмента «Прямоугольник» (кнопка в виде прямоугольника на панели инструментов). Щелкнув и перетащив прямоугольник, чтобы он соответствовал нужному размеру кнопки, вы также можете выбрать цвет кнопки.
  9. Инструмент Текст был бы полезен в этом случае, так как наша кнопка имеет что-то написанное внутри. Щелкнув прямоугольник с выбранным инструментом «Текст», вы сможете начать писать прямо в пределах границ вашей кнопки. Используйте это, чтобы написать некую форму призыва к действию, например, «Купить сейчас», «Купить сейчас» и т. д.
  10. Правильное сохранение изображения — еще одна важная часть, чтобы вы могли использовать его позже. Выберите «Файл» > «Сохранить как», чтобы иметь возможность выбрать формат JPG для сохранения изображения для ваших рекламных нужд. Сохранение того же изображения в формате PSD позволяет сохранить все ваши слои и объекты, чтобы вы могли изменить этот баннер по своему усмотрению, не начиная с нуля.

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

MS Paint

Удивительно, но Microsoft Paint также является достойным инструментом для создания простых баннеров в процессе, чем-то похожем на Photoshop, хотя и проще. Теперь давайте рассмотрим некоторые из основных операций, связанных с баннерами в MS Paint:

  1. Как обычно, вы должны начать с чистого листа, если у вас нет готового шаблона для ваших изменений. Чтобы создать новый файл, вам нужно перейти в «Файл»> «Новый», создав совершенно новый документ для работы.
  2. Прежде всего, вам необходимо изменить размер изображения, чтобы оно соответствовало характеристикам вашего будущего баннера, это можно сделать с помощью кнопки «Изменить размер» баннера на панели инструментов. После нажатия «Изменить размер» вы можете вручную ввести необходимые размеры изображения (не забудьте отключить параметр «Сохранить пропорции», чтобы вы также могли изменить соотношение сторон). Нажмите «ОК», когда закончите.
  3. Выбор подходящего цвета фона — хороший первый шаг, и на панели инструментов есть даже специальная кнопка «Цвет 1», которая представляет цвет вашего фона прямо сейчас. Щелкните ее, чтобы изменить цвет фона.
  4. Следующим шагом является использование вкладки «Вставить», чтобы добавить собственные изображения или объекты в ваш будущий баннер. Выбрав для этой цели одно из ваших локальных изображений, вы можете свободно перетаскивать его по документу, пока оно выбрано. Изменение размера вашего изображения или объекта также возможно с помощью кнопки «Изменить размер», когда выбрано изображение, о котором идет речь, таким образом, вы можете разместить его в границах баннера.
  5. Объекты или изображения — не единственные примеры вещей, которые можно добавить, вы также можете добавить текст к своему баннеру с помощью инструмента «Текст» на панели инструментов (кнопка с большой буквой «А» на ней)
  6. Если ваш документ больше предполагаемого размера баннера, вы можете обрезать его с помощью инструмента «Выбрать» и указав размеры выделения с помощью инструмента «Изменить размер». Убедившись, что все правильно, нажмите «Обрезать», чтобы отрезать ненужные части вашего будущего баннера.
  7. Сохранение вашего баннера также важно для вашего будущего использования, хотя нет способа сохранить баннер как комбинацию интерактивных элементов, как в Photoshop, поэтому вам придется начинать практически каждый раз с нуля.

Как видите, MS Paint — это несколько более упрощенный ответ на вопрос «Как сделать рекламный баннер?». Он не такой универсальный, как Photoshop, но он намного проще, и это может быть необходимым изменением для некоторых людей, которые чувствуют себя подавленными сложностью Photoshop.

Microsoft PowerPoint

Другим примером неожиданного участника отдела редактирования баннеров является MS PowerPoint, позволяющая осуществлять обширную визуальную настройку вашего будущего баннера. Есть некоторые нюансы, которые нужно иметь в виду, но в первую очередь — как оформить баннер с помощью PowerPoint? Вы узнаете ответ ниже:

  1. Как обычно, мы начинаем с чистого листа, выбрав «Создать» > «Пустая презентация» на главном экране PowerPoint. Таким образом, вы получите пустую презентацию, содержащую только один слайд. В некоторых случаях вашим первым слайдом будет Титульный слайд — важно изменить его тип на Пустой или создать новый Пустой слайд и удалить предыдущий.
  2. Нажмите «Вставка» > «Фигуры» и выберите базовую прямоугольную форму, которая послужит основой для вашего рекламного баннера. Нажмите и перетащите его, чтобы получить желаемый размер.
  3. Меню «Формат формы» позволяет настроить несколько параметров базовой формы, включая изменение цвета, изменение формы, добавление текста и т. д. Настройте основу для баннера любым удобным для вас способом.
  4. Вкладка «Вставка» также может быть использована для добавления к баннеру дополнительных объектов, таких как фотографии, логотипы, картинки и т.д. Любой объект, который вы добавляете, может быть немедленно изменен, чтобы соответствовать границам вашего баннера.
  5. Добавление текста также возможно через вкладку «Вставка», и вы можете настроить его по своему усмотрению, включая различные шрифты, цвета, формы и т. д.
  6. После того, как вы закончите, нажмите «Главная» > «Выбрать…» > «Выбрать все», чтобы сразу выделить все части вашего баннера. Важно, чтобы сам слайд был пустым, чтобы процесс сохранения прошел правильно. Параметр «Выбрать все» также доступен с помощью команды Ctrl+A (Windows) или команды Command+A (Mac).
  7. После того, как вы выбрали весь свой баннер, щелкните правой кнопкой мыши любой элемент вашего баннера, который не является текстом, и выберите параметр «Сохранить как изображение…». Это позволяет вам сохранить определенную часть слайда как отдельное изображение и использовать его по своему усмотрению. Вы также можете сохранить файл PowerPoint, если хотите работать с ним позже.

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

Microsoft Word

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

  1. Более поздние версии MS Word позволяют искать шаблон в Интернете при создании нового документа (щелкнув «Файл», а затем «Создать»). Однако вам придется ввести «баннер» в качестве поискового запроса, чтобы действительно найти шаблоны, связанные с баннерами.
  2. Когда вы выбрали свой шаблон, вы должны щелкнуть по нему и использовать кнопку «Создать», чтобы фактически перенести все детали шаблона в ваш пустой документ, чтобы начать редактирование.
  3. Далее у вас будет свободное поле для редактирования рассматриваемого шаблона, либо путем изменения изображений, добавления или удаления текстовых сообщений, либо перемещения некоторых фрагментов шаблона. Новые изображения можно добавить с помощью параметра «Изображение» на вкладке «Вставка», а ваши шрифты можно изменить с помощью меню «Шрифт» на главной вкладке.
  4. Последним важным шагом этого процесса является сохранение результатов ваших усилий, когда вы закончите этап редактирования. Ваш новый баннер можно сохранить либо с помощью значка «Сохранить» в левой верхней части окна, либо выбрав опцию «Сохранить» в меню «Файл».

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

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

    Google Web Designer

    Если перейти к менее очевидным способам создания баннера, то для этого есть специальный инструмент под названием Google Web Designer. Хотя сам инструмент относительно непопулярен, это еще один способ ответить на вопрос «Как создавать собственные баннеры?». Вот некоторые из основных шагов при работе с Google Web Designer:

    1. После загрузки и запуска рассматриваемого инструмента вы сможете попасть на титульный экран. Оттуда нажмите «Файл»> «Создать…» или «Создать новый файл», чтобы продолжить.
    2. Вы увидите дополнительное окно «Создать новый пустой файл». Здесь вы можете указать предпочитаемый тип объявления (Баннер), а также ряд дополнительных параметров, таких как имя будущего HTML-файла, место сохранения, целевую среду (Дисплей и Видео 360) и возможность выбора между объявлениями с автоматически измененным размером и ручным вводом размеров. Нажмите «ОК», когда закончите.
    3. Как только вы закончите настройку параметров баннера, вас встретит пустая страница, размер которой уже изменен в соответствии с вашими конкретными параметрами. Теперь вы можете добавлять различные изображения, видео и другие объекты, чтобы сделать ваш баннер уникальным и особенным. Это можно сделать либо простым перетаскиванием, либо с помощью тегов изображения.
    4. Заключительный этап этого процесса является одним из самых важных и заключается в добавлении призыва к действию. Поскольку баннер, который мы создаем, уже будет в формате HTML, можно добавить некоторый вариант кнопки, нажимаемой для нажатия, которая перенаправит пользователя на конкретный веб-сайт, продвигаемый рассматриваемой рекламой. Это можно сделать с помощью компонента Tap Area, который нужно взять из папки «Компоненты» и поместить над «кнопкой».
    5. Далее вам нужно добавить событие (кнопка «+» на панели «События»), чтобы появилось другое окно. В этом окне можно изменить несколько различных параметров назначения этой кнопки, таких как предполагаемое действие (Объявление Google > Выйти из объявления), тип события (Область касания > Касание/щелчок), несколько параметров конфигурации (URL, показатели ID, свернуть при выходе, приостановить мультимедиа при выходе и т. д.) и т. д.
    6. Также можно предварительно просмотреть ваш баннер в его окончательном виде перед его сохранением с помощью кнопки «Предварительный просмотр» (она действует так, как если бы вы открыли исходный HTML-файл в браузере). После того, как вы закончите с творческой частью процесса, вы можете сохранить свой баннер и использовать его по своему усмотрению.

    Несмотря на то, что Google Web Designer не так популярен или известен, как другие варианты, он по-прежнему является жизнеспособным выбором с некоторыми специфическими преимуществами, которые могут быть интересны людям.

    Online Banner Constructor

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

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

    Picmonkey — еще один пример всеобъемлющего конструктора баннеров, хотя бесплатно доступны только самые основные операции и функции.

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

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

    Целевая страница Crello
    • Pixlr чем-то похожа на Photoshop своими широкими возможностями редактирования, также доступны две разные версии — облегченная Pixlr X и профессиональная Pixlr E.
    Целевая страница Pixlr

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

    Целевая страница Creatopy

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

    Целевая страница Adobe Spark

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

    Целевая страница Venngage
    • Snappa — это простота, позволяющая людям, практически не имеющим опыта в дизайне, создавать или изменять изображения для создания единственных в своем роде баннеров для самых разных целей.
    Целевая страница Snappa

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

    #3 Использование разумного подхода — работа с единой платформой для всех ваших потребностей в дизайне

    Говоря об онлайн-конструкторах баннеров — есть еще один эффективный пример, о котором мы хотели бы поговорить. Если у вас нет навыков рисования, но вы хотели бы создавать рекламные баннеры как профессионал, есть один подход, на который вы должны обратить внимание. Ознакомьтесь с Viewst — онлайн-приложением для дизайна, которое хорошо структурировано и удобно для пользователя, предоставляя вам инструменты для простого создания рекламы в любом масштабе. Более того, вы сможете создавать привлекательную и интерактивную рекламу без написания единой строчки кода всего за 19 долларов./месяц. Помните, в подходе №1 мы задавались вопросом, стоит ли платить 15 долларов за одно взаимодействие с дизайнером. Теперь просто подумайте о возможностях, когда вы платите 19 долларов за ежемесячное использование дизайнерского приложения, которое дает вам возможность создавать баннеры массово.

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

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

    1. Создайте новый проект нужного вам баннера

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

    создание баннера

    Далее вам будет предложено создать совершенно новый баннер с нуля или взять за основу один из существующих шаблонов.

    выбор шаблона

    2. Поскольку в нашем примере мы работаем с чистым листом, начнем с добавления к нему текста.

    размещение текста

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

    настройка текстовых полей

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

    настройка CTA-кнопки

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

    добавление изображений

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

    добавление фигурнастройка фигур

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

    добавление анимации

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

    Настройка анимации

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

    предварительный просмотр анимации

    9. Когда вы закончите редактирование баннера, пришло время сохранить его в желаемом формате, выбрав один из форматов, предлагаемых Viewst.

    сохранение шаблона

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

    Итак, какие типы баннеров вы можете создавать на платформе Viewst: 

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

    4 Советы по дизайну баннеров от профессионального дизайнера

    Американский институт графики (AIGA) определяет графический дизайн как «искусство и практику планирования и воплощения идей и опыта с визуальным и текстовым содержанием». Другими словами, графический дизайн помогает визуально передать определенные идеи. Чтобы такая коммуникация была эффективной, необходимо следовать следующим основным принципам графического дизайна:

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

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

    1. Композиция и пространство 

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

    Пример хорошего и плохого принципа композиции и пространства в баннере

    2. Шрифты

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

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

    3. Цвет

    Чистые цвета и правильные сочетания цветов помогут улучшить дизайн баннера. Старайтесь не использовать слишком много цветов. Здесь вы можете найти качественные цвета и собрать собственную палитру http://colrd.com/. Также вы можете поиграть с некоторыми градиентами, которые можно найти здесь

    Пример хороших и плохих сочетаний цветов

    4. Изображения

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

    Пример размытого изображения и изображения высокого качества

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

    Приблизительное время прочтения: 3 минуты

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

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

    1. Решите, где будет стоять ваш баннер.
    2. Ваше сообщение должно быть простым и целенаправленным.
    3. Создайте визуальную и описательную иерархию.
    4. Выберите разборчивый шрифт.
    5. Используйте цвета для создания контраста.
    6. Выберите шаблон оформления.

    1. Решите, где будет размещен ваш баннер.

    Место, где вы планируете повесить свой баннер, будет влиять на размер, цвет, сообщение и материал вашего знака. Будет ли ваш баннер висеть над дверью вашего магазина, на спортивном мероприятии, на фермерском рынке или на витрине? Двусторонний баннер может быть идеальным, если вы хотите передать сообщение покупателям внутри * и * за пределами вашего магазина, а выдвижной баннер идеально подходит для торговых выставок и рынков.

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

    Совет VistaPrint

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

    2. Ваше сообщение должно быть простым и целенаправленным.

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

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

    3. Создайте визуальную и описательную иерархию.

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

    Расположите оставшиеся элементы (такие как второстепенная информация или дополнительные детали) вокруг этого основного фокуса шрифтом меньшего размера.

    VistaPrint Tip

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

    4. Выберите разборчивый шрифт.

    Использование классических жирных шрифтов, таких как Helvetica, Century Gothic и Verdana, поможет придать вашему баннеру профессиональный вид, сохраняя при этом высокую читабельность. Как бы заманчиво это ни было, избегайте игривых и необычных шрифтов — вашим клиентам будет труднее читать то, что вы хотите сказать.

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

    5. Используйте цвета для создания контраста.

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

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

    6. Выберите шаблон оформления.

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

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

    VistaPrint Tip

    Хотите доверить проектирование профессионалам? Найдите дизайнера, который воплотит в жизнь ваше видение баннера, на сайте 99designs by Vista.

    Создание и печать баннера, плаката или другой большой публикации в Publisher

    Когда вы создаете публикацию, например, Баннеры , и выбираете размер более 8,5 на 11 дюймов в Параметры страницы , Publisher печатает публикацию, размер которой превышает размер одного листа бумаги. В Publisher вы можете печатать публикации размером до 240 на 240 дюймов.

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

    Что ты хочешь сделать?

    • Создать баннер

    • Создать постер

    • Добавление изображений к баннеру или плакату

    • Отрегулируйте перекрытие

    • Распечатать баннер или постер

    Создать баннер

      Щелкните Файл > Новый и выберите Встроенный , чтобы использовать один из шаблонов, установленных в Publisher.

      Совет. Используете Publisher 2010? Нажмите Файл > Новый и выберите Установленные и интерактивные шаблоны в разделе Доступные шаблоны .

    1. Выберите категорию Баннеры , затем выберите нужный дизайн баннера — например, Поздравления с малышом .

    2. Под Настройка параметров и , выберите любые параметры, которые вы хотите.

    3. Нажмите Создать .

    4. На вкладке Дизайн страницы выполните одно из следующих действий:

      • Чтобы изменить ширину и высоту баннера, нажмите Размер , затем выберите размер страницы или нажмите Создать новый размер страницы .

      • Чтобы изменить цветовую схему баннера, выберите цветовую схему в группе Схемы .

      • Чтобы изменить схему шрифта баннера, нажмите Fonts , затем выберите пару шрифтов.

    5. В своем баннере замените замещающий текст и изображения текстом и изображениями или другими объектами, которые вы хотите.

    6. Щелкните Файл > Сохранить как , затем щелкните место или папку, в которой вы хотите сохранить новый баннер.

    7. В поле Сохранить как тип выберите Publisher Files .

    8. Нажмите Сохранить .

    Создать плакат

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

    1. На вкладке Дизайн страницы щелкните Размер > Дополнительные предустановленные размеры страницы .

    2. В разделе Типы публикаций выберите Плакаты , затем выберите нужный размер.

    3. Щелкните OK .

    4. На вкладке Дизайн страницы выполните любое из следующих действий:

      • Чтобы изменить ширину и высоту баннера, нажмите Размер , затем выберите размер страницы или нажмите Создать новый размер страницы .

      • Чтобы изменить цветовую схему баннера, выберите цветовую схему в группе Схемы .

      • Чтобы изменить схему шрифта баннера, нажмите Шрифты , затем выберите пару шрифтов.

    5. В своем баннере замените замещающий текст и изображения текстом и изображениями или другими объектами, которые вы хотите.

    6. Нажмите Файл > Сохранить как , затем щелкните место или папку, в которой вы хотите сохранить новый баннер.

    7. В поле Имя файла введите имя баннера.

    8. В поле Сохранить как тип выберите Publisher Files .

    9. Нажмите Сохранить .

    Добавление изображений к баннеру или плакату

    Добавить картинки

    1. Чтобы добавить изображение с компьютера, щелкните Изображения , затем перейдите к изображению, которое хотите вставить, выберите его и щелкните Вставить .

    2. Чтобы добавить онлайн-изображение, нажмите Онлайн-изображения , затем выберите Поиск изображений Bing . В поле поиска введите слово или фразу, описывающую нужное изображение, затем нажмите Вставить .

      Примечание. Вы можете отфильтровать результаты поиска по CC (Creative Commons) Только (подробнее здесь) или выбрать просмотр всех изображений. Если вы выберете Все изображения , ваши результаты поиска будут расширены, чтобы показать все изображения Bing. Вы несете ответственность за соблюдение прав собственности других лиц, включая авторские права. Чтобы лучше понять варианты лицензирования, см. Фильтр изображений по типу лицензии.

    Вы также можете добавлять изображения с веб-страницы и заменять существующие изображения. Учить больше.

    Отрегулировать перекрытие

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

    1. В диалоговом окне Параметры макета выполните одно из следующих действий:

      • Чтобы увеличить поле бумаги, которое перекрывает горизонтальную область печати на странице баннера, плаката или большой публикации, измените настройки Горизонтальное перекрытие .

      • Чтобы увеличить поле бумаги, которое перекрывает вертикальную область печати на странице баннера, плаката или крупной публикации, измените Вертикальное перекрытие настроек.

      • Чтобы напечатать одну страницу большой публикации, установите флажок Печатать одну плитку , затем выберите Строка и/или Столбец номер плитки, которую вы хотите напечатать.

    2. Нажмите Закрыть > Распечатать .

      Примечание. Все настольные принтеры имеют непечатаемые области на полях.

    Печать баннера или плаката

    Чтобы напечатать баннер или постер, щелкните Файл > Печать . Выберите свой принтер и настройте параметры, затем нажмите Печать .

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

    Эти инструкции относятся к Publisher 2007.

    Что вы хотите сделать?

    • Создать баннер

    • Создать постер

    • Добавление изображений к баннеру или плакату

    • Отрегулируйте перекрытие

    • Распечатать баннер или постер

    Создать баннер

      В списке Типы публикаций щелкните Баннеры .

    1. В галерее Banners выполните одно из следующих действий:

      • Выберите дизайн баннера, который вам нужен — например, Квартира в аренду .

      • Щелкните Просмотреть шаблоны из Microsoft Office Online , щелкните дизайн баннера, который хотите загрузить, и перейдите к шагу 4.

    2. Нажмите Создать .

    3. В области задач Format Publication выполните одно из следующих действий:

      • Чтобы изменить ширину и высоту баннера, щелкните Изменить размер страницы на панели задач, а затем выберите размер страницы или щелкните Создать пользовательский размер страницы .

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

    4. В своем баннере замените замещающий текст и изображения текстом и изображениями или другими объектами, которые вы хотите.

    5. В меню Файл выберите Сохранить как .

    6. В поле Сохранить в щелкните папку, в которой вы хотите сохранить новую публикацию баннера.

    7. В поле Имя файла введите имя публикации баннера.

    8. В поле Сохранить как тип выберите Publisher Files .

    9. Нажмите Сохранить .

    Создать плакат

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

    1. В области задач Типы публикаций щелкните Баннеры , выполните одно из следующих действий:

      • В разделе Banners щелкните Blank Sizes .

      • Щелкните Просмотреть шаблоны из Microsoft Office Online , щелкните дизайн плаката, который хотите загрузить, и перейдите к шагу 3.

    2. Нажмите Создать .

    3. В Форматировать публикацию , выполните одно из следующих действий:

      • Чтобы изменить цветовую схему, щелкните Цветовые схемы на панели задач, а затем выберите нужную схему.

      • В меню Файл выберите Сохранить как .

      • В поле Сохранить в щелкните папку, в которой вы хотите сохранить новую публикацию.

      • В поле Имя файла введите имя публикации.

      • Нажмите Сохранить .

    Добавление изображений к баннеру или плакату

    Добавить картинку

    1. На панели инструментов Objects щелкните Рамка изображения , щелкните Пустая рамка изображения , а затем щелкните публикацию, чтобы разместить пустую рамку изображения.

    2. В области задач Clip Art в поле Search for введите слово или фразу, описывающую нужный клип.

      Чтобы сузить область поиска, выполните одно или оба из следующих действий:

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

      • Щелкните Перейти .

      • В окне результатов поиска Clip Art в области задач щелкните нужное изображение.

    Добавить картинку из файла

      На панели инструментов Objects щелкните Рамка изображения , щелкните Пустая рамка изображения , а затем щелкните публикацию, чтобы разместить пустую рамку изображения.

    1. Щелкните правой кнопкой мыши рамку изображения, выберите Изменить изображение , а затем щелкните Из файла .

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

    3. Чтобы вставить изображение, нажмите Вставить .

    4. Чтобы связать изображение с файлом изображения на жестком диске, щелкните стрелку рядом с Вставить , а затем щелкните Связать с файлом .

      Примечание: Если вы планируете напечатать вашу публикацию, например баннер на одном большом листе бумаги, приглашения на тисненой бумаге или изображения на футболке, или если вы планируете переместить свою публикацию на другой компьютер, используйте Pack and Go Wizard, чтобы включить связанную графику.

      Если вы не используете Pack and Go Wizard, графика может быть не скопирована вместе с файлом. Найдите ссылки на дополнительную информацию о связывании и встраивании графики и о мастере Pack and Go Wizard в См. также раздел .

    Добавление изображения непосредственно со сканера или цифровой камеры

    1. На панели инструментов Objects щелкните Рамка изображения , щелкните Пустая рамка изображения , а затем щелкните публикацию, чтобы разместить пустую рамку изображения.

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

    3. Выполните одно из следующих действий:

      • Добавить изображение со сканера     Если вы используете настройки по умолчанию для сканирования изображения, нажмите Web Quality для изображений, которые вы добавляете в онлайн-публикацию, или щелкните Качество печати для изображений, которые вы добавляете в печатную публикацию. . Затем нажмите Введите , чтобы отсканировать изображение.

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

      • Добавить картинку с камеры или другого устройства     Если выбранное устройство является камерой или другим устройством (не сканером), или если вы хотите настроить какие-либо параметры перед сканированием изображения, нажмите Пользовательская вставка и следуйте инструкциям, прилагаемым к устройству, которое вы используете. с использованием.

    Добавление изображения с помощью диспетчера графики

      На панели инструментов Objects щелкните Рамка изображения , щелкните Пустая рамка изображения , а затем щелкните публикацию, чтобы разместить пустую рамку изображения.

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

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

    3. В диалоговом окне Вставить рисунок щелкните нужный рисунок.

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

    4. Выполните одно из следующих действий:

      • Чтобы вставить изображение, нажмите Вставить .

      • Чтобы связать изображение с файлом изображения на жестком диске, щелкните стрелку рядом с Вставить , а затем щелкните Связать с файлом .

    Изменить перекрытие

    1. В меню File щелкните Print .

      • Чтобы увеличить поле бумаги, которое перекрывает горизонтальную область печати на странице баннера, плаката или большой публикации, измените настройки Горизонтальное перекрытие в разделе Дополнительные параметры печати .

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

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

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

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

    2. Нажмите Распечатать .

      Примечание. Все настольные принтеры имеют непечатаемые области на полях.

    Печать баннера или плаката

    Чтобы напечатать баннер или постер, щелкните Печать в меню Файл , а затем щелкните OK .

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

    Как сделать рекламный баннер в Photoshop

    Это руководство о том, как использовать изображения вашего продукта для создания рекламного баннера в Photoshop. Создав баннер в Photoshop, вы можете поменять местами изображения и текст для будущих баннеров. В этом блоге показаны основы добавления изображения, текста и кнопки к баннеру.

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

    Шаги по созданию рекламного баннера в Photoshop

    1. Баннер какого размера вам нужен?

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

    В Photoshop выберите «Файл» > «Создать».

    В появившемся окне выберите «Web» и введите размеры 300 x 250 пикселей. Это один из стандартных размеров баннеров. Нажмите «Создать», и откроется новое пустое изображение.

    2. Добавьте изображение продукта в баннер

    Выберите «Файл» > «Открыть» и откройте одно из изображений продукта, которое вы хотите использовать в баннере. Необязательно: если вы хотите изменить цвет фона в баннере, используйте изображение продукта с прозрачным фоном (файл png, а не jpg). Можно использовать JPG, но фон будет отображаться на баннере. Клетчатый фон на снимке экрана ниже — это способ Photoshop показать, что это прозрачный фон.

    Затем перейдите в «Окно» > «Упорядочить» > «Замостить все вертикально». Это показывает вам изображение и шаблон баннера рядом.

    Затем щелкните инструмент «Перемещение» (зеленая стрелка внизу), щелкните и перетащите изображение продукта на баннер. Как показано здесь, продукт теперь отображается на вашем баннере. Как только продукт окажется в шаблоне баннера, вы можете закрыть вкладку с изображением продукта.

    3. Измените размер изображения, чтобы оно соответствовало баннеру

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

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

    4. Необязательно: Изменить цвет фона

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

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

    5. Раскрасьте фон

    Используйте инструмент Заливка и щелкните в любом месте изображения (убедитесь, что слой 1 по-прежнему выбран). Это меняет фон на черный.

    6.

    Добавьте текст на баннер

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

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

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

    7. Добавьте кнопку на баннер

    Щелкните инструмент прямоугольника, затем щелкните и перетащите изображение. Обратите внимание, что некоторые инструменты находятся в подменю. Чтобы увидеть подменю (как показано ниже), нажмите и удерживайте значок инструмента. У некоторых инструментов есть подменю, у некоторых нет.

    Измените размер прямоугольника, щелкнув углы и перетащив их.

    Теперь выберите цвет в меню «Заливка» на верхней панели.

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

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

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

    8. Сохраните файл JPG и шаблон дизайна баннера

    Наконец, перейдите в меню «Файл» > «Сохранить как» и выберите JPG из раскрывающегося списка, чтобы сохранить файл в формате jpg для использования в AdWords и рекламных целях. Затем повторите шаг, но теперь сохраните как файл PSD. Это сохранит файл со всеми слоями, чтобы вы могли вернуться к нему позже, чтобы изменить изображение, текст или кнопку и создать из них новые баннеры. PSD-файл — это шаблон дизайна вашего баннера.