Создаем статичный и анимированный баннер онлайн

29.05.2014 Для вашего блога   9 комментариев

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

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

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

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

заработок на партнерских программах

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

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

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

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

Ну а для того чтобы изготовить вот такой анимированный баннер, я использовала уже названный конструктор bannerfans.com и онлайн-сервис для создания анимаций toolson.net. В первом я просто подготовила слайды с надписями и сохранила их в формате gif, а во втором – скомпоновала все это дело в одну анимацию.

партнерский заработок с нуля

Поэкспериментировать с различными эффектами анимаций можно также на сервисе minimultik.ru.

Вот и все, ничего сложного…

А сейчас посмотрите видеоурок, в котором я подробно показала, как сделать баннер онлайн, сгенерировать его код и разместить на своем сайте:

Буду рада, если мой урок оказался для вас полезным. Оставляйте свои вопросы и мнения в комментариях. С удовольствием отвечу.

Желаю успехов!

С уважением, Виктория Карпова

logo

Комментарии к Создаем статичный и анимированный баннер онлайн (9)

  • Максим:

    Вика, очень интересный сервис. Спасибо за урок. Я всегда делал подобные баннеры с помощью фотошопа. Но для этого требуются определённые знания. А данный способ подойдёт и новичкам и бывалым знатокам. https://o-zarabotkeonline.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

  • viktoria_ka:

    Да, сама попробовала и обрадовалась, как быстро и легко:) Для новичков – супер! А то я как засяду в фотошопе, так на несколько часов и то не довольна результатом. Хотя так наблюдаю, в последнее время чем проще баннер, тем лучше. Вот, кстати, сегодня решила сделать описанными способами еще один, для курса по Ютубу: https://o-zarabotkeonline.ru/wp-content/uploads/2014/06/youtube-banner.gif

  • Наталья:

    Интересная статья, спасибо.

    • viktoria_ka:

      И Вам спасибо, что заходите:)

  • Наталья:

    Спасибо за простое изложение. Интересные сайты. Обязательно воспользуюсь.

    • viktoria_ka:

      Наталья, спасибо за комментарий! Используйте и успехов Вам:)

  • Вика:

    Сижу и впитываю информацию. С сервисом ru.toolson.net вообще не знакома. Обязательно попробую. Спасибо Виктория. Очень интересный и полезный сайт. Подписалась.

    • Виктория Карпова:

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

  • Людмила:

    Виктория, огромное спасибо! Выручили! Все очень просто и доступно) Уже смирилась с тем, что придется “жить” в фотошопе)

Оставить ответ

Вы можете использовать эти HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)