Открыть меню

Как уменьшить размер рекламного баннера

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

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

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

Если вы совсем новичок и пока не определились с выбором редактора, то это тоже не беда. К вашим услугам есть больше десятка онлайн-сервисов Photoshop. Я уже несколько раз писал здесь, здесь и здесь статьи об одном из таких сервисов. Это сервис «Фотошоп онлайн».

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

Конечно, для работы нам понадобится рекламный баннер и, конечно, в качестве примера я буду использовать вот этот баннер онлайн школы «Я Блогер».

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

<a href="//ya-blogger.ru/free/?utm_medium=affiliate&utm_source=ВАШ_ЛОГИН_ПАРТНЕРА_ЗДЕСЬ«><img src=»http://evvergus.justclick.ru/media/content/evvergus/26-10-16_aba9c05_250%D1%85250-1.jpg" /></a>

Если скопировать ссылку, которая стоит после «img src=», и ввести её в поисковую строку браузера, то откроется изображение баннера.

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

Затем откройте сервис Фотошоп онлайн. В меню «Файл» выберите команду «Открыть URL изображения». У вас откроется окно, в котором необходимо будет ввести скопированную ссылку и после этого нажать кнопку «Да». Изображение баннера загрузится непосредственно в сервис.

Теперь на вкладке «Изображение» выберите команду «Размер изображения». В открывшемся окне задайте необходимую ширину и нажмите кнопку «Да». При этом убедитесь, чтобы был отмечен чекбокс «Сохранить пропорции». Для примера я ввёл значение новых размеров баннера 200 на 200 пикселей.

Баннер сразу уменьшается в размерах.

Вам только остается зайти на вкладку «Файл»  и выбрать команду «Сохранить». В открывшемся после этого окне задайте имя файла (желательно на латинице), уточните его качество (от 80 до 100%), нажмите кнопку «Да» и сохраните новый баннер в нужное место (откроется проводник).

Баннер готов! Загружайте его на сайт в медиафайлы или на ваш любимый фотохостинг. После этого внесите изменения в оригинальную ссылку от автора партнерской программы:

<a href="//ya-blogger.ru/free/?utm_medium=affiliate&utm_source=ВАШ_ПАРТНЕРСКИЙ_ЛОГИН"><img src="ССЫЛКА НА НОВЫЙ БАННЕР" /></a>.

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

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

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

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

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

 

 

Обсуждение: 4 комментария
  1. Евгений, здравствуйте! Статья очень полезная, ненадо заморачиваться с html-кодом, быстро и удобно. В «техничке» вроде бы уже не дилетант, но пользоваться буду с удовольствием. Жаль что фотошоп онлайн не нашла раньше. Спасибо большое за подробную статью! 🙂

    Ответить
    1. Хотя при наличии смелости все-таки легче вписать маленькую добавку в HTML.

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

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

    И все-таки очень хотелось бы освоить все инструменты в совершенстве фотошоп-редактора.

    Ответить
    1. Евгений Вергус:

      Спасибо )) Наша команда старается для вас ))

      Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Я блогер — Онлайн-школа Евгения Вергуса · ИП Вергус Е. Е. ОГРН 313618119000022. Копирование контента запрещено.
Служба поддержки  |  Политика конфиденциальности  |  Снятие ответственности